Wer Teil 1 & 2 dieses Tutorials nicht gelesen hat, dem sei so viel verraten: Erst habe ich Euch die Photoshop Werkzeugleiste erklärt; dann, wie man die Bildelemente für die Infografik in Photoshop erstellt. Jetzt lernt Ihr, wie man in Image Ready alles zusammenfügt. -- Viel Spaß!
Wer ImageReady zum ersten Mal verwendet, wird das Programm wohl unweigerlich kompliziert finden. Mir ging das jedenfalls so. Und deswegen will ich Euch im letzten Teil meines "Werkzeuge"-Tutorials zeigen, dass es eigentlich gar nicht so ist: Dass man mit ImageReady in wenigen Minuten verblüffende Effekte erzielen kann; sei es mit animierten GIF-Bildern, Rollover-Grafiken (was wir jetzt tun werden), bis hin zu komplett programmierten grafikbasierten Internetseiten!
In diesem Tutorials lernt Ihr, wie Ihr eine vorbereitete Infografik durch ImageReady animieren und durch Mouse-Over über bestimmte Bereiche Eures Bildes zusätzliche Informationen einblenden könnt.
Falls Ihr die vorherigen Teile des Tutorials nicht bearbeitet oder Euer Photoshop-File nicht gespeichert habt, findet Ihr hier ein Photoshop-File, das Ihr verwenden könnt: Tutorial 4
Los geht's!
Als erstes öffnet Ihr ganz normal Eure vorbereitete Grafik in Photoshop und drückt nun den untersten Knopf der Werkzeugmenü-Leiste, "Springen zu ImageReady".
Euer PSD-File wird automatisch in ImageReady geöffnet -- und das Programm sieht Photoshop auf den ersten Blick zum verwechseln ähnlich: Links habt Ihr ein Werkzeuge-Menü, rechts die Ebenenauswahl, etc. Wirklich spannend wird es aber am unteren Bildrand, denn dort findet Ihr ein Menü mit den Auswahlpunkten: "Animation", "Rollover", "Imagemap" und "Slice".
Kurz erklärt: Mit der "Animation"-Funktion könnt Ihr animierte GIF-Bilder erstellen, indem Ihr einfach jedes einzelne Frame nacheinander animiert und für jedes Bild festlegt, wie lange es gezeigt werden soll.
"Rollover" ist die Funktion, die wir für das aktuelle Tutorial verwenden: Damit kann man Buttons für eine Website erstellen, die sich verändern, wenn man mit der Maus darüber geht, sie anklickt, oder ähnliches.
Mit "Imagemap" könnt Ihr für Fotos oder Grafiken Bildbereiche festlegen und mit externen Links verknüpfen.
"Slice" bezeichnet Bereiche oder Ausschnitte eines Bildes. Wie Ihr sehen werdet, brauchen wir auch für das aktuelle Tutorial "Slices"; bedeutet: Um Grafiken Funktionen zuweisen zu können, muss man das Bild in Bereiche ("slices") zerschneiden.
Und genau das machen wir jetzt auch! Also: Slice-Werkzeug zur Hand (das Skalpell-Symbol) und wie mit dem Auswahlrechteck-Werkzeug Eure Bereiche markieren.
Für unsere Infografik brauchen wir alle Tasten des Werkzeugemenüs; diese dürft Ihr also jetzt allesamt ausschneiden; eines nach dem anderen -- und natürlich möglichst präzise.
Viel Spaß!
Am Ende sieht Euer File dann so aus, mit chirurgischer Präzision in mehr als zwei Dutzend Bereiche zerteilt:
Was haben wir bis jetzt gemacht?
Wir haben die Grafik in Bereiche geteilt, zu denen wir später bei einem Mouse-Over zusätzliche Infos einblenden wollen.
Als nächstes müssen wir jedem dieser Bereiche zuweisen, was passieren soll, wenn wir mit der Maus drüber gehen. Dazu müsst Ihr das "Slice-Werkzeug" in das "Slice-Auswahlwerkzeug" umschalten.
Haltet dazu die linke Maustaste auf dem Slice-Werkzeug gedrückt, bis das Untermenü erscheint und wählt das Skalpell-Symbol mit der schwarzen Pfeilspitze.
Mit diesem Werkzeug klickt Ihr auf den ersten Bereich. Ich habe mit dem "Auswahlrechteck" angefangen, was in meiner Aufteilung Slice Nr.3 entspricht.
Sobald Ihr einen Bildbereich ausgewählt habt, müsst Ihr unten im "Rollover"-Menü eine neue Seite anlegen (durch Klick auf das "neue Seite" Symbol). Ihr habt jetzt für den Bildbereich (Slice) mit der Nummer 3 zwei Seiten, "normal" und "über" -- und letzteres bedeutet nichts anderes als: "was passiert mit der Grafik, wenn die Maus sich über dem Bildbereich Nummer 3 befindet".
Ja. Was soll denn passieren, wenn der Benutzer mit der Maus über diesen Bildbereich fährt?
Hier könnt Ihr Euch locker eine Milliarde Dinge einfallen lassen, ...
Im Beispiel machen wir's aber mal ganz trivial: Die Menütaste soll "aktiviert", die Zusatzinfos sollen eingeblendet werden.
Als erstes das "Aktivieren".
In der Ebenenleiste haben wir einen Ebenensatz namens "aktiviert" vorbereitet. Der simuliert das "Anklicken" eines Werkzeugfeldes.
Bisher ist diese Ebene ausgeblendet (und sie soll ja auch nur erscheinen, wenn Euer Nutzer mit der Maus über einen der Bildbereiche wandert!). Als erstes klickt Ihr in das linke leere Feld neben dem Ebenensatz. Das Photoshop-Auge erscheint und der Ebenensatz wird sichtbar. Alles, was Ihr jetzt machen müsst, ist, das weiße Feld zu dem aktuellen Feld zu schieben. Ob Ihr die "Aktivierung" richtig platziert habt, seht Ihr im "Rollover"-Menü: wenn die "über"-Ansicht richtig aussieht!
Der zweite Schritt: Wir wollen die Infos einblenden.
Nachdem wir im zweiten Teil dieses Tutorials unsere Ebenen sauber beschriftet haben, ist das ein Kinderspiel. Ihr sucht einfach die Ebene raus, die zu dem Bildbereich gehört, den Ihr gerade bearbeitet und blendet sie ein, indem Ihr auf das linke leere Feld dieser Ebene klickt. In diesem Fall die Ebene "Auswahl".
Und jetzt?
Naja. Um ganz ehrlich zu sein: Der Rest ist reine Fleißarbeit!
Die vorangegangenen Schritte wiederholt Ihr für jeden einzelnen Bildbereich ...
... bis Ihr am Ende zu allen Slices die entsprechenden Infos eingeblendet habt.
(Für die letzten Felder, übrigens, haben wir keine "Aktivierung" vorbereitet. Hier blenden sich also nur die Zusatzinfos ein).
Und so sieht das dann aus:
Ja, Ihr seid tatsächlich schon fertig! Und warum?
Weil ImageReady ein unfassbar kluges Programm ist, das den Rest alleine erledigt.
Im Menü oben rechts ("optimieren") könnt Ihr noch einige Qualitätseinstellungen vornehmen, ob Ihr Eure Bilder als GIF oder JPEG abspeichern und in welcher Qualität Ihr das tun wollt. Da es sich bei unserer Werkzeugemenü-Infografik nur um schwarz-weiß Bilder handelt, entscheide ich mich für GIF (und lasse die Einstellungen einfach so, wie sie gerade sind).
Klickt auf DATEI > OPTIMIERT-VERSION SPEICHERN UNTER ...
... und stellt beim Abspeichern sicher, dass als Datei-Typ "HTML und Bilder" ausgewählt ist.
Das ist deswegen wichtig:
Die Verhaltensweise Eurer Infografik wird nicht als Bild, sondern als HTML abgespeichert. Tatsächlich besteht Eure Grafik nämlich nicht mehr aus einem Bild (auch wenn das für den Nutzer so aussieht). Tatsächlich besteht Eure Grafik jetzt aus ca. 60 Einzelbildern -- und das HTML-File verwaltet sozusagen, wann welches dieser Bilder eingeblendet wird.
Wie Ihr seht, legt ImageReady für Euch eine HTML-Datei "werkzeugleiste.html" und einen Ordner "images" an.
Und wenn Ihr mal zu schätzen wissen wollt, wieviel Programmier-Aufwand Euch die Software gerade gespart hat, dann schaut Euch die HTML-Datei spaßeshalber mal im Editor an.
Okay. Guess what? -- Ihr seid fertig!
Eure fertige Rollover-Infografik könnt Ihr Euch jetzt ansehen, indem Ihr die HTML-Datei in Eurem Browser öffnet und mit anderen teilen, indem Ihr die HTML-Datei auf Euren Server hochladet.
Etwas schicker ist natürlich noch, wenn man die "Infografik" auch tatsächlich wie ein Bild-Element in eine Seite einbinden kann. Und auch dafür gibt es einen netten Trick.
Der normale HTML-Code für Bilddateien ist
<img src="http://www.irgendeineseite.de/bild.jpg" />
Anstelle des IMG-Tags verwendet Ihr einfach ein IFRAME-Tag ... und schon könnt Ihr die HTML-Datei Eurer Infografik verwenden, als sei es ein einzelnes Bild.
In meinem Blog ("Tutorial 2") sieht das ganze so aus:
Um Eure Rollover-Grafiken einzubauen, passt also einfach den IFRAME-Code entsprechend an. Am wichtigsten: Breite und Höhe des IFRAME müssen der Breite und Höhe Eures Bildes entsprechen. Und sämtliche Dateien (HTML-Datei plus der Ordner "images") müssen irgendwo hochgeladen und korrekt verlinkt sein.
Hier der Code:
<div><iframe scrolling="no" style="width:100px;height:100px;">
<frameborder="0" src="http://www.deinserver.de/xyz.html">
<marginheight="0" marginwidth="0"></iframe></div>
Viel Spaß!
