Hier zuerst mal das Ausgangsbild

Nun mit “STRG+J” die Originalebene kopieren.
Nun auf  auf der Tastatur “D” drücken. Damit setzen wir die vorder- und Hintergrundfarbe auf Standard.

Aus dieser führen wir jetzt den “Rasterungseffekt” aus. “Filter – Zeichenfilter – Rasterungseffekt”.

Hier kann wieder ein wenig mit den Reglern gespielt werden. Ich habe folgende Einstellungen:

Nun sieht unser Bild folgendermaßen aus:

Bei diesem müssen wir jetzt die Farben umkehren. Dies geht ganz einfach mit “STRG+I”.

Jetzt nurnoch den Ebenenmodus auf “Lineares Licht stellen” und die Deckkraft nach belieben herabsetzen.

Hier nun unser fertiges Ergebnis:

Zuerst mal das Ausgangsfoto

Eine neue Ebene erstellen

Dann mit dem Bleistift Werkzeug die gewünschte Ausschnittform einzeichnen

Jetzt mit dem Zauberstab Werkzeug (W) das innere des Ausschnittes auswählen.

Jetzt eine neue Ebene erstellen.

Auf diese Ebene wechseln.

Mit der Taste “D” wechseln wir zu den Standard Farben und mit der Taste “X” wechseln wir weiß zur Vordergrundfarbe.

Nun ALT+Entfernen drücken. Somit wurde auf der neuen leeren Ebene unsere Auswahl mit weiß gefüllt.

Nun die Ebene 2 unter die Ebene 1 verschieben.

Auf der Ebene 2 wenden wir den Ebenenstil “Schatten nach innen” an.
Jetzt sieht es richtig ausgeschnitten aus.

Mit dem Textwerkzeug den gewünschten Text auf eine neue Ebene schreiben.
Diesen dann passend transformieren (STRG+T) damit er sich schön ins Bild einfügt.
Die Textebene zwischen Ebene 1 und Ebene 2 verschieben.

Jetzt auf der Textebene mit gedrückter STRG Taste auf Ebene 2 klicken.
Somit haben wir die Auswahl von Ebene 2 markiert.

Und nun auf Vectormaske hinzufügen klicken.

Damit wir den Text noch nachträglich neu positionieren kann muss man die Verknüpfung zwischen
Maske und Text aufheben.
Dazu einfach auf das kleine Kettensymbol klicken.

Und nun das fertige Ergebnis.

Dies kann man aber zum Glück recht schnell mit Photoshop entfernen.

Hier das Ausgangsbild.

Wie man sieht hat es einen viel zu orange/roten Farbstich.

Nun “Bild – Anpassungen – Gleiche Farbe” aufrufen.

Und hier nur auf “Ausgleichen” klicken.
Photoshop liefert hier ein sehr gutes Ergebnis mit nur 2 Klicks.

Hier zum Vergleich:

Dies ist die Fortsetzung von den beiden ersten Teilen:
http://www.digital-workshop.at/animiertes-gif-erstellen-teil-1/
http://www.digital-workshop.at/animiertes-gif-erstellen-teil-2/

Einen Bewegungstween erstellen wieder so wie den “fade in” Effekt.

Zuerst die Ebene wieder einblenden.
Dann auf die Uhr klicken um ein “Keyframe” zu setzen.
Die Textebene an die gewünschte Stelle schieben.

Ich habe es bei diesem Beispiel auserhalb der Arbeitsfläche geschoben um den Text ins Bild reinlaufen
zu lassen.

Dann wieder den Blauen Zeitleisten Regler an die gewünschte stelle schieben.
Und jetzt erst mit dem “Verschiebe Werkzeug” den Text an die richtige Stelle schieben.
Durch das verschieben wird wieder ein passender Keyframe gesetzt.

Dies kann man jetzt weiterverfolgen wie man möchte.
Hier mein Beispiel:

Wie ihr seht ist aber das Ende noch zu lang.
Das kürzen wir jetzt.

