Erstellen Sie ein dunkles, sauberes Website-Design in Adobe Photoshop

In diesem tutorial werden wir lernen, wie design eine dunkle, saubere website in Adobe Photoshop. Wie gehen wir mit diesem tutorial, wir werden mit der Arbeit: einfache Formen (Rechtecke, Linien, Pfeile, etc), Ebenenstile, Muster, Einfuhr und Absatz-Stile, und viele andere Photoshop-design-Techniken, die Sie anpassen können, um Ihre Website-interface-design-workflow.

Über den Autor

Julian Chaniolleau, auch bekannt als Devilcantburn, ist ein freiberuflicher Grafik-und Webdesigner.  Er ist auch ein Autor auf ThemeForest, mit Vorlagen wie 96Display oder Stereoline, dort finden Sie auch weitere seiner arbeiten an devilcantburn.com.

Dieses design ist ein großartiges Beispiel von Julian ' s einzigartigen Stil: dunkel, aber anspruchsvoll genug, um für eine business-Website.  Sie können herausfinden, mehr von Julian, design in seinem ThemeForest-Profil, DevilCantBurn.

Wir Tauchen rechts in!

Schritt 1: einrichten des Dokuments

Erstellen Sie zunächst ein neues Dokument in Photoshop, dass ist 1200px x 1600px.  Werden Sie sicher, dass Ihre Bildschirmauflösung von 72 Pixeln/Zoll und Ihr hintergrund auf weiß gesetzt.  Wir müssen zum freischalten die hintergrund-Ebene, so dass wir können hinzufügen, einige Ebenenstile der rechten Maustaste auf den hintergrund und wählen Sie "Ebene aus Hintergrund". Sie können dann benennen Sie die Ebene wieder in den hintergrund..

Füllen Sie den hintergrund mit der Farbe #101010.

Erstellen Sie nun die folgenden Handbücher (Menü - > Ansicht - > Neue Hilfslinie...) :

• 120px vertikale
• 600px vertikal
• 1080px vertikale

Jetzt haben Sie die Grenzen und die Mitte der Schnittstelle.

Schritt 2: Organisieren Sie Ihre Gruppen...

 Organisation ist wirklich wichtig für meinen eigenen workflow - so ist der nächste Schritt zu beginnen Erstellung unserer Schicht-Gruppen.  Ausgehend organisiert ist wichtig für ein Hauptgrund: die meisten großen website-Projekten Ende mit Hunderten von Ebenen, so dass, wenn Sie nicht anfangen mit der Organisation im Hinterkopf, ist es leicht, sich zu verirren, wenn Sie nicht die Zeit nehmen, um Elemente zu gruppieren in "Ordner", und damit alles den richtigen Namen.

 In der Ebenen-panel, klicken Sie auf das Symbol, um einen neuen Ordner anzulegen, klicken Sie doppelt auf den Namen des Ordners, um den Namen zu Bearbeiten. Machen Sie dasselbe für alle Ordner.

Der Haupt-layer-Ordner, die wir wollen, sind :

• Header
•  Regler
• Main
• Fußzeile

Schritt 3: Erstellen der Header

 Wählen Sie die "header" - Ordner in der Ebenen-panel. Wählen Sie das Rechteck-Werkzeug aus dem Vektorformen Bereich der Symbolleiste:

Zeichnen Sie ein Rechteck. Benennen Sie es wie "Top-bar-bg". Drücken Sie Strg+T oder Cmd+T (Mac), und legen Sie die Eigenschaften werden 1200px breit und 10px hoch:

 Nun lassen Sie ' s fügen Sie einige subtile styling, Doppel-klicken Sie auf das farbige thumbnail in der Ebenen-Bedienfeld, um die Farbe auf #252525. Doppelklicken Sie auf die Schicht, um die FX-Schicht wie diese:

 Diese subtile "innere Schatten" wird einen Rahmen hinzufügen Effekt an der Unterseite dieses Rechtecks - das ist wichtig zu trennen es vom rest der header-design.

Schritt 4: Erstellen Sie das Menü

Erstellen Sie einen neuen Ordner mit dem Namen "Top-Menü" in der KOPFZEILE der Gruppe.

Zeichnen Sie ein neues Rechteck.  Benennen Sie es wie "Top Menu-bg".  Drücken Sie Strg+T oder Apfel+T, und legen Sie die Eigenschaften wie das "Top-bar-bg" aber mit 90px Höhe und 10px in der Y-Achse. Also dieses Rechteck wird gerade unter die "Top-nar-bg" - Ebene in der Ebenen-panel.

