german Tutorial for animations
Requested by: serenety333
Ergebnis:
Programm: Photoshop und unter CS3 zusätzlich Imageready
Warnung: Sehr viele Bilder, evtl. lange Ladezeiten.
Schwierigkeitsgrad: Mittel, grundlegende Funktionen sollten bekannt sein.
PSD-Datei
Kommentare würden mich freuen, gerade weil es erst mein 2. Tut ist (=.
Vorweg:
Ich habe keine Ahnung, ob meine Variante für Animierte Icons die sinnvollste ist, mag sein, dass ich alles unnötig verkompliziere, ich persönlich mache es halt so, dieses Tutorial soll in erster Linie als grobe Richtlinie dienen, um zu sehen was man z.B. machen könnte^^.
Zu allererst brauchen wir natürlich unsere Caps der "zu iconenden" Szene, geeignete Programme wären dafür z.B. PowerDVD oder der KMPlayer (Freeware).
Es dürfen natürlich nicht zu viele Caps werden, sprich die Szene darf nicht zu lang sein, der Icon muss unter 40 kb bleiben um ihn auf LJ benutzen zu können.
Ich habe mich für eine Szene von einem Photoshoot mit Cote de Pablo entschieden, 9 Caps pro Sekunde (ist aber immer verschieden, einfach ausprobieren^^), insgesamt 21 und in einem gesonderten Ordner gespeichert.
Bevor wir zur Animation selbst kommen brauch wir erst einmal unsere Base, unseren Hintergrund auf der das ganze stattfinden soll, also öffne ich Photoshop, das 1. Bild und eine leere 100x100 Datei. Jetzt sollte man sich überlegen wie groß die eigentliche Animation werden soll, deswegen habe ich das 1. Bild schon mal geöffnet, um damit rum zuprobieren und bastele darum herum den Hintergrund, lösche den Frame und reduziere alles auf eine Ebene, bei mir sieht das in diesem Fall so aus:
Der rosa Teil ist die markierte Stelle, damit ich hinterher noch weiß wo ich meinen Frame platzieren muss.
Jetzt wieder den ersten Frame öffnen und nun starten wir einen Aktion unten links im gleichen Fenster wie der Protokoll Bereich, die sind dazu da um sich immer wiederholende Dinge zu speichern, so das man nicht X mal das selbe machen muss,
achtet darauf, dass eure Befehle allgemein gültig sind, also kein Malen oder ähnliches.
Verkleinert euer Bild, verpasst ihm ein Coloring, schärft es etc.
Wenn ihr damit fertig seid, wählt: alles auswählen, auf eine Ebene reduziert kopieren und schließt das Bild und fügt es anschließend in eure Base ein wo ihr es gemäß eurer Markierung, eurem Rahmen oder wie auch immer platziert, dann stoppt die Aktion.
Bei mir sieht es momentan so aus:
Nun wieder den 1. Frame löschen und jetzt Datei/Automatisieren/Stapelverarbeitung aufrufen,
wählt dort euren Ordner mit den Caps und eure eben erstellte Aktion und wichtig: setzt vor '"speichern unter" in Aktionen überschreiben' einen Haken. Und okay.
Photoshop verarbeitet jetzt ganz automatisch eure Frames und erspart somit eine Menge Arbeit und für uns geht es jetzt an's Ausbleden, wobei das natürlich kein Muss ist, mir persönlich gefällt es jedoch besser, also will ich es hier erwähnen:
Zuerst sollte ich vielleicht erklären, was ich mit Ausblenden meine: gemeint ist das die Animation am Ende weich in's Weiße (oder welche Farbe auch immer) übergeht, hierzu füge ich 4 (können auch mehr oder weniger sein) weiße Ebnen ein (strg gedrückt halten, auf den obersten Frame klicken, neue Ebene, Auswahl mit weiß füllen) und steigere deren Deckkraft von wenig bis 100%.
Falls gewünscht kann man nun auch noch Text hinzufügen und denn dann mit der obersten (100% Deckkraft) Ebene auf eine Ebene reduzieren.
Wir haben alle Frames, also nun (endlich) zur Animation an sich.
(PSD. File zwischenspeichern wäre jetzt sinnvoll, bzw. ratsam, falls irgendwas schief gehen sollte^^.)
Dass heißt alle die unter Version CS3 sind, wechseln jetzt zu Imageready
.
Alle anderen öffnen ihr internes Animationsfenster. (Wenn ich richtig liege oben unter Fenster, und dann den Haken vor Animation setzen)
Jedenfalls sollte nun folgendes vorhanden sein:
Im Ebenenfenster nehmt ihr nun die Haken bei den Sichtbarkeitskästchen überall raus, nur bei dem ersten Frame und beim Hintergrund nicht.
Dann erstellt ihr eine neue Ebene im Animationsfenster und aktiviert die Sichtbarkeit des 2. Frames wieder, dann noch eine neue Ebene im Animationsfenster und macht den 3. Frame wieder sichtbar, dann noch eine und der 4. Frame etc.
Das ganze funktioniert wie bei einem Daumenkino.
(Hinweis: wenn Imageready o. Photoshop im Ebenenfenster immer wieder nach oben springen, markiert eine der unteren Ebnen.)
Nun sollten wir die Dauer der Sichtbarkeit der einzelnen Frames einstellen, sonst sieht das Ganze so aus:
Dazu klickt ihr die kleine Zahl unter dem jeweiligen Frame im Animationsfenster an und wählt eure Einstellung, ich ändere nur die des vor letzten letzten und letzten Frame, auf 0,1 und 0,8.
Nun ist die kb Zahl aber immer noch zu hoch, also öffne ich das Optimierungs Fenster,
verringere die Anzahl der Farben und erhöhe die Web-Ausrichtung,
Dann "optimierte Version speichern unter..." (evtl. in CS3 "für Web speichern...) und fertig =D:
Falls Fragen aufkommen, weil ich irgendwas unverständlich erklärt habe oder aus irgendwelchen anderen Gründen, einfach fragen ^^.
Anm.: Eine Aktion solcher Art ist leider (meistens) nur einmal benutzbar, da es sonst nicht mehr mit den Dateinamen passt (Texturen etc....)
Bzw. sie ja speziell auf diesen einen erstellten Icon ausgelegt ist.
Ergebnis:
Programm: Photoshop und unter CS3 zusätzlich Imageready
Warnung: Sehr viele Bilder, evtl. lange Ladezeiten.
Schwierigkeitsgrad: Mittel, grundlegende Funktionen sollten bekannt sein.
PSD-Datei
Kommentare würden mich freuen, gerade weil es erst mein 2. Tut ist (=.
Vorweg:
Ich habe keine Ahnung, ob meine Variante für Animierte Icons die sinnvollste ist, mag sein, dass ich alles unnötig verkompliziere, ich persönlich mache es halt so, dieses Tutorial soll in erster Linie als grobe Richtlinie dienen, um zu sehen was man z.B. machen könnte^^.
Zu allererst brauchen wir natürlich unsere Caps der "zu iconenden" Szene, geeignete Programme wären dafür z.B. PowerDVD oder der KMPlayer (Freeware).
Es dürfen natürlich nicht zu viele Caps werden, sprich die Szene darf nicht zu lang sein, der Icon muss unter 40 kb bleiben um ihn auf LJ benutzen zu können.
Ich habe mich für eine Szene von einem Photoshoot mit Cote de Pablo entschieden, 9 Caps pro Sekunde (ist aber immer verschieden, einfach ausprobieren^^), insgesamt 21 und in einem gesonderten Ordner gespeichert.
Bevor wir zur Animation selbst kommen brauch wir erst einmal unsere Base, unseren Hintergrund auf der das ganze stattfinden soll, also öffne ich Photoshop, das 1. Bild und eine leere 100x100 Datei. Jetzt sollte man sich überlegen wie groß die eigentliche Animation werden soll, deswegen habe ich das 1. Bild schon mal geöffnet, um damit rum zuprobieren und bastele darum herum den Hintergrund, lösche den Frame und reduziere alles auf eine Ebene, bei mir sieht das in diesem Fall so aus:
Der rosa Teil ist die markierte Stelle, damit ich hinterher noch weiß wo ich meinen Frame platzieren muss.
Jetzt wieder den ersten Frame öffnen und nun starten wir einen Aktion unten links im gleichen Fenster wie der Protokoll Bereich, die sind dazu da um sich immer wiederholende Dinge zu speichern, so das man nicht X mal das selbe machen muss,
achtet darauf, dass eure Befehle allgemein gültig sind, also kein Malen oder ähnliches.
Verkleinert euer Bild, verpasst ihm ein Coloring, schärft es etc.
Wenn ihr damit fertig seid, wählt: alles auswählen, auf eine Ebene reduziert kopieren und schließt das Bild und fügt es anschließend in eure Base ein wo ihr es gemäß eurer Markierung, eurem Rahmen oder wie auch immer platziert, dann stoppt die Aktion.
Bei mir sieht es momentan so aus:
Nun wieder den 1. Frame löschen und jetzt Datei/Automatisieren/Stapelverarbeitung aufrufen,
wählt dort euren Ordner mit den Caps und eure eben erstellte Aktion und wichtig: setzt vor '"speichern unter" in Aktionen überschreiben' einen Haken. Und okay.
Photoshop verarbeitet jetzt ganz automatisch eure Frames und erspart somit eine Menge Arbeit und für uns geht es jetzt an's Ausbleden, wobei das natürlich kein Muss ist, mir persönlich gefällt es jedoch besser, also will ich es hier erwähnen:
Zuerst sollte ich vielleicht erklären, was ich mit Ausblenden meine: gemeint ist das die Animation am Ende weich in's Weiße (oder welche Farbe auch immer) übergeht, hierzu füge ich 4 (können auch mehr oder weniger sein) weiße Ebnen ein (strg gedrückt halten, auf den obersten Frame klicken, neue Ebene, Auswahl mit weiß füllen) und steigere deren Deckkraft von wenig bis 100%.
Falls gewünscht kann man nun auch noch Text hinzufügen und denn dann mit der obersten (100% Deckkraft) Ebene auf eine Ebene reduzieren.
Wir haben alle Frames, also nun (endlich) zur Animation an sich.
(PSD. File zwischenspeichern wäre jetzt sinnvoll, bzw. ratsam, falls irgendwas schief gehen sollte^^.)
Dass heißt alle die unter Version CS3 sind, wechseln jetzt zu Imageready
.
Alle anderen öffnen ihr internes Animationsfenster. (Wenn ich richtig liege oben unter Fenster, und dann den Haken vor Animation setzen)
Jedenfalls sollte nun folgendes vorhanden sein:
Im Ebenenfenster nehmt ihr nun die Haken bei den Sichtbarkeitskästchen überall raus, nur bei dem ersten Frame und beim Hintergrund nicht.
Dann erstellt ihr eine neue Ebene im Animationsfenster und aktiviert die Sichtbarkeit des 2. Frames wieder, dann noch eine neue Ebene im Animationsfenster und macht den 3. Frame wieder sichtbar, dann noch eine und der 4. Frame etc.
Das ganze funktioniert wie bei einem Daumenkino.
(Hinweis: wenn Imageready o. Photoshop im Ebenenfenster immer wieder nach oben springen, markiert eine der unteren Ebnen.)
Nun sollten wir die Dauer der Sichtbarkeit der einzelnen Frames einstellen, sonst sieht das Ganze so aus:
Dazu klickt ihr die kleine Zahl unter dem jeweiligen Frame im Animationsfenster an und wählt eure Einstellung, ich ändere nur die des vor letzten letzten und letzten Frame, auf 0,1 und 0,8.
Nun ist die kb Zahl aber immer noch zu hoch, also öffne ich das Optimierungs Fenster,
verringere die Anzahl der Farben und erhöhe die Web-Ausrichtung,
Dann "optimierte Version speichern unter..." (evtl. in CS3 "für Web speichern...) und fertig =D:
Falls Fragen aufkommen, weil ich irgendwas unverständlich erklärt habe oder aus irgendwelchen anderen Gründen, einfach fragen ^^.
Anm.: Eine Aktion solcher Art ist leider (meistens) nur einmal benutzbar, da es sonst nicht mehr mit den Dateinamen passt (Texturen etc....)
Bzw. sie ja speziell auf diesen einen erstellten Icon ausgelegt ist.