Webdesign, Schriften Übersicht

		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