Tutorial: Imagemaps in Adobe Image Ready
Hier könnt ihr euch das psd-file runterladen, um das Tutorial nacharbeiten zu können. -> Download
1. Nachdem du die Datei in Photo Shop geöffnet hast, springst du zu Image Ready. Dort brauchst du den Ebenenmanager und folgendes Fenster (ich nenne es mal Slice-Fenster):
Im Tool-Fenster wählst du jetzt das Slice-Werkzeug (K)
2. Mit dem Slice-Werkzeug ziehst du einen Kasten um den 1. Menüpunkt, in diesem Fall "Home".
3. Wenn du jetzt das erste Slice gezogen hast, machst du in dem Slice-Fenster [s. 1. ] folgende Dinge:
4. Nun kannst du im Ebenenmanager die Ebene "home" so verändern, wie sie aussehen soll, wenn man mit der Maus über sie fährt. Ich mache einen Schlagschatten. [Ebene -> Ebenenstil -> Schlagschatten]
5. Im Prinzip ist das erste Slice schon fertig! Wenn du dir angucken möchtest, wie es im Internet aussieht, klicke auf dieses Symbol:
6. Wenn du den nächsten Menüpunkt zu einem Slice machen möchtest, klicke im Slice-Fenster wieder auf "Normal" (Link) und wiederhole Schritte 1 bis 4. Achte darauf, immer wieder auf die 1. Ebene im Slice-Fenster (normal) zu gehen, bevor du ein neues Slice erstellst.
7. Nun speichere als psd-Datei ab und gehe dann auf Datei -> optimierte Version speichern unter und speicher es als html-Datei ab. Achtung: Hier wird ein neuer Ordner von Image Ready angelegt namens "Bilder", in dem alle Einzelbilder (Slices) gespeichert werden.
Falls noch etwas unklar ist, kannst du dir hier die fertige Datei runterladen: Download
