Erstellen von Modellen in Photoshop - Instagram App

Ressourcen benötigt

Laden Sie hier alle Ressourcen (Symbole) herunter

Bedeutung von Ebenen in Photoshop

Ebenen sind ohne Zweifel der wichtigste Aspekt von Photoshop. In Photoshop kann oder sollte nichts ohne Ebenen getan werden. In Photoshop werden Ebenen verwendet, um einzelne Teile eines Bildes zu bearbeiten, ohne andere Teile zu beeinflussen. Mit ihnen können Sie Ihr Bild ändern, Text hinzufügen, Farben ändern, zwei Bilder auf derselben Seite platzieren und vieles mehr, ohne Ihr Originalfoto zu ändern. Möchten Sie mehr über die Bedeutung von Ebenen in Photoshop erfahren? Hüpfe hierher.

Teile in Gruppen aufteilen

Gehen Sie zum Menü Fenster → Ebenen, um die Ebenenfenster zu öffnen. Da wir das Design kennen, können wir alle Elemente durch Abschnitte unterteilen, z. B. - Abschnitt "Geschichten", "Feed", "Menü" usw.

Dies erleichtert Ihnen die Arbeit, wenn Sie Abschnitte hinzufügen oder löschen. Doppelklicken Sie auf den Gruppennamen, um ihn umzubenennen. Die Abschnitte sind wie folgt: - - Aktionsleiste - Geschichten - Feed - Menü Die Reihenfolge der Gruppen spielt momentan keine Rolle, da sie vertikal ohne Überlappung platziert werden. Reihenfolge ist wichtig, wenn Sie zwei Ebenen / Gruppen überlappen.

Aktionsleiste

Klicken Sie im Ebenenbedienfeld auf die ActionBar-Gruppe. Dadurch wird sichergestellt, dass alle Elemente, die Sie erstellen, unter der ActionBar-Gruppe erstellt werden. Gehen Sie nun zur Symbolleiste auf der linken Seite und suchen Sie das Rechteck-Werkzeug, das kleine quadratische Symbol irgendwo unten in der Symbolleiste. Erstellen Sie ein Rechteck mit der Farbe #fafafa am oberen Bildschirmrand mit einer Höhe von 56 Pixel und einer Breite, die den gesamten Bildschirmbereich abdeckt.

Um den kleinen Schatteneffekt unter dem Rechteck hinzuzufügen, klicken Sie unten im Ebenenbedienfeld auf das Symbol „Ebenenstil hinzufügen“ (mit der Aufschrift „fx“) und wählen Sie „Schlagschatten“. Das Folgende sollten die Werte sein.

Jetzt werden die meisten Dinge beim Entwerfen durch Ausprobieren erledigt, sodass Sie immer versuchen können, was gut aussieht, und es versuchen können. Diese Werte sind also nicht in Stein gemeißelt.

Fügen Sie Symbole und Logo hinzu

Ziehen Sie Ihre Elemente camera.png und send.png zusammen auf den Bildschirm und legen Sie sie dort ab. Um die Größe zu ändern, drücken Sie Strg + T und drücken Sie dann Umschalt + Alt, um die Größe proportional zu ändern. Ziehen Sie nun logo.png per Drag & Drop genau in die Mitte der beiden Elemente. Möglicherweise müssen Sie auch die Größe ändern. Beziehen Sie sich immer auf das Originalbild, um dies zu überprüfen.

Ihre Aktionsleiste ist fertig! Gehen wir zur Menüleiste unten. Meistens ist es besser, zu Beginn eines App-Designs sowohl die Aktionsleiste als auch die untere Leiste abzudecken, damit Sie wissen, wie viel Platz auf dem Bildschirm noch für Sie übrig ist.

Menü (untere Leiste)

Denken Sie daran, im Ebenenbedienfeld auf die Menügruppe zu klicken, damit alle neuen Ebenen unter der Menügruppe erstellt werden. Erstellen Sie ein weiteres Rechteck mit der Farbe #fafafa von 56 px Höhe und Breite, die den gesamten Bildschirm abdeckt. Fügen Sie einen neuen Ebenenstil hinzu (erinnern Sie sich an den kleinen Effekt am unteren Rand des Ebenenbedienfelds?) Und fügen Sie Inner Shadow hinzu.

