Tutorial Webseite erstellen Teil 4 – Webdesign mit Photoshop

Im letzten Teil meines Tutorials ist ein Mockup-Layout entstanden, welches nun die Grundlage bildet für die weiteren Arbeitsschritte. Nun geht es endlich mit der eigentlichen Arbeit am Webdesign los. Hier erfährst Du wie aus unserem Mockup-Layout ein Webdesign Entwurf entsteht. Also, machen wir uns an die Arbeit. Zuvor möchte ich noch kurz auf die Frage eingehen welches Programm für das erstellen eines Webdesign am besten geeignet ist.

Mit welchem Programm soll man Webdesign entwickeln

Diese Frage ist wirklich nicht ganz einfach zu beantworten. Ich für meinen Teil arbeite mit Photoshop um meinen Webseiten Layouts zu erstellen. Es gibt sicherlich viele Gründe warum Photoshop nicht die erste Wahl für die Webseiten Erstellung ist. Dazu habe ich im Netz einen Beitrag auf reinegger.net gefunden der auf ansehnliche Weise erklärt warum man Adobe Fireworks dafür nehmen sollte.

Bei der Recherche zu meinem Tutorial bin ich auf folgenden Beitrag gestoßen. Adobe Fireworks wird seit 2013 leider nicht mehr weiterentwickelt und Alternativen sind schwer zu finden. Es wird allerdings an mehreren Fronten entwickelt um die Lücke wieder zu schließen. Man muss da wohl abwarten was da so kommt.

Mir steht im Moment leider kein Adobe Fireworks zur Verfügung deswegen arbeite ich mit Photoshop und es ist auch eine Art von Gewohnheit. Ich habe mit Photoshop gelernt und komme damit gut zurecht.
Wer kein Photoshop zu Verfügung hat kann auf kostenlose Software zurückgreifen. Eine Alternative für Photoshop wäre zum Beispiel Gimp oder wer lieber mit einem Illustrator arbeite wäre da Inkscape. Die Link für die Downloads findest Du am Ende des Absatzes.

Schritt 1 – anlegen des Webdesign im Photoshop

Nachdem ich Photoshop geöffnet habe lege ich mir eine neue Datei mit einer Größe von 1200x1200px an.

Nun möchte ich mir ein 960px Raster mit 12 Spalten anlegen. Dazu legst Du Dir am besten alle nötigen Hilfslinien an und fügst entsprechende Ebenen mit dem Rechteck Werkzeug an. Ich habe das Grid leicht rosa gefärbt und auf eine Ebene reduziert. Noch ein Tipp zum Schluß dieses Abschnittes. Das Mockup welches Du Dir im letzten Teil erstellt hattest und als png auf Deinem PC gespeichert hast kannst Du nun als Bild über das angelegte Raster mit Transparenz legen. Das ganze sieht dann so aus:

Als nächstes legst Du Dir alle benötigten Elemente Deines Webdesign, wie Header, Content, Footer etc. als Gruppe an. Das hilft Dir später Deine Ebenen schneller zu finden. Wenn Du das erledigt hast geht es mit der Gestaltung los.

Schritt 2 – Der Webseiten Hintergrund

Wenn Du nun auf mein Mockup schaust sieht man leider nicht wie ich mir den Hintergrund und den Header meines Webdesign vorstelle. Das ist jetzt nicht weiter tragisch. Ich möchte gerne einen Header der sich über die gesamte Breite des Bildschirms (Viewport) erstreckt. Darunter soll sich der Seitenhintergrund anschließen. Ich dachte da ein eine unauffällige Textur wie helles Leinen die ich als nahtloses Muster einfügen möchte.

Ein Muster ist ein Bild, das wiederholt oder gekachelt wird, wenn Du damit eine Ebene oder eine Auswahl füllst.

Dazu muss ich mir im Photoshop ein neues Muster anlegen. Das geht ganz einfach und ist schnell erledigt.
Suche Dir im Internet ein Bild mit Leinen und speicher es auf Deinem PC. Öffne das Bild im Photoshop. Wähle dann mit dem Auswahlrechteck den Bereich aus den Du als Muster verwenden möchtest. Achte dabei darauf das bei weiche Kante 0px festgelegt ist.
Dann wählst Du unter Bearbeiten den Punkt Muster festlegen im Dialogfeld gibst Du Deinem neuen Muster noch einen Namen und speicherst es ab. Fertig! Weiter Hinweise wie Du Muster im Photoshop erstellen kannst findest Du auf der Adobe Hilfeseite: Erstellen von Mustern

Nun kannst Du das neue Muster benutzen. Um einen nahtlosen Hintergrund für Dein Webdesign zu bekommen legst Du Dir eine neue Datei in Photoshop an. Da unsere Layout Datei eine Größe von 1200x1200px hat sollte die Hintergrund Datei die selbe Größe haben.

Im oberen Bereich von Photoshop findest Du den Menüpunkt Ebene. Unter diesem Menüpunkt findest Du den Punkt „Neue Füllebene“, wähle nun Muster aus. Im dem sich öffnenden Dialog kannst Du der Füllung einen Namen geben. Danach kannst Du Dein Muster auswählen indem Du neben dem kleinen Pfeil deine Mustervorlagen lädst und auswählst. Du kannst mit der Skalierung noch ein bisschen rumspielen bis Dir Dein Hintergrund gefällt.

Zum Schluss fügst Du die Füllebene noch in Deine Layout Vorlage. Das sieht bei mir dann so aus. Ich lasse das Mockup mit anzeigen um zu sehen wie das ganze aussehen wird.

Schritt 3 – Das Webdesign für den Header

Wie ich oben schon geschrieben habe möchte ich einen sich über die gesamte Breite der Seite erstreckenden Header haben. In meinem Mockup habe ich dafür eine Höhe von 80px vorgesehen. Du hast zwei Möglichkeiten den Header zu gestalten. entweder Du machst das gleich in Deiner Layout Vorlage oder Du legst Dir dafür eine neue Datei mit der richtigen Größe an. Ich werde das gleich in meiner Vorlage machen. Wenn Du es lieber in einer extra Datei machen möchtest legst Du Dir eine neue Datei in der Größe 1200x80px an. Am Ende führen beide Methoden zum Ziel.

Als erstes ziehe ich mir eine horizontale Hilfslinie bei 80px und ziehe mir mit dem Rechteck-Werkzeug den Header auf. In meinem Mockup habe ich dafür den dunkelsten Rotbraun Ton aus meinem Farbschema gewählt. Das sieht natürlich noch ein bisschen einfach aus, deswegen gebe ich der Ebene noch einen Farbverlauf. Die Farben für den Verlauf entnehme ich ebenfalls aus dem Farbschema. Nun sieht meine Layoutvorlage so aus:

Schritt 4 – Layout Gestaltung des Contentbereich

Im nächsten Schritt möchte den Bereich für den Conten gestalten. Im oberen Teil des Contents wollte ich das Logo und einen Slider unterbringen. Darunter sollten 3 Bilder als Eyecatcher kommen und darunter die eigentlichen Boxen für den Content.

Für das Logo und den Slider habe ich mir wieder ein Muster angelegt. Es besteht wieder aus einer Art Leinen hat nun aber eine andere Farbe.

Für die Eyecatcher habe ich erst einmal 3 Rechtecke angelegt und mit einem radialen Farbverlauf versehen den ich wieder aus meinem Farbschema abgeleitet habe.

Bei den Boxen für den Content wollte ich für den Hintergrund eine Art Papier Textur. Dazu habe ich mir aus meiner Materialsammlung eine Vintage PapierTextur ausgewählt. Wie Du Dir daraus eine Hintergrund machen kannst zeig ich Dir im nächsten Schritt.

Öffne Dir im Photoshop die Textur aus der Du Deinen Hintergrund erstellen möchtest. Wähle aus der Werkzeugleiste das Auswahlrechteck. Oben erscheint nun ein Dialog mit dem Du die Größe des Auswahlwerkzeuges festlegen kannst. In meinem Fall wähle ich eine feste Größe mit einer Breite von 300px und einer Höhe 380px.

Klicke nun in die Textur und wähle durch verschieben des Auswahlrechteckes welchen Bereich Du als Hintergrund benutzen möchtest. Wähle nun Das Verschiebenwerkzeug und schiebe es in Dein Layout an die richtige Stelle. Durch duplizieren kannst Du nun den Hintergrund an mehreren Stellen benutzen. das ganze sollte dann in etwa so aussehen:

Schritt 5 – Gestaltung des Footers

Bleibt zum Schluss noch die Gestaltung des Footers. Auch hier habe ich vorgesehen dass er sich über die gesamte Breite des Viewports erstreckt. Ich habe mir wieder ein Muster aus Leinen erstellt. Allerdings habe ich vorher die Farbe wieder angepasst. Wie man im Mockup sehen kann wollte ich es in einem hellen bordeaux halten. Wie man das im Photoshop anstellt zeige ich Dir gleich am Beispiel.

Mein Footer hat im Layout eine Größe von 1200px x 200px. Ich öffne eine neue Datei mit der selbigen Größe und fülle diese mit einem Leinen Muster wie ich es oben schon beschrieben habe.

Nun setze ich die Füllebene als Ebene ein und passe die Farbe an. Im oberen Menu findest Du den Menüpunkt Bild – Anpassungen – Farbbalance. Wenn Du den Dialog öffnest kannst Du mit den Farbreglern Deine gewünschte Farbe einstellen. Wenn Du den richtigen Farbton gefunden hast kannst Du noch mit der Helligkeit und dem Kontrast nachregulieren bis es Dir gefällt. Zum Schluss fügst Du die Footer Grafik einfach noch in Dein Layout ein.

Mein Layout für das neue Webdesign sieht im Photoshop nach dem ich alle Elemente angelegt habe so aus:

Somit haben wir nun unser neues Webdesign einer Photoshop Datei angelegt und können im nächsten Schritt dazu übergehen es zu stylen und zu gestalten. Doch dazu mehr im nächsten Beitrag dieses Tutorials.

Wenn Dir mein Tutorial bis hier her gefallen hat, würde ich mich über einen Kommentar von Dir freuen. Falls Du ebenfalls Webdesigner bist, würde mich interessieren ob Du beim erstellen eines neuen Layouts genau so vorgehst.

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 5 – Stylen des Webdesigns im Photoshop

2016-10-20T15:11:04+00:00 April 8th, 2015|Categories: Tutorials, Weblog|Tags: , , , |0 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 :-)

Leave A Comment