Lektion 2 – Extra – Banner und ihre Tücken

Banner

oder warum sind die verdammt noch mal so schmal?
[Bild: Uytdtn2.gif]

Ich höre euch innerlich schon stöhnen. OMG Banner, kann keine Sau gebrauchen und sind auch noch vollkommen blöde bei der Bearbeitung. Sie sind eben gehasst, verdammt, vergöttert Aber so schlimm sind sie gar nicht. (wobei ich scheitere auch regelmäßig daran) Man sollte nur auf ein paar Kleinigkeiten achten.

Banner wie ich sie hier meine haben eine Größe von 700px X 110px
Also sowas wie diese hier

[Bild: JgZoWdX.png]
[Bild: CX7HqtP.gif]
[Bild: 63YJxwm.png]
Banner sind im Grunde wie jede andere Grafik auch, man muss auf die selben Dinge achten und sich auch mit dem selben auseinandersetzen, dass einzige was hier ungewöhnlich ist, ist die Form und Größe der Grafik.

Versucht Banner als eine Möglichkeit zu sehen, eine Geschichte zu erzählen. Im Gegensatz zu Icons bei denen das Auge z.B. direkt fokussiert auf die gesamte Grafik blickt, kann das Auge bei einem Banner “mitlesen”. Das liegt an der breite der Grafik, da sie sich gerade zu dazu anbietet von links nach rechts über die Grafik zu “lesen”. Nutzt diese Breite auch aus. Das heißt aber nicht automatisch, füllt sie mit Personen. Texturen/Stocks/PNGs helfen euch nur, die “Geschichte” zu unterstreichen.

Bei Bannern sollte man auf die üblichen Sachen achten.

# Größe
# Fokus/Platzierung
# Hintergrund

Wie gesagt alles worauf man auch bei anderen Grafiken achtet.
Dann geh ich mal von oben nach unten durch.

Größe

Das erste was man bei Bannern wohl sagen muss ist, “habt keine Angst davor auch mal klein zu werden” Ihr habt nur eine begrenzte Höhe und es scheint euch erst mal erschreckend klein aber vergesst nicht auch hier Personen einzubauen die bis zum Rand hin noch Platz haben. Das bedeutet aber auch mal eine Person nicht höher als 50 oder 60px zu haben. Und dann bitte nicht nur den Schulter und Kopf bereich sondern auch mal nen ganzen Körper so wie hier z.b.

[Bild: cP5HyTS.png]

Beide Personen sind sehr klein, man sieht die Rechte fast mit dem kompletten Körper und die Linke sieht man auch fast komplett.
Nur bei Bildern die ihr im Hintergrund belassen wollt und bei denen man nur Kind, Augen, Ohren o.ä. sehen soll, müssen nicht unbedingt verkleinert werden. Wie z.B. hier das Bild mit dem Auge im Hintergrund.

[Bild: 63YJxwm.png]

Wenn ihr unbedingt ein Bild von einer Person sehr groß lassen wollt, legt es in den Hintergrund. Lasst nicht den Fokus darauf, denn solch große Bilder erschlagen eure Grafik dann am Ende und es wirkt sehr voll und erdrückend.

Hier hab ich mal ein paar Beispiele für ein großes Bild im Hintergrund.

[Bild: nOl796x.png]
 
[Bild: Qo8gRjR.gif]
 

Seit kreativ und nutzt den Platz. Auf einem Banner müssen nicht zwangsläufig mehr Personen drauf sein, wie auf einer größeren Grafik. Man neigt dazu, da man ja in die Breite Platz hat, auf der man gut mehrere Personen nebeneinander platzieren kann. Versucht auch hier davon ab zu kommen. 1-3 Personen maximal wobei ich schon bei dreien sagen würde, nur in den äußersten Notfällen.

Auch auf einem Banner kann man sehr gut eine Person alleine im Fokus stehen. Wie z.B. hier

[Bild: n5caoEc.png]

Fokus und Position

Kaum eine Grafik eignet sich so sehr dafür Personen auseinander zu ziehen wie ein Banner. Hier müssen nicht alle Personen auf einem Haufen hängen wie bei Signaturen z.B. gebt euren Personen auch mal Raum zum atmen, so wie hier z.B.

[Bild: Xdxih0h.png]

Daher gibt es für den Fokus und die Positionierung immer mehrer Möglichkeiten.
Bei einem Banner liegt der Fokus häufig auf den Personen die in der Grafik am größten sind (außer solche Großen die im Hintergrund verschwinden)

[Bild: CMJrnkJ.png]

