ImageReady

ImageReady
[email protected] | www.wofi.at
IMAGEREADY
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
[email protected] | www.wofi.at
2
IMAGEREADY
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
[email protected] | www.wofi.at
3
IMAGEREADY
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.
[email protected] | www.wofi.at
4
IMAGEREADY
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 SWFFormat 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.
[email protected] | www.wofi.at
5
IMAGEREADY
Rollover
[email protected] | www.wofi.at
6