Von PSD zum HTML: Webdesign mit Photoshop

Um eine brauchbare Website professionell her­zu­stellen, sollten sie einigen grundlegenden Schritten folgen. Natürlich kann man unter Mengen an (freien) Templates und Vorlagen auswählen. Über­troffen wird die Einheitsware immer durch individuell angepassten Entwurf. Eine wichtige Station ist der Entwurf mit­hilfe von Photoshop (wird am häufigs­ten ver­wen­det—es geht natürlich auch mit Illu­stra­tor, Fire­works, Pixelmator, Gimp oder anderen Pro­gram­men, dazu später). Ich möchte auf die wesent­lichen und üblichen Stationen des Work­flows ein­ge­hen. Dazu benutze ich eine Site aus dem Tutorial von Visual Swirl (sehr lesenswert!).

Workflow

In Überblick die wichtigsten Schritte bis zur Website:
1. Kreativphase / Skizze
2. Grundlagen / Planung / Wireframe
3. Photoshopdesign
4. Slicen
5. HTML coden / Testing

1. Kreativphase / Skizze

Website ScribbleAm Anfang sollte die Website im Kopf entstehen. Damit ist der gesamte kreative Prozess gemeint, der auf die Gestaltung, dem Layout usw. Einfluss nimmt. Er mündet zunächst in kleine Scribbles (Thumb­nails), mit denen man flüchtig skizziert, wie die Website sein könnte. So nähert man sich schnell einer Vorstellung eines Layouts sowie der Umsetzung einer MainIdea (aus dem kreativen Prozess). Bald wird es Zeit zur Erzeugung konkreter Maße.

2. Grundlagen / Planung / Wireframe

Man kann freie Maße für eine Website wählen. Bewährt haben sich aber die Maße, die in den Viewport eines Webbrowsers, vorzugsweise die des Endkunden, passen. Aufschluss geben Browserstatistiken (sofern vorhanden) einer bestehenden Firmenwebsite (falls vorhanden). BTW: Brauchbare Browserstatistiken müssen nicht immer über eine zusätzliche Programmierung, wie z.B. Google Analytics entstehen. Häufig laufen beim Provider einer Website Statistik-Tools im Hintergrund mit. Die Daten erreicht man über die Verwaltungsoberfläche eines Accounts. Immer noch aktuell ist die Vorgabe einer 960 Pixel breiten Seite, welches schnell in die Verwendung eines 960-Grids münden. Davon stehen viele freie Photoshop-Templates zur Verfügung. Nutzen Sie für einen groben Überblick einen Wireframe-Generator. Damit haben Sie erste grobe Maße, mit denen Sie in Photoshop ein Grundlayout aufbauen.

3. Photoshopdesign

Designen Sie Ihre Site in Photoshop fertig (oben sehen Sie eine von Visual Swirl). Verwenden Sie, wenn möglich, z.B. Original-Elemente/Assets aus der CD des beauftragenden Kundens. Dazu zählen Logos, Slogan, Hausfarben, Fotos und Texte. Meistens sind diese nicht auf Anhieb vorhanden. Dann arbeiten Sie mit Platzhaltern z.B. fürs Logo, für Bilder oder mit Blindtexten. Die Platzhalter sind wichtig, um eine Vorstellung der Site zu erzeugen. Grauwert, Ausgewogenheit, Mood, Blickführung und Kontrast (z.B. Textfarbe!) werden abstimmbar.

4. Slicen

Photoshop hat einen Exportieren-Dialog, mit der man seinen Entwurf nach gewissen Vorgaben in HTML übersetzen kann. Vergessen Sie das! Photoshop kann nicht automatisch bestimmen, wo zum Beispiel Texte variabel Platz benötigen oder ob ein Farbverlauf in HTML als Hintergrundbild (Kachel) eingesetzt wird.

a) Hilflinien ziehen

Hilfslinien löschenNeue HilfslinienIm ersten Schritt löschen Sie zunächst alle Hilfslinien des 960er Grids mit dem Befehl: »Ansicht / Hilfslinien« löschen. Dann lassen Sie sich die Lineale (Strg-R) anzeigen und ziehen mit dem Mauszeiger frische Hilfs­linien heraus. Diese legen Sie sich knapp um Objekte des Websiteantwurfs, die Sie später benötigen. Das wird zum Beispiel das Logo sein (siehe oben). Ziehen Sie die Hilfslinien knapp, aber nicht zu eng um die Objekte. Knapp deshalb, um die später als Bild gespeicherten Stücke dateimäßig klein zu halten. Nicht zu eng begrenzen, damit man nicht zufällig Rand- oder Übergangspixel übersieht (besonders bei runden Objekten oder Schrift).