Hier wird die Aufmerksamkeit des Auges auf den größeren Arrow gezogen.
Und hier geht der Fokus vom Auge aus, auch wenn es im Hintergrund liegt.

[Bild: lgamyFu.gif]

Fokus könnt ihr (logischerweise) bei einem Banner auf drei Arten Setzen.

# links
# rechts
# mittig

Achtung meine Beispiele jetzt sind nicht schön aber dafür sehr selten und nur für euch Lol

[Bild: Y0rSS85.png]

Wollt ihr den Fokus links setzen. Dann positioniert ihr eure Hauptperson auch links. Schaut, dass sie den Blick an den linken Rand wirft. Damit gebt ihr dem Banner eine tiefe die ihr sonst nicht hättet. Natürlich könnt ihr auch noch Personen dazu machen die eine andere Blickrichtung haben, aber die Hauptperson auf der euer Fokus liegt sollte dahin schauen wo euer Fokus sitzt.
Das bedeutet gleichzeitig auch, bei einem Fokus mehr rechts, sollte die Person auch nach rechts schauen.

[Bild: 5mswW4D.png]

Und natürlich Fokus in der Mitte, dann bitte den Blick nach vorn.

[Bild: PA58pkT.png]

Das Ganze ist natürlich nur eine “Richtlinie” im Grunde gilt wie bei allen Grafiken, was gut ausschaut und gefällt passt. Aber ihr erleichtert euch damit eine Menge.

Hintergrund

Genau wie bei allen anderen Grafiken hat man unendlich viele Möglichkeiten um Hintergrund auf einen Banner zu bekommen. Hier ist es aber immens wichtig ihn nicht zu voll zu stopfen, da man dadurch einen sehr unruhigen und unschönen Hintergrund hin bekommt.

Die Breite verleitet manchmal dazu sie auch komplett zu nutzen. Das macht das ganze aber einfach zu voll. Versucht links und rechts eine art “Puffer” einzubauen. Entweder einen Rand oder ein wenig Platz mit Textur oder Stockpic.

Ich würde euch empfehlen euch auf eine der drei Arten zu beschränken.

1. Pattern und PNGs

Ein Banner mit Pattern und PNGs im Hintergrund. Ihr nutzt Pattern für die Ränder und für einen Teil des Hintergrundes. Und arbeitet dann rund um eure Personen PNGs ein.

[Bild: aJLRAQy.png]
[Bild: 4DxDuy4.png]
[Bild: B6z6JyC.png]

Mit dieser Methode habt ihr unheimlich klare und gut strukturierte Grafiken die harte und glatte Kanten haben und sehr Kraftvoll wirken können.

2. Texturen

Wie bei Grafiken auch gehen die gewöhnlichen Texturen natürlich auch. Achtet hier darauf, dass ihr die Texturen nicht in der Originalgröße lasst. Texturen haben oft einen Effekt darauf, den ihr ja haben wollt. Wenn ihr die Textur in der Originalgröße belasst, wirkt der Effekt auf dem kleinen Raum oft zu groß und wirkt nicht richtig. Hier müsst ihr die Textur verkleinern. Sie werden dann links und rechts am Rand nicht mehr passen und da müsst ihr dann ein wenig manipulationsarbeit leisten und schauen, dass ihr sie dupliziert und öfter aneinander reiht so das es passt und dann auch noch gut ausschaut.

[Bild: J4bFI7R.png]
[Bild: D5hWvJv.png]

 

3. Stocks

Stockpiss nutzen nur wenige von euch aber auch mit ihnen kann man ganz tolle Effekte hinbekommen und ich würde jedem einfach mal raten es auszuprobieren. Man kann sie auch mit Texturen mischen. Also nur Mut und einfach mal versuchen.

Auch mit Stocks kann man ganz hübsche Effekte auf einer Grafik erzielen und sie passend zum Thema oder Charakter aussuchen.

[Bild: rvii7LM.png]

 

[Bild: n5caoEc.png]

Gerade bei Bannern solltet ihr euch auf eine der drei Möglichkeiten beschränken, da ihr hier kaum den Platz auf der Grafik habt um die Stile zu mischen ohne das es zu voll und zu erdrückend wirkt. PNGs kann man bei allen drei Varianten mit einbauen, wenn man das möchte, muss man aber nicht.

Übungsaufgaben

  • Erstelle 3 Banner. Wähle jeweils 1 Hintergrund (Pattern, Texturen, Stocks) und wähle jedes mal einen anderen Fokus (links, rechts, bitte)

>> Back to Lektion 2