Share
In diesem Lernprogramm erstellen wir ein kreatives Blog-Layout mit meist einfachen Formen, ein paar Pinseltechniken, einigen Bildern und einer Dosis Photoshop-Einfallsreichtum. Das Erstellen von Webdesign-Layouts ist einfacher als Sie denken. Sie können lernen, attraktive Designs schnell zu erstellen. Das Erstellen dieses Entwurfs dauert weniger als zwei Stunden und Sie erhalten auf dem Weg einige professionelle Tipps. Lass uns anfangen!
Schauen Sie sich das Bild an, das wir erstellen werden. Das endgültige Bild ist darunter oder Sie können hier ein Bild in voller Größe anzeigen.
Um dieses Tutorial abzuschließen, müssen Sie das 960-Rastersystem herunterladen. Jetzt fangen wir an.
Öffnen Sie die Vorlage "960_grid_12_col.psd" in Photoshop. Es wird wie das unten gezeigte Bild aussehen. Das Rastersystem ist hilfreich, da Sie das Layout schnell ausrichten können.
Wählen Sie die Hintergrundebene aus und drücken Sie Befehlstaste + J. Dies ist die Verknüpfung, um eine Ebene zu duplizieren. Die Verwendung von Verknüpfungen beschleunigt Ihren Entwurfsprozess. Für diese neue Ebene fügen wir eine schöne Verlaufsfarbe hinzu. Gehen Sie nun zu Ebene> Ebenenstil> Verlaufsüberlagerung und verwenden Sie die folgenden Einstellungen.
Blende jetzt das Raster aus, um das Design besser zu sehen. Halten Sie Ihr Raster sichtbar, da Sie die Form besser ausrichten können. Wählen Sie das abgerundete Rechteckwerkzeug aus und erstellen Sie eine Form über dem Layout.
Fügen Sie für diese Navigationsleiste die folgenden Ebenenstile hinzu.
Verwenden Sie dasselbe Werkzeug (abgerundetes Rechteckwerkzeug), um eine andere Form zu erstellen und sie mit der Farbe zu füllen: # 001424.
Fügen Sie den folgenden Ebenenstil für diese Form hinzu.
Erstellen Sie mit dem Werkzeug "Abgerundetes Rechteck" eine andere Form und verwenden Sie Weiß als Farbe.
Fügen Sie für diese Form auch einige einfache Ebenenstile hinzu und ändern Sie den Füllwert auf 10%..
Hier ist das Ergebnis bis jetzt.
Über dieser letzten Form wird ein Bild platziert. Ich habe einige Bilder aus einigen Tutorials verwendet, die ich für Grafpedia erstellt habe, die als gute Bilderbeispiele für dieses Design dienen. Sie sollten natürlich Ihre eigenen Bilder verwenden.
Nun müssen Sie die Auswahl für dieses Bild laden. Um die Auswahl zu laden, wählen Sie die Ebene in Ihrer Ebenenpalette aus und wählen Sie dann Auswahl> Auswahl laden. Wie im folgenden Bild sehen Sie eine Auswahl rund um das Bild.
Erstellen Sie eine neue Ebene über allen Ebenen, indem Sie diese Tastenkombination verwenden: Befehlstaste + UMSCHALT + ALT + N. Über der neuen Ebene zeichnen Sie eine horizontale Linie. Halten Sie die Umschalttaste gedrückt, wenn Sie die Zeichnung erstellen. Auf diese Weise wird die Zeichnung horizontal perfekt.
Drücken Sie Befehlstaste + D, um die Auswahl aufzuheben. Verwenden Sie nun das abgerundete Rechteckwerkzeug, um eine weitere Form mit der Farbe # 4b6e82 zu erstellen.
Fügen Sie für beide Formen die folgenden Ebenenstile hinzu.
Schnappen Sie sich das Ellipse-Werkzeug und erstellen Sie eine Form direkt unter der Form der Seitenleiste.
Gehen Sie zu Filter> Unschärfe> Gaußsche Unschärfe und verwenden Sie die folgenden Einstellungen. Photoshop fragt Sie, ob Sie die Form rastern möchten, fahren Sie fort und drücken Sie OK.
Wie Sie im vorherigen Schritt sehen können, haben wir dort einen Schatten erstellt. Lassen Sie uns nun diesen Schatten durch Hinzufügen von Lichtern betonen. Wählen Sie das Linien-Werkzeug aus, legen Sie die Stärke der Linie auf 1 Pixel fest und erstellen Sie dann eine vertikale Linie (siehe Abbildung).
Klicken Sie mit der rechten Maustaste auf die Ebene und wählen Sie Ebene rastern.
Wählen Sie das Radiergummi-Werkzeug aus und wählen Sie einen glatten, runden Pinsel mit ca. 100px. Verwenden Sie es, um den oberen Teil und den unteren Teil der Linie zu löschen.
Erstellen Sie mit derselben Technik eine weitere Linie über der Seitenleiste.
Direkt unter dieser weißen Linie erstellen Sie eine weitere, die schwarz ist.
Erstellen Sie in der Mitte des Layouts eine weitere Form mit dem Werkzeug "Abgerundetes Rechteck".
Erstellen Sie einige Formen mit dem Rechteckwerkzeug. Über diese Formen werden wir später einige Bilder hinzufügen.
Fügen Sie für alle diese drei Formen dieselben Ebenenstile hinzu.
Nun ist es Zeit, die Bilder über diesen weißen Formen hinzuzufügen. Fügen Sie Text mit dem Horizontalen Textwerkzeug auf der rechten Seite hinzu.
Erstellen Sie mit dem Werkzeug für horizontalen Text eine gestrichelte Linie zwischen den Beiträgen.
Erstellen Sie weitere drei Formen, und platzieren Sie sie unter dem Post Metadata-Text.
Erstellen Sie über der Seitenleiste ein Suchfeld mit dem Tool "Abgerundetes Rechteck". Gleichzeitig können Sie sehen, dass ich auch Text über der Navigationsleiste platziert habe.
Bitte fügen Sie die folgenden Ebenenstile für dieses Suchfeld hinzu.
Verwenden Sie nun das abgerundete Rechteckwerkzeug, um eine andere Form zu erstellen. Platzieren Sie diese Form über der vorherigen Form. Fügen Sie außerdem ein Symbol auf der rechten Seite hinzu.
Direkt über der Diashow erstellen Sie eine weitere weiße Form.
Fügen Sie die folgenden Ebenenstile für diese Form hinzu.
Halten Sie die Befehlstaste gedrückt und drücken Sie mit dem Stift-Werkzeug zweimal auf die Kante der Form. Der Ankerpunkt wird aktiv und wir können das Aussehen der Form ändern.
Bei noch gedrückter Befehlstaste den folgenden Ankerpunkt auswählen.
Halten Sie die Umschalttaste gedrückt und drücken Sie einmal die Abwärtspfeiltaste auf Ihrer Tastatur. Der Ankerpunkt wird nach unten verschoben und Sie erhalten das folgende Ergebnis.
Verwenden Sie das Ellipse-Werkzeug, um einen Kreis zu erstellen.
Klicken Sie mit der rechten Maustaste auf die Ebene und wählen Sie Ebene rastern. Wählen Sie mit dem rechteckigen Marquee-Werkzeug eine Auswahl wie unten gezeigt aus.
Stellen Sie sicher, dass Sie die Ebene mit diesem kleinen Kreis ausgewählt haben, und drücken Sie dann die Taste Entf. Ziehen Sie diese Ebene über die Hintergrundebene in Ihrer Ebenenpalette. Dies ist mein bisheriges Ergebnis.
Jetzt fügen wir zwei Schaltflächen hinzu, mit denen die Websitebenutzer das Bild der Diaschau ändern können. Sie müssen das abgerundete Rechteckwerkzeug verwenden, um die Form zu erstellen. Anschließend können Sie das benutzerdefinierte Formwerkzeug verwenden, um die Pfeile hinzuzufügen.
Erstellen Sie über der Seitenleiste einige weiße Formen, wie unten gezeigt.
Für alle diese weißen Formen fügen Sie bitte die gleichen Ebenenstile hinzu.
Fügen Sie einige Banner in der Seitenleiste hinzu. Fügen Sie außerdem einige Social-Bookmarking-Symbole oberhalb des Site-Designs hinzu. Im Internet stehen zahlreiche kostenlose Symbole zur Auswahl.
Fügen Sie nun mit dem Horizontaltyp-Werkzeug unten in der Seitenleiste Text hinzu. Fügen Sie mit dem Horizontaltypwerkzeug Minuszeichen zwischen den Text ein, um gestrichelte horizontale Regeln zu erstellen.
Fügen Sie weitere Details in der Navigationsleiste hinzu. Verwenden Sie das Linienwerkzeug, um zwei kleine Linien zu erstellen. Vergrößern Sie dieses Bild, damit Sie besser sehen, was Sie tun.
Wählen Sie beide Ebenen in Ihrer Ebenenpalette aus. Um beide Layer auszuwählen, müssen Sie beim Auswählen beider Layer die Befehlstaste gedrückt halten. Nachdem Sie die Linien ausgewählt haben, drücken Sie die Tastenkombination Befehlstaste + E, um die Ebenen zu einer einzigen zusammenzuführen. Wählen Sie das Radiergummi-Werkzeug aus und löschen Sie damit den oberen Teil und den unteren Teil der Linien. Bitte beachten Sie, dass Sie einen weichen, runden Pinsel mit einer Größe von 20 Pixel benötigen.
Ändern Sie den Mischmodus für diese Ebene in Soft Light. Duplizieren Sie es einige Male und platzieren Sie die Linie zwischen den anderen Textschaltflächen.
Erstellen Sie nun den Text für das Logo dieses Wordpress-Layouts in einer Größe, die für Sie gut aussieht.
Fügen Sie die folgenden Ebenenstile für dieses Textlogo hinzu.
Direkt über der "Hintergrund" -Ebene erstellen Sie eine neue Ebene (Befehl + Umschalttaste + Alt + N). Markieren Sie dort mit dem Pinselwerkzeug mit einem weichen, runden Pinsel ein Markierungszeichen.
Ändern Sie den Mischmodus für diese Ebene in Soft Light.
Das Design ist fertig! Ich hoffe es hat dir Spaß gemacht zu kreieren! Das endgültige Bild ist darunter oder Sie können hier ein Bild in voller Größe anzeigen.
Accentsconagua