Share
Es besteht eine gute Chance, dass dies Sie überhaupt nicht interessiert (animiertes Gif Ian? Haben Sie ein Lachen?), Aber ich habe jemandem versprochen, dies zu schreiben. Ich habe vor kurzem animierte Vorschaubilder für Nachrichten auf Activetuts + erstellt, und jetzt bin ich hier, es ist nur fair, dass ich Michael weise, wie es gemacht wird.
Photoshop ist zwar nicht gerade ein Branchenführer im Bereich Animation, aber für einfache Aufgaben wie diese ist es gut. Wir nehmen ein Standard-Tuts + 200x200px-Vorschaubild und fügen einen Bildlauf-Nachrichtenticker am unteren Rand hinzu.
Lass uns ein passendes Foto nehmen. Hier ist eine, die ich letztes Jahr beim Envato-Treffen in Chicago mitgenommen hatte und auf 200x200px gekürzt wurde. Öffnen Sie es in Photoshop.
Wir brauchen dafür nur zwei zusätzliche Schichten; ein Hintergrund für den Ticker (Rechteck # 104333) und Text mit dem gewünschten Satz, der ein paar Mal wiederholt wurde.
Die Schrift heißt 04b_03 und ist von dafont.com frei verfügbar. Es handelt sich um eine 8-Bit-Schriftart, dh, Sie müssen sie in der Basisgröße (oder einem Vielfachen davon) anzeigen, wobei Anti-Alias deaktiviert ist, um beste pixelierte Ergebnisse zu erzielen. In diesem Fall betrachten wir 8px.
Es hat einen weichen grünen Ton von # f0fcdf mit einem halbtransparenten 1px-Strich von # 051a14 (damit er sich vom Hintergrund abhebt).
Öffnen Sie Ihr Animationsfenster (Fenster> Animation) und wechseln Sie mit der rechten unteren Schaltfläche im Bedienfeld zur Rahmenansicht.
Sie können das erste Bild sehen, das für Sie mit einem Daumen versehen ist. Stellen Sie einfach sicher, dass die Verzögerung auf 0 Sekunden (direkt unter dem Miniaturbild) eingestellt ist, da das Bild sofort wiedergegeben werden soll. In der ersten Miniaturansicht sehen Sie die Animation in ihrem aktuellen Zustand, die Ebenen und Objekte genau so, wie Sie sie angelegt haben.
Klicken Sie auf das Symbol "Ausgewählte Bilder duplizieren", um ein zweites Bild zu erstellen. Dies ist unser endgültiger Zustand. Wenn das zweite Miniaturbild ausgewählt ist, werden alle Änderungen, die wir in unseren Ebenen vornehmen, nur auf diesen Rahmen angewendet.
Tween wird aus dem Wort "Inbetweening" abgeleitet und bezieht sich auf schrittweise Stufen zwischen zwei Zuständen, die auf Bewegung hinweisen.
Verschieben Sie den Text mit dem zweiten Rahmen in die Richtung, in die er scrollen soll, über den Bildschirm. Möglicherweise möchten Sie die Umschalttaste gedrückt halten, um zu verhindern, dass sie vom horizontalen Verlauf abweicht. Bewegen Sie es ganz entlang, so dass es sich anscheinend genau in der Position befindet, in der es begonnen hat.
In diesem Fall stößt das "N" an der linken Seite an, so dass man leicht erkennen kann, wo ich hin ziele.
Nachdem Sie den Text verschoben haben, wählen Sie beide Frames aus und klicken Sie auf die Schaltfläche "Tweens-Animationsframes". Dadurch wird der folgende Dialog angezeigt:
Wie Sie sehen können, habe ich mich für weitere 99 Bilder entschieden, um zwischen meinen beiden Zuständen zu sitzen. Ich wollte, dass alle Ebenen in meinem Dokument in diese Frames ausgegeben werden, und ich möchte nur die Eigenschaft "position" meiner Textebene animieren. Super. Klicken Sie auf OK.
Sie haben jetzt eine Menge Frames in Ihrem Animationsfenster und jeder sieht dem nächsten wahrscheinlich sehr ähnlich! Beruhigen Sie sich jedoch, indem Sie auf die Wiedergabetaste klicken und Ihren Text vor Ihren Augen animieren. Magie, meine Damen und Herren?
Wählen Sie einfach das 101. Bild aus und löschen Sie es. Wie Sie sich vielleicht erinnern, ist es identisch mit dem ersten Bild, sodass das Schleifen sie tatsächlich aneinander stoßen wird, was uns in unserer ansonsten glatten Animation einen Störfaktor gibt.
Das Ergebnis ist subtil, aber in der Abbildung oben sehen Sie unser erstes Bild und unser letztes Bild (Nummer 100). Durch das Looping werden sie nahtlos gemischt.
Das ist es! Animation abgeschlossen. Wir müssen jetzt nur noch unsere Datei speichern, also gehen Sie zu Datei> Speichern für Web und Geräte. Wählen Sie GIF als Dateityp, und wählen Sie unten im Bereich Animation die Option "Endlos wiederholen". Sie können auch eine Vorschau der Animation anzeigen, nur um sicher zu gehen.
Wenn Sie Ihre Datei bearbeiten und dabei die Animation beibehalten möchten (z. B. möchten Sie den Text ändern und das Hintergrundbild austauschen), müssen Sie nur das erste Bild bearbeiten. Lassen Sie das erste Bild ausgewählt, wählen Sie die Ebene aus, die Sie ändern möchten, und stellen Sie sicher, dass die Option "Bild 1 weitergeben" aktiviert ist.
Alle an dieser Ebene vorgenommenen Attributänderungen werden über alle anderen Frames übertragen (reproduziert). Fügen Sie der Textebene in Bild 1 einen Schlagschatten und Hey Presto! dort ist es quer durch die Animation. Wenn Sie "Propagate Frame 1" nicht auswählen, wird nur ein Frame geändert.
Ich schätze, Sie sind heute morgen nicht aufgewacht und haben gedacht: "Es gibt einen echten Mangel an animierten Gifs, da draußen". Wenn Sie nicht Redakteur einer der Tuts + -Seiten sind, haben Sie wahrscheinlich keine Chance dafür. Trotzdem, Michael, hoffe ich, dass du diese Informationen gefunden hast, und ich erwarte von jetzt an Vorschaubilder mit hochqualitativen Newsbeiträgen auf Activetuts + :)
Accentsconagua