[Tutorial]Animated Banner with Photoshop CS4 [German]

04/29/2009 21:24 Joshii139#1
So, da es hier [glaube ich] noch kein Tutorial für animierte Signaturen|Banner
gibt, fange ich mal an.
Alles mit Bildern erklärt!
Eventuell ein Video.

Outcome:

[Only registered and activated users can see links. Click Here To Register...]

Wurde für den godMT2 Onlinestatus verwendet ;)

Vorbereitungen:

- Photoshop CS3 oder 4
- Bildgröße 269 mal 29 Pixel
- Anderes GFX - Programm
Keine Garantie das es bei anderen Programmen geht!

Tutorial:

Sucht euch einen schönen Hintergrund.
In meinem Fall ist das Blau.
Nachdem ihr das gemacht habt, wählt das "Rechtecksauswahl - Wekzeug"
aus.
Nun wählt ihr die Hälfte eures Bildes aus, und macht einen Rechtsklick.
Dann klickt ihr auf "Fläche füllen".
(Davor eine neue Ebene anlegen)

Bild:

[Only registered and activated users can see links. Click Here To Register...]

Es erscheint ein neues Fenster.
Hier wählt ihr anstatt "Vordergrundfarbe" - "Weiß" aus.
Nun ist der ausgewählte Bereich weiß.

Nun verringert ihr die Deckkraft auf ca. 44

Bild:

[Only registered and activated users can see links. Click Here To Register...]

Auswahl noch nicht aufheben!

Nun geht ihr nochmal auf die ausgewählte Fläche -> Rechtsklick -> Frei Transformieren -> nochmal Rechtsklick -> Verkrümmen
Nun könnt ihr den "weißen Streifen" nach eurem Geschmack verschieben.
In meinem Fall mache ich ihn etwas rund.

Danach geht ihr auf eure "Hintergrund" - Ebene.
Jetzt schreibt ihr einen Text, der euch überlassen ist.

Bild:

[Only registered and activated users can see links. Click Here To Register...]

Nun geht ihr oben auf "Ebene" -> "Ebenenstil" -> "Schein nach ausen"
Hier könnt ihr den "Schein" nach eurem belieben anpassen.
Auf diesen Schritt werde ich nicht weiter eingehen,
ein paar Grundkenntnisse sollte man schon haben.


So, nun habt ihr einen netten Text.
Bei mir steht jetzt "Tutorial"
Und was hat (fast) jedes Tutorial?
Genau! Ein Copyright.
Nun schreibt ihr euren (später) animierten Text.
Bei mir wird er "by xJoSHix" heißen.

Bild:

[Only registered and activated users can see links. Click Here To Register...]

Auch diesen Text habe ich mit einem Effekt versehen.

Nun kommen wir zum eigentlichen Sinn dieses TuTs:
Das Animieren!

Ihr geht oben auf "Fenster" - "Animation"
Nun öffnet sich unten ein neues Fensterchen.
Nun klickt ihr auf "Frame duplizieren".

Bild:

[Only registered and activated users can see links. Click Here To Register...]

Jetzt habt ihr euer aktuelles Frame dupliziert.
Geht auf das 2. Frame und blendet die Ebene "by xJoSHix"
(in meinem Fall) aus.

Danach geht ihr auf diese Ketten, direkt links neben "Frame Duplizieren"
Hier gebt ihr z.B 10 Frames ein.

Fertig! Ihr könnt nun eure Animation anschauen, indem ihr auf den Playbutton drückt.

Wenn ihr alles gespeichert habt, dann geht auf "Datei" -> "Für Web und Geräte speichern" -> ".gif" -> "nur Bilder"

Hier mein Outcome aus diesem Tutorial:

[Only registered and activated users can see links. Click Here To Register...]

Natürlich geht es besser wenn man sich Zeit nimmt.
Hatte gerade nicht viel Zeit, darum so unsauber.
Oben beim godMT2 Status ist schon sauberer gearbeitet worden ;)

