Share
Lassen Sie uns ein animiertes Pre-Loader-GIF für Ihr nächstes UI-Projekt erstellen. Sie benötigen die erweiterte Version Photoshop CS3 oder höher.
Wir werden ein kleines animiertes GIF erstellen, das für eine Vielzahl von Widgets verwendet werden kann. Immer wenn Ajax-Inhalte angefordert werden, werden Dateien hochgeladen, was immer Sie möchten. Fühlen Sie sich frei, Ihre eigenen Stile und Variationen in den Loader einzumischen. Es gibt drei Hauptabschnitte, die wir durchführen werden:
Bereit. Einstellen. Gehen…
Beginnen Sie mit der Einstellung der Leinwandgröße und fügen Sie einen schnellen Hintergrund hinzu, um zu beginnen.
Nur für Kicks fügen wir unserem Hintergrund ein Linienmuster hinzu und beginnen dann mit der Arbeit am Loader.
Erstellen Sie ein neues transparentes Dokument: (7px bei 7px). Zeichnen Sie eine diagonale Linie mit einem schwarzen Bleistift-Werkzeug (klicken Sie auf das obere linke Pixel, halten Sie die Umschalttaste gedrückt und klicken Sie auf das untere rechte Pixel).
Muster definieren und benennen (Menü Bearbeiten> Muster definieren).
Springen Sie dann zum ursprünglichen Dokument zurück und erstellen Sie auf unserer grauen Hintergrundebene einen Ebenenstil "Musterüberlagerung": (Menü Layer> Ebenenstil> Musterüberlagerung). Wählen Sie Ihr Muster aus der Musterbox und verringern Sie die Deckkraft (ich habe 20% verwendet).
Wir werden ein paar Markierungen setzen, die uns als Leitfaden dienen. Wir werden den Befehl "Erneut umwandeln" verwenden, um die Abläufe zu beschleunigen.
Zeichnen Sie eine vertikale vertikale Linie (1px) mit dem Linienwerkzeug in Ihrem Dokument:
Um sicherzustellen, dass sie in der Mitte ausgerichtet ist, wählen Sie sowohl die Ebene als auch die Hintergrundebene aus, greifen Sie zum Verschiebungswerkzeug und klicken Sie auf die Option "Horizontale Zentren ausrichten".
Linie um 45 ° drehen (Wählen Sie die Zeile Bearbeiten-Menü> Free Transform || Control / Command + T)
Wählen Sie Bearbeiten> Transformieren> "Erneut transformieren", während Sie die Taste "Wahltaste / Alt" gedrückt halten (Befehl / Strg + Wahltaste / Alt + Umschalttaste + T).
Führen Sie diesen Befehl mehrmals aus, bis sich die Linie wie folgt gedreht hat:
Mit der gleichen Technik wie oben beschrieben, werden wir an jeder Gitterlinie ein paar kleine Häkchen setzen, damit der Loader rundherum läuft… Hier geht's.
Fügen Sie einige Hilfslinien hinzu, an denen Ihr anfängliches "Häkchen" angezeigt werden soll (stellen Sie sicher, dass sich die Hilfslinien auf ganzen Pixeln befinden, teilen Sie die Pixel nicht auf)..
Erstellen Sie ein abgerundetes Rechteck mit einem Radius von 1 Pixel innerhalb unserer Hilfslinien (stellen Sie sicher, dass das Einrasten für Hilfslinien aktiviert ist: Ansicht-Menü> Einrasten)
Verschieben Sie mit dem Direktauswahl-Werkzeug die unteren Ecken (Knoten) unserer Rechteckform nach innen, so dass sich die Form verjüngt.
Verwenden Sie denselben Trick "Transform Again", den wir oben verwendet haben, um die Form um die gesamten Markierungen herum zu duplizieren. Wenn Sie den 45 ° -Drehpunkt drehen, stellen Sie sicher, dass der Transformationspunkt auf die Mitte unseres Gitters und nicht auf die Mitte des Rechteck-Ticks gesetzt wird Form, die es wo vorgewählt).
Wählen Sie Bearbeiten> Transformieren> "Erneut transformieren", während Sie die Taste "Wahltaste / Alt" (Befehlstaste / Strg + Wahltaste / Alt + Umschalttaste + T) gedrückt halten, bis der Haken vollständig kopiert wurde. Es sollte so aussehen:
Ebenentest: Stellen Sie sicher, dass das Ebenenfenster folgendermaßen aussieht:
Puh. Wir haben die Pre-Loader-Formen erstellt, jetzt fügen wir ein paar Ebenenstile hinzu, um die Dinge ein wenig zu verfeinern. Salz wie gewohnt abschmecken. Wir werden Ebenenstile hinzufügen, die sich alle unter "Ebenenmenü> Ebenenstile" befinden..
Fügen Sie der Ticks-Ebene einen Ebenenstil "Farbüberlagerung" hinzu (ich habe # 242424 verwendet)..
Fügen Sie der Ticks-Ebene einen Ebenenstil "Schlagschatten" hinzu:
Fügen Sie der Ticks-Ebene einen Ebenenstil "Inner Shadow" hinzu:
Ihr Lader sollte jetzt so aussehen:
Es gibt ein paar Möglichkeiten, wie wir das nächste Stück angehen könnten, aber um die Dinge zu vereinfachen, werden wir unsere Tick-Ebene fünfmal duplizieren und dann alle Form-Ticks löschen, die nicht zu diesen bestimmten Form-Layern gehören. Wir möchten keine überlappenden Häkchen von darunter liegenden Ebenen, da die hinzugefügten Ebenenstile aufeinander gestapelt werden und überbelichtete Effekte verursachen.
Duplizieren Sie Ihre Basis-Tick-Ebene viermal, und löschen Sie auf jeder der Layer die Tick-Markierungen, bis Sie Folgendes erhalten:
Mit dem Direktauswahl-Werkzeug können Sie die Hilfsstrichformen aus jeder der Ebenen löschen.
Jetzt werden wir zu den einzelnen Häkchenebenen, die wir getrennt haben, einige Stile hinzufügen. Ich beziehe mich auf meine eigenen Ebenennamen.
Fügen Sie der Ebene mit dem Namen "Shine-Active" den Ebenenstil "Äußeres Glühen" hinzu oder ändern Sie ihn:
Fügen Sie zu derselben Ebene den Ebenenstil "Inner Glow" hinzu:
Fügen Sie dann den Ebenenstil "Farbüberlagerung" hinzu (oder verwenden Sie ihn # 0087c6):
Fügen Sie der Ebene mit dem Namen "Shine-Fading1" die gleichen Stile hinzu, wobei der Ebenenstil "Outter Glow" weggelassen wird:
Fügen Sie der Ebene "Shine-Fading2" den Ebenenstil "Inner Shadow" hinzu oder ändern Sie ihn:
Fügen Sie auf derselben Ebene den Ebenenstil "Inner Shadow" hinzu / ändern Sie ihn (ich habe # 0087c6 verwendet)..
Fügen Sie dann der Ebene mit dem Namen "Shine-Fading3" den Ebenenstil "Inner Shadow" hinzu bzw. ändern Sie ihn (beachten Sie auch die Änderung der Deckkraft):
Ihr Loader sollte jetzt ungefähr so aussehen (Ebenenstile nach Ihren Wünschen anpassen):
Okay, wir haben die Basisstile eingerichtet, jetzt ist es Zeit, die Ebenen eine ganze Reihe zu duplizieren (was die Animation zum Kinderspiel macht) und unser animiertes .gif zu erstellen
Gruppieren Sie alle Ebenen, die unser Häkchen bilden (alle hervorheben + Ebenenmenü> Gruppenebenen)
Duplizieren Sie die gesamte Gruppe und drehen Sie sie dann um 45 ° (Menü Bearbeiten> Freie Transformation). Wiederholen Sie Schritt 2, bis Sie das Häkchen ganz umgedreht haben (Sie haben insgesamt acht Gruppen)..
Ihr Lader sollte ungefähr so aussehen:
In Ordnung, unsere Ebenen sind alle eingerichtet und wir sind bereit zu animieren. Wir werden bei der regulären Frame-für-Frame-Animation bleiben, obwohl wir mit der Timeline-basierten Animation dasselbe erreichen könnten.
Öffnen Sie das Animationsfenster: (Fenster> Animation). Deaktivieren Sie alle Häkchengruppenebenen außer der ersten und klicken Sie dann im Animationsbereich auf die Schaltfläche "Ausgewählte Rahmen duplizieren".
Deaktivieren Sie die erste gruppierte Ebene und die zweite gruppierte Ebene.
Wiederholen Sie den vorherigen Schritt für jede der Gruppenebenen. Markieren Sie alle Bilder in Ihrer Animationsebene (Umschalttaste + Klicken Sie auf jedes Bild) und setzen Sie die Bilddauer auf 0,1 Sekunden
Wählen Sie "Datei"> "Für Web und Geräte speichern" und nehmen Sie die folgenden Einstellungen für Ihre animierte GIF-Datei vor
Öffnen Sie Ihr .gif in einem Webbrowser und bewundern Sie Ihren neuen schicken Lader! Zum Schluss noch ein Eis.
Das ist es. Ich hoffe, Ihnen hat der Lader Spaß gemacht! Es hat Spaß gemacht, mich einzurichten. Laden Sie einige Ihrer Kreationen in den Kommentaren hoch und stellen Sie einen Link zu ihnen, und stellen Sie Fragen, die Sie möglicherweise haben.
Accentsconagua