Fünf Elemente perfekter Bildbearbeitung im Webdesign
Autor：Eve Cole
Aktualisierungszeit：2009-06-20 16:51:39
1. Format: Das PNG-Format wird für Bilder mit einfachen, von Computern generierten Formen (z. B. Logos und Symbole) bevorzugt, während Fotos mit satten Farben im JPEG-Format vorliegen müssen. Wenn wenige Farben und keine Farbverläufe vorhanden sind, sollte das GIF-Format verwendet werden.
GIF ist das am häufigsten verwendete Webbildformat. GIF enthält bis zu 256 Farben und funktioniert mit fast allen Bildern außer Fotos. Es bietet auch die Möglichkeit, einfache Animationen und transparente Bilder zu erzeugen.
Das PNG-Format ist relativ neu und ebenfalls ein vom W3C empfohlenes Format. PNG-8 kann bis zu 256 Farben enthalten, vergleichbar mit GIF; PNG-24 unterstützt den RGB-Modus, der jede Farbe mit höherer Qualität darstellen kann; PNG-32 fügt einen auf PNG-24 basierenden Alphakanal hinzu, der transparent eingestellt werden kann.
JPEG kann etwa 16,7 Millionen Farben speichern und wird häufig zum Speichern von Fotos verwendet. Ansonsten wird JPEG fast nie verwendet. Wenn das Bild weniger als 256 Farben hat oder große Bereiche mit Volltonfarben enthält, funktioniert JPEG nicht gut – die Dateigröße kann verdoppelt werden, um ein qualitativ hochwertiges Bild zu erhalten.
Bei der Auswahl eines Bildformats sollten Sie dessen Einsatzbereich umfassend berücksichtigen, wie z. B. Farbe, Transparenz, Animation usw., wie unten beschrieben. Über den Export-Assistenten von Photoshop oder Fireworks können verschiedene Parameter verglichen werden. Das Auswahlkriterium ist, dass die Dateigröße bei akzeptabler Bildqualität möglichst klein sein sollte.
2. Farberstellungsbilder sollten zum Drucken den RGB-Modus und nicht den CMYK-Modus verwenden. Machen Sie sich keine Sorgen über browsersichere Farben, da fast niemand mehr 8-Bit-Monitore verwendet. Die Farbauswahl sollte sich an einheitlichen Standards orientieren, beispielsweise an Systemen zur visuellen Identität (Visual Identity, VI). Die Anzahl und Wirkung der Farben sind wichtige Faktoren bei der Bestimmung des Bildformats. Beispielsweise kommt es bei der Speicherung als GIF zu Verzerrungen und auch zu einer deutlichen Vergrößerung der Datei sollten die Verwendung des PNG-24-, PNG-32- oder JPEG-Formats in Betracht ziehen.
3. Größe Bilder, die mit Vektorerstellungstools erstellt wurden, eignen sich oft zum Speichern im PNG-Format und ihre Größe sollte im Vektorzeichentool bestimmt werden. Sobald sie in eine Bitmap konvertiert werden, kann sie nicht einfach skaliert werden (insbesondere sollte sie nicht vergrößert werden). ). Es ist erwähnenswert, dass in Fireworks erstellte PNG-Dateien bearbeitbare Informationen wie Ebenen enthalten und die darin enthaltenen Linien, Formen und Texte allesamt Vektorgrafiken sind. Beim Anwenden eines solchen Bildes auf eine Webseite sollte zunächst ein Ausgabevorgang durchgeführt werden, um die Dateigröße zu komprimieren. Das ausgegebene PNG-Bild wird außerdem in eine Bitmap konvertiert, da bearbeitbare Informationen verloren gehen. Daher sollte die Anpassung der Bildgröße vor dem Ausgabevorgang abgeschlossen sein. Die Bitmap wird nicht skaliert, um sicherzustellen, dass die Umrisse und Farbverläufe des Bildes klar genug sind.
Bei vorhandenen Bitmaps und Fotos sollten Sie Photoshop und andere Software verwenden, um die Größe anzupassen, bevor Sie sie in die Webseite einfügen, anstatt die Breiten- und Höhenattribute in der HTML-Sprache zu verwenden, um die Bildgröße zu ändern. Die direkte Verwendung der HTML-Sprache zur Steuerung der Bildgröße kann zu schwerwiegenden Bildverzerrungen führen.
Im Allgemeinen sollten auf Webseiten platzierte Bilder auf eine relativ kleine Größe beschränkt werden. Wenn es mit Text gemischt wird, sollte die Breite etwa 300 Pixel betragen. Auch wenn es alleine erscheint, sollte die Breite weniger als 600 Pixel betragen. Was die Höhe betrifft, ist es angebracht, einen Bildschirm nicht zu überschreiten.
4. Transparentes GIF und PNG unterstützen beide Transparenz, jedoch auf unterschiedliche Weise. GIF stellt einfach eine oder mehrere Farben vollständig transparent ein, ohne die Transparenz benachbarter Verlaufsfarben zu berücksichtigen. Das heißt, wenn sich die Hintergrundfarbe stark ändert (oder mehrere Kontrastfarben enthält), ist der Übergang zum transparenten Teil nicht fließend und es entsteht eine deutliche Trennlinie. Wenn Sie ein transparentes GIF erstellen möchten, müssen Sie die Hintergrundfarbe der Leinwand so einstellen, dass sie mit der Hintergrundfarbe des Zieleffekts übereinstimmt (oder dieser nahekommt). PNG hat dieses Problem nicht und kann auch durchscheinend eingestellt werden.
Allerdings kann IE6 transparente PNGs standardmäßig nicht korrekt anzeigen und es müssen entsprechende Maßnahmen ergriffen werden.
5. Animationen auf animierten Webseiten umfassen normalerweise Flash und animiertes GIF. Flash verfügt über leistungsstarke Funktionen, reichhaltige Effekte, hohe Bildqualität und leistungsstarke Erstellungssoftware. In den meisten Fällen ist es die bevorzugte Form der Webanimation. Der Nachteil von animiertem GIF besteht darin, dass es nur nicht mehr als 256 Farben verwenden kann und es schwierig ist, Animationen mit komplexen Effekten zu erstellen. Der Vorteil besteht jedoch darin, dass die Datei klein ist und in jedem alten oder modernen Browser ohne Plug-In abgespielt werden kann -in Unterstützung.
