Share
In diesem Tutorial werden wir eine kostenlose Photoshop-Erweiterung namens Velositey durchlaufen. Velositey (derzeit in Version 2) bietet allgemeine Layoutmuster zum Erstellen von Prototypen für Website-Design in Photoshop.
"Verbringen Sie mehr Zeit, um die Details und das Styling zu perfektionieren, und sparen Sie sich Zeit für all das Langweilige." - Velositey
Bevor wir unser Velositey in die Hände bekommen, sollten wir zunächst einige gängige Layoutmuster untersuchen, die heutzutage auf vielen Websites zu finden sind.
Wenn wir drei der beliebtesten WordPress-Themes in ThemeForest (Avada, Enfold und Salient) betrachten, werden Sie feststellen, dass sie einige gemeinsame Funktionen aufweisen.
Erstens haben sie auf großen Bildschirmen eine Navigationsleiste, auf der das Logo nach links und die Navigation nach rechts angezeigt wird. Unterhalb der Navigationsleiste sehen wir normalerweise ein Heldenbild sowie einige Schaltflächen, die in einer animierten Diashow angezeigt werden. Nach den markanten Kopfzeilen finden wir häufig Spalten oder eine Art gitterbasiertes Layout.
Da diese Art von Layout in der Wildnis so üblich ist, bauen Sie oft etwas Ähnliches. Das Erstellen von Prototypen bekannter Layouts kann daher immer wieder zu einer sich wiederholenden Aufgabe werden.
In diesem Lernprogramm werden wir die Funktionen von Velositey kennenlernen und lernen, wie Sie damit gängige Aufgaben automatisieren und so unseren Prototyping-Workflow beschleunigen können. Außerdem erfahren Sie, wie Sie die systemeigenen Funktionen von Photoshop zum Anpassen und Hinzufügen von Schnickschnack zu unserem Prototypen verwenden können.
Lass uns ohne weiteres anfangen!
Die Mindestanforderung für die Ausführung von Velositey ist Adobe Photoshop CC 2014 / CS6. Stellen Sie außerdem sicher, dass Sie Adobe Extensions Manager installiert haben. Laden Sie Velositey herunter (Sie müssen mit einem Tweet- oder Facebook-Beitrag bezahlen) und installieren Sie es über Adobe Extension Manager.
Starten Sie Photoshop und navigieren Sie zu Fenster> Erweiterung> Velositey um das Velositey-Panel zu enthüllen.
Velositey PanelZunächst erstellen wir ein leeres Layout.
Zuerst müssen wir ein neues leeres Dokument über die erstellen [+] Neue Vorlage innerhalb des Velositey-Bedienfelds.
Dieses neu erstellte Dokument wird mit einer Hilfslinie mit einer Breite von 1170px und einer Rinne von 30px geliefert. Dies ist eine bequeme Anordnung, wenn Sie Bootstrap als Grundlage für das Website-Grid verwenden möchten.
Eines der ersten Dinge, die Sie unter sehen werden [+] Neue Vorlage Die Schaltfläche ist eine Reihe von Registerkarten, von denen die erste für Überschriften ist. Ich werde mich für das 10. Kopfmuster entscheiden. Klicken Sie darauf und Velositey generiert sofort die Kopfzeile und fügt sie in das Dokument ein.
Kopfzeilenoption im Velositey-BedienfeldIn unserem Fall erhalten Sie eine Kopfzeile mit dem Logo links und der Navigation rechts. In Photoshop native Schicht In diesem Panel werden Sie außerdem feststellen, dass die Ebenen ordnungsgemäß strukturiert und innerhalb des Fensters benannt sind Header Gruppe.
Das nackte Layout des Headers und seiner Layer-Struktur im Schichten Panel.HinweisWenn Sie sich später für eine andere Kopfzeilenoption entscheiden, wird Velositey das erste Beispiel ersetzen.
Trotz der Nachteile wünschen viele Menschen immer noch einen Schieberegler in ihrer Website. Das Hinzufügen eines Schiebereglerbereichs ist so einfach wie der Kopfzeilenbereich. Velositey bietet eine Reihe von Schiebereglern, die Sie mit einem Klick hinzufügen können.
Die Optionen des Slider-Layoutmusters.Hier habe ich mich für das letzte Schieberegler-Muster entschieden, das einen Schieberegler mit Überschrift, Dummy-Inhalt und zwei Schaltflächen enthält.
Der Slider-Bereich mit entsprechenden Ebenen .Wie Sie oben sehen können, finden Sie eine neue Gruppe, Schieberegler, hinzugefügt innerhalb der Schicht Bereich, in dem sich alle Schieberegler befinden.
Das Hinzufügen des Inhaltsbereichs ist ähnlich unkompliziert. Navigieren Sie zur dritten Registerkarte im Velositey-Bedienfeld. Dort finden Sie einige Inhaltsoptionen.
InhaltslayoutmusterIch habe mich für den dritten Stil entschieden und habe den Inhalt in drei Spalten dargestellt, wobei jede Spalte eine Überschrift, einen Bildplatzhalter und einen Dummy-Inhalt enthält.
Der Inhaltsbereich mit seinen EbenenEIN Modul, In diesem Fall handelt es sich um einen unabhängigen Inhaltsblock. Es liegt an uns, den Inhalt zu definieren und wofür er verwendet wird. Im Gegensatz zu den Bereichen Header, Slider und Content können wir mehrere Module in einem einzigen Dokument hinzufügen. Hier habe ich das zweite Modulmuster hinzugefügt:
ModulmusterDer zweite Modultyp gibt uns einen Bildplatzhalter (der sich über das Dokumentraster erstreckt), eine Überschrift und einige Zeilen Dummy-Text.
Das Modul wurde mit den Ebenen hinzugefügtDer letzte Abschnitt unserer Website wird voraussichtlich die Fußzeile sein. Für die Fußzeile bietet Velositey wieder eine Reihe von voreingestellten Mustern zur Auswahl:
Das erste Fußzeilenmuster gibt uns die folgende Fußzeilenanordnung:
In diesem Stadium haben wir alle erforderlichen Website-Abschnitte mit nur wenigen Klicks von der Kopfzeile bis zur Fußzeile hinzugefügt. Um jeden Abschnitt richtig anzuordnen, möchten Sie möglicherweise einige vertikale Zwischenräume zwischen den Abschnitten hinzufügen:
Jetzt haben wir das grundlegende Layout, es ist Zeit für uns, es anzupassen. Wir müssen ein paar Dinge ändern, um den Prototyp vorzeigbar zu machen.
Wenn Sie Photoshop-Dokumente anpassen möchten, sollten Sie die Ebenen möglichst intakt lassen. Jede Ebene sollte angepasst werden, ohne ihre ursprüngliche Form oder Eigenschaften zu zerstören. Dies führt dazu, dass wir einige Photoshop-Funktionen einsetzen, z.
Außerdem ziehe ich es vor, möglichst wenig Schichten zu verwenden.
In unserem Fall, Intelligente Objekte sind nützlich für das Einfügen des Logo-Bildes.
Wählen Sie zunächst die benannte Ebene aus Logo innerhalb des Header Gruppe (derzeit eine rechteckige Formebene). Klicken Sie dann mit der rechten Maustaste und wählen Sie die Option In intelligentes Objekt konvertieren Möglichkeit.
Das Logo Schicht ist jetzt ein Intelligentes Objekt.
Um unser Logo in dieser Ebene zu platzieren, klicken Sie mit der rechten Maustaste auf Logo Ebene und wählen Sie die Inhalt bearbeiten Möglichkeit.
Dies führt uns zu einem neuen Dokument im Photoshop-Fenster. Setzen Sie auf dieser Registerkarte die rechteckige Form-Ebene auf unsichtbar, ziehen Sie das Logo mit der Maus auf die Registerkarte und richten Sie das Logo nach links aus. Beim Speichern der Datei sollten die Änderungen in übernommen werden index.psd.
Das Logo wird durch ein Smart Object platziertJetzt werden wir die konvertieren Logo Schicht, die jetzt ein ist Intelligentes Objekt, in ein Verknüpftes intelligentes Objekt. Dadurch wird unser Logo effektiv als externe Datei gespeichert. Klicken Sie dazu mit der rechten Maustaste auf die Ebene und wählen Sie die Option aus In verknüpfte konvertieren… Möglichkeit.
Photoshop fordert Sie auf, das zu speichern Intelligentes Objekt Datei, .psb. Speichern Sie die Intelligentes Objekt des Logos in einer typischen Organisation, wie Sie es beim Organisieren der Website-Bilder tun würden. In diesem Fall würde ich es in einem Ordner namens speichern / Bilder.
“Bewahren Sie Fotos / Icons in einem Ordner in der Nähe der PSD auf, nicht in einem Desktopordner mit dem Namen“ Sonstiges ”- Photoshop-Etikette
Da wir jetzt mit Smart Objects arbeiten, verwenden wir das Logo in unserer Fußzeile erneut. Geh rüber zum Fußzeile Gruppe und finde die Logo Schicht. Klicken Sie mit der rechten Maustaste auf die Ebene und wählen Sie aus Inhalt ersetzen… .
Navigieren Sie zu dem Ordner, in dem Sie das gespeichert haben .psb Datei des Logos, wählen Sie die Datei aus und drücken Sie die Platz Taste. Sie sollten jetzt das Logo in der Fußzeile haben.
Wiederholen Sie diese Schritte, um Bilder in den anderen Abschnitten zu platzieren. Inhalt, Slider und Modul. Sobald dies erledigt ist, sollten Sie ein ähnliches Ergebnis haben wie meines:
Das Hinzufügen eines Ebeneneffekts wird wahrscheinlich jedem von Ihnen, der Photoshop für eine Weile verwendet, vertraut sein. Ebeneneffekte wenden einen oder mehrere Effekte wie Farbe, Farbverlauf, Schatten usw. auf eine Ebene an. In unserem Fall verwenden wir es, um dem Logo eine neue Farbe zu geben und einen Farbverlauf hinzuzufügen.
Beginnen Sie mit der Auswahl von Logo Schicht innerhalb der Header Gruppe. Dann wählen Sie die fx Symbol innerhalb der Schicht Panel, wo sich die Effektoptionen befinden. Wählen Farbüberlagerung… , und die Farbe auf weiß setzen.
Wiederholen Sie diesen Schritt, um die Farbe der Navigationslinks, die Symbolfarbe im Inhaltsbereich und die Schaltflächenfarbe im Schieberegler anzupassen. Fügen Sie dem Bild des Schiebereglers außerdem einen Verlaufseffekt hinzu, um mehr Kontrast zwischen der Kopfzeile und dem Schieberegler zu schaffen, sodass das Logo und die Navigation lesbarer werden.
Anpassungsschichten Erlauben Sie uns, den Ton einer Ebene (wie Helligkeit und Kontrast) auf zerstörungsfreie Weise anzupassen. In unserem Fall können wir eine Anpassungsebene verwenden, um die Modulsymbole schwarz und weiß zu machen.
Wählen Sie zuerst das Container Schicht innerhalb der Modul Gruppe. Klicken Sie mit der rechten Maustaste und wählen Sie das aus Inhalt bearbeiten… Möglichkeit. Klicken Sie anschließend auf Neue Einstellungsebene und wähle das aus Schwarz und weiß… Möglichkeit. Und voila!
Als letztes müssen Sie die Überschriften und den Text innerhalb der Platzhalter für Inhalte neu formulieren. Damit ist unser fertiger Prototyp fertig:
Gut gemacht, wir haben erfolgreich einen Design-Prototyp für eine Webseite erstellt. Wir haben Velositey verwendet, um das bloße Layout schnell generieren zu können. Darüber hinaus haben wir die Ebenen mit Farben, Verläufen und Anpassungen zerstörungsfrei angepasst, wobei die ursprüngliche Form erhalten blieb und zukünftige Bearbeitungen möglich sind.
Haben Sie noch andere Tipps und Tricks zur Verwendung von Velositey? Lass es uns in den Kommentaren wissen!
Accentsconagua