07.112012

PS Tutorial: So erstellt man Banner für Versicherungen – Teil 3

Hallo. Hier folgt nun der finale dritte Teil "So erstellt man Banner für Versicherungen". Zum Schluss werden wir den Banner mit einem call-to-action Siegel ausstatten. Außerdem fehlt noch das "Schliessen Icon", das Logo, ein bisschen Text und die Animation.

Teil 1 und Teil 2 findest hier:

Weiter gehts:

Als nächstes nehmen wir das "Eigene-Form-Werkzeug" und wählen die Siegelform aus.
Das ist eine Standardform die jedes Photoshop besitzt. Wenn die Form bei dir nicht vorhanden ist kannst du sie über den rechten kleinen Pfeil hinzufügen. Dazu musst du auf "Alle" klicken.

 

Ist die Form ausgewählt erstellst du an der vorgegebenen Stelle den Siegelhintergrund. Am Besten geht das, wenn du ALT + SHIFT gedrückt hälst, da du somit von der Mitte aus die Form ziehen kannst.

Hast du das gemacht, muss je nachdem was für Einstellungen du vorgenommen hast die Fläche noch mit dem gelben Farbwert: #ffe821; füllen. Zusätzlich geben wir dem Siegel noch einen "Reflektierten Verlauf" mit der Farbe Weiß und 60% Deckkraft.  Kannst du natürlich auch gleich in den Verlaufs-Fülloptionen einstellen.

Fehlt noch der Schriftzug, den wir mit einer weiteren call-to-action Anweisung versehen -> Jetzt vorsorgen.

Im unteren Bereich kommt noch das Logo und ein kleiner Text, der noch ein bisschen Informationen bereit hält dazu.

Da man nie weiß an welcher Stelle ein Banner eingeblendet wird kannst du noch ein Fake "close" Icon rechts oben in die Ecke zaubern. Das geht so:

Für das X nimmst du den normalen Buntstift-Werkzeug(B) auf 1px eingestellt und zeichnest das X wie auf dem Bild zu sehen ein:

Tada, jetzt ist der Banner fertiggestellt und es fehlt nur noch die Animation. Dafür öffnen wir das Animationsfenster und duplizieren die erste Animationsebene, geben ihr eine Zeit von 0,2 Sekunden und blenden den Text "Reichen dir 600€ Rente?" aus.

In der zweiten Animationsebene stellst du die Zeit auf 1 Sekunde und den Text "Reichen dir 600€ Rente" blendest du ein.

Fertig ist der Banner. Aussehen müsste er jetzt  ungefähr so: