Photoshop und ImageReady erstellen dynamische Logos für Composition Notebooks With Pen

Aug 31, 2023

Eine Nachricht hinterlassen

Beim Erstellen einer persönlichen Website kann ein gut gestaltetes, dynamisches Logo immer viel Farbe auf die Seite bringen. Vielleicht haben einige Freunde gesehen, dass das Logo einen dünnen Kreis aus gepunkteten Linien umgibt, um den sich das Logo langsam schleicht. Freunde haben es noch nicht gesehen, bitte sehen Sie hier:

1. Erweitern Sie die Größe der Leinwand.

Nach dem Öffnen der Logo-Datei verfügt das Bild nur über eine Hintergrundebene. Da wir dessen Umriss benötigen, können wir die Leinwand nicht direkt auf dieser Ebene erweitern. Doppelklicken Sie im Bedienfeld „Ebenen“ auf den leeren Bereich rechts neben der Hintergrundebene und klicken Sie im Popup-Dialogfeld auf „OK“, um die Hintergrundebene in die Ebene 0 zu konvertieren. Doppelklicken Sie auf den Namen der Ebene und nennen Sie sie „Logo“. Halten Sie die Strg-Taste gedrückt und klicken Sie unten im Bedienfeld auf die Schaltfläche „Neue Ebene“. Erstellen Sie eine neue Ebene, Ebene 1, unter der Ebene „Logo“. Wählen Sie dann den Menübefehl „Bild→Leinwandgröße“, ändern Sie im Dialogfeld die Längeneinheit in Pixel, aktivieren Sie das Kontrollkästchen „Relativ“, erhöhen Sie Breite und Höhe um 40 Pixel und behalten Sie die Standardmitte des Ankers bei.

Das Ergebnis dieses Schritts ist, dass die Leinwand in alle vier Richtungen um 20 Pixel größer ist und so Platz für den nächsten Schritt frei wird.

2. Erstellen Sie Muster, um den Hintergrund auszufüllen.

Über den Menübefehl „Datei→Neu“ erstellen Sie eine 8×8 Pixel große Datei mit weißer Stiftfarbe. Um es sehen zu können, können wir mehrmals Strg+"+" drücken, um die Dateiansicht groß genug für eine einfache Manipulation zu machen. Wählen Sie das Rechteckauswahl-Werkzeug (Tastenkürzel M), zeichnen Sie ein quadratisches 4-Pixel-Feld in die obere linke Ecke, halten Sie die Umschalttaste gedrückt und fügen Sie dasselbe Feld in die untere rechte Ecke ein. Stellen Sie sicher, dass die aktuelle Vordergrundfarbe standardmäßig Schwarz ist. Ist dies nicht der Fall, können Sie die D-Taste drücken, um die Standardfarbe wiederherzustellen. Drücken Sie Alt+BackSpace, um die Auswahl mit der Vordergrundfarbe Schwarz zu füllen, und drücken Sie dann Strg+D, um die Auswahl aufzuheben.

Wählen Sie den Menübefehl „Bearbeiten→Muster definieren“, benennen Sie das neue Muster im Dialogfeld „Schwarze und weiße Quadrate“ und klicken Sie auf die Schaltfläche „OK“, um das benutzerdefinierte Muster zu speichern.

3. Erstellen Sie ein gepunktetes Kästchen.

Gehen Sie zurück zu der Datei, in der sich das Logo befindet, wählen Sie im Ebenenbedienfeld die darunter liegende Ebene 1 aus, wählen Sie dann den Menübefehl „Bearbeiten→Füllen“, wählen Sie im Dialogfeld das „Muster“ und dann „Schwarzweiß“ aus Wählen Sie das Muster „Quadrat“, das wir gerade in der Dropdown-Liste unten angepasst haben, und behalten Sie die Standardoptionen für die restlichen Optionen bei.

Sobald die Schicht 1 bestimmt ist, wird sie mit dichten, regelmäßigen schwarzen und weißen Quadraten gefüllt

Klicken Sie im Ebenenbedienfeld unten im Bedienfeld auf die Schaltfläche „Neue Ebene“, um eine leere Ebene, Ebene 2, zu erstellen. Halten Sie die Strg-Taste gedrückt und klicken Sie auf die Ebene „Logo“, um deren Umriss als Auswahl zu laden. Wählen Sie den Menübefehl „Auswählen→Ändern→Erweitern“, geben Sie 1 in das Dialogfeld ein, drücken Sie die OK-Taste und die Auswahl wird um ein Pixel nach außen erweitert. Drücken Sie Strg+Umschalt+I, um die Auswahl umzukehren. Bestätigen Sie, dass die aktuelle Ebene Ebene 2 ist, drücken Sie Strg+Rücktaste und füllen Sie die Auswahl mit der Hintergrundfarbe Weiß. Nennen Sie die Ebene 2 „White Edge“. Drücken Sie Strg+D, um die Auswahl aufzuheben. Sie sehen dann ein gepunktetes Kästchen um das Logo.

4. Machen Sie die gepunkteten Linien auf jeder Seite unabhängig voneinander.

Der Leser muss gesehen haben, dass diese gestrichelte Linie eine Fälschung ist. Es handelt sich um eine Nebelwand, bei der das Hintergrundmuster durch eine 1 Pixel breite Lücke freigelegt wird und es schwierig ist, es zu bewegen. Was zu tun? Wir verwenden weiterhin Rauch und Spiegel -- vier Hintergründe für jede Seite. Ziehen Sie im Ebenenbedienfeld Ebene 1 auf die Schaltfläche „Neue Ebene“ unten im Bedienfeld und erstellen Sie eine neue Ebene-1-Kopie dieser Ebene. Wiederholen Sie zwei weitere Kopien, um vier identische Schichten mit dem Muster „schwarze und weiße Quadrate“ zu erhalten. Wählen Sie das Werkzeug „Einzelspaltige Pixelauswahl“, vergrößern Sie die Bildansicht auf den entsprechenden Maßstab, klicken Sie einmal auf die gepunktete Linie auf der linken Seite des Logos und wählen Sie alle Zeilen aus, in denen sich die gepunktete Linie befindet. Wählen Sie im Ebenenbedienfeld „Ebene 1“ aus und klicken Sie unten im Bedienfeld auf die Schaltfläche „Ebenenmaske hinzufügen“. Das Ergebnis ist eine fast vollständig schwarze Maske für diese Ebene, weiß nur auf der Linie, wo sich die gepunktete Linie links vom Logo befindet, was bedeutet, dass die Ebene Ebene 1 nur auf dieser Linie sichtbar ist. Wählen Sie als Nächstes nach dem gleichen Prinzip die gepunkteten Linien oberhalb, rechts und unterhalb des Logos mit den Pixelauswahlwerkzeugen für eine Zeile bzw. Spalte aus und fügen Sie nacheinander Masken zu den verbleibenden drei Musterebenen hinzu. Zu diesem Zeitpunkt verändert sich das Logo nicht von der Oberfläche, tatsächlich besteht der gepunktete Linienrahmen um es herum bereits aus vier Teilen. Sie können eine Ebene ausblenden und prüfen, ob dies der Fall ist. Benennen Sie die vier Musterebenen entsprechend ihren entsprechenden Teilen „links“, „oben“, „rechts“ und „unten“.

5. Verschieben Sie die gepunktete Linie in ImageReady.

Nachdem wir nun mit unserer Vorbereitung fertig sind, wechseln wir zur Animation in ImageReady. Durch Drücken der Sprungschaltfläche unten in der Toolbox wird ImageReady automatisch ausgeführt und lädt automatisch die Datei, die wir gerade vorbereitet haben, mit allen Ebenen und Masken, wie sie sind. Im Animationsfenster können Sie sehen, dass das aktuelle Bild automatisch zum ersten Bild der Animation wird. Klicken Sie auf die Schaltfläche „Aktuellen Frame kopieren“, um einen zweiten Frame zu erstellen, der mit dem ersten Frame identisch ist.

Wählen Sie das Verschieben-Werkzeug. Wählen Sie im Ebenenbedienfeld die Ebene „Links“ aus und drücken Sie die Pfeiltaste ↑, um sie um ein Pixel nach oben zu verschieben. Verschieben Sie dann die Ebene um ein Pixel nach rechts „nach oben“, die Ebene nach „rechts“ um ein Pixel nach unten und die Ebene um ein Pixel nach links „nach unten“. Auf dem Bild sieht es so aus, als ob sich das gepunktete Kästchen im Uhrzeigersinn bewegt. Duplizieren Sie Bild 2 als Bild 3 im Animationsfenster und verschieben Sie das gepunktete Kästchen auf die gleiche Weise erneut im Uhrzeigersinn. Wiederholen Sie den Vorgang, bis Bild 8 fertig ist. Die Grundeinheit des Musters, das wir im vorherigen Abschnitt erstellt haben, beträgt 8 Pixel, wobei sich 1 Pixel pro Frame bewegt, und es kann nach nur 8 Frames wiederholt werden.

6. Endgültige Einstellungen.

Die Standardeinstellung für ImageReady ist {{0}} Sekunden pro Frame, wir müssen diese Zahl ändern. Klicken Sie im Animationsfenster auf Bild 1, um es auszuwählen. Halten Sie dann die Umschalttaste gedrückt und klicken Sie auf Bild 8, um alle 8 Bilder auszuwählen. Klicken Sie auf das Dropdown-Menü „Verweildauer“ unter einem beliebigen Frame und wählen Sie 0,1 Sekunden aus, sodass die Verweildauer aller Frames auf 0,1 Sekunden geändert wird.

Je nach Bedarf können wir auch den weißen Rand außerhalb des gepunkteten Linienfelds in andere Farben ändern oder ihn abschneiden, um ihn besser an die Anforderungen von Webdesign und -produktion anzupassen.

Okay, Animation fertig. Intelligente Leser haben gesehen, dass der gesamte Prozess dieses Tutorials darin besteht, eine visuelle Täuschung zu erreichen. Solange die Idee klar ist, ist der Produktionsprozess äußerst einfach. Solange wir unsere Ideen offenlegen, kann das gleiche Beispiel auch eine Vielzahl von zappelnden Methoden aus gepunkteten Linienrahmen ergeben.

Das Endergebnis ist folgendes:

Beachten Sie, dass Sie in Schritt 5 das zweite Bild kopieren und jeden Teil direkt um 7 Pixel verschieben und dann im Funktionsmenü des Animationsfensters die Option „Tween“ auswählen können. Die Software generiert dann automatisch die mittleren 6 Bilder – dies ist möglicherweise praktischer , aber es ist nicht so einfach zu verstehen wie die Bild-für-Bild-Bewegung.