Menue

Interface mit Image Ready

Das gesamte Menue mit der Html Tabelle und den Javascript Effekten wurde mit "Image Ready" erstellt. Das Programm ist Bestandteil des Programmpakets Photoshop 5. Es ist nicht gerade die leichteste Übung, von daher sollte man schon ein bisschen Erfahrung in Photoshop mitbringen.

Zuerst erstellen wir uns den Umriss des Menues auf einer neuen Ebene. In Image Ready gibt es ein Auswahlwerkzeug für Rechtecke mit abgerundeten Kanten. Diese werden aufgezogen und mit der Vordergrundfarbe gefüllt Alt Entf.

Anschließend fügen wir noch ein gefülltes Rechteck in der Ecke hinzu siehe Beispielbild. Wir ziehen mit dem Bewegen Werkzeug 2 Hilfslinien auf (Lupe verwenden), um anschließend mit dem Auswahlwerkzeug eine Elipse an der Kante der Hilfslinie zu erstellen. Dazu setzen wir den Startpunkt der Elipsenauswahl auf den Kreuzungspunkt der Hilfslinien und ziehen die Elipse dann mit gedrückter Maustaste diagonal nach rechts unten. Sie sollte dann so aussehen wie in dem Beispielbild. Mit der Entf Taste wird ein Teil der Ebene gelöscht.

Nun erstellen wir auf einer neuen Ebene eine abgerundetes Rechteck für das Hinweisfenster und auf einer weiteren Ebene eins für die Buttons (wie unter Punkt 1 beschrieben). Die Ebene mit den Buttons klicken wir mit gedrückter Strg Taste einmal an, so daß eine Auswahl in Form der Ebene entsteht. Anschließend gehen wir auf die zuerst erstellte Ebene des Menues (Punkt 1) und drücken die Entf Taste. Dadurch wurde die Form der Buttonebene aus der zuerst erstellten Ebene ausgestanzt. Nun können wir jeder Ebene mit den Ebeneneffekten eine Reliefkante verpassen. Das graue Anzeigenfenster habe ich mit dem Ebeneneffekt Schlagschatten nach innen versehen. Jetzt folgen noch die Linien zwischen den einzelnen Buttons, siehe dazu den Tipp "Linien". Danach wird mit dem Textwerkzeug jeweils für einen Button und für einen Hinweistext die Schrift erstellt. Die Hinweistexte werden erst einmal alle ausgeblendet. Außerdem fügen wir für die Buttons jeweils einen Schlagschatten hinzu. Die Buttons, wie auch die Hinweistexte werden jeweils links aneinander ausgerichtet.

Nun wird das Menue webtauglich gemacht. Dazu bedienen wir uns des Slicewerkzeugs. Es gibt ein Werkzeug um Slices auszuwählen und eins um sie zu erstellen . Mit letzterem ziehen wir um jeden Button und um das Feld mit dem Hinweistext ein Rechteck auf. Anschließend wählen wir mit dem Slice Auswahlwerkzeug den Button Home. Im Slice Menue (Fenster / Slice einblenden) können wir einen Link eintragen. Um den Mausover Effekt zu erstellen wählen wir das Rollover Menue (Fenster / Rollover einblenden) und klicken auf das Symbol

. Wir machen nun die Ebene mit dem entsprechendem Hinweistext sichtbar und blenden den Ebeneneffekt Schlagschatten für die Home Schrift aus. Wir wechseln wieder auf das erste Bild im Rollover Menue und wählen mit dem Sliceauswahlwerkzeug den nächsten Button aus. Für diesen wie auch die anderen Buttons erstellen wir den Rollover Status wie gerade beschrieben.

Es gibt Benutzer Slices und Slices die automatisch entstehen. Mit der rechten Maustaste kann man aber jeden Slice in einen Benutzer Slice umwandeln. Das hat den Vorteil, daß man für jeden Benutzer Slice in der Optimieren Palette, eine andere Komprimierung einstellen kann (wähle dazu auch entsprechenden Karteireiter-Button direkt oben am Bild). Alle anderen Slices haben die gleiche Komprimierung, die sich auch in der Optimieren Palette einstellen läßt. Jeder Slice bildet später eine Zelle der Html Tabelle. So kann man für die Slices, die nur aus einer Farbe bestehen, in der Slice Palette einstellen, daß dort überhaupt kein Bild sondern evt. nur die Hintergrundfarbe eingefügt wird.

Nun brauchen wir die ganze Sache nur noch abspeichern mit Datei / Speichern Anschließend wählen wir Datei / Optimiert Version speichern. Im sich öffnenden Menue müssen wir einen Namen für die Html Datei angeben. Es wird automatisch ein Ordner für die Bilder erzeugt. Name dieses Ordners und der einzelnen Bilder kann man unter Datei / Ausgabeeinstellungen für Html festlegen. Unter Datei / Vorschau, kann man sich die Sache schon vorher im Browser anschauen.

Datenschutzerklärung