Grundlagen des Webdesigns (Teil 2)

Bildbearbeitung

Das Programm für Bildbearbeitung im Profibereich ist und bleibt Photoshop. Momentan gibt es schon die deutsche Version 7.0. von Adobe. Informationen über die Software, sowie Tipps und Tricks findet man auf der Homepage der Firma Adobe.

Wenngleich es für den normalen User zunächst zu teuer und umfangreich erscheint - es gibt andere Alternativen, die günstiger sind und auch die gleichen Tools für die Bildbearbeitung bieten. Wenn man sich einen neuen Rechner oder einen Scanner kauft, sind solche Programme manchmal dabei. Tryout-Versionen (zeitbegrenzte Versionen nur zu Übungszwecken) werden oft auch in Fachzeitschriften angeboten. Zum Einstieg in die Materie reicht dies vollkommen aus.

Montage zum Thema Webdesign: Annette Grund

Entscheidend für die Aufbereitung der Fotos für Webseiten sind:

• Bildgröße: nicht größer als 535 Pixel breit, da bei einer sicheren Browserdarstellung von dieser Layoutbreite ausgegangen werden muss, damit auch auf einem 15-Zoll-Bildschirm noch alles im sichtbaren Bereich liegt. Nicht zu viele Grafiken auf der Startseite, ansonsten zu langer Bildaufbau, der User verlässt die Seite (Empfehlung: zusammen nicht mehr als: 50 kb auf jeder Seite)
• Bildmodus: Grafiken für den Webauftritt werden im RGB-Modus mit einer Auflösung von 72 dpi (dots per inch) abgespeichert. In Photoshop 6.0 zu finden unter Menüpunkt Datei: Neu: Breite, Höhe, Auflösung und Modus einstellbar. Hat man eine schon bestehende Datei geöffnet unter Menüpunkt Bild: Bildgröße: Breite, Höhe Auflösung nachträglich möglich. Eine Modusänderung von CMYK (für den Printbereich verwendet) ist möglich unter Bild: Modus: RGB.
• Bildformate:
  • JPGs für Fotografien und Bilder mit Verläufen,
  • Gifs für Logos und klar strukturierte Abbildungen mit wenigen Farben sowie für Grafiken mit transparentem Hintergrund und animierte Gifs,
  • PNG das Format der Zukunft im Web, da transparente Verläufe möglich, jedoch nur von einigen neuen Browsern unterstützt
  Alle Formate sind ideal für Webgrafiken, da sie nur eine geringe Dateigröße haben, beim JPG kann man die Dateigröße noch zusätzlich verringern wenn man eine niedrige Qualitätsstufe wählt (in Photoshop z.B. unter dem Menüpunkt Datei: für Web speichern).Bei Gifs kann man die Dateigröße reduzieren, indem man die Anzahl der enthaltenen Farben auf ein noch verträgliches Maß reduziert.
• Hintergrundbilder können eine Alternative sein, wenn sie nicht zu farbintensiv sind und der Text darüber noch lesbar ist. Für Kacheln gilt dasselbe: nicht zu bunte oder dunkle Bilder. Kacheln können selber in einem Bildbearbeitungsprogramm erstellt werden oder werden auf verschiedenen Seiten als Download angeboten, z.B. : www.homepagemagazin.de
  www.guppi.de

Hintergrundbilder: oben: schlechtes Beispiel, unten: möglich

• Besondere Schriften und Logos als Gif abspeichern, Hintergrund transparent und bei Für Web speichern: die Hintergrundfarbe der Seite angeben (Photoshop)

• Urheberrechte beachten am besten, man benutzt nur selbst erstellte Grafiken auf seiner Webseite, ansonsten werden Lizenzgebühren fällig bzw. bei ungefragter Kopie aus dem Internet Schadensersatzklagen. Alternative: kostenfreie Bilddatenbanken im Netz. Diese Bilder darf man zu nichtkommerziellen Zwecken auf seinen Seiten nutzen.

• Bilder positionieren möglich über HTML-Editoren (siehe Websdesign Teil1, Beispielseite) oder High-Level-Editoren. In Tabellen oder Layern für die absolute Positionierung von Elementen (jedoch nur ab Netscape 4.0 für CSS Stylesheets festgelegt).

Nützliche Links
Buchtipps