ImageReady office@wofi.at www.wofi.at
Inhaltsverzeichnis Inhaltsverzeichnis 0. EINLEITUNG...3 0.1. Was ist ImageReady?...3 0.2. So wechseln Sie zwischen ImageReady und Photoshop...3 0.3. Slices...3 0.3.1. Erstellen von Slices für Webseiten...3 0.4. Rollover...4 0.5. Imagemaps...4 0.6. Animationen...4 0.6.1. Erstellen einer Animation...4 0.7. Export und Bildoptimierung für Websites...5 0.7.1. Vergleich von Formaten für Webgrafiken...5 0.8. Die Werkzeugpalette...6 office@wofi.at www.wofi.at 2
Einleitung 0. Einleitung 0.1. Was ist ImageReady? ImageReady ist eine Webgrafik- und Animationssoftware zum Erstellen und Bearbeiten von Webgrafiken und Animationen für das Internet. Das Programm ist eng mit Photoshop verbunden und ist daher auch bei der Installation von Photoshop enthalten. Die Grafikwerkzeuge und -funktionen vereinfachen die meisten Aufgaben bei der Entwicklung von Webseiten. ImageReady wird verwendet um Navigationselemente für eine Website zu erstellen und zu slicen (schneiden), um GIF-Animationen zu steuern und bearbeiten und um ImageMaps und Rollovers zu erstellen. Zu den weiteren Funktionen die Ihnen die Gestaltung von Seiten erleichtern sollen, gehören voreingestellte Dokumentgrößen für Seiten und Banner, Raster, Hilfslinien und die so genannten magnetischen Hilfslinien. Sie können den Layouts mithilfe von Text-, Zeichenund Malwerkzeugen Inhalt hinzufügen. 0.2. So wechseln Sie zwischen ImageReady und Photoshop Sie können problemlos zwischen ImageReady und Photoshop wechseln, um Funktionen aus beiden Programmen zu nutzen, wenn Sie Grafiken für das Web oder andere Zwecke vorbereiten. Das Wechseln zwischen Anwendungen ermöglicht es Ihnen, den vollen Funktionsumfang beider Programme in einem effizienten Workflow zu nutzen. Dateien und Dokumente, die in einer Anwendung aktualisiert wurden, können in der anderen Anwendung automatisch aktualisiert werden. Dank der Möglichkeit zu wechseln, müssen Sie die Datei nicht in einer Anwendung schließen und dann in einer anderen erneut öffnen. Sie wechseln zwischen den beiden Anwendungen indem Sie auf das Symbol ganz unten in der Werkzeugpalette klicken. 0.3. Slices Wenn eine Seite für die Ausgabe im Web fertig ist, können Sie mit dem Slice-Werkzeug in ImageReady Seitenlayoutelemente oder komplexe Grafiken in Bereiche unterteilen und voneinander unabhängige Komprimierungseinstellungen (und damit geringere Dateigrößen) festlegen. 0.3.1. Erstellen von Slices für Webseiten Ein Slice ist ein rechteckiger Bereich eines Bildes, den Sie zum Erstellen von Links, Rollovern und Animationen auf der dazugehörigen Webseite verwenden können. Mit Slices können Sie die Funktionen und die Dateigröße von Bildern genauer steuern. Slices dienen zum Unterteilen eines Quellbildes in funktionale Bereiche. Wenn Sie das Bild zusammen mit einer HTML Datei speichern, wird jedes Slice in einer separaten Datei mit eigenen Einstellungen und eigener Farbpalette gespeichert, wobei die korrekten Links, Rollovereffekte und Animationseffekte beibehalten werden. Außerdem sind Slices beim Arbeiten mit Bildern nützlich, die verschiedene Datentypen enthalten. Wenn Sie beispielsweise einen bestimmten Bildbereich animieren möchten office@wofi.at www.wofi.at 3
Rollover (funktioniert in ImageReady leider nur mit dem GIF-Format), der Rest des Bildes jedoch im JPEG-Format optimiert werden soll, können Sie die Animation mit einem Slice isolieren. 0.4. Rollover Mit der Web-Inhalt-Palette können Sie Slices und deren Rollover-Status verwalten. So können Sie z. B. eine Schaltfläche für eine Webseite erstellen, die immer dann aufleuchtet, wenn der Benutzer mit der Maus darauf zeigt, und Sie können den Status der Schaltfläche und die Aktivitäten in diesen Status verwalten. 0.5. Imagemaps Imagemaps ermöglichen die Verknüpfung eines Bildbereichs mit einem URL. Sie können in einem Bild mehrere verknüpfte Bereiche, so genannte Imagemaps, mit Links (Verknüpfungen) zu anderen Webseiten oder Multimedia-Dateien einrichten. 0.6. Animationen Sie können mit der Animationspalette einfache Webanimationen erstellen. Mit dieser Palette lässt sich Frame für Frame das Erscheinungsbild einer Animation bestimmen. Sie können eine Animation in ImageReady leider nur als animierte GIF-Datei oder SWF-Datei exportieren. 0.6.1. Erstellen einer Animation Eine Animation ist eine Sequenz von Bildern oder Frames, die eine bestimmte Zeit lang angezeigt wird. Jedes Frame unterscheidet sich geringfügig von dem vorherigen, sodass beim Anzeigen der Frames in schneller Folge die Illusion von Bewegung entsteht. Verwenden Sie zum Erstellen von Animationsframes die Animations- und die Ebenen-Palette. In ImageReady können Sie außerdem die Web-Inhalt-Palette verwenden, um einem Rollover-Status eine Animation hinzuzufügen. Jedes einzelne Frame stellt eine Ebenenkonfiguration in der Ebenen-Palette dar. 0.7. Export und Bildoptimierung für Websites Sie müssen häufig einen Kompromiss zwischen Anzeigequalität und Dateigröße eines Bildes für das Web finden. ImageReady bieten mehrere Steuerelemente zum Komprimieren der Dateigröße eines Bildes bei gleichzeitiger Optimierung der Online-Anzeige. office@wofi.at www.wofi.at 4
Rollover Wenn Ihre Seite oder Grafik fertig für den endgültigen Export ist, können Sie in der Optimierungspalette exakt bestimmen, wie die Seite bzw. Grafik exportiert werden soll. 0.7.1. Vergleich von Formaten für Webgrafiken Das zu wählende Dateiformat hängt hauptsächlich von den Eigenschaften des Bildes ab. JPEG ist das Standardformat für das Komprimieren von Fotos. Das Optimieren von Bildern für das JPEG-Format wird als lossy (verlustreich) bezeichnet, da bestimmte Daten dabei selektiv gelöscht werden. GIF ist das Standardformat für die Komprimierung von Bildern mit kontrastarmen Farben und scharfen Details, z. B. Strichgrafiken, Logos oder Illustrationen mit Text. PNG-8- und GIF-Dateien unterstützen 8-Bit-Farbe und können daher bis zu 256 Farben darstellen. Der Vorgang, mit dem bestimmt wird, welche Farben verwendet werden, wird Indizieren genannt. Bilder im GIF- und PNG-8-Format heißen daher auch indizierte Farbbilder. Zum Konvertieren eines Bildes in den indizierten Farbmodus wird eine Farbtabelle angelegt, in der Bildfarben gespeichert und indiziert werden. Wenn eine Farbe aus dem Originalbild nicht in der Farbtabelle enthalten ist, verwendet die Anwendung entweder die nächstliegende Farbe oder simuliert die Farbe durch Mischen vorhandener Farben. Das PNG-24-Format eignet sich zum Komprimieren von Fotos. Die dabei entstehenden Dateien sind jedoch wesentlich größer als die entsprechenden JPEG-Dateien. Der Vorteil des PNG-24-Formats besteht darin, dass das Bild Transparenzen erhalten kann. SWF ist das Dateiformat für Flash. Es handelt sich um ein vektorbasiertes Grafik-Dateiformat zur Erstellung skalierbarer, kompakter Grafiken für das Web. Da das Dateiformat vektorbasiert ist, bleibt die Bildqualität unabhängig von der Auflösung erhalten. Das SWF- Format ist ideal für die Erstellung von Animationen. WBMP ist das Standardformat zur Optimierung von Bildern für mobile Geräte, z. B. Mobiltelefone. WBMP unterstützt 1-Bit-Farbe, sodass WBMP-Bilder nur schwarze und weiße Pixel enthalten. 0.8. Die Werkzeugpalette Die Werkzeugpalette bietet ähnliche Funktionen wie die unter Photoshop. Nur in ImageReady verfügbare Werkzeuge sind unter G aufgeführt. office@wofi.at www.wofi.at 5
Rollover office@wofi.at www.wofi.at 6