6.1.6: Bildimport, Bildbearbeitung, Bildaktualisierung

Die Verwendung von Bildern incl. der Umwandlung in webfähige Formate, die Optimierung von Bildern sowie die Optionen zur Bildaktualisierung sind wohl ein besonderes Highlight von GoLive. Hier bringen wir eine Zusammenfassung der bisher behandelten sowie Ergänzung der Möglichkeiten.


Frage 1: Wie bekomme ich Bilder in meine Website? Hierzu gibt es insbesondere folgende Möglichkeiten:

1. Alle Bilder lagen bereits fix und fertig in den richtigen Formaten in Ihrem html-Ordner, als Sie Ihr Projekt eröffneten und über Neue Website/ aus Ordner importieren die Projektsite erstellten. Dies würde optimale Vorplanung und Vorarbeit bedeuten, wird aber in der Realität doch relativ selten der Fall sein.
   
   
2. Sie wollen zusätzliche, bereits optimierte und ins gif, jpg oder png-Format konvertierte Bilder aufnehmen. Es gibt zwei Möglichkeiten:

Sie ziehen das Bild von "außen" (d.h. vom Desktop oder einem geöffneten Fenster) in Ihr Projektfenster. Dort entweder gleich an die richtige Stelle oder Sie verschieben es dann innerhalb des Projektordners, bis es an der gewünschten Stelle (d.h. im richtigen Unterordner liegt; vgl. Kap. Projekteröffnung, Modul 6.1.1).
Von Ihren Bilddateien wurden Kopien angelegt, die Originaldateien blieben im Ursprungsordner oder auf Ihrem Desktop (Sie könnten letztere löschen, für das Projekt werden sie nicht mehr benötigt)

Wichtig: Ziehen Sie das gif, jpg oder png-Bild nicht von "außen" gleich auf in ein geöffnetes html-Dokument! Der Bildpfad funktioniert sonst nicht, wenn Sie später Ihren html-Ordner ins Web legen.


Sie schließen Ihr Projekt und GoLive. Dann legen Sie Ihre neuen Bilddateien in Ihren html-Rootordner (vgl. Kap. Projekteröffnung, Modul 6.1.1), am besten an die richtige Stelle und rufen Ihr Projekt in GoLive (via Doppelklick auf die site-Datei) wieder auf. Ihre neuen Dateien erscheinen im Projektfenster

Tipp: Sollten Sie nicht alle neuen Dateien sehen, aktivieren Sie das Projektfenster, gehen dann in den Menupunkt Website und Wählen "meinProjekt"-neu scannen ("meinProjekt steht für Ihren Projektnamen).

Tipp: Sie können auch ohne Ihr Projekt zu verlassen, die neuen Bilddateien in Ihren html-Rootordner verschieben. Im Projekt verwendbar und im Projektfenster angezeigt sind sie jedoch erst, wenn Sie wie oben beschrieben, die Website erneut scannen. Wenn Sie die Bilder immer noch nicht sehen, öffnen Sie im Projektfenster den entsprechenden Ordner mit den Bildern und scannen die Webseite erneut.

Frage 2: So, die Bilder sind drin, wie binde ich Sie nun in meine html-Seite ein?

1. Sie verwenden das Bildplatzhalter-Objekt aus der Objektpalette Allgemein und geben die Position und sonstige Attribute/Werte des Bildes im Bildinspektor an (wie bereits oben bei Objektpalette beschrieben)
   
   
2. Sie ziehen die Bilddatei vom Projektfenster an die richtige Stelle in einem geöffneten html-Dokument (im Layoutmodus)

Frage 3: Meine Bilder liegen nicht im richtigen Format vor, brauche ich ein Grafikprogramm?

Dank GoLive ist die Antwort: eigentlich nein. Es gibt einige nicht webfähige Formate, die GoLive direkt unterstützt. Dies sind v.a. Screenshot- und Copy/Paste-Formate (zumindest beim Mac, dort also das Pict-Format) sowie etliche vektorbasierte Formate (z.B. Illustrator). Komischerweise kann man aber andere nicht ohne weiteres importieren (wie z.B. Tiff in der Mac-Version), aber über die Zwischenanlage funktioniert dies ebenfalls (s.u.)

Insgesamt ist dies eine feine Sache. Gehen Sie folgendermaßen vor:

1. Ziehen Sie die Datei (z.B. Illustrator, EPS, PICT) direkt auf die Stelle in einer html-Seite, an der Sie sie benötigen. GoLive wird Ihnen mitteilen, dass dieses Format nicht geeignet ist, aber gleich für Sie umwandeln. Teilweise muss zuvor abgefragt werden, ob es ein gif oder jpg-Bild werden soll (v.a. beim Import von Vektorformaten), teilweise kann dies im Nachhinein noch geändert werden.
   
   Wichtig: Nur wenn das Bild nicht in einem webfähigen Format vorliegt, ziehen Sie es direkt in eine geöffnete html-Seite. Nur so fragt Sie GoLive, ob es das Bild umwandeln soll. Zögen Sie es in den Website-Ordner würde es nicht umgewandelt. Dies ist also genau umgekehrt zum Vorgehen mit Bildern, die bereits im webfähigen Format vorliegen.
   
   
2. In manchen Fällen wird nur gefragt, wie die Bilddatei heißen soll und dann an einen Ort Ihrer Wahl (muss aber innerhalb des html-root-ordners sein) gespeichert (ist z.B. bei den meisten importierten Screenshots so). Meist aber öffnet sich ein Bearbeitungsfenster, welches analog zu Adobe Image-Ready (welches Photoshop 6-Nutzer bereits kennen) aussieht, aber ein paar Funktionen weniger, z.T. aber auch mehr hat (s. Abbildung unten).

Hier eine Kurzbeschreibung der wesentlichen Funktionen dieses komfortablen integrierten Bildimporteditors am Beispiel der Umwandlung des importierten Bilds in ein jpg-Bild (s. Abb. oben, rote Zahlen):

1. Im Optimiert-Modus wird das Bild so dargestellt, wie es bei der vorgenommenen Einstellung (2-5) beim Abspeichern aussehen würde.
2. Auswahl zwischen JPEG (=jpg), GIF und PNG-Modus (z.T. noch weitere), in unserem Beispiel darunter ist die Grundqualität Hoch (für jpg-Kompression) ausgewählt. Dies kann auch stufenlos mit dem entsprechenden Qualitätsfeld eingestellt werden.
3. Aktivieren Sie auch die Option "optimiert".
4. Hier sehen Sie, wie groß die Datei bei den vorgenommenen Einstellungen werden würde. 13.34 KB bei einer Qualität von 60 % sind bereits ein gutes Ergebnis. Die voraussichtliche Ladezeit für ein 28,8 Kbps-Modem wird ebenfalls noch angegeben (in den Voreinstellungen können Sie auch einstellen, dass Ladezeiten für schnellere Modems oder ISDN angegeben werden).
5. Wenn Sie die Bildgröße auch noch ändern wollen, machen Sie hier noch entsprechende Änderungen.
   
   

Tipp: Sie können mehrere verschiedene Einstellungen ausprobieren. Bis zu vier werden Ihnen im entsprechenden Reiterfeld dann nebeneinander angegeben. Wählen Sie durch Mausklick das geeignetste aus und speichern Sie ab.

Damit haben Sie Ihr Bild hervorragend optimiert und eine kleine Dateigröße bei optimierter Qualität erreicht.

Nebenstehend sehen Sie die entsprechenden Einstellmöglichkeiten beim Import als gif-File. Stellen Sie am besten die Farbpalette auf Web, die Ditheroptionen auf kein Dither und die Farben auf Auto. Das gibt in der Regel kleine Bildgrößen bei möglichst großer Qualität.

Tipp: wollen Sie eine bessere Qualität, versuchen Sie andere Ditheroptionen und nehmen ggf. eine andere Farbtabelle. Die Bilddatei wird damit aber etwas größer. Wollen Sie noch kleinere Dateien erreichen, versuchen Sie es mit noch weniger Farben (z.B. 32) oder löschen aus der angezeigten Autofarbpalette von Hand einige Farben. Sie können bei Lossy ebenfalls noch die Qualität herunterfahren.

Tipp: Lesen Sie in Modul 2.4 nochmals Grundsätzliches zur jeweiligen Verwendung und Beschränkung von jpg- und gif-Bildern nach (Schließen Sie danach wieder das popup-Fenster).

Tipp: Wenn beim Import Ihres Bildes kein Importbearbeitungsfenster aufgeht, Sie dieses aber gerne benutzen würden, um das Bild zu optimieren, kopieren Sie das zu importierende Bild in die Zwischenablage und setzen die Zwischenablage dann direkt ein. Dabei öffnet sich das Importbearbeitungsfenster (siehe unten).

C. Import von Bildern über die Zwischenablage

Bilder, die nicht in webfähigen Formaten vorliegen und die Sie nicht durch Hineinziehen auf eine in GoLive geöffnete html-Seite importieren und umwandeln können, können Sie auch sehr gut über die Zwischenablage einfügen. Auch hier geht dann das Bildimportbearbeitungsfenster auf und Sie können die zu importierenden Bilder optimieren. Hierbei müssen Sie allerdings zwei Dinge beachten:

• Wenn Sie Bilder aus Vektorgrafiken über die Zwischenablage importieren, darf bei manchen Programmen kein Text dabei sein (dies ist z.B. beim Import von Illustrator-Grafiken so). Ansonsten kopiert Golive nur den Textanteil in die html-Seite. Auch Gruppieren der Objekte vor dem Import hilft nichts. Hier gibt es aber einen einfachen Workaround: Wandeln Sie den Text in Pfade um, dann können Sie die Gesamtgrafik auswählen, in die Zwischenablage kopieren und in eine html-Seite in GoLive (im Layoutmodus) einsetzen.
  
  Tipp: Wenn Sie Text als Gif-Grafiken gestalten wollen (z.B. um Layout-Schwierigkeiten bei Frames aus dem Weg zu gehen (vgl. Modul ) ist dies eine besonders einfache Methode.
  
  
• Die Zwischenablage ist oft nur endlich. Wenn Sie z.B. ein hochauflösendes Tiff-File über die Zwischenablage in eine GoLive-html-Seite kopieren wollen, stoßen Sie je nach Computer bald an die Grenze.
  Hier gibt es drei Workarounds:
  (1) Nach Möglichkeit rechnen Sie die Auflösung der Grafik mit einem einfachen Shareware-Programm etwas herunter, bevor Sie es in die Zwischenablage kopieren.
  (2) Machen Sie von der geöffneten Tiff-Datei ein Bildschirmfoto und kopieren dieses in die Zwischenablage, um es dann in GoLive einzusetzen. Um die Datei zu öffnen, brauchen Sie nur einen entsprechenden Freeware-Viewer.
  (3) (umständlich) Machen Sie mehrere Teilauswahlen, die Sie nacheinander in die Zwischenauswahl kopieren und in Golive in eine Tabelle ohne Rand und Zellabstände einsetzen.

Frage 4: Kann ich in meinem Projektfenster vorhandene gif- und jpeg-Bilder auch nachträglich noch einfach editieren?

Die Antwort ist: ja, wenn auf Ihrem Rechner ein Grafikprogramm, welches gif- und jpeg-Formate versteht, vorhanden ist.

Wenn Sie auf eine Bilddatei innerhalb des Projektfensters oder auf ein bereits in einer html-Seite eingebautes Bild doppelklicken, fragt Sie GoLive, mit welchem Bildbearbeitungs- oder Grafikprogramm Sie das Bild öffnen wollen. Wählen Sie hier ein geeignetes aus. Fortan wird GoLive Bilder auf Doppelklick immer in diesem Programm öffnen.

Unter GoLive 6 für MacOS X funktioniert dies etwas anders. Hier wird immer das Bild mit dem dafür voreingestellten Grafikprogramm geöffnet. Sie können das Bildicon aber auch vom Website-Fenster aus auf das gewünschte Programm ziehen oder alle Bildicons markieren, das Infofenster aufrufen und dort das gewünschte Programm zuordnen.

Besonders eignet sich Image-Ready, die kostenlose Dreingabe von Photoshop 6, weil Sie die meisten Funktionen damit ausführen können und ggf. mit einem Klick von Imageready direkt in Photoshop (und auch wieder zurück) wechseln können. Aber auch viele andere Grafikprogramme (z.B. Paintshop Pro, Corel Paint usw) eignen sich. Ändern Sie Ihr Bild wie gewünscht und speichern Sie es wieder als gif oder jpg-File ab (Vergessen Sie aber nicht, dass mehrfaches Abspeichern eines bereits im jpg-Format vorliegenden Bildes als jpg die Qualität enorm verschlechtert, da die Kompression nicht verlustfrei ist (siehe Modul 2.4). Besser ist es, bei notwendigen Änderungen wieder mit dem nicht in jpg-vorliegenden Original zu arbeiten und erneut als jpg zu komprimieren (siehe dazu auch nächster Punkt).

"Importierte" Bildaktualisierung mit Smart-Objekten

GoLive beinhaltet prinzipiell ein weiteres Schmankerl (sorry, in der Cybersprache ist dies wohl eher ein "goodie"), dies ist die automatische Aktualisierung von Projektbildern bei Änderung eines (externen Originals).

Die Objektepalette enthält auch einen Reiter "Smart" (zweiter von links in der ausgelieferten Originalversion), in dem sich die Objekte "Smart Photoshop" und "Smart Illustrator" befinden. Diese Objekte können Sie dann als Bildplatzhalter in eine GoLive html-Seite einbauen und mit dem Inspektor sowohl auf die Originaldatei (Quelle) und den Platzhalter (Ziel) verlinken. Quelldateien müssen aber im Photoshop bzw. Illustrator-Format vorliegen. Es geht dann wiederum das Bildimportbearbeitungsfenster auf und Sie können die Optionen für Ihr Webbild wie geschildert unter optimiert angeben und abspeichern. Die Originaldatei, die vielleicht hochauflösend war, wird dabei nicht verändert. Wenn Sie nun später Änderungen an der Originaldatei vornehmen, wird beim nächsten Aufruf Ihres Webprojektes in GoLive automatisch auch die Webversion entsprechend geändert. Ganz schön smart...

Weniger smart ist allerdings, dass es beim Smart-Import einer etliche MB großen Photoshop-Datei schon mal folgende nette Fehlermeldung geben kann:

Am Mac können Sie dem Programm mehr Speicherplatz zuteilen, dann sollte es klappen. Statt dieser Fehlermeldung kann aber schon auch mal ein Absturz auftreten, not very smart.... Für Illustratordateien klappt es aber sehr schön.

Tipp: falls Ihr Webbild trotz in der Quelldatei vorgenommener Änderung nicht aktualisiert wird, klicken Sie nochmals drauf. Sie brauchen aber Illustrator nicht zu starten, sondern können die Bildöffnung wieder abbrechen, spätestens dann ist das Bild aktualisiert. Die Quelldatei kann übrigens in einem Ordner innerhalb des Projektfensters liegen (z.B. unter Vorlagen), kann aber auch ganz extern liegen (dann allerdings nicht mit point&shoot, sondern nur über den Dateiauswahl-Dialog verlinkt werden)

Frames

Bilder

Videos und Co.