Heute werden wir in Photoshop eine fantastische Website-Vorlage erstellen, die eine Reihe fortschrittlicher Techniken verwendet.
Ich werde Sie in zehn einfachen Schritten durch den gesamten Prozess führen und Ihnen einen Link zum Herunterladen der fertigen Vorlage geben. Lass uns anfangen!
Vorschau & Download
Bevor wir loslegen, sehen Sie hier, was wir bauen werden. Sie können die PSD nach Belieben herunterladen und verwenden. Achten Sie darauf, den Hintergrund zu würdigen, wie im Artikel unten angegeben.
Laden Sie die geschichtete PSD herunter
Schritt 1: Erstellen Sie ein neues Dokument
Erstellen Sie zunächst ein neues Dokument in Photoshop. Machen Sie die Leinwand 1200 Pixel breit und 1700 Pixel hoch. Machen Sie sich keine Sorgen, unsere Inhalte werden nicht annähernd so weit sein, wir möchten uns nur viel Raum zum Arbeiten geben.
Um den Inhaltsbereich zu definieren, zeichnen Sie ein Feld mit einer Breite von 960 Pixeln, zentrieren Sie es horizontal in der Leinwand, ziehen Sie Hilfslinien nach links und rechts aus und löschen Sie das Feld. Ihr leeres Dokument sollte ungefähr so aussehen wie das Bild oben (Farbe spielt an dieser Stelle keine Rolle).
Schritt 2: Ergreifen Sie das Hintergrundbild
Die Inspiration für dieses Design stammt von einer fantastischen kostenlosen Ressource von Matthew Skiles. Matthew erstellte eine schöne hölzerne Hintergrundtextur und verteilte sie frei auf Dribbble. Denken Sie daran, dass Sie, wenn Sie diese Textur verwenden möchten, einen Link zu Matthew angeben müssen.
Nehmen Sie die Holzstruktur aus dem obigen Link und skalieren Sie sie so, dass sie dieselbe Breite wie Ihre PSD hat. Es erstreckt sich nur etwa auf halber Höhe vertikal, aber das ist an dieser Stelle perfekt.
Schritt 3: Hintergrundverlauf hinzufügen
Der hölzerne Hintergrund sieht in Photoshop großartig aus, wird jedoch aufgrund der endlosen Browseroberfläche einige Probleme im Web verursachen. Es gibt zwei grundlegende Optionen, um es in ein nahtloses Hintergrundmuster zu konvertieren oder in eine Volltonfarbe zu verlaufen.
In diesem Fall wählte ich den einfachen Ausweg und beschloss, Farbverläufe auf der linken und rechten Seite des Hintergrunds anzuwenden. Erstellen Sie dazu eine neue Ebene und setzen Sie Ihre Vordergrundfarbe auf # 421a0e oder eine andere dunkle Farbe, die Sie vom Holzbild mögen. Stellen Sie als Nächstes den Verlauf so ein, dass er von dieser Farbe auf transparent wechselt, strecken Sie den Verlauf von der linken Seite zur Mitte und wiederholen Sie den Verlauf auf der rechten Seite.
Dies gibt uns einen schönen, sanften Übergang zu einer Volltonfarbe. Wenn wir diese Site codieren würden, würden wir dieses Bild in den Hintergrund setzen und die Hintergrundfarbe in CSS auf # 421a0e setzen. Unabhängig von der Bildschirmgröße des Viewers wird der Hintergrund der Website perfekt aussehen.
Schritt 4: Das Logo
Das Logo oben auf der Website ist ein Text, der in Ballpark geschrieben wurde, einer fantastischen, kostenlosen Schrift, die von Mickey Rossi entworfen wurde. Geben Sie ein Wort ein, machen Sie es schwarz und setzen Sie die Füllung auf etwa 25%. Wenden Sie als Nächstes einen inneren Schatten und einen Schlagschatten an, um dieses Buchdruck-Aussehen zu erhalten. Hier sind die Einstellungen, die ich verwendet habe:
Beachten Sie, dass sich der Schatten sehr von den Standardeinstellungen unterscheidet. Das liegt daran, dass wir eigentlich den Schatten als Hack verwenden, um eine äußere Fase zu erzeugen. Stellen Sie sicher, dass die Farbe auf Weiß gesetzt ist, und ändern Sie den Mischmodus von Multiplizieren (Standard) auf Bildschirm (funktioniert mit Weiß).
Der Trick für den inneren Schatten besteht darin, ihn nicht zu übertreiben. Gehen Sie auf die Entfernung ein und stellen Sie sicher, dass die Deckkraft nicht zu dunkel ist. Diese Einstellungen sollten Ihnen den fantastischen Effekt geben, den Sie unten sehen:
Geben Sie als Nächstes einen Subtext ein, um unter das Logo zu gelangen und denselben Effekt anzuwenden. Ich habe eine einfache Helvetica Bold verwendet und alle Großbuchstaben eingegeben.
Schritt 5: Fügen Sie einige Lichter hinzu
Um die Lichter oben in der Vorlage hinzuzufügen, verwenden wir einen sehr einfachen Trick. Schnapp dir einen schönen weichen weißen Pinsel und klicke einmal auf deine Leinwand, um einen unscharfen weißen Punkt zu erzeugen. Drücken Sie nun Befehlstaste-T, um den Punkt mit dem Werkzeug "Frei transformieren" wie unten gezeigt zu strecken.
Halten Sie die Command-Shift-Option-Taste gedrückt, während Sie auf ein Ecksteuerelement klicken und es ziehen. Dies sollte beide Ecken gleich bewegen.
Sobald Sie eine Lichtform haben, die Sie mögen, duplizieren Sie die Ebene zweimal und streuen Sie die Lichter aus. Dann werfen Sie sie alle in eine Ebenengruppe und setzen Sie den Mischmodus der Gruppe auf Überlagern. Sie können auch herumspielen, indem Sie jedem Licht einen äußeren Schein hinzufügen, um den Effekt zu optimieren.
Schritt 6: Das Feld "Ausgewählte Inhalte"
Unter dem Logo erstellen wir eine große Box, die als Platzhalter für alle Inhalte dient, die Sie präsentieren möchten. Dies ist ein großartiger Ort, um einen jQuery-Bildschieber einzubinden.
Um zu beginnen, zeichnen Sie einfach ein Rechteck und füllen es mit einem Farbverlauf oder einer Volltonfarbe. Das spielt keine Rolle, da die Idee darin besteht, Inhalte darüber zu platzieren. Stellen Sie sicher, dass Sie sich in den zuvor eingerichteten 960-Handbüchern gut aufhalten.
Als Nächstes fügen wir einen dieser trendigen geschwungenen Schatten hinzu, die gerade im Webdesign so beliebt sind. Fügen Sie dazu einen typischen Schatten aus dem Ebeneneffektmenü hinzu. Nachdem Sie den Schlagschatten angewendet haben, klicken Sie mit der rechten Maustaste auf das kleine Effektsymbol in der Ebene und wählen Sie "Ebene erstellen". nahe dem Boden. Wie der Name schon sagt, wird aus dem Schatteneffekt eine tatsächliche Schattenebene.
Verwenden Sie nun den Warp-Modus innerhalb der freien Transformation, um den unteren Rand des Schattens wie im Bild unten zu krümmen.
Der Gesamteffekt lässt die Ecken so aussehen, als würden sie sich ein wenig zusammenrollen, während die eigentliche Inhaltsbox eine Standardform bleibt, die sich in der Entwicklungsphase leicht mit Bildern füllen lässt.
Schritt 7: Navigationsbereich
Geben Sie direkt über dem Inhaltsfeld ein paar Navigationsoptionen ein. Ich habe Museo verwendet, eine kostenlose Schriftart, die leicht mit @ font-face in CSS verwendet werden kann.
Wie Sie sehen, kommt die Vorlage gut voran. Wir haben den oberen Abschnitt fertiggestellt und können zum nächsten Abschnitt wechseln.
Schritt 8: Farbbalken
Unmittelbar unterhalb des Inhaltsbereichs sollte der Bereich liegen, an dem die Holzstruktur endet. Erstellen Sie eine Ebene und füllen Sie diesen Abschnitt mit # 3c1306 bis zum Ende aus. Fügen Sie dann Platzhalterinhalt ein.Ich entschied mich für ein dreispaltiges Layout, das die Box-Behandlung von vorhin wiederholte, und verwendete Museo erneut für die Kopfzeilen.
Das Schwierigste dabei ist, den Farbbalken vom hölzernen Hintergrund abzuheben. Wenn Sie genau in das Bild oben schauen, können Sie sehen, dass ich einen Farbverlauf von Schwarz zu Transparent nach oben gestreckt habe, so dass es aussieht, als ob die Box einen Schatten auf das Holz wirft. Um hier noch mehr Kontrast hinzuzufügen, habe ich etwas Weiß mit einem großen, weichen Pinsel gemalt, die Deckkraft des Weiß auf 75% reduziert und den Mischmodus auf Überlagerung eingestellt. Dies ist ein großartiger Trick, um dunkle Bereiche einer Textur aufzuhellen.
Schritt 9: Die Angebotsbox
Am unteren Rand der Farbleiste habe ich ein Kästchen für ein Kundenangebot eingefügt. Dies ist ein dreistufiger Prozess. Zeichnen Sie zuerst ein abgerundetes Rechteck, das etwas dunkler als die Hintergrundfarbe ist. Wenden Sie dann die gleiche Technik an, die wir für das Logo oben verwendet haben (weißer Schatten auf Bildschirm + innerer Schatten). Zum Schluss noch etwas Text. Ich habe eine kursive Version von Georgia verwendet.
Schritt 10: Die Fußzeile
Um die Vorlage fertig zu stellen, habe ich ein wenig von der Holzstruktur heruntergezogen und viele der oben gezeigten Schritte wiederholt. Zuerst habe ich auf der Seite Gradienten hinzugefügt, wie wir es am Anfang gemacht haben. Dann fügte ich einen weiteren Schatten am unteren Rand der Farbleiste hinzu, genau wie wir oben. Schließlich habe ich den gleichen Effekt wiederholt, den wir bereits dreimal verwendet haben, um einige grundlegende Social Media-Symbole und den Attributionslink für die Hintergrundtextur hinzuzufügen.
Fazit
Mit diesen letzten Schritten sind Sie alle fertig! Unter anderem haben wir gelernt, wie man einen strukturierten Hintergrund zu einer Volltonfarbe ausblendet, damit er im Web funktioniert, wie man einen Buchdruckeffekt in Holz erzeugt und ihn auf verschiedene Weise anwendet, wie man tolle Illusionen erzeugt und wie So verwenden Sie den Überblend-Mischmodus, um dunkle Bereiche einer Textur aufzuhellen.
Ich hoffe, Sie haben viel aus dem Tutorial gelernt. Vergessen Sie nicht, die PSD herunterzuladen! Wenn Sie es in einem Projekt verwenden, lassen Sie in den Kommentaren unten einen Link, damit ich es auschecken kann (optional, aber erwünscht).