Elemente hinzufügen

Zu diesem Abschnitt hinzuzufügende Elemente - * Menü-Startseite * Menüsuche * Menü-Hinzufügen * Menü-Likes * Menü-Profil Ziehen Sie die Elemente in der angegebenen Reihenfolge mit gleichem Abstand von beiden Seiten per Drag & Drop. Beziehen Sie sich auf das Originalbild

Empfohlen: Es wird empfohlen, die Elemente in einer anderen Untergruppe innerhalb der Menügruppe abzulegen. Auf diese Weise können Sie alle Elemente zusammen ändern. Kommen wir jetzt zu Stories?

Geschichten

Klicken Sie für den Abschnitt "Storys" im Bereich "Ebenen" auf die Gruppe "Stories" und erstellen Sie ein weiteres Rechteck mit derselben Farbe, jedoch einer Höhe von 120 Pixel.

Wie Sie jetzt im Referenzdesign bemerken, müssen wir wiederholt ein Kreiselement mit einem mehrfarbigen Rand und einem Text darunter erstellen. In einem solchen Szenario ist es nicht sinnvoll, es wiederholt von Grund auf neu zu erstellen. Wir können einfach eine erstellen und nach Bedarf duplizieren. Können wir also eine Untergruppe für dieses gesamte Element erstellen? Ich denke wir können. Es hält unsere Layouts und Elemente sauber getrennt.

Strich für Randellipse

Erstellen Sie eine Untergruppe StoryElement unter der Gruppe Stories und erstellen Sie eine Ellipse mit dem Ellipsen-Werkzeug mit: Breite - 65 Pixel Höhe - 66 Pixel Füllfarbe - # 262727 Strichfarbe - Keine Farbe Fügen Sie eine weitere Ellipse mit demselben Zentrum wie die vorherige Ellipse für den Rand mit dem folgenden Wert hinzu: Breite & Höhe: 78px Füllfarbe - Keine Farbe

Strichbreite - 3,8pt Strichfarbe - Farbverlauf der folgenden 4 Farben, wie im Bild gezeigt: # a02f93, # d31938, # f9aa0e, # d40a27. Stellen Sie sicher, dass der Winkel -101 Grad beträgt.

Fügen Sie einen Text direkt unter den Kreiselementen hinzu. Text - Ihre Story-Schriftart - Arial Regular Font Size - 13pt Schriftfarbe - # b5b5b5

Die endgültige Ausgabe sollte so aussehen.

Erstellen Sie nun eine einzelne Kopie der StoryElement-Untergruppe und bearbeiten Sie einfach den Text von Your Story in Benutzername und ändern Sie die Farbe in # 262727.

Beziehen Sie sich hier auf das Verfahren

Futter

Jetzt ist der Feed weiter in drei Abschnitte unterteilt: * Benutzername + Ort * Foto + Feedback * Likes + Kommentare Lassen Sie uns Untergruppen für jeden erstellen, wie das Bild auf der linken Seite.

Abschnitt Benutzername

Das Verfahren zum Ausführen des Abschnitts "Benutzername" ist unten angegeben

Fotobereich

Kommentarbereich

Glauben Sie, dass Sie dieses Design selbst fertigstellen können, nachdem ich Ihnen die meisten Schritte, Tricks und Möglichkeiten zum Erstellen eines solchen Designs gezeigt habe?

Aufgaben für Tag 2

  1. Vervollständigen Sie das unten angegebene Design. Die dunklen Schriftarten verwenden Arial Bold und die helleren Schriftarten verwenden Arial Regular. Weitere Symbole finden Sie im Ordner Ressourcen. Sie können jederzeit den Farbwähler verwenden, um die Farben aus diesem Bild auszuwählen und in Ihrem Design zu verwenden. Überprüfen Sie dieses YouTube-Video auf Farbwählern.

2. Senden Sie das endgültige Design zur Rückmeldung an [email protected]