Kantonsschule Enge Bildnerische Gestaltung Webdesign, Photoshop - Dreamweaver
Layout:
Photoshop - Dreamweaver		 Vorlage produzieren im Photoshop
Arbeitsschritt einzelne Befehle Abbildungen Kommentar
Vorbereitung Zur Vorbereitung sollte eine Layoutskizze (mit Hilfslinien, ohne Hilfslinien) von Hand gezeichnet werden.
Ort und Grösse der Navigation und des Logos müssen vor dem Arbeitsbeginn mit Fotoshop festgelegt werden.

Photoshop 1

neue Datei

Dateigrösse

  • 1000 Pixel breit
  • 650 Pixel hoch
  • Auflösung 72 Pixel/Zoll
    (oder 300 Pixel/Zoll)

Die Grösse des Normbildschirmes ist 1024 x 768 Pixel (XGA, Notebooks).
Da Symbolleisten, Statuszeile und Scrollbalken wegfallen benötigt man eine kleinere Fläche für das Layout.
Je nach Benutzerprofil muss man ein noch kleineres Layout planen.

Die Auflösung kann zur präziseren Bearbeitung auf 300 Pixel/Zoll eingestellt werden. 72 Pixel/Zoll würden aber genügen. Bei der Einstellung 72/Zoll wird auch besser deutlich, welche Schriftgrösse noch lesbar ist.

Photoshop 2

Masseinheiten / Lineale /
Hilfslinien

Bearbeiten - Voreinstellungen -
Masseinheiten & Lineale

  • Lineale und Art auf Pixel stellen

Lineale einblenden

  • Ansicht - Lineale

mit dem Verschieben-Werkzeug (Pfeil) aus dem oberen und linken Lineal Hilfslinien ziehen und auf vorher bestimmte Layoutpositionen ziehen.
z.B.

  • 100, 400 von oben
  • 175, 800 von links

Damit Spalten und Zeilen des Layouts auch später im HTML-Editor (Dreamweaver) exakt eingestellt werden können, müssen in der Photoshop-Layoutdatei die Masse mit Hilfe von Hilfslinien sichtbar sein.
Für die Ausgabe der Website am Bildschirm benötigt man Pixelangaben und nicht mm oder cm.

 

Photoshop 3

Ebene für Hintergrund

Ebenenfenster einblenden (Fenster - Ebenen)

  1. im Ebenenfenster oben rechts kleines Dreieck drücken
  2. neue Ebene
  3. Ebenennamen: Farbe
 Für alle einzelnen Elemente (Texte, Logos, Farben, Bilder usw.) sollte eine separate Ebene gemacht werden.
Die Hintergrundebene sollte leer bleiben.

Photoshop 4

Spraygrund

 Mit Pinsel (im Werkzeugfenster rchts Mitte) und verschiedenen Vordergrundfarben einen Hintergrund sprayen.
Für Spray Pinsel oben auf "Sprenkeln" stellen.

Photoshop 5

Logo schreiben
Effekte bestimmen

Logo schreiben

  1. Textwerkzeug wählen
  2. Logo schreiben
  3. ev. Schrift und Schriftfarbe anpassen
  4. Effektsysmbol anklicken
  5. Effekte bestimmen (z.B. Schlagschatten und Kontur)
  6. mit Verschiebenwerkzeug Logo an die gewünschte Position schieben

Photoshop 6

weitere Hilfslinien setzen

Fenster - Informationen einblenden

mit dem Verschieben-Werkzeug (Pfeil) aus dem oberen und linken Lineal Hilfslinien ziehen und auf Detail-Layoutpositionen ziehen.

ebenso für die Buttons der Navigation Hilfslinien ziehen (z.B. je Feld 20 x 155 Pixel)

Photoshop 7

Buttonhintergund zeichnen
Effekte bestimmen

Buttontexte schreiben
Buttontexte kopieren

Neue Ebene für Buttonhintergrund
(Name Buttonhintergrund)

Mit dem Auswahlrechteck Buttonfelder markieren.
In die mit den Hilfslinien vorbestimmten Felder als Buttonhintergrund Farbe füllen.

Effekte wie beim Logo für diese Ebene

Buttontext schreiben, Schrift anpassen und Text mit Verschiebenwerkzeug richtig plazieren

Photoshop 8

Buttontexte kopieren
mit Verschiebenwerkzeug an neuen Button schieben
und Text anpassen

 für jeden Button gibt es eine separate Textebene
Die Buttontextebenen sollten mit dem entsprechenden Namen versehen werden		  

Freistellen:
Diese im Fotoshop produzierte Layout-Datei (Bild) dient dazu, die Erscheinung der Website nachher am Bildschirm während dem Design und der Produktion zu überblicken. Verwendet wird diess Bild als Ganzes nie. Es werden nur die einzelnen Bereiche als Bilder für das Internet (Website) gespeichert.
Das Speichern der einzelnen Bereiche geschieht mit folgenden Schritten:

  1. gewünschten Bereich mit dem Auswahlrechteck markieren
  2. Bild - freistellen
  3. Datei für Web speichern (es wird dann nur der gewählte Bereich als Bild für die Website gespeichert. dabei ist es wichtig, dieses Bild in den Webordner zu speichern!!)
  4. Protokoll - Schritt zurück (damit man wieder am ganzen Bild weiterarbeiten kann)
 

Photoshop 9

Ganze Layoutdatei speichern
Buttonbereich separat speichern
Logobereich separat speichern

 

  1. Layoutdatei speichern (z.B. als Weblayout.psd)
  2. Mit dem Rechteckauswahlwerkzeug Logobereich bis zum oberen und linken Rand markieren
  3. Datei - freistellen und als Logo.psd speichern
  4. ebenso mit dem Navigationsbereich
 

Photoshop 10

Einzelne Teile für Web speichern

Das Logo in zwei Varianten für das Web speichern

  • Logo.psd öffnen
  • Datei für Web speichern
  • in den Bilderordner der Website speichern
    als logo_1.jpg
  • Textfarbe ändern
  • Datei für Web speichern
  • in den Bilderordner der Website speichern
    als logo_2.jpg
  

Photoshop 11

Navigation in mehreren Varianten speichern

Navigation.psd öffnen

  1. erste Textebene anwählen
  2. Textwerkzeug wählen
  3. Textfarbe ändern

nun Datei für Web speichern z.B. als nav_1.jpg

mit allen Textebenen gleich verfahren

Photoshop 12

restliches Layout in Einzelteilen für das Web speichern
  1. Mit Auswahlrechteck Bereich markieren
  2. Bild - freistellen
  3. Datei - für Web speichern (In den Bilderardner der Website)
 
 
 
weiter mit Dreamweaver