Share
Photoshop CS6 enthält zahlreiche neue Funktionen, mit denen Sie bessere Schnittstellendesigns erstellen können. In diesem Lernprogramm verwenden wir die neuen Vektorbearbeitungs- und Konturfunktionen von Photoshop, um eine Administrator-Dashboard-Oberfläche zu erstellen. Wir werden auch die neue Funktion "Einrasten an Pixelgitter" von Photoshop nutzen, um gestochen scharfe und saubere Webgrafiken zu erstellen. Lass uns anfangen!
Die folgenden Assets wurden während der Erstellung dieses Tutorials verwendet.
Wir werden 960-Raster mit 12-Spalten-Layout von 960.gs als Rahmen für unser Design verwenden. Laden Sie die Vorlagendatei im ZIP-Format herunter und öffnen Sie das 12 Columns Grid. Klicken Sie auf das Augensymbol vor dem 12-Col-Raster der Ebene, um es auszublenden.
Klicken Sie auf das schwarze und weiße Kreissymbol, um eine neue Einstellungsebene hinzuzufügen. Wählen Sie Volltonfarbe aus und wählen Sie im nächsten Dialogfeld Weiß aus.
Neue Ebene erstellen. Klicken Sie auf Bearbeiten> Füllen und wählen Sie Verwenden: Muster. Verwenden Sie ein diagonales Linienmuster von PSDfreemium. Da dies CS6 ist, versuchen wir, die neueste Funktion zu verwenden. Aktivieren Sie Scripted Patterns und wählen Sie Symetry Fill.
Reduziere die Deckkraft auf 4%.
Wir möchten sicherstellen, dass alle Ebenen sorgfältig organisiert sind. Beginnen wir damit, sie in einer logischen Reihenfolge zu gruppieren. Wählen Sie beide Ebenen (Hintergrund und Muster) aus und drücken Sie dann Befehlstaste / Strg + G, um sie in die Gruppenebene zu verschieben.
Wir brauchen keine Hintergrundebene, also löschen Sie sie, indem Sie sie auf das Löschsymbol ziehen.
Wählen Sie die Gruppenebene aus. Drücke F2 und ändere dann den Namen. Drücken Sie die Tabulatortaste, um die nächste Ebene automatisch zu bearbeiten. Ändern Sie den Namen und wiederholen Sie diesen Vorgang für die nächste Ebene.
Werkzeug "abgerundetes Rechteck" aktivieren Zeichnen Sie eine abgerundete Rechteckform mit einem Radius von 10 px und einer Breite von 2 Spalten. Legen Sie es oben rechts auf die Leinwand. Setzen Sie in der Optionsleiste die Füllfarbe auf # f16424 und Strich auf Keine.
Doppelklicken Sie auf die Ebenenform im Ebenenfenster, um das Dialogfeld Ebenenstil zu öffnen. Aktivieren Sie die Musterüberlagerung. Wählen Sie das Pixelmuster aus PSDfreemium aus. Reduzieren Sie die Skalierung und die Deckkraft, um eine natürliche Textur der Textilien zu erhalten.
Neue Ebene über der Form erstellen. Aktivieren Sie den weichen Pinsel und den Schatten auf der Oberseite.
Klicken Sie bei gedrückter Alt-Taste zwischen der Logo-Basis und ihrem Schatten. Dadurch wird die Ebene in eine Schnittmaske umgewandelt und der Schatten wird innerhalb des Logos platziert.
Wiederholen Sie den Vorgang einige Male. Sie können bei Bedarf weitere Ebenen hinzufügen. Malen Sie das Highlight auf der Unterseite.
Neue Ebene unter dem Logo erstellen. Befehl / Strg - Klicken Sie auf eine Form, um eine neue Auswahl basierend auf ihrer Form vorzunehmen. Auswahl mit Schwarz füllen.
Gaußscher Weichzeichner anwenden. Klicken Sie auf Filter> Unschärfe> Gaußsche Unschärfe.
Drücken Sie die Befehlstaste / Strg + T, um die Umwandlung durchzuführen. Klicken Sie mit der rechten Maustaste und wählen Sie Warp. Die Transformations-Begrenzungsbox ist in 3 x 3-Boxen unterteilt. Ziehen Sie das untere Kästchen nach unten. Drücken Sie die Eingabetaste, um das Transformationsergebnis zu akzeptieren.
Zeichnen Sie eine kleinere abgerundete Rechteckform. Setzen Sie in der Optionsleiste für "Füllung" die Option "Keine" und für "Strich" die Option "Weiß" mit der Größe 1.
Öffnen Sie die Strichoptionen und wählen Sie dann die gestrichelte Voreinstellung aus. Klicken Sie auf Weitere Optionen, um die Einstellungen für die gestrichelte Linie zu bearbeiten.
Doppelklicken Sie im Ebenenbedienfeld auf seine Ebene, um das Dialogfeld „Ebenenstil“ zu öffnen. Aktivieren Sie den Schlagschatten, stellen Sie den Winkel auf 90 ° ein, aktivieren Sie die Option "Globales Licht verwenden", legen Sie die Größe auf 0 px und den Abstand 1 px fest.
Aktivieren Sie das Rechteckwerkzeug und klicken Sie einmal auf die Leinwand. Legen Sie im Dialogfeld die Größe auf 6 x 30 px fest. Klicken Sie auf OK, um die Form zu erstellen.
Klicken Sie in der Optionsleiste auf das Füllfeld. Wählen Sie Farbverlauf und legen Sie die Farbe von #dfdfdf auf #ffffff fest.
Zeichnen Sie einen weiteren rechteckigen Pfad innerhalb des Logos. Doppelklicken Sie im Ebenenbedienfeld auf seine Ebene, und aktivieren Sie dann den Schlagschatten.
Fügen Sie der Ebenenform Schlagschatten hinzu.
Unten ist das Ergebnis bei größerer Vergrößerung. Wie Sie sehen, ist unsere Vektorform bisher immer knackig. Es gibt kein halbes Pixel! Dies ist dank der Vektorfunktion in Photoshop CS6 möglich. Sie können diese Funktion deaktivieren, wenn Sie das Dialogfeld "Voreinstellungen" verwenden möchten. Ich habe jedoch keine Ahnung, warum jemand dies tun würde.
Fügen Sie Text innerhalb des Logos hinzu. Wir können dem Text einen Kontrast hinzufügen, indem Sie einfach einige Zeichen in Fettdruck ändern.
Fügen Sie dem Text einen weiteren Schlagschatten hinzu.
Aktivieren Sie das Rechteckwerkzeug und zeichnen Sie dann ein Rechteck als Hintergrundinhalt. Stellen Sie die Breite auf 800 px ein, füllen Sie: #eeeeee und Strich: #cccccc, Größe: 1 pt.
Fügen Sie Äußeres Glühen mit folgenden Einstellungen hinzu.
Fügen Sie eine Dreiecksform und ein abgerundetes Rechteck hinzu. Stellen Sie ihren Pfadmodus auf Kombinieren von Formen ein.
Fügen Sie Text auf der Registerkarte hinzu, um den Titel hinzuzufügen. Fügen Sie ein kleines Statistik-Symbol hinzu, das aus einigen kleinen Rechtecken erstellt wurde.
Zeichnen Sie eine weiße Rechteckform als Basis für unser Hauptdiagramm. Stellen Sie die Breite auf 8 Spalten ein. Vergewissern Sie sich, dass der Strich auf Keine eingestellt ist. Fügen Sie einen Ebenenstil hinzu.
Drücken Sie die Befehlstaste / Strg + J, um die Form zu duplizieren. Fügen Sie am unteren Teil ein großes Rechteck hinzu, und stellen Sie den Modus auf Front abziehen. Verlaufsüberlagerung hinzufügen.
Zeichnen Sie ein abgerundetes Rechteck. Setzen Sie Füllung ohne Strich auf Weiß. Verwenden Sie dasselbe äußere Glühen und platzieren Sie es hinter der vorherigen Form.
Erstellen Sie eine neue Ebene zwischen diesen beiden Formen. Nehmen Sie eine elliptische Auswahl vor und füllen Sie sie mit Schwarz. Heben Sie die Markierung auf (Befehl / Strg + D) und machen Sie sie durch Hinzufügen von Gaußscher Weichzeichnung weich.
Werkzeug "Typ aktivieren". Abschnittstitel hinzufügen.
Aktivieren Sie das Linienwerkzeug und zeichnen Sie dann eine 1 px-Linie. Legen Sie die Strichfarbe auf # e4e4ee4 fest.
Hier ist der Unterschied vor und nach dem Hinzufügen der Zeile.
Zeichne ein Rechteck. Setzen Sie die Füllung auf Keine und Strich auf #cccccc.
Wählen Sie den gestrichelten Strichtyp aus der Optionsleiste. Klicken Sie auf Weitere Optionen, und legen Sie für Bindestrich und Lücke 4 und 2 fest.
Zeichnen Sie eine horizontale Linie mit Strich #cccccc. Wählen Sie den gestrichelten Strich.
Aktivieren Sie das Pfadauswahl-Werkzeug und wählen Sie den gerade erstellten Linienpfad aus. Drücken Sie Befehlstaste / Strg + Alt + T, um es zu duplizieren und umzuwandeln. Drücken Sie zweimal die Umschalttaste und den Rechtspfeil, um ihn 20 Pixel nach rechts zu verschieben. Wiederholen Sie den Transformations- und Kopiervorgang, indem Sie die Tastenkombination Befehl / Strg + Umschalttaste + Alt + T drücken.
Wiederholen Sie den Vorgang, bis das Rechteck mit Spalten gefüllt ist.
Reduziere die Deckkraft der Ebene auf 30%.
Wiederholen Sie die vorherigen Schritte, diesmal jedoch mit horizontalen Linien.
Unten ist das Ergebnis. Nun haben wir ein feines Raster für den statistischen Hintergrund.
Fügen Sie Werte für beide Achsen, x und y, hinzu.
Aktivieren Sie das Linienwerkzeug und zeichnen Sie eine 1 px-Linie in das Raster. Setzen Sie die Strichfarbe auf # f16424.
Halten Sie die Umschalttaste gedrückt, um weitere Linien hinzuzufügen. Fügen Sie weitere Zeilen hinzu, bis wir ein vollständiges Liniendiagramm haben.
Zeichnen Sie eine kleine Kreisform und platzieren Sie sie rechts im Liniendiagramm. Setzen Sie die Füllung auf Weiß und den gleichen Strich auf die Füllfarbe der Linie.
Doppelklicken Sie auf die Kreisformebene und aktivieren Sie den Ebenenstilstrich. Setzen Sie die Farbe auf Weiß und Position auf Außen.
Wählen Sie den Kreispfad mit dem Pfadrichtungswerkzeug aus und ziehen Sie ihn bei gedrückter Alt-Taste, um ihn zu duplizieren.
Gehen Sie genauso vor, um ein anderes Liniendiagramm zu zeichnen. Verwenden Sie diesmal eine andere Farbe und stellen Sie die Strichoptionen auf gestrichelt ein.
Fügen Sie, wie im vorherigen Liniendiagramm, Kreise zu jedem Liniensegment hinzu.
Fügen Sie über dem Diagramm die Diagrammlegende hinzu. Sie fügen einfach eine kurze Zeile mit denselben Eigenschaften wie das Liniendiagramm hinzu und fügen eine kurze Beschreibung hinzu.
Zeichnen Sie ein abgerundetes Rechteck. Setzen Sie die Füllung auf #eeeeee und Strich auf #cbcbcb.
Fügen Sie den Layer-Stil Inner Shadow und Gradient Overlay hinzu.
Zeichnen Sie eine Rechteckform in der Mitte der abgerundeten Rechteckform. Sie können jede Farbe für die Füllung verwenden. Setzen Sie den Strich auf Keine. Reduzieren Sie die Füllung auf 0%. Ebenenstil-Überlagerung hinzufügen.
Zeichnen Sie eine 1 px-Linie mit der Farbe #cbcbcb auf der linken und rechten Seite.
Hinzufügen der Zeitbereichsauswahl Sie sehen, dass der Text mit einem anderen Hintergrund jetzt aktiv ist.
Verwenden wir Zeichenformate, um unseren Standardzeichen zu definieren. Diese Funktion ist eine vereinfachte Version des Zeichenstils in Adobe InDesign. Wenn Sie häufig InDesign verwenden, werden Sie es sofort erkennen.
Öffnen Sie den Bereich Zeichenstile und klicken Sie auf das neue Symbol. Legen Sie im Dialogfeld den Schrifttyp auf Arial Regular, die Größe auf 12 pt und die Farbe auf # 767676 fest. Wir werden diesen Zeichenstil im größten Teil des Textes verwenden. Deshalb nennen wir es auch als Standardzeichenstil.
Wenden wir diesen Zeichenstil auf den Text an. Aktivieren Sie das Textwerkzeug, wählen Sie den Text aus und klicken Sie auf den Zeichenstil, um ihn anzuwenden.
Was ist, wenn wir Eigenschaften aus vorhandenem Text als Zeichenformate speichern möchten? Lassen Sie uns dies auf Werte auf der Diagrammachse tun. Neue Charakterstile erstellen. Markieren Sie den Text und klicken Sie auf das Symbol "Neu definieren".
Doppelklicken Sie auf den Zeichenstil, um seine Optionen zu bearbeiten. Ändern Sie den Namen. Wenden Sie diesen Zeichenstil auf alle Werte auf beiden Achsen an.
Das Schöne an dem Zeichenstil (und auch dem Absatzstil) ist, dass Sie ihn einfach bearbeiten können, um jeden Text zu bearbeiten, der diesen Stil verwendet. Hier ist ein Beispiel. Bearbeiten Sie die Diagrammachse - einen Zeichenstil, den wir zuvor für jeden Wert auf beiden Achsen erstellt haben. Doppelklicken Sie darauf und ändern Sie die Schriftart und -größe.
Werkzeug "abgerundetes Rechteck" aktivieren Zeichnen Sie ein abgerundetes Rechteck und fügen Sie ein kleines Dreieck auf der linken Seite hinzu. Legen Sie seine Füllung fest: # f1f2f2 und Stroke: None.
Doppelklicken Sie auf die Ebene im Ebenenbedienfeld und fügen Sie einen schwarzen Strich hinzu. Vielleicht fragen Sie, warum wir die Stroke-Option nicht direkt aus ihrem Eigentum verwenden. Die Antwort ist in Layer-Stil Strich. Sie können die Deckkraft des Strichs ändern. Dies ist etwas, das Sie in Photoshop CS6 noch nicht ausführen können. Fügen Sie auch Outer Glow und Gradient Overlay hinzu.
Form duplizieren und die Füllfarbe in # f16424 ändern. Entfernen Sie den Ebenenstil. Fügen Sie im unteren Bereich einen Rechteckpfad hinzu und stellen Sie den Modus auf Vordere Form subtrahieren.
Fügen Sie der Form einen Layer-Strich und eine Verlaufsüberlagerung hinzu.
Zeichnen Sie eine vertikale Linie von 1 px. Setzen Sie die Füllfarbe auf Schwarz. Fügen Sie Ebenenstile hinzu. Reduziere die Deckkraft der Ebenen auf 8%.
Fügen Sie der Form einen kleinen Titel hinzu. Speichern Sie die Charakter-Eigenschaft als Zeichenstile. Ebenenstil-Schatten hinzufügen.
Fügen Sie einen anderen Titel auf der anderen Seite hinzu. Verwenden Sie dieselben Zeichenstile und denselben Schlagschatten.
Fügen Sie einen gewissen Prozentsatz hinzu. Es ist immer eine gute Idee, es als Character Styles zu speichern. Auf diese Weise können Sie das Erscheinungsbild im Fenster Zeichenstile ganz einfach bearbeiten.
Aktivieren Sie das Polygonwerkzeug und setzen Sie in der Optionsleiste seine Seite auf 3. Zeichnen Sie ein kleines Dreieck, das nach oben zeigt. Legen Sie die Füllung fest: # c1c1c1 und Stroke: None.
Ebenenstil hinzufügen Innenschatten.
Fügen Sie einen kleinen Kreis und eine weitere Dreiecksform hinzu - diesmal nach unten zeigend. Verwenden Sie dieselbe Farbe und denselben Ebenenstil.
Prozentsatz hinzufügen Speichern Sie wie üblich den Zeichenstil.
Die Daten sind positiv. Betonen Sie es also, indem Sie den Aufwärtspfeil aktivieren. Ändern Sie die Form. Füllfarbe in # 4ff25d.
Duplizieren Sie die Nummer für andere Daten.
Zeichnen Sie einen ähnlichen Abschnitt für ein kleineres Diagramm. Sie können dieselben Techniken wie oben beschrieben verwenden. Stellen Sie sicher, dass Sie eine kleinere Textgröße für den Titel verwenden.
Zeichnen Sie eine blaue 1 px-Linie innerhalb des Gitters. Setzen Sie die Strichoptionen auf "gestrichelt".
Fügen Sie wie in der Hauptgrafik an jedem Punkt einen Kreis hinzu.
Aktivieren Sie das Stiftwerkzeug. Zeichnen Sie eine neue Form, die die Linie abdeckt, die sie mit der x-Achse verbindet. Verwenden Sie dieselbe Farbe wie die Linie. Platziere die Form hinter den Kreisen.
Fügen Sie ein freies Pixelmuster aus PSDfreemium hinzu.
Reduziere die Deckkraft auf 50%.
Fügen Sie einen Prozentsatz hinzu. In diesem kleineren Diagramm möchten wir auch eine kleinere Textprozentsatzgröße.
Fügen Sie eine weitere Grafik hinzu.
Derzeit arbeiten wir an der Registerkarte "Statistik". Fügen Sie eine weitere Registerkarte hinzu und setzen Sie sie in einen inaktiven Zustand. Doppelter Hintergrund der Registerkarte "Statistik", den wir in Schritt 25 - 27 erstellt haben. Es ist hilfreich, wenn Sie danach die Registerkarte "Statistik" ausblenden. Ändern Sie die Farbe für Füllung und Kontur in # c1c1c1. Kleines Rechteck auf der linken Seite löschen. Bewegen Sie das abgerundete obere Rechteck nach rechts.
Fügen Sie ein einfaches Symbol aus einem Kreis ohne Füllung und Strich hinzu: # 646464 mit einem i darin.
Bringen Sie die Registerkarte "Statistiken" zurück. Zeichnen Sie bei Bedarf eine weitere inaktive Registerkarte.
Aktivieren Sie das Rechteckwerkzeug und zeichnen Sie ein Rechteck hinter der Hauptregisterkarte. Setzen Sie die Füllung auf #eeeeee und Strich auf #cbcbcb.
Zeichnen Sie ein abgerundetes Rechteck. Setzen Sie die Füllung auf einen Farbverlauf von # d6d6d6d bis # f3f3f3 und Stroke # c1c1c1. Dies wird Hintergrund für ein inaktives Menü sein.
Duplizieren Sie das abgerundete Rechteck. Ändern Sie die Farbe in Füllgrad von # ef6526 in fa834d und Stroke: # f16424. Dieser wird für das aktive Menü verwendet. Stellen Sie sicher, dass es unter dem kleinen Dreieck der Registerkarte "Statistiken" platziert wird.
Duplizieren Sie das erste abgerundete Rechteck, um inaktiven Menüs mehr Hintergrund zu bieten.
Fügen Sie der Schaltfläche Text hinzu. Doppelklicken Sie auf die entsprechende Ebene, um den Schattenstil für den Ebenenstil hinzuzufügen. Verwenden Sie für ein inaktives Menü dunklen Text und einen hellen Schatten.
Verwenden Sie für das aktive Menü weißen Text und dunklen Schatten.
Zeichnen Sie ein abgerundetes Rechteck. Sie brauchen sich nicht um Füllungen oder Striche zu kümmern.
Für die Füllung verwenden wir den gleichen Verlauf aus dem vorherigen Menü der Seitenleiste. Aktivieren Sie auch die Pfadauswahl und wählen Sie die Form aus. Klicken Sie mit der rechten Maustaste und wählen Sie "Füllung kopieren".
Kehren Sie zur neuen Form zurück, klicken Sie mit der rechten Maustaste darauf und wählen Sie "Einfügen".
Öffnen Sie die Option Füllen in der Optionsleiste und klicken Sie auf das Symbol unter der Verlaufsvorschau, um die Verlaufsrichtung umzudrehen.
Wiederholen Sie den Vorgang, um die Stroke-Einstellung zu kopieren.
Fügen Sie den inneren Schatten mit den folgenden Einstellungen hinzu.
Aktivieren Sie das Textwerkzeug und die Beschriftung der weißen Schaltfläche. Ebenenstil-Schatten hinzufügen.
Fügen Sie ein kleines Dreieck hinzu, das nach unten zeigt. Füllen: #eeeeee und Schlaganfall: Keine. Fügen Sie denselben Schlagschatten als Beschriftung der Schaltfläche hinzu.
Accentsconagua