Wie man eine Website-Layout in Photoshop zu entwerfen

Wie man eine Website-Layout in Photoshop zu entwerfenWie man eine Website-Layout in Photoshop zu entwerfen

In diesem Tutorial lernen Sie, wie die Website-Layout unten in Photoshop gesehen zu entwerfen. Klicken Sie hier, um das fertige Layout zu sehen. Sie werden auch lernen, wie dies in den nächsten paar Tutorials zu einer optimierten HTML-Seite zu konvertieren.

Dieses Tutorial ist Teil eines 4 Seite Anleitung, wie man eine einfache Website mit Photoshop und Dreamweaver zu erstellen.

Wir haben ein Layout mit einem schwarzen Hintergrund mit einem Bereich für das Logo, einem auffälligen grafischen Header, Navigations-Links, Inhalte und Bilder entworfen.

Denken Sie daran, während Ihr Layout entwerfen, müssen Sie Räume für die folgenden zu definieren.

  • Kopfzeile – Dies könnte eine Grafik-Banner sein
  • Logo
  • Buttons – Links für zu Hause, über uns, kontaktieren Sie uns usw.
  • Bilder
  • Inhaltsbereich
  • Copyright-Informationen

Befolgen Sie die folgenden Schritte, um Ihre Website-Layout in Photoshop zu entwerfen:

  1. Öffnen Sie eine neue Datei in Photoshop, indem Sie auf Datei / Neu und eine Breite von 750pixels und Höhe von 450px eingeben.
  2. Farbe der Hintergrund mit Schwarz von Schwarz in der Vordergrundfarbe auswählen und die Auswahl der Farbeimer Werkzeug und klicken Sie auf die Leinwand. Ihr Hintergrund wird nun schwarz sein.
  3. Fügen Sie eine neue Ebene in der durch einen Klick Layer hinzufügen Symbol in der Ebenen-Palette. Wenn Ihre Ebenenbedienfeld nicht geöffnet ist, dann gehen Sie zu Fenster / Ebenen. Nennen Sie die neue Ebene Copyright. Wählen Auswahlrechteck-Werkzeug und ziehen Sie den unteren Banner mit einer Breite von 750pixels um 21 Pixel zu machen. Farbe dieser Banner mit der Farbe # 303030.
  4. Wählen Horizontal Typ Tool. Eine Textebene wird automatisch erstellt. Geben Sie nun den Text für Urheberrecht, z.B. "Copyright © 2005 www.YourWebBusiness.com. Alle Rechte vorbehalten.

Wählen Sie Horizontal Typ Tool. Eine Textebene erscheint automatisch. Geben Sie den Text der Schaltfläche auf der oberen Banner zu: "Home l Sitemap l news l-Downloads".

  • Fügen Sie eine neue Ebene. Machen Sie nun die graue horizontale Linienfarbe # 808080 mit Einzel Marquee Werkzeug .Gehe zu Editgt; Stroke. Wählen Strichbreite 1 Pixel. Farbe # 808080. Location Center. Klicken Sie auf OK.
  • Rechtsklick auf die Ebene, und wählen doppelte Schicht 3-mal, da Sie 4 Zeilen haben. Setzen Sie die Linien in den entsprechenden Ort: im Boden, Mitte, oben.
  • Jetzt können Sie den Text der Schaltfläche auf der zweiten oberen Banner in einer neuen Ebene zum Beispiel eingeben Über uns l Leistungen l Produkte l Kundschaft l Kontakt mit uns auf.
  • Nun definieren Sie das Logo Bereich mit dem Auswahlrechteck. Zum Editgt; Stroke. Wählen Sie Strichbreite 1 Pixel. Die Farbe ist # 808080. Location Center. Füllen Sie innen mit schwarzer Farbe mit Malwerkzeug. Nennen Sie es Logo-Bereich.
  • Wählen Sie das Horizontale Text-Werkzeug und geben Sie Ihren Firmennamen oder Website-Namen.
  • Wählen Sie das Horizontale Text-Werkzeug und geben Sie Inhalt in der Mitte.
  • Legen Sie Ihre Header (Siehe unser Tutorial zum Erstellen eines ins Auge fallenden Header). Dies könnte auch jedes Bild sein, das Sie wählen. Das Bild muss eine horizontale Banner zu sein. Öffnen Sie Ihre Bilddatei. Gehen Werkzeug zu bewegen. Ziehen Sie aus der Bilddatei zu diesem Layout in der Mitte des Layouts.
  • Zeichnen Sie die Felder auf der rechten Seite zu sehen mit der Polygon-Lasso-Werkzeug. Zum Editgt; Stroke. Wählen Sie Strichbreite 1 Pixel. Die Farbe ist # 808080. Location Center.
    Benennen Sie Ihre Schicht borderpics. Machen Sie zwei weitere Boxen. Passen sie gleichermaßen in der rechten Seite des Layouts. Legen Sie die Bilder von ihnen zu Ihrem Layout und die Benennung der Schichten ziehen.
  • Ziehen Sie die Ebene borderpics auf der 3 pic Schichten. Die Ränder der Bilder haben entsprechend dem Design der Schachtel zu schneiden.
  • Erstellen Sie nun die weiße Bänder mit Text am unteren Rand jeder der rechten Grafik mit dem Auswahlrechteck-Werkzeug. Füllen Sie das Feld mit weißer Farbe mit Malwerkzeug. nennen sie es "whitebandpics". Wählen Sie das Horizontale Text-Werkzeug. Eine Textebene wird automatisch erstellt. Geben Sie nun den Text für Geschenke. Folgen Sie den gleichen für den Rest der Bilder. Sie können für die Bilder hier klicken – pic1. pic2. pic3. Sie können diese Bilder in Ihr Layout ziehen.

    Nun, wenn Sie Ihr Design fertig ist, können Sie zum nächsten Schritt gehen, um Ihre Website zu schaffen, die Scheiben zu machen.

  • Dieses Tutorial ist Teil eines 4 Seite Anleitung, wie man eine einfache Website mit Photoshop zu erstellen.

    Sie können einige große Web-Site-Layout Design-Ideen aus unserer Vielzahl von vorgefertigten Website-Layout-Vorlagen bekommen!

    Quelle: entheosweb.com


    Schreibe einen Kommentar

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

    20 − 6 =