Tutorial Webseite erstellen Teil 5 – Stylen des Webdesigns im Photoshop

Im letzten Teil des Tutorials habe ich Dir gezeigt wie man aus einen Mockup einen ersten Entwurf im Photoshop entwickelt. Heute möchte ich es noch stylen. Am Ende dieses Tutorials wird das Layout im Photoshop so aussehen. Also ran an das designen.

Für eine größere Ansicht bitte auf das Bild klicken!

Stylen des Headers Deines Webdesign

Als erstes eröffnest Du nun Dein Layout welches wir im letzten Teil entwickelt haben im Photoshop. Hier hast Du nun alle Elemente die Du für Dein Webdesign benötigst. Fangen wir damit an den Header unseres Layouts zu stylen. Ich hatte meinem Header schon einen Farbverlauf verpasst. Das sieht aber noch nicht besonders gut aus. Also pimpe ich den noch etwas auf. Ich dachte da an eine Borte am oberen Rand der Webseite und eine Art Naht im unteren Teil des Headers. Den Farbverlauf habe ich noch ein wenige angepasst damit die Naht etwas plastischer wirkt. Für die Borte und die Naht habe ich mir wieder ein Muster angelegt.

Im Mockup kannst Du sehen das ich im Header eine Navigation und die Social Media Buttons habe. Ich möchte nun auch noch eine Überschrift und einen Slogan in den Head Bereich unterbringen.
Als Schriftart für die Überschrift habe ich mich für die „Kingthings Organica“ entschieden die ich mir während der Materialsammlung auf meinem PC gespeichert habe.
Für den Slogan denke ich an „Times New Roman“ und bei der Schriftart für die Naviagtion plane ich die Schriftart „Arial“. Die Social Media Buttons habe ich bei brankic1979.com gefunden und meinen Bedürfnissen angepasst.

Der Header sieht in meinem Photoshop Layout nun so aus:

Das Logo unserer Restaurant Webseite

Bis jetzt haben wir uns noch keine Gedanken über das Logo unserer Webseite gemacht. Das werden wir jetzt nachholen. Ich überleg mir was wohl für ein Logo eines französischen Restaurants in Frage kommt. Mir fallen dabei spontan 2 Dinge ein. Das ist zum einen die französische Flagge und zum zweiten eine Karte von Frankreich. Also werden ich aus beiden versuchen ein Logo für diese Seite zu gestalten.

In meinem Layout habe ich schon den Hintergrund für mein Logo angelegt. Der Hintergrund hat eine Größe von 300 x 300px und ich möchte das ein Rand von 10px zu sehen bleibt. Folglich ist das Logo 280px breit und hoch.

Ich lege mir auf den Hintergrund des Logos ein Rechteck mit entsprechender Größe und gebe dem Rechteck einen Schlagschatten. Nun gehe ich in meine Materialsammlung und schau nach ob da vielleicht eine Karte von Frankreich dabei ist. Was für ein Glück, ich habe eine entsprechende Karte gefunden. Sie hat auch noch diesen schönen Retro Effekt. Klasse! Ich öffne die Karte im Photoshop und passe sie entsprechend der gebrauchten Größe an.

Das sieht schon mal gar nicht schlecht aus. Wäre noch der Schriftzug für das Restaurant und eine französische Flagge. Bei der Flagge denke ich an etwas altes, retromäßiges. Wie man das im Photoshop bewerkstelligt zeige ich Dir jetzt.

Als erstes öffnest Du eine neue Datei. Ich wähle ein Format von 4:3 90 x 60px und unterteile es mit Hilfslinien in 3 gleich Teile und fülle sie mit Rechtecken entsprechend der Farben der französischen Flagge. Danach reduziere ich die sichtbaren Ebenen auf eine Ebene. Nun öffne ich wieder eine meiner Vintage Texturen die ich gesammelt habe und schneide mir ein entsprechendes Teil davon aus und lege es unter die Ebene der Flagge. Nun spiele ich ein wenig mit dem Effekt Schein nach innen und gebe der Flagge etwas Transparent damit die Textur etwas durchschimmert. Danach reduziere ich alles auf eine Ebene und füge es dem Layout hinzu. Nun nehme ich mir eine Pinselspitze und radiere an den Rändern der Flagge damit sie einen schönen alten Look bekommt. Zum Schluss nehme ich der Flagge noch etwas von der Deckkraft damit es schön abgegriffen und alt wirkt.

Fehlt noch der Schriftzug des Restaurants. Hier dachte ich an eine auf alt gemachten Stempel.

Dazu erstellst Du Dir eine neue Ebene und schreibst den Namen des Restaurants mit der Schrift die Du Dir für das Logo ausgedacht hast. In meinem Fall ist das die Schrift Kingthings Organica. Danach legst Du Dir eine neue Ebene an und ziehst mit dem Auswahlrechteck Werkzeug um den Schriftzug ein Rechteck auf. Nun klicken wir auf bearbeiten und Kontur füllen und legen die Kontur für diese Ebene fest. Ich nehme dafür 3px und wähle die Position innen. Den Rest kannst Du in diesem Dialog so lassen. Zum Schluss noch ok und fertig ist der Rahmen.





Mit der Tastenkombination strg und d kannst Du die Auswahl aufheben. Du kannst die Ebene mit der Schrift noch innerhalb des Rahmens positionieren. Zu guter letzt kannst Du die Ebene Schrift mit der darunter befindlichen Ebene auf eine reduzieren. Nun nimmst Du Dir noch einen Pinsel, zum Beispiel grobe Borsten oder grobe Spritzer, und bearbeitest die Kanten das sie wie bei einem Stempel aussehen. Das Ganze wird zum Schluss noch etwas gedreht. Für den Slider habe ich schon mal ein Platzhalter Bild eingefügt damit man schon sehen kann wie das Logo auf den Betrachter wirkt.

Natürlich gibt es noch viele andere Möglichkeiten für ein Logo. Überlege Dir was noch so alles für ein Logo eines französischen Restaurant stehen könnte. Eifelturm, französischer Wein etc. Der Möglichkeiten gibt es da viele.

Das Webdesign für den Contentbereich

Direkt unter dem Logo und dem Slider plane ich 3 Bilder als Eyecatcher die auf verschiedene Inhalte aufmerksam machen sollen. Bisher haben ich dafür nur den Hintergrund gestaltet nun sollen diese gefüllt werden.
Als erstes habe ich dem Hintergrund Bilder hinzugefügt und diese mit einem Rand von 5px in der Farbe weiß versehen.

Neben den Bild habe ich eine Überschrift und etwas Text dazu platziert. Um mehr Aufmerksamkeit zu erlangen möchte ich etwas mit der Typografie spielen. Die Überschrift soll mit zwei Farben und zwei verschiedenen Schriftgrößen gestaltet werden. Alle 3 Highlight Bilder sehen jetzt bei mir so aus:

Nun noch die 3 Boxen für den Content. Den Hintergrund dazu hatte ich schon aus einer Vintage Papier Textur geschnitten. Wenn ich mir das nun so anschaue finde ich das da noch etwas fehlt. Ich habe noch eine weiße Kontur von 5 px hinzugefügt damit die Boxen sich besser vom Hintergrund abheben.

Wie Du eine Kontur hinzufügen kannst will ich Dir kurz zeigen. Wähle Die Eben aus der Du eine Kontur hinzufügen möchtest. Nun klickst Du unten auf den Button für Effekte und wählst Kontur aus. Es öffnet sich ein Dialog mit dem Du nun die Einstellungen für die Kontur vornehmen kannst. Für die Größe wählst Du 5px, als Position Innen und für die Farbe wählst Du weiß. Die anderen Einstellungen kannst Du so lassen wie sie sind.


Nun kannst Du die Boxen noch mit Inhalt füllen damit Du sehen kannst wie diese in Deinem Webdesign wirken. Für die linke Box plane ich den Willkommen Text und ein Bild. In der mittlerne Box möchte ich für den Service kurze Anleser (Excerpt) anbieten und die rechte Box soll für Events genutzt werden. Wie das Aussehen kann zeige ich Dir auf dem Bild.

Wie Du siehst habe ich hier wieder etwas mit der Typografie gespielt. Verschiedene Schriften und Farben für die Überschriften.

Das Webdesign für den Bereich des Footers

An der oberen Kante des Footers habe ich wieder eine Borte zur besseren Trennung der Bereiche hinzugefügt. Für die einzelnen Boxen habe ich mir eine Leder Textur gesucht und diese entsprechend zurechtgeschnitten und an meinem Grid ausgerichtet. Verschiedene Konturen runden das Bild ab. Zum Schluss habe ich noch die entsprechenden Inhalt hinzugefügt. Auch hier versuche ich mit typographischen Mitteln Aufmerksamkeit zu erreichen.

Weitere Artikel zum Thema eine neue Webseite erstellen

Tutorial Webseite erstellen Teil 1 – Inspirationen und Ideensammlung

Tutorial Webseite erstellen Teil 2 – Webdesign Materialsammlung

Tutorial Webseite erstellen Teil 3 – Sitemap skizzieren und Mockup erstellen

Tutorial Webseite erstellen Teil 4 – Webdesign mit Photoshop

Ich hoffe Dir gefällt auch der 5 Teil meines Tutorials wie man eine Webseite erstellen kann. Wenn Du Fragen dazu hast oder auch andere Ideen würde ich mich über einen Kommentar freuen.

2016-10-20T15:11:04+00:00 April 24th, 2015|Categories: Tutorials, Weblog|Tags: , , |2 Comments

About the Author:

Hallo, ich bin Peter, Webdesigner und Webentwickler aus Gera. Seit 2006 entwickle ich mit meinen Kunden individuelle Webseiten. Ich mag es wenn Webseiten leicht zu bedienen sind und mit Nougta lasse ich mich gern verführen :-)

2 Comments

  1. Mia 26. April 2015 at 9:37 - Reply

    Wie schon die letzten Teile finde ich Dein Tutorial zum erstellen einer Webseite sehr spannend. Ich freue mich schon auf den nächsten Teil. LG Mia

    • admin 26. April 2015 at 9:40 - Reply

      Vielen Dank für Dein Feedback. ich freue mich das Dir mein Tutorial gefällt. Grüße Peter

Leave A Comment