KINGx - Das inoffizielle PlayStation Forum & News Portal

Normale Version: [Photoshop]Animierte Bilder
Sie sehen gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
Hallo zusammen

Mit diesem Photoshop Tut will ich euch zeigen wie ihr im Wahrsten Sinne des Wortes "Bewegung ins Bild" bringt.

So dann fangen wir mal an:



Ihr braucht:
-Photoshop (Ich benutze CS4)
-Ein Video im MP4 Format
-Etwas Geduld und Kreativität ^^

Ich werde dieses Video benutzen (Download Link ist unten)


Auf gehts



Schritt 1.
Stellt sicher das ihr bei "Fenster" ein Häckchen bei "Animationen" gesetzt habt
Nun geht ihr auf Datei/Öffnen und wählt dort euer Video aus.


So sieht es nach dem öffnen aus



Kleiner Tipp meinerseits:
Wenn ihr z.B. eine Signatur erstellen wollt könnt ihr natürlich das Video/Bild beliebig transformieren, das macht ihr indem ihr STRG+T drückt.
Bearbeitet die Größe eures Bildes erst nachdem ihr es fertig gestellt habt, und dann mit gedrückter STRG Taste, so verzieht sich das Werk nicht^^

Schritt 2.
Nun bestimmt ihr den Ausschnitt des Videos, das macht ihr indem ihr im unteren Bildschirmbereit ins Animationsfenster schaut, dort findet ihr diese Balken, die die länge des Videos bestimmen:


Mit dem Regler könnt man sich sozusagen durch das Video navigieren
So sieht mein Ausschnittsbereich aus:


Nun haben wir unseren animierten Teil fertig


Schritt 3.
Ab hier könnt ihr mit dem Bild machen was ihr wollt, einzelne Personen hinzufügen, Schriften mitreinbringen, usw.
Ich habe noch meinen Nickname hinzugefügen :

Schritt 4.
Wenn ihr dann mit bearbeiten fertig seit, muss man das ganze ja noch speichern. Dazu geht ihr auf "Datei" und dann nicht auf "Speichern unter" sondern auf "Für Web und Geräte speichern"
Nun wird Photoshop euer Werk zuerst in dieses Fenster laden:


Dort müsst ihr nur beachten, dass die Schleifenbegrenzung auf unbegrenzt ist, sonst würde die Animation nur einmal durchlaufen

Schritt 5.
Jetzt könnt ihr euer animiertes Bild auf Internetseiten wie imageshack.us hochladen und schon hättet ihr eine animierte Signatur

Zum Abschluss ist hier noch mein kleines Wertk und der DL-Link zum Video:
DownloadDownload



____________________________________________________________ _______________________

So jetzt will ich uech noch zeigen wie ihr Schriften z.B. verschwinden lässt und wieder erscheinen lässt, oder sie von oben nach unten "durchscannen" lässt
In diesem Fall braucht ihr nur Photoshop, jedoch sind die Animationesmöglichkeiten sehr eingeschränkt, wenn ihr damit aufwendige Animationen machen wollt braucht ihr ein anderes Programm.
Aber jetzt genug geredet, fangen wir an:

Schritt 1:
Erstellt euch ein neues Bilddokument mit den Maßen eurer Wahl, Hintergrundfarbe ist auch egal, ich bevorzuge transpartet

Schritt 2:
Nun könnt ihr wieder euer Bild frei gestalten, ich hab einfach für dieses TuT ein Dunkelrot-Schwarz Verlauf genommen und wieder meinen Nickname und einen Brush draufgeklatscht und ein bisschen mit den Ebenenstilen experimentiert:



Ihr seht das die Animationsleiste etwas anderst ist, als bei dem Beispiel oben:


Der erste Frame wird automatisch gesetzt, damit mit diesem Bild fängt eure spätere Animation an. Um einen neuen Frame zu setzten klickt ihr auf den rot umrandeten Button der sich "Dupliziert ausgewählten Frame"
Jetzt erscheint ein zweiter, gleicher Frame:



In diesem Frame könnt ihr dann bestimmen was, wie in diesem Beispiel, mit der Schrit passieren soll. Wenn ihr sie verschwinden lassen wollt, macht ihr die Schrift Ebene einfach unsichtbar, indem ihr auf das Auge neben der Ebene drückt.



