Vor der Weihnachtszeit letzen Jahres hat Yuki auf Wunsch ein Tutorial über animierte Avatare geschrieben und auf PinkPearl veröffentlicht. Heute möchte ich es auch gerne hier veröffentlichen. Danke an Yuki für das super tolle Tutorial!
Dieses Tutorial ist mit Photoshop CS2 + Adobe ImageReady gemacht
So, es kam die Frage auf, wie ich die animierten Icons erstelle. Ob es Frames aus Videos sind und so weiter.
Da muss ich euch enttäuschen, es sind 2 Bilder, die ich übereinander gelegt habe. Also keine Video Sequenzen
Es gibt in Japan (und mitlerweise Amerika/USA) sehr viele Card Games (Apps und für Browser) die mit Card Upgrades arbeiten. Das heißt man hat einen Karte, die sich bis zu 4 mal erhöhren kann. Der Charakter bleibt gleich, dafür bekommt die Karte aber mehr bling, bling oder andere Posen usw.
Ich suche meist nach den Japanischen Games, weil die bessere Bilder haben. Versucht es zum Beispiel mal mit diesem > Link < von Google :3
Manchmal haben die Bilder unterschiedliche Größen. Das ist echt nervig, denn man muss sie auf eine gleiche bringen. Aber genug davon, wir wollen hier ja schließlich was lernen.
Ich benutze diese beiden Bilder:
Verarbeite sie einfach zu Icons. Diesen Schritt lasse ich hier einmal aus. Habt ihr eure Icons fertig, dann speichert ihr sie einzeln ab und legt sie dann übereinander.
Als nächstes wechseln wir zu Adobe ImageReady. Das geht in Photoshop sehr schnell, indem man einfach auf den Icon klickt, oder den Kürzel dafür benutzt:
So kommen wir in die ImageReady Übersicht. Was wir brauchen, ist die Animations Fläche. Sollte sie bei euch nicht auf sein, geht unterWindow und klickt Animation
Nun klickt ihr auf den ->Dubblicate curent Frame Icon bei der Animationsfläche.
Somit habt ihr den ersten Frame erstellt. Blendet nun den oben Icon Layer aus und ihr könnt sehen: Drückt man Play, dann wechseln sich die Layer ab.
Aber wirklcih flüßig ist das ganze ja nicht gerade. Dazu kommen wir jetzt.
Zuerst stellen wir unsere Zeit ein. Damit stellt ihr ein, wie lange ein Bild sichtbar sein soll. Dazu müsst ihr unter den Bildern die 0 Sec. anklicken.
Ich stelle meine auf 0,1 Sekunden. (Macht es mit beiden) Nun bringen wir da mal Bewegung rein, indem wir den einen Icon einfach langsam ausblenden lassen. Wir erstellen einen sogenannten Tween (Das ist dieser Button):
Meine Einstellungen dafür sind immer die selben. Achtet darauf, das ihr auf eurem 2ten Frame wart und stellt ->Previous Frame ein, damit sich die Animation auf den ersten Icon bezieht.
Bestätigt alle Angaben so (normalerweise brauch man nichts einstellen, außer die Zeit. Bei mir variiert es zwischen 20 und 10 Frames)
Schon habt ihr eure erste Animation erstellt :D Der Icon blendet von einem zum anderen Bild.
Also fehlt uns noch der Übergangzurück. Als erste schreiben wir uns aber die letzte Nummer unseres Frames auf. Das hat den Grund, weil wir diesen Frame nachher länger einblenden, als alle anderen. Würden wir seine Zeit jetzt verändern, würden alle kommenden Frames die gleiche Zeit haben, somit wäre es kein Überlauf, sondern ein abgehacktes Ding XD. Also Nummer 22 notieren (oder merken)
Jetzt erstellen wir wieder einen neuen Fragem ->Dubblicate curent Frameund blenden den anderen Icon wieder ein. Dann gehen wir wieder auf Tween, stellen 20 Frames ein und schon ist er fertig....FAST
Denn wir müssen noch die Zeiten von unserem ersten Frame und der Nummer 22 ändern. Diese sind natürlich länger im Bild als alle anderen. Ich stelle sie meistens auf 2 Sekunden.
Nun müssen nur noch die Enstellungen richtig sein. Da gibt es ein kleines Problem, denn ich weiß nur, wie ich es einstelle..NICHT ob es so 100tig richtig ist.
Wir gehen dazu in die Optimize Fläche (Bei wem sie nicht offen ist: Window -> Optimize) und stellen auf GIF 128 No Dither. Leider kann ich euch nichts näheres dazu erklären >.< Ich habe schon viel dazu gegooglet, aber die sind sich da alle nicht einige (zumindest bei meiner Photoshop Version...die ist ja auch alt >_>)
Nun geht ihr auf Save Optimized As...und speichert euren Gif. Resultat:
Ich hoffe es hat geholfen :D
in gimp kann man solche animationen auch erstellen, aber ich weiß gerade nicht ob das auch in dieser "sachten" Form geht ^.^"
AntwortenLöschenmüsste das mal ausprobieren