Sonstiges:

Ich würde gerne eure Outcomes sehen!
Und fals ihr Fragen habt, dann postet doch hier :)


Grüßchen - Joshi
04/29/2009 21:56 Der-Eddy#2
cool man endlich ein Guide für so einen Banner hab ich schon lange gesucht kenn mich mit so was nicht aus
04/29/2009 23:54 Joshii139#3
Kein Ding, wird eventuell noch ein Tutorial geben wie man eine Homepage erstellt.
04/30/2009 14:20 TheVay#4
Schön daste dir mühe geben hast aber schade daste kein tut für gimp hast :/
04/30/2009 14:25 STAAR.#5
kriegst nen thx, zwar hab ich es nicht aba hast viel mühe gegebn könnte man ja sticky geben ;)
04/30/2009 16:48 Joshii139#6
Quote:
Originally Posted by E-x-t-e-r-N View Post
Schön daste dir mühe geben hast aber schade daste kein tut für gimp hast :/
Du kannst ja Photoshop downloaden.
Kostet ja nichts ;)
Nur nach 30 Tagen musst du es kaufen :(

Bei Gimp kann ich dir dies empfehlen:

Du machst viele Bilder, die sich immer voneinander unterscheiden.
Nun downloadest du dir das:

[Only registered and activated users can see links. Click Here To Register...]

Und fügst die Bilder nacheinander ein.
Ist aufwendiger - I know.
Aber besser als garnicht ;)

Ich kenne mich mit Gimp nicht aus, daher weiß ich nicht ob es
soetwas wie ein "Animationsfenster" in Gimp gibt.

Für mehr Informationen:

[Only registered and activated users can see links. Click Here To Register...]
05/01/2009 02:11 Mark-#7
bei gimp war einmal lustig... ich wollte eig was abspeichern als ganz normale statische gif.. und es war animiert(text hat geblinkt WESHALB auch immer) also gehen tuts mit gimp auxh^^ nur wie....
05/01/2009 02:33 Joshii139#8
Google ist dein Freund ;)

Weiß leider nichts über GIMP.
05/01/2009 18:49 WhiteAssasin#9
[Only registered and activated users can see links. Click Here To Register...]

Habe ich vor einem Jahr oder so mal auch mit PS erstellt für die damalige Ragnarok-Gilde.
Ist eigentlich mit dem selben Grundwissen, welches du im Tutorial erwähnst du meistern.
Kann das zwar schon was du hier beschreibst, trozdem sehr gut gemacht. Danke =D
05/01/2009 20:16 Joshii139#10
Nice Header.
(Oder was auch immer es darstellen soll(Ist doch auch egal, hauptsache es ist gut :p))
05/01/2009 22:07 WhiteAssasin#11
Selbst keine Ahnung was es sein sollte^^ ich habe das Bild auf Wunsch gemacht. Aber funktioniert eigentlich recht gleich wie dein Blinkidings, das mit dem Schimmer auf der Schrift.
05/02/2009 13:06 Joshii139#12
Muss ja nur gut aussehen ;)
06/10/2009 16:08 cengikid1#13
nice tut kriegst en thx

aber eine kleine verbesserung bei farbfüllen schreib da mal hin wie man das macht
(besser für anfänger)
06/10/2009 16:11 .Envy#14
Quote:
Originally Posted by xJoSHix View Post
Kein Ding, wird eventuell noch ein Tutorial geben wie man eine Homepage erstellt.
Aber bitte mit Codierung,CMS,CSS,php,html,grundlagen...

Und komm mir nicht mit
Ladet euch hier ne Homepage runter
ladet sie da hoch
fertig
Dann bissu nen lowfag
06/11/2009 01:15 Horsedick.MPEG​#15
bitte verschone uns mit deinen Halbwissen-Tutorials. :[