In der oberen Animationsleiste hab ich den nächsten Schritt grün makiert. So wie es jetzt eingestellt ist würde die Schrift einfach ohne Übergang verschwinden und wieder erscheinen. Aber das sieht finde ich sehr abgehackt auch. Darum drückt ihr nun auf den grün makierten Button, "Fügt Animationsframes ein" Dann sollte dieses Fenster erscheinen:



Bei dem Punkt Zuzufügende Frames könnt ihr die Frame Zahl einstellen, wie schnell bzw. wie langsam die Schrift verschwinden soll. Dabei gilt:
Je weniger desto schneller, Je mehr desto langsamer.
Ich habe die Zahl "12" genommen, wenn ihr dann auf OK drückt werden genau 12 Frames zwischen dem ersten und dem letzten hinzugefügt.



So jetzt ist die Schrift verschwunden, jedoch taucht sie wieder viel zu schnell auf. Dazu macht ihr wieder einen neuen Frame und blendet die Schrift Ebene wieder ein(Wieder aufs Auge drücken)



Nun wiederholt ihr wieder den Schritt mit den "Zuzufügenden Frames"
Jetzt müsste ihr mit meiner genutzten Zahl 27 Frames haben



Jetzt ist eure Animation fretig und ihr könnt sie wieder speichern, wie im oberen Teil Schritt4, und sie hochladen
So sieht mein Werk aus:

1-A Tutorial! Super erklärt, schöne Bilder, Beispiel mit dabei!

Vielen Dank!
Wo habt ihr alle Photoshop her? Ist das nicht sau teuer?

B2T: Geiles TuT,wenn ich reich wäre,würde ich das testen Big Grin
@Deutschland ich sag nur wozu gibt es ausland hosting:-D
Es gibt Keygens dafür (Finger weg) -.-
    Zum Topic
    Gutes Tut. Ein Freund hat PS mal sehen Wink.
Schueler bekommen so viel ich weiß 80% Rabatt wenn sie beim Kauf ein Schuelerausweis vorlegen, muesste ich mal nachschauen
Ja,die müssen "nur" 200 zahlen...
1000 € und 80% Rabatt?

DaRkSiDe :
@Deutschland ich sag nur wozu gibt es ausland hosting:-D

Das schadet der Wirtschaft und man wundert sich danach noch,dass wir in einer Wirtschaftskrise sind -.-

DaRkSiDe :
@Deutschland ich sag nur wozu gibt es ausland hosting:-D


Man braucht aber den Produce Key, sonst ist das nur eine Trial Edition.

Aber du hast doch geschrieben es gibt keygens,also könnte man sich es illegal holen......
Naja BTT:
Ich hät auch gern so ein BILD,aber ich hab kein pHOTOSHOP...Sad
Können die Entwickler von Photoshop nicht eine Lite Version machen für ca. 60€ die schon viele Funktionen hat,aber halt bezahlbar ist machen?! Das wäre doch genial.
Es gibt viele Freeware Programme, aber die haben so ca. 10% der Funktionen von Photoshop.
gutster tolles tut, zur umsetzung eines videoclips in ein animiertes gif, aber die umsetzung von selbsterstellen und frei nach lust und laune animierten schriften und anderem ist bei weitem nicht so einfach und erfordert dennoch sehr viel zeit wenn es in gif format sein soll.#

es gibt wie schon erwähnt meherere möglichkeiten um an Adobe Photoshop zu kommen.

1. entweder ihr seit studenten od. Schüler und bekommt bei vorlage eures Schuelerausweis einen rabatt.

2. ihr kauft euch eine ältere gebrauchte version, muss ja nicht immer die neuste sein aber ich rate euch mindestens zur cs4. dann wirds auch günstiger.

3. ihr könnt auch auf free software zurückgreifen da gibt es z.b GIMP das den photoshop schon sehr nahe kommt und mit dem solche animationen auch machbar sein sollten.

4. oder eben, gecrackte software, wovon ich aber tunlichst abraten würde da eben die hersteller solcher software nicht selten schmerzhafte geldstrafen über ihrer anwälte verhängen lassen.

geschweige den gibt es um aus Youtube videos animierte gifs zu erstellen einfacherer software die genau dafür ausgelegt ist, auch online generatoren gibt es zu genüge wie z.b hier über google oder die suchmaschine eurer wahl wird so einiges mit den richtigen suchbegriffen rauskommen.
Wenn ihr wollt erweitere ich das TuT mit animierten Schriften, zumindest mal die Basics
Seiten: 1 2
Referenz-URLs