Bei dem Blauen Zeitleisten Regler können wir nachsehen wie lang unsere Animation sein soll.
Ich hab hier 3 Minuten ausgesucht da nach 3 Minuten nichts mehr passiert.

Nun rechts bei dem Animationsfenster auf den kleinen Pfeil klicken.

Dann auf “Dokumenteneinstellung”.

Hier stellen ihr den Wert ein den ihr benötigt:

Nun nurnoch abspeichern.

Datei – für Web und Geräte speichern

Hier stellen wir entweder bei der Vorgabe das GIF aus mit den gewünschten Einstellungen
oder einfach links darunter im Dropdown Menü.

Bei “Optionen für Schleifenwiedergabe” kann man noch einstellen ob das GIF einmal oder Unbegrenzt
abgespielt werden soll.

Darunter könnt ihr euch noch das GIF ansehen wie es gespeichert wird und dann noch eventuell etwas ausbessern.

Hier mein “Animiertes GIF” :

Dieses Tutorial ist die Fortsetzung von Teil 1:  http://www.digital-workshop.at/animiertes-gif-erstellen-teil-1/

Zuerst mach ich immer alle Ebenen die ich momentan nicht benötige unsichtbar.
Das macht man mit einem einfachen klick auf das “Auge” Symbol in der Ebenenpalette.

Dann die zu bearbeitetende Ebene aussuchen.

Im Animationfenster wird dann automatisch zur passenden Ebene gesprungen.

Nun auf den kleinen Pfeil klicken der nach rechts zeigt damit wir die Einstellungen bei den Animationen sehen.

Dort wollen wir die “Deckkraft” bearbeiten. Diesen Effekt wählen wir mit einen klick auf die “Uhr” aus.

Sobald wir auf die “Uhr” klicken wird unser erstes “Schlüsselbild”= “Keyframe” gesetzt. Das sagt der Animation das sich ab hier etwas verändert.

Um einen “fade-in” Effekt zu erzielen setzen wir einfach die “Deckkraft” auf 0 %.

Jetzt schieben wir  den blauen Zeitleisten Regler auf die gewünschte Zeit in der unsere Schrift erscheinen soll.
Da kann man am besten ein wenig herumprobieren. Man kann den “Keyframe” im nachhinein einfach verschieben wenn
es nicht passt.

Und sobald wir die “Deckkraft” wieder auf 100% setzen weiß der Animator das sich etwas geändert hat und setzt einen
neuen Keyframe.

Das Ergebnis sieht bis jetzt so aus:

Um das nächste Element zu Animieren wieder die Ebene auswählen. Den Pfeil nach rechts anklicken
damit sich die Einstellungen öffnen. Nun ist aber bereits ein “Keyframe” eingefügt.

Das entfernen wir ganz einfach in dem wir auf die “Uhr” klicken.

Nun den blauen “Zeitregler” an die Stelle schieben in der die Animation starten soll.
Erneut auf die “Uhr” klicken damit ein “Keyframe” eingefügt wird und die “Deckkraft” auf 0% setzen.

Den blauen Regler erneut an die stelle schieben in der der Text erscheinen soll und die “Deckkraft”
auf 100% setzen. Der Animator fügt dann ein Keyframe ein.

Wenn man jetzt den blauen Zeitleistenregler hin und her bewegt sieht man bereits die Animation.

Unsere Animation sieht bis jetzt so aus:

Das wars wieder fürs erste.

Ein Teil kommt noch und in dem zeig ich euch wie man ein “Bewegungstween” erstellt und wie man das
Animierte-Gif richtig abspeichert.

Hier geht es weiter zu Teil 3:
http://www.digital-workshop.at/animiertes-gif-erstellen-teil-3/

Kommentare sind wie immer sehr erwünscht.

Diese Funktion ist leider ein wenig versteckt und auch nicht ganz selbsterklärend.

Da es ein wenig ausführlicher wird hab ich es aufgeteilt.

Hier der Teil 1:

Die Oberfläche

Der Animator funktioniert eigentlich genauso wie Flash. Also wenn ihr schon in Flash Erfahrung habt,
werdet ihr euch hier sehr leicht tun.

Zuerst öffnen wir ein Dokument mit beliebiger Größe.

Ich fange immer damit an das ich mir die Animation quasi komplett Designe, nur vorerst ohne Bewegung.

Erstellt für jedes Objekt eine neue Ebene.

Wenn ihr euren Banner oder dergleichen fertig Designt habt geht es an die Animation.

Die Animations Zeitleiste findet ihr unter “Fenster – Animation”.

Jetzt solltet ihr ein neues Fenster sehen.

Dies ist das Animations Zeitleisten Fenster:

Am Anfang eines neuen Projektes solltet ihr euer Dokument voreinstellen.

Rechts beim Animationsfenster befindet sich ein kleiner Pfeil nach unten.

Diesen Anklicken und die “Dokumenteneinstellungen” aufrufen.

Dort könnt ihr nun die Framerate einstellen. Diese Regelt wieviele Frames/Bilder pro Sekunde abgespielt werden.

Hier kann man fürs Web auf 25 Frames runterstellen.

Auserdem könnt ihr noch die Dauer/Länge eurer Animation voreinstellen.

Nun kommen wir zum Hauptfenster.

In dem gibt es folgende Punkte:

Ebenen:
Sind die Ebenen die wir vorher Erstellt haben. Somit kann man jede Ebene einzeln Ansprechen und Steuern.

Zwiebelschicht:
Kommt noch aus der Zeit des Trickfilmes. Hier kann man die unteren Ebenen aus und einblenden lassen.
Wie wenn Folien aufeinander liegen und man dadurch die untere Folie sieht.

Die Stopuhr:
Mit dieser kann man Eigenschaftsänderungen aktivieren/deaktivieren.
Auf Deutsch heißt das nichts anderes als wenn man etwas verändert muss man einen Start und Endpunkt setzen.
Dazu später mehr.

Position:
Regelt wo sich etwas auf dem Dokument befindet:

Deckkraft:
Regelt wie der Name schon sagt die Deckkraft. Wird benutzt um fade-in und out Effekte zu erstellen.

Stil:
Hier kann man die Ebenenstile steuern. Sprich Schlagschatten,Kontur,Schein nach au?en usw..

Textumbruch:
Kommt nur bei Text Animation.

Das wars vorerst mal fürs Erste. Teil 2 folgt in kürze, dann geht es an die Animation.

Hier geht es weiter zu Teil 2:
http://www.digital-workshop.at/animiertes-gif-erstellen-teil-2/

Hier unser Ausgangsmaterial:

Wie immer von der Hintergrund Ebene eine Kopie erstellen mit” STRG+J”.

Jetzt brauchen wir von der Glühbirne eine Auswahl.

Bei diesem Bild geht es am besten mit dem “Zauberstab-Werkzeug” da der Hintergrund schwarz ist.

Den Sockel von der Glühbirne brauchen wir nicht da dort ja kein Licht ist. Diesen hab ich einfach

mit dem Lasso entfernt. (Nicht vergessen auf “Von Auswahl subtrahieren klicken)

Jetzt die Auswahl umkehren (Auswahl – Auswahl umkehren oder “Shift+STRG+I).

Damit es natürlicher aussieht geben wir der Auswahl eine weiche Kante von 1 Pixel.

Jetzt geht es ans Leuchten.

In der Ebenenpalette auf “neue Füll- oder Einstellungsebene erstellen klicken”.

Und in diesem Einstellungsfenster die Helligkeit und Sättigung erhöhen.

Meine Angaben sind nur Richtwerte ! Diese sind von Bild zu Bild unterschiedlich.

Mit der Helligkeit erzeugen wir das glühen und mit der Sättigung einen leichten Gelbstich.

Nun mit Doppelklick auf die oberste Ebene den “Ebenenstil” aufrufen.

Dort erstellen wir einen “Schein nach innen”

Größe wieder nach belieben

Die Füllmethode auf “Multiplizieren” stellen und bei der Farbe einen leichten Gelbton wählen.

Nur noch den “Schein nach außen” einstellen und die Farbe auf Weiß.

Fertig:

Diesen kann man zb. für ein Unterwasser Bild verwenden.

Zuerst öffnen wir ein neues Dokument. Ich hab hier 700×300 px, transparent.

Nun wählen wir das “Verlaufswerkzeug” aus mit einem Linearen Verlauf.

Doppelklick auf den Verlauf oben um die Farben einzustellen. Ich hab hier einen leichten Blau Verlauf.

Die Farbauswahl mit OK bestätigen und den Verlauf von unten nach oben ziehen.

TIP: bei gedrückter “Shift” Taste kann man den Verlauf genau Senkrecht ziehen.

Jetzt sollte unser Dokument so aussehen:

Nun erstellen wir eine neue leere Ebene. Einfach auf das Symbol in der Ebenenpalette klicken.

Wieder kommt das Verlaufswerkzeug zum Einsatz.

Diesmal aber mit einem “Verlaufswinkel”.

Doppelklick auf den Verlauf oben und in den Einstellungen “Rauschen” wählen und solange auf

“Zufallsparameter” klicken bis wir einen schönen, gleichmässigen Verlauf haben.

Diesmal aber den Verlauf von der Mitte nach Rechts ziehen !

Jetzt sollte unser Ergebnis ungefähr so aussehen (Farben variieren natürlich) :

Jetzt mit “Shift+STRG+U” oder über “Bild – Anpassen – Sättigung verringern” die Sättigung rausnehmen.

Jetzt sollte es so aussehen:

Jetzt nurnoch die Füllmethode für die Ebene auf  “Weiches Licht” setzen.

Fertig:

Dadurch wird die Person oder das Objekt unbewusst noch mehr hervorgehoben.

Diesen Effekt erstellen wir jetzt mit Photoshop.

Zuerst wie immer das gewünschte Foto öffnen.

Ich hab hier eine alt bekannte Dame genommen.

Nun mit dem “Auswahlelipse-Werkzeug” (M) den gewünschten Bereich aufziehen.

Jetzt verpassen wir der Auswahl eine weichere Kante damit die Abdunkelung nicht so “hart” wirkt.

Ich hab einen Radius von 50px eingestellt. Dieser Wert ist natürlich von Bild und Geschmack abhängig.

Auswahl – Auswahl verändern – Weiche Kante (Alt+Strg+D)

Nun die Auswahl umkehren. Wir wollen ja den Rand dünkler machen und nicht die Bildmitte.

Auswahl – Auswahl umkehren (Umschalt+Strg+I)

Jetzt erstellen wir eine Kopie von der Auswahl und fügen sie in eine neue Ebene ein.

Das geht ganz schnell mit:

“Strg+C” und dann “Strg+V”

Nurnoch die Auswahl abdunkeln mit einer Tonwertkorrektur (Strg+L).

Dort ziehen wir den weißen Pfeil bei “Tonwertumfang” einfach in die Mitte. Umso weiter nach Links umso dünkler wird der Rand.

Hier nun der Vorher und Nachher Vergleich:

Heute werden wir mal zum Frisör und färben dieser jungen Dame Strähnchen.

Wie immer zuerst hier mal das Original Bild:

Zur Sicherheit wieder die Originalebene duplizieren(Strg+J).

Dann erstellen wir eine Einstellungsebene für Farbton/Sättigung.

Bei der Ebenenpalette auf den Schwarz/Weiß-Kreis klicken und Farbton/Sättigung auswählen.

“Färben” auswählen und den gewünschten Farbton wählen.

Jetzt bei der Einstellungsebene die Maske auf Schwarz setzen. Dazu auf die weiße Maske klicken und “Shift-Entfernen” drücken.

“Verwenden- Farbe” Schwarz auswählen.


Somit wird die Färbung ausmaskiert und wir können sie wieder mit Weißer Farbe ins Bild zurückholen.

Diese Einstellungsebene weisen wir noch die Füllmethode “Farbton” zu damit es realistischer aussieht.

Nun mit Weißer Farbe und weichen Pinsel die Strähnchen ins Bild malen.


Das ganze sieht dann so aus: