Eine neue Webseite entsteht (Teil 3): Webdesign mit Illustrator und Photoshop

Nachdem im zweiten Teil des Tutorial das Mockup für die CoffeeLove-Webseite entstanden ist, wird es jetzt endlich so richtig bunt, denn die Arbeit mit Photoshop und Illustrator kann endlich beginnen. Ich werde dir zeigen, wie du bei der Gestaltung des Design-Entwurfs vorgehen kannst, was du beachten solltest, und mit welchen Tricks und Tipps du im Webdesign schneller voran kommst. Also los geht’s an die kreative Arbeit :-)

1. Welches Programm ist für Webdesign am besten geeignet?

Natürlich stellt sich zuerst die Frage, in welchem Programm man sein Webdesign erstellen soll. Photoshop ist dabei sicher die häufigste Wahl, und viele Webdesigner arbeiten für ihre Design-Entwürfe ausschließlich mit Photoshop. Da ich jedoch kein riesiger Photoshop-Fan bin, dafür umso größerer Typografie-Fan, arbeite ich für das Gesamt-Layout lieber im Illustrator und wechsele nur für bestimmte Webseiten-Elemente und Hintergründe in den Photoshop. Am besten du probierst selbst aus, mit welchem Programm du besser zurecht kommst, und wählst dann deine Lieblings-Arbeitsweise aus.

Falls du keine Adobe-Programme besitzt, gibt es auch tolle kostenlose Alternativen, GIMP ist z.B. eine tolle Alternative zu Photoshop, und Inkscape für Illustrator. Hier findest du eine Übersicht kostenloser Programme für Webdesigner.

2. Eine Webdesign Raster-Vorlage verwenden

Ein sehr hilfreicher Tipp, um leicht saubere Layouts gestalten gestalten zu können, ist ein Grid (Raster) zu verwenden. Auch das Mockup für die CoffeeLove-Webseite hatte ich ja bereits mit Hilfe des Tools MockingBird am 12-spaltigen Raster des 960 Pixel breiten Grid-Systems ausgerichtet. Auch wenn du das Grid-System nicht im CSS verwenden möchtest, kannst du die Raster-Vorlage sehr gut im Webdesign nutzen.

Du kannst dir Vorlagen für die verschiedensten Layout-Programme auf der Webseite des 960-Grid-Systems herunterladen. Ich habe meine Grid-Vorlage im Illustrator geöffnet.

Webdesign Tutorial Photoshop Illustrator

Webdesign Tutorial Photoshop Illustrator
Das Dokument ist insgesamt 1020 Pixel breit, mit 30 px Seitenrand, und einer 10 Pixel-Spalte rechts und links des Grids.

Möchtest du nicht 960 Pixel als breite für deine Webseite verwenden, kannst du dir mit dem Tool Gridinator auch eine PNG-Gridvorlage online erstellen.

Webdesign Tutorial Photoshop Illustrator
Eine Raster-Vorlage für Webdesigns als PNG-Image online erstellen.

3. Das Webdesign im Grafikprogramm vorbereiten

Als nächsten Schritt ist es hilfreich, sich vorab alle benötigten Ebenen im Grafik-Programm anzulegen. So ganz du sicher sein, dass kein kreatives Chaos in deiner Datei entsteht, und du während der Arbeit am Design alle Ebenen schnell aus- und einblenden kannst.

Webdesign Tutorial Photoshop Illustrator

Dann kannst du dir als weiteres Hilfsmittel dein zuvor erstelltes Mockup (siehe Tutorial Teil 2) als PNG-Image in eine Hintergrundebene deiner Datei laden, und auf eine leichte Transparenz setzen. Auch das vorbereitete Farbschema für das Webdesign kannst du auf eine extra Ebene deiner Datei laden.

Webdesign Tutorial Photoshop Illustrator
Die Farbtabelle und das Mockup sind hilfreiche Referenzen während des Design-Prozesses.

4. Den Webseiten-Hintergrund in Photoshop anlegen

Da ich plane, den Webseiten-Hintergrund mit Hilfe eines nahtlosen Musters umzusetzen (so kann ich später in der Programmerierung nur ein ganz kleines Image verwenden), verwende ich für den Hintergrund im Illustrator nur eine Arbeitsvorlage.

Diese erstelle ich mir mit dem Photoshop-Muster, dass ich später als eine Art Kachelbild (mit der CSS Background-Eigenschaft repeat) verwenden möchte.

Als erstes lade ich mir ein Muster mit Papierstruktur auf der Webtreats-Webseite herunter.

Um ein neues Muster in deinem Photoshop-Programm verwenden zu können, musst du zuerst die Datei im PAT-Format in den Ordner »Patterns« unter Programme / Adobe / Photoshop / Presets / Patterns hinein laden.

Dann legst du im Photoshop deine neue Datei für die Hintergrund-Vorlage an (bei meinem Beispiel in der Breite 1020px) und wählst unter Ebene / Neue Füllebene / den Punkt »Muster…« aus.

Der Musterebene kannst du jetzt einen Namen geben und sie bestätigen. Jetzt bestimmst du die Musterfüllung. Um dein neues Muster zu laden, klickst du auf den kleinen Pfeil rechts von der Musterauswahl und wählst »Muster laden…«

Webdesign Tutorial Photoshop Illustrator

Wähle dann dein neues Muster aus dem Order Patterns (in dem du es zuvor einsortiert hattest) aus. Jetzt werden deine neuen Muster ebenfalls in die Auswahl geladen. Mit der Skalierung kannst du die Größe des Musters anpassen.

Webdesign Tutorial Photoshop Illustrator
Ich habe bei meinem Muster noch die Deckkraft der Ebene auf 25% zurück gesetzt.

Für das Webdesign-Layout im Grafikprogramm kann ich jetzt diese Muster-Vorlage einsetzen. Ich platziere den Hintergrund also in meine Illustrator-Datei in die angelegte Ebene »background«.

5. Den Webseiten-Header gestalten

5.1. Von oben nach unten gestalten

Ich gestalte eine Webseite eigentlich immer von oben nach unten. Ich fange also mit dem Header an. Das hat den Vorteil, dass im Header meist der Stil einer Webseite (durch das Logo oder Grafiken) festgelegt wird. Die weiteren Elemente der Webseite gestalte ich dann anschließend im gleichen Stil.

5.2. Vom Groben ins Feine arbeiten

Außerdem arbeite ich vom Groben ins Feine. Heißt ich gestalte erst das grobe Design komplett fertig (Flächen, grafische Grundelemente, Texte). In einem zweitem Durchlauf style ich alle Elemente im Detail z.B. mit Textschatten, Transparenzen, grafischen Details oder Verläufen. Das hat den Vorteil, dass ich mich nicht zu Beginn in einem eher unwichtigem Detail verliere und dann im weiteren Design-Prozess Probleme habe, einen Gesamt-Stil für die Gestaltung zu finden.

5.3. Das Webseiten-Logo

Für die Coffee Love- Webseite habe ich das Webseiten-Logo direkt im Webdesign gestaltet. (für ein Logo, von dem es später auch als Print-Variante geben soll, ist diese Methode weniger geeignet). Da das Logo eines der aussagekräftigsten Elemente der Webseite ist, fange ich mit dem Logo an.

Webdesign Tutorial Photoshop Illustrator
Der erste, grobe Entwurf des CoffeeLove-Logos.

Für den Hintergrund des Logos habe ich eine verspielte Vektor-Fläche gewählt, die wie ein Banner wirkt. Jede Menge hilfreiche Vektorgrafiken für deine Layouts kannst du dir z.b. bei Vectezzy herunterladen.

Für die Logo-Schrift habe ich mich für die Free-Font Garton Medium (von Fontsquirrel) entschieden. Die Schrift habe ich dann mit dem Pfadtext-Werkzeug an einem Pfad entlang geschrieben, um die leichte Krümmung zu erzeugen.

Webdesign Tutorial Photoshop Illustrator

Da ich meine im ersten Teil des Tutorials vorbereitete Farbtabelle auf einer Extra-Ebene meines Dokuments plaziert habe, kann ich schnell mit dem Pipetten-Werkzeug (I) die Farben für Hintergrund und Schrift des Logos anpassen.

5.4. Weitere Elemente des Headers

Webdesign Tutorial Photoshop Illustrator
Zur Kontrolle kannst du jederzeit die Grid-Ebene einblenden.

Im nächsten Schritt habe ich eine Borte am oberen Rand der Webseite mit Hilfe einer Border-Vektorgrafik (Vektorelement von Vectezzy) erstellt. Außerdem habe ich die Punkte der Hauptnavigation rechtsbündig angelegt. Als Schrift für die Navigations-Buttons habe ich die Free-Font Droid Serif gewählt. Für den Rollover-Effekt wähle ich das dunkle Rosa meiner Farbpalette. Zusätzlich möchte ich, den Button bei Hover unterstreichen. Später plane ich auch noch Textschatten für meine Buttons zugestalten. Die Droid-Schrift möchte ich später mit Hilfe der CSS-Eigenschaft @font-face einbinden.

6. Der Webseiten-Inhalt

Als nächstes habe ich den Contentbereich, also den Webseiten-Slider, den Introtext, und die drei Elemente Aktuelles, Menü und Twitter gestaltet. im Webdesign kann man sehr gut mit Platzhalter-Bildern (z.B. von Flickr) und mit Lorem Ipsum Text arbeiten. Den Blindtext kannst du dir z.B. von der Webseite loremipsum.de kopieren. Ich nutze sehr gerne die Google Chrome-Erweiterung »Lorem Ipsum Generator«.

Webdesign Tutorial Photoshop Illustrator

Webdesign Tutorial Photoshop Illustrator
Zur Kontrolle schaue ich noch einmal nach, ob alle Elemente im Grid liegen.

Den Hintergrund des Sliders habe ich leicht transparent gesetzt. Später plane ich eine noch eine leichte Hintergrund-Grafik zu integrieren, die dann leicht durchscheinen soll. Die abgerundeten Ecken des Sliders plane ich mit CSS3 border-radius zu realisieren.

Als Link-Farbe habe ich wieder das dunkle Rosa ausgewählt. Später werde ich noch Icons und Textschatten für die Überschriften hinzufügen. Der Fließtext ist in Times New Roman gesetzt. Die drei neusten Artikel möchte ich mit Vorschaubildern anzeigen lassen. Das lässt sich mit WordPress ganz leicht realisieren, und es macht die Artikel-Überschriften attraktiver. Das Menü soll es als PDf-Download geben und das Twitter-Element mit den neusten Tweets werde ich später in der Programmierung mit einem Twitter-Widget realisieren.

7. Der Footer

Als letztes Element der Startseite gestalte ich den Footer. Hierfür habe ich einen transparenten Hintergrund gewählt, so dass die Papierstruktur der Webseite leicht durchscheint. Der Footer-Hintergrund soll durchgehend verlaufen.

Webdesign Tutorial Photoshop Illustrator
Kunden-Referenzen und Google Maps lockern den Footer optisch auf.

Als kleines Feature im Footer sollen aktuelle Statements von zufriedenen Kunden rechts in der Footerleiste in Sprechblasen angezeigt werden. Außerdem wird eine kleine Google Maps Karte in den Footer integriert. Die Karte ist ein weiteres Element, das den Footer attraktiver aussehen lässt, und den Kunden schnell den Weg zum CoffeeLove-Café weist :-)

Webdesign Tutorial Photoshop Illustrator

Um den Footer-Balken wieder ein wenig aufzulockern, habe ich die Elemente Copyright, Impressum, und WordPress-Link wieder außerhalb (bzw. unterhalb) des Footerbalkens auf das Hintergrund-Papier gesetzt.

Jetzt ist das erste, grobe Design der CoffeeLove-Startseite abgeschlossen, und das Ergebnis kann sich im Vergleich zu den Mockups aus Teil 2 des Tutorials auch schon sehen lassen.

Webdesign Tutorial Photoshop Illustrator
Das CoffeeLove-Webdesign entwickelt sich.

Im nächsten Teil des Tutorials geht es dann ans Styling des Webdesigns. Außerdem werde ich für den Headerbereich ein Hintergrundbild mit Photoshop-Pinsel und coolen Stempeln gestalten.

ich hoffe dir hat das heutige Tutorial gefallen, und du hast den ein oder anderen Tipp oder Trick für deine eigenen Webdesigns bekommen. Über dein Feedback und weitere Tipps zur Optimierung des Design-Prozesses einer Webseite in Photoshop oder Illustrator freue ich mich sehr!

Weitere Teile der Tutorial-Serie

13 Kommentare zu “Eine neue Webseite entsteht (Teil 3): Webdesign mit Illustrator und Photoshop

  1. Wie immer Super!

    Danke für die ausführliche Beschreibung.

    Danke
    Oliver

    • Hallo Oliver,

      vielen Dank für dein Feedback. Freut mich, dass dir auch der 3. Teil der Tutorial-Serie gefällt :-)

      Viele Grüße,
      Ellen

  2. Antwort zur Frage 1: Fireworks, ist ja im Grunde auch gerade fürs Webdesign entwickelt worden und erlaubt z.B. auch das einfache Erstellen von Click-Dummies bzw. eines Prototypen…

    Wobei schlussendlich immer gilt, im Zweifelsfall das Programm mit dem man sich am besten auskennt (und das man bezahlen kann).

    • Hallo Olli,

      vielen Dank für deinen Kommentar und dein Feedback zu den besten Programmen fürs Webdesign :-)

      Ja, da hast du auf jeden Fall Recht! Fireworks ist natürlich auch ein sehr beliebtes Programm für Webdesign, und hat viele interessante Funktionen. Ich habe auch schon ab und zu mit Fireworks gearbeitet, konnte mich aber nie so richtig mit dem Programm anfreunden. Sicherlich hängt die Entscheidung für ein spezielles Programm viel mit den eigenen Vorlieben und der persönlichen Arbeitsweise zusammen. Ich finde es aber auch spannend, immer wieder neue Programme (z.B. Freeware wie GIMP und Inkscape) auszuprobieren :-)

      Viele Grüße,
      Ellen

  3. Wie immer ein toller Post von Ellen. Für mich als NichtDesigner gut verständlich, lädt regelrecht zum Ausprobieren ein. Der Artikel ist es wieder einmal wert in ein Buch aufgenommen zu werden.
    Ich wage nicht zu hoffen, dass es noch eine Umsetzung des Themes nach WordPress geben wird.
    Tschüß
    Claudius

    • Hallo Claudius,

      vielen herzlichen Dank für dein tolles Feedback zum Tutorial :-)

      Au ja, das wäre klasse, wenn du auch Spaß bekommst, Webdesign auszuprobieren. Es macht wirklich sehr viel Freude :-) Ja, ich plane die Webseite auch als Tutorial in WordPress umzusetzen. Dafür werde ich dann wohl auch mehrere Teile benötigen. Also, bleibe dabei ;-)

      Viele Grüße,
      Ellen

  4. Hey. :) Super Beitrag, wie immer!

    Ich bin übrigens schon lang auf der Suche nach solch einer Broder-Vektorgrafik – aber auf der genannten Seite kann ich das gar nicht finden. Kannst du mir vielleicht den Link geben? :)

    • @LeStift: Vielen herzlichen Dank, es freut mich, dass dir das Tutorial gefällt :-)

      Borte, die ich letztendlich für das Design verwendet habe, hatte ich schon vor einer ganzen Weile einmal gefunden und in meiner Sammlung abgelegt. Ich schaue aber mal, dass ich den Link zum Download noch finde, ja :-)

      Viele Grüße,
      Ellen

  5. Hallo Ellen,

    ich wollt mich nur mal bedanken für diese wunderbaren ausführlichen Tuts. Ich fange gerade erst mit all dem „Design“ an und Deine Tutorials haben mir in so wenigen Schritten geholfen, so viele Hürden zu überwinden an denen ich vorher gescheitert bin. Vielen, vielen Dank, ich werde mich wohl step für step weiter durcharbeiten!!! Es kann nur noch besser werden, jetzt glaube ich wieder an mich. Man, das klingt so geschwollen, ist aber tatsächlich so. Schönen Abend noch, mfg Liz

  6. Sabine Ruwwe

    Liebe Ellen,

    taste mich gerade an 960Grid Sites heran… gibt es eigentlich optimale Schriftgrößenverhältnisse von HL’s zu Copy und Co.?

    Freue mich über eine kurze RÜ.

    Sabine

  7. Hallo Ellen,
    klasse Artikel sehr beeindruckend Geschrieben! Leider kann ich deine Meinung zu Punkt 1 deines Artikels nicht ganz mit dir Teilen. Es gibt einen guten Artikel von André Reinegger der 50 Gründe aufzählt warum man Photoshop nicht für Webdesign nutzen soll. Durch diesen Artikel bin ich auch von Photoshop weggegangen und habe mich an Fireworks gesetzt und ich selber muss sagen das dass Designen in Fireworks durch den besseren Workflow mehr Spass macht.

    Hier kannst du dir diesen Artikel mal durchlesen: http://www.reinegger.net/50_gruende_photoshop_nicht_fuer_webdesign_zu_verwenden.html

    Gruss
    Patrick

  8. Hallo,
    erst einmal Danke für den tollen Bericht. Ich werde mich Zuhause (wenn es die Zeit denn zulässt) gleich mal an einem eigenen Theme versuchen.
    Allerdings habe ich nicht ganz verstanden, ob man nun für jede Seite ein eigenes Layout entwirft bzw. das eine je nach Seite anpasst und ich bin mir unschlüssig, ob ich jetzt direkt in dem Layout (gemacht mit Photoshop) die Bilder einfüge, die ich später auch dort sehen will, oder ob ich Platzhalter einfüge… ich bin da absoluter Anfänger und würde mich über eine Rückmeldung freun.

    Grüße und macht weiter so!

  9. Hallo Ellen,

    vielen Dank für den gut ausgearbeiteten Beitrag zum Thema Photoshop.
    Aktuell arbeite ich beim erstellen von Websites mit dem Programm Artisteer. Vielleicht kennst du das und hast auch eine Meinung dazu?
    Viele haben mir nun gesagt, das ich mit Photoshop besser und einfach arbeiten kann, ist das wirklich so?
    Sind die Templates die ich in dem Programm erstelle auch gleichzeitig und automatisch responsive? Bei Artisteer ist das nämlich so.

    Viele Grüße

Hinterlasse eine Antwort

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