Kantonsschule Enge Bildnerische Gestaltung Webdesign, Photoshop - Dreamweaver

 

Photoshop, Onmouseoverbutton für Navigation im Dreamweaver
weiter zu Layout
Anleitung in Einzelschritten
 

Voraussetzungen:
Das Design der Website, der Ort und die Grösse der Navigation mit der Anzahl Links in der Navigation muss feststehen und skizziert sein.

  • Die Standardbreite des Fensters muss vorgegeben werden (z,B. 800 oder 1024 Pixel Breite)
    alle Teile der Webseite (Tabellen, Bilder, Texte, Buttons) müssen in diese Grösse einpassen
  • Die Grösse der Navigation und damit der einzelnen Buttons muss definiert sein
    z.B. 160 Pixel breit, 40 Pixel hoch
 
  Arbeitsschritt Erläuterung  
1 Photoshop starten    
2 Photoshop - Fenster anordnen

benötigt werden folgende Fenster:

  • Werkzeuge
  • Ebenen
  • Optionen

alle anderen Fenster sollten geschlossen werden

3 Datei neu

Die neue Datei hat (als Beispiel) folgende Masse:

  • Name "button"
  • 160 Pixel lang
  • 40 Pixel hoch
  • 72 DPI (Pixel pro Inch)
  • Modus RGB (Bildschirmfarben)
  • Inhalt weiss
4 Fenster anordnen Das Bildfenster (Dokumentfenster) soll möglichst gross in der Mitte angezeigt werden. Rundherum sollte die graue Umgebungsfarbe des Dokumentfensters sichtbar sein.  
5 Bearbeiten - Voreinstellungen - Masseinheiten damit die Masse des Bildes in diesem Fall für die Bildschirmausgabe ablesbar sind, müssen die Voreinstellungen auf Pixel gestellt werden
6 Ansicht - Lineale Die Lineale ermöglichen das exakte Positionieren der Hilfslinien, der Texte und Bildteile
 
7 Hilfslinien ziehen

mit dem "Verschieben-Werkzeug" aus den Linealen Hilfslinien in das Bild ziehen

  • rundherum je 3 Pixel Abstand zum Rand
  • von unten auf 5 Pixel
  • auf die 4 Bildränder
8 neue Ebene Im Ebenenfenster neue Ebene machen
die neue Ebene (Ebene 1)anwählen, mit Doppelklick umbenennen zu "farbe"
Auf diese Ebene kommen die Farben zu liegen
Die Hintergrundebene muss leer bleiben!
9 Bildbereich auswählen
Farbe bestimmen
Farbe füllen
Mit dem Auswahlrechteck wird der innere Bereich des Bildes ausgewählt (innerhalb der 3-Pixel-Ränder)
Die Vordergrundfarbe wird bestimmt (ein mittelheller Farbton)
Mit dem Füllwerkzeug (Taste G) wird der ausgewählte Bereich gefüllt
10 Ränder dunkel färben Mit dem eckigen Polygon-Lasso (Taste L) den Rand unten rechts auswählen und mit dunklerer Farbe füllen

11 Ränder hell färben Mit dem eckigen Polygon-Lasso (Taste L) den Rand oben links auswählen und mit hellerer Farbe füllen
12 Text schreiben "home" Textwerkzeug auswählen (Taste T)
jedesmal, wenn mit dem Textwerkzeug auf das Bild geklickt wird, wird eine neue Textebene gemacht
"home" schreiben, Schrift, Schriftgrösse und Schriftfarbe im Optionenfenster bestimmen
13 Text positionieren mit dem Verschiebenwerkzeug Text positionieren (Taste V)  
14 Schatten produzieren Im Ebenenfenster unten links Effektfunktion anwählen
(Ebeneneffekt auswählen - Schlagschatten)
15 Schatten anpassen Im Effektwerkzeug muss der Schatten bez. Position, Richtung und Dichte angepasst werden.  
16 Datei speichern Diese Datei muss unbedingt als Photoshopdatei (Endung PSD) im Materialordner gespeichert werden. Nur in diesem Format werden Text- und Ebenenfunktionen gespeichert.  
17 Datei für Web speichern Datei für Web speichern
Die erste Variante dieses Buttons wird für die Website hergestellt. Da sie noch in einer zweiten Variante gespeichert werden muss, muss der Dateiname diese Funktion zeigen: button_home_a.jpg
Variante aus den 4 Beispielen anhand der Qualität und Übertragungszeit auswählen.
18 Textfarbe ändern für die zweite Variante des Buttons für das Onemouseover wird die Textfarbe geändert und die Datei wiederum für das Web gespeicher: Dateiname: button_home_b.jpg
  Beispiel