Erstellen Sie das Menü text, wie Sie brauchen.  Ich verwende die schriftart "Droid Serif", um das Menü zu erstellen, aber Sie können alles, was, die Sie möchten. Position bei 20 px von der rechten Hilfslinie.

 Ich habe bei 4 "Räume" (drücken Sie die Leertaste 4x) zwischen jedem Punkt und dem font-size ist 18px.

Schritt 5: setzen Sie das Logo

Erstellen Sie einen neuen Ordner mit dem Namen "Top-Logo" in der KOPFZEILE der Gruppe über alle Gruppen. Wählen Sie es und gehen Sie zu Menü > Dateien > Importieren. In den resources-Ordner habe ich inklusive einer Probe-logo mit dem Namen "logo_zombie.psd". Wählen Sie es und positionieren Sie es an 130px von Links und 5px von oben.

 Sie können einen neuen FX-Stil auf dieses logo, wie Sie benötigen.

Schritt 6: Erstellen Sie die Schieberegler

 Wählen Sie den SCHIEBEREGLER Gruppe und erstellen Sie ein Rechteck wie Schritt 3 und legen Sie die Eigenschaften mit 400px Höhe und 100 Pixel in der Y-Achse.

 Benennen Sie Sie so etwas wie "Gradient" und klicken Sie doppelt auf das farbige thumbnail in der Ebenen-Bedienfeld, um die Farbe auf #77b400. Doppelklicken Sie auf die Schicht, um die FX-Schicht wie diese:

Farbverlauf Schwarz (#00000) mit einer Deckkraft von 100% Schwarz mit opactity bei 0

Nun, sollten Sie ein design wie dieses :

Diese Strategie der Zugabe von einem "Schatten-Gradient" anstelle von festen Farben ist wichtig, weil wir einfach die Farben später durch Anpassen der Basis-Rechteck-Farbe ändern können.

 Als Nächstes Erstellen Sie einen neuen Ordner mit dem Namen "slider_block".  Erstellen Sie ein Rechteck (mit der Vector-Werkzeuge (U) wie immer) in diese Gruppe mit dem Namen "Transparenz".

 Positionieren Sie es mit diesen Werten : Doppel-Klick auf die Ebene im Ebenen-Bedienfeld zu öffnen, die FX-Layer-Optionen. und es so einstellen :

 Duplizieren Sie die "Transparenz" - Ebene, entfernen Sie die FX-layer-Optionen, und nennen Sie es "Bild".
Den hintergrund opactity zu 100% und die Größe ändern mit diesen Einstellungen zu erstellen, das multi-layer-Effekt:

Schritt 7: Erstellen Sie die Schieberegler-Elemente

Erstellen Sie ein neues Dokument 100px x 100px.  Wählen Sie die Custom-Vektor-Form (U) aus der tools-Leiste und klicken Sie rechts auf das Dokument, um die Liste der benutzerdefinierten Vektor-Formen.  Erstellen Sie den Pfeil, ich werde beginnen mit einem Standard Pfeil-Form, und dann werden wir es anpassen:

Erstellen Sie die Form mit über eine 50 Pixel Breite.  Nennen Sie die Ebene "Pfeil-regler".  Verwandeln die Form, wie Sie brauchen... mit dem weißen Pfeil-Werkzeug (A) können Sie die Vektor-Pfade, um Ihren eigenen Pfeil...

Setzen Sie einen FX-Schicht auf der Schicht mit diesen Einstellungen :

 Entfernen der hintergrund für dieses Dokument, und speichern Sie das Dokument als : ArrowSlider.psd der PSD-Ordner.

Platzieren Sie diesen Pfeil in der "slider_block" - Gruppe. Um das zu tun, Menü - > Datei - > Importieren...
Wählen Sie die ArrowSlider.psd und legen Sie es an die gewünschte position neben dem Schieberegler.

 Duplizieren Sie die Pfeil-Ebene (Strg+J oder Cmd+J) erstellen Sie den Pfeil nach Links an und positionieren Sie es.
Verwenden Sie Menü > Bearbeiten > Transformieren > Drehen um die horizontale Achse, drehen Sie den Pfeil in die richtige Richtung.

Schritt 8: Markieren Sie den Schieberegler

Ausblenden des "slider_block" - Gruppe.
 Erstellen Sie eine neue leere Ebene, und verwenden Sie die Kreis-Auswahl-Werkzeug (M) um einen Kreis von etwa 200px.
Fülle ihn mit weißer Farbe.

 Lassen Sie Ihre Auswahl, und verwenden Sie dann Filter - > Gaußscher Weichzeichner und stellen Sie es auf 50px.

 Legen Sie die layer-fusion auf "overlay" und verschieben Sie es an die Spitze der Schieberegler.
 Dupliziere diese Ebene 2 mal und positionieren Sie die Schichten am unteren Rand der slider-Bereich, Links und rechts...

Schritt 9: optimieren Sie den Schieberegler

Duplizieren Sie die "gradient" - Schicht, und benennen Sie es "dunkel-bar". Reduzieren Sie die Höhe auf 20px und positionieren Sie es an der Unterseite ot die "gradient" - Schicht.

Ändern Sie die Farbe der Ebene, auf Schwarz statt der Farbverlauf und legen Sie die Ebene hintergrund-Deckkraft auf 60%.
Doppelklicken Sie zum öffnen des FX-layer-Optionen, und erstellen Sie einen Schlagschatten und innershadow wie diese:

Verschieben Sie die Ebene an 1px nach unten.
 Jetzt haben Sie eine schöne hervorgehobene Linie zwischen dem Läufer und dem schwarzen hintergrund.

Schritt 10: Stellen Sie den Schieberegler Schweben!

 Öffnen Sie die background.jpg die Datei aus den resources-Ordner (aus der heruntergeladenen Dateien) und gehen Sie auf Menü > Bearbeiten > Muster Festlegen".... Dann schließen Sie die Datei.
 Wählen Sie nun die hintergrund-Ebene, und doppelklicken Sie auf es zu öffnen Sie den FX-layer-Optionen, und klicken Sie auf die Registerkarte Muster.  Hier wählen Sie Ihren neuen hintergrund, gerade erstellt.

 Nun erhalten Sie die Auswahl des Transparenz-Ebene (Strg + Klick oder Cmd + Klick auf die Ebene).
 Erstellen Sie eine neue Ebene namens "Shadow" und platzieren Sie es unter der "Transparenz" - Ebene.
Füllen Sie es in schwarz und fügen Sie einen Gaußschen Weichzeichner auf.
Menü > Filter > Weichzeichner > Gaußscher Weichzeichner... und um es mit 20px Länge.
Jetzt verwandeln es, um es wie ein Schlagschatten....

Wieder einmal, verwenden Sie das Menü > Filter > Weichzeichner > Gaußscher Weichzeichner... aber jetzt mit 5px Länge.
Jetzt wandeln Sie wieder um Ihre Größe zu entsprechen, die Transparenz der Schicht....

 Halten ausgewählt, die "Schatten" - Ebene und nehmt die "Transparenz" - Schicht, die Auswahl (Strg+Klick oder Cmd+Klick auf die Ebene im Bedienfeld "Ebenen").

 Nun invertieren Sie die Auswahl mit Strg+i oder Strg+i und klicken Sie auf das Symbol zum erstellen einer Deckkraftmaske auf die "Schatten" - Ebene. Der Schatten ist nun verbirgt sich hinter der "Transparenz".

Schritt 11: Erhöhen Sie das Logo

 Kurz vor bewegen wir uns auf den wichtigsten Teil, wir gehen zu verbessern das logo, um es dynamischer.

Erstellen Sie eine neue leere Ebene unter die logo-Ebene und nennt Sie "Schatten-logo".  Holen Sie sich die Auswahl der logo-Ebene, und füllen Sie die "Schatten-logo" - Ebene in schwarz.

Fügen Sie einen Gaußschen Weichzeichner mit 1,5 px Länge.
Transformieren es. Strg + T oder Cmd + T, um es zu transformieren, bewegen Sie den referer Punkt ganz Links und rechts verschieben
Griff an der Unterseite für 20px...

Nun hast du eine schöne Tiefe Schatten-Effekt.  Sie können auch hinzufügen, mehr Wirkung auf das logo selbst, wenn Sie wollen!

Schritt 12: die Spalten Definieren

Jetzt gehen wir weitere guides zu erstellen, die 4 Spalten, der rest des Inhalts wurde mit...

Erstellen Sie die folgenden Hilfslinien (Menü - > Ansicht - > Neue Hilfslinie...) :

• 355px vertikale
• 375px vertikale
• 590px vertikale
• 610px vertikale
• 825px vertikale
• 845px vertikale

Wir haben jetzt 4 Spalten 215px jeder und 20px zwischen Ihnen.

Schritt 13: Slogan-Block

 Importieren Sie die geek_zombie.png aus dem Ordner resources und positionieren Sie es an die Mitte der ersten Spalte.

 Erstellen Sie eine große Textzeile nach dem Motto mit dem text Ihrer Wahl. Ich benutzte die schriftart "Droid Serif" in der Größe von 30px und line-height auf Sie 42pt. Passen Sie die Typografie, wie Sie möchten, obwohl ;)

Zeichnen Sie ein Rechteck unter dem Motto mit 7px der Höhe.

Auf dem schwarzen Rechteck erstellen der FX-Layer-Optionen wie diese :

Sie haben jetzt eine schöne Fase (gedrückt), bar.

 Wählen Sie die 3 Schichten (Zombie + Slogan + schwarze Balken) und drücken Sie Strg + G oder Cmd + G zum gruppieren.  Benennen Sie die Gruppe "Slogan". Beachten Sie, wie wir den Aufenthalt organisiert durch den gesamten Prozess!

Schritt 14: Die Erste Spalte Block

Nehmen Sie das Textwerkzeug und erstellen einen Titel.  Ich bin mit 30pt Art wieder - beachten Sie, wie dieser ist der gleiche wie der slogan, zu helfen, die Typografie ähnlich. Dies hilft, um sicherzustellen, dass eine einheitliche, professionelle Aussehen und über das ganze design.

 Definieren Sie eine zone der text bei rund 128px der Titel und einige kleine "Füller" - text drin.  Ich bin mit 13pt Arial, aber Sie können verwenden, was Sie möchten.

 Duplizieren Sie die schwarzen Balken, die wir erstellt haben, für die der slogan der Schritt vor und legen Sie es unter den text 20px von unten in den text.
Die Größe es zu machen, füllen Sie die erste Spalte.

Erstellen Sie einen Bild-Bereich mit den Vektor-Form-Werkzeug (U). 215 x 88px.
Duplizieren, benennen Sie es als "Tranparency_1col" und ziehen Sie es in der Höhe zu erhalten, ein block von 215 x 108px.
Drücken Sie Strg+, oder Strg+, um die Ebene unten im ebenenfenster.

 Wählen Sie die "Transparenz" - Ebene und kopieren Sie die FX-Ebenenstil legen Sie es auf die Ebene einfach dupliziert ("Tranparency_1col").

Jetzt können Sie Ihr Bild über den Bild-Bereich. Mit der rechten Maustaste auf das Bild und wählen Sie "Schnittmaske Erstellen".

Schritt 15: Erstellen der Anderen Spalten

 Sie können jetzt dupliziert die erste Spalte (layer-Gruppe), und verschieben Sie es dann in die zweite Spalte. Ändern Sie die Inhalte (Bild/text) benötigt.

Machen Sie dasselbe für die Spalten 3 und 4...

Schritt 16: In Der Fußzeile

 Gehen Sie zu Menü - > Image - > Canvas size und Bearbeiten Sie die Größe der Leinwand wie diese :

Zeichnen Sie ein Rechteck. Benennen Sie es wie "Footer-bg". Drücken Sie Strg+T oder Cmd+T (Mac), und legen Sie die Eigenschaften auf :

 Doppel-klicken Sie auf das farbige thumbnail in der Ebenen-Bedienfeld, um die Farbe auf #101010. Doppelklicken Sie auf die Schicht, um die FX-Schicht wie diese :

Markieren und duplizieren Sie die Ebenen "dunkle bar" und "Gradient" aus dem Slider-Gruppe.

 Gruppe die Schichten und legen Sie Sie unter dem "footer-bg" in der Ebenen-panel.

Verschieben Sie den unteren Rand des Dokuments.

Größe ändern, um die Formatvorlage zu erstellen, die Sie wollen.
 In meinem Beispiel habe ich die verlaufsebene 35px hoch und die "Dunkel-bar" Schicht 8px hoch...

 Setzen Sie das logo unten rechts auf 20px der guide Recht.

Duplizieren Sie die top-Menü-items, um Sie in der Fußzeile über den "footer-bg" - Ebene.

Erstellen Sie eine copyright-Zeile in Arial, 11pt, Farbe schwarz.

Duplizieren Sie die "footer-bg" und die Größe in der Höhe auf 10px.
Bewegen Sie es nur über die "footer-bg". Das erstellen einer schön geschliffen-Effekt für das untere Menü.

Fertig! Erstellen Sie Ihre Eigenen Benutzerdefinierten Versionen!

Fazit

Vielen Dank für folgende entlang!  Ich hoffe, du bist in der Lage, einige der tricks und Techniken in diesem tutorial in einigen Ihrer eigenen Projekte. Wenn Sie an alles erinnern, ich hoffe, dass der Aufenthalt organisiert ist entscheidend für die Schaffung einer gut gestalteten Website.  Diese gleichen Ebenen-sets kann verwendet werden, um die Erstellung der HTML - /CSS-framework, wenn Sie mit dem codieren beginnen. Nochmals vielen Dank!