Entwerfen Sie die Web 2.0-Oberfläche in Photoshop
Wenn Sie das unten stehende Tutorial verstehen, verstehen Sie die Technik. Damit können Sie sich eine grafische Benutzeroberfläche für eine Website erstellen. Seitennavigation, Tasten, Überschriften, zum Beispiel. Alle Web 2.0-Stil.
Starten Sie eine neue Leinwand. alle Größen. Etwas größer als 450x300px wäre gut. Wähle aus Abgerundetes rechteckiges Werkzeug und zeichnen Sie ein Rechteck, das so groß ist, wie im Bild oben gezeigt.
Doppelklicken Sie auf die Ebene des Rounded Rectangular, um das zu starten Fülloptionen. Ändern Sie die Einstellungen für die folgenden Stile.
Schlagschatten
Deckkraft: 31% Abstand: 1px Streuung: 0% Größe: 5px
Abgeflachte Kante und Relief
Tiefe: 100% Größe: 0px Erweichen: 0px
Gradiant-Überlagerung
Doppelklicken Sie auf Gradiant und legen Sie die folgenden Haltepunkte fest. Standort: 0%, # 1378cd Standort: 100% # 4da5f0
Schlaganfall
Größe: 5px Position: Innen Farbe: # 54abf6
Fügen Sie etwas Text, eine Tagline, eine URL oder etwas anderes ein. Habe es in der Mitte und rechts ausrichten, so dass das Logo später auf der linken Seite platziert werden kann. Lassen Sie uns den Text gestalten. Ich verwende Lucida Sans Unicode. 55pt; glatt; -120 für Zeichenverfolgung (Buchstabenabstand). Doppelklicken Sie auf die Textebene und setzen Sie Folgendes ein Fülloptionen.
Verlaufsüberlagerung
Doppelklicken Sie auf Gradiant und legen Sie die folgenden Haltepunkte fest. Standort: 0%, # 9ec7eb Standort: 100% Ecf6ff
Sie müssen dann das Logo auf der linken Seite des Textes einfügen. Ich verwende ein abgerundetes Rechteck mit einem Radius von 5 Pixel, um das Logo darzustellen. Hier ist die Mischoption Einstellungen für das abgerundete Rechteck.
Inneren Schatten
Deckkraft: 45% Abstand: 0px Größe: 43px;
Abgeflachte Kante und Relief
Tiefe: 100% Größe: 0px Erweichung: 0px Deckkraftmodus: 50% Schattenmodus-Deckkraft: 100%
Gradiant-Überlagerung
Doppelklicken Sie auf Gradiant und legen Sie die folgenden Haltepunkte fest. Standort: 0% # 0e2f4a Standort: 47% # 001a31 Standort: 48% # 002545 Standort: 100% # 0f4b7f
Schlaganfall
Größe: 5px Doppelklicken Sie auf Gradiant und legen Sie die folgenden Haltepunkte fest. Lage: 0% # 1468af Lage: 100% # 50abf8
Lassen Sie uns einen kleinen Glanzeffekt geben. Halt STRG und Linksklick auf abgerundetes Rechteck Ebenen-Thumbnail. Wenn das gesamte abgerundete Rechteck ausgewählt ist, ändern Sie in Rechteckiges Laufschriftwerkzeug, halt ALT und zieht die zweite Hälfte des ausgewählten Bereichs heraus; genau wie das Bild oben.
Erstellen Sie eine neue Ebene. Ziehen Sie es nach oben, so dass es über allen Ebenen liegt. Füllen Sie den ausgewählten Teil mit weißem [#ffffff]; verändere die Deckkraft auf 15%.
Das Tutorial endet hier. Wie Sie dieses Design verwenden, liegt ganz bei Ihnen. Durch geringfügige Änderung der Größe und der Farben kann es als Webkopfzeile oder als Schaltflächen verwendet werden. Hier ist ein Beispiel.
Website-Header
Website-Schaltflächen