b) Slices definieren

Slices kombinierenSlices kombiniert
Jedes wichtige Objekt der Site wird mit dem Slice-Werkzeug von Photoshop (sieht aus wie ein kleines Cuttermesser) »herausgeschnitten«. Sie können das Slice-Werkzeug nehmen und direkt in der Zeichen­fläche herumziehen. Ist etwas ungenau und langsam. Sie können den Prozess durch Auto­matisierung beschleunigen. Bei aus­gewähltem Slice-Werkzeug (C) erscheint oben in der Optionen-Leiste der Button: »Slices entlang der Hilfslinien«. Ein Klick später werden Slices innerhalb aller Hilfs­linien­felder gebildet (siehe Bild oben links). Nun sollten Sie die Slices kombinieren, damit pro Motiv ein Slice gebildet wird. Klicken Sie mit dem Slice-Auswahlwerkzeug und Shifttaste in die gewünschten Felder und sammeln alle benötigten Slices-Teilstück. Per Rechtsklick erscheint das Kontextmenu. Dort mit: »Slices kombinieren« die Felder zusammenfügen. Fertig.

c) Slices speichern

Slice speichern in PhotoshopWenn die Slices (Ausschnitte der Website) festgelegt sind, muss man Sie speichern, damit diese später in den Quelltext der Site eingebaut werden können. Im »Für Web und Geräte speichern«-Dialog­fenster bestimmen Sie wie gewohnt das passende Format. Im Speichern-Dialog können Sie einstellen, dass nur ausgewählte oder alle Slices gespeichert werden sollen. Das können Sie entscheiden.

5. HTML coden / Testing

Innerhalb eines Grundgerüst eines 960er HTML-Frameworks könnte man weiter coden. Entweder werden die geslicten Einzelteile aus Photoshop integriert, oder in den dafür vorgesehenen Zonen wird Content eingebracht, den man in Photoshop nur probeweise (mit Blindtext und Layoutbildern) ins Layout eingesetzt hat. Content meint die »echten« Fotos und den »richtigen« Text des Webauftritts.

Grundgerüst HTML

<DOCTYPE html>
<html lang="de-DE">
<head>
    <meta charset=UTF-8" />
    <title>Visualswirl-Testsite</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="wrapper">
    <div id="main" role="main">
            <header>Logo</header>
            <nav>Navigation</nav>
          <!-- content -->
            <article>Content-01</article>
            <article>Content-02</article>
      </div>
   <footer>Footerkram</footer>
  </div>
</body>
</html>

Auf einer HTML5 codierten Site wird zunächst mit dem »Wrapper-Div« der Inhalt zentriert. Das Style­sheet namens »style.css« liegt auf derselben Ebene wie diese Testsite. Aufgrund der HTML5-Syntax tauchen hier einige spezielle Tags auf wie zum Beispiel »header«, »article«, »footer«. Das verstehen nicht alle Web­browser gleich gut, aber naja, das ist wieder ein anderes Thema.

Grundgerüst CSS

/*-- center the side --*/
#wrapper {
   width:960px;
   margin: 0 auto;
}
/*-- here logo-slice --*/
header {
   background-image: url(img/logo.png);
}

In diesem rudimentären Stylesheet wird zunächst der Centerwrap definiert, sodass er das Seitengerüst bei 960px Breite horizontal ausmittelt (die Marginangaben sind Shorthandrule). Der Header bekommt ein Hintergrundbild verpasst. Es ist endlich das oben aus dem Photoshop-Dokument erzeugte Slice. Auf diese Weise kann man sich eine Site aufbauen, in der die Slices über CSS-Angaben für das Aussehen verantwortlich sind. Im HTML kann man in den dafür getagten Bereichen Content einbringen.

2 Comments

  • Bloxxor
    26. November 2011 - 13:58 | Permalink

    Super Artikel, Dankeschön! Der Syntaxhighlighter gefällt!

    • BigBossDesigner
      26. November 2011 - 14:07 | Permalink

      Gut, dass Sie den Artikel überhaupt sehen. Scheint so, als ob das Blog für eine Zeit gehackt wurde! Bin voll am Rotieren und warte erstmal ab, was hier passiert.

  • Comments are closed.

    QR Code Business Card