Grafik

Dieser Abschnitt behandelt wichtige Grundkenntnisse zum Gestalten von Grafiken für Web-Seiten. Er ist jedoch kein Tutorial für das Arbeiten mit bestimmten Software-Produkten.

• Farben
  • RGB-Modell
    • Hexadezimale Schreibweise
    • rgb()
  • Farbton/Sättigung/Helligkeits-Mischung
    • hsl()
    • hsla()
  • CMYK-Modell
• Farbpaletten
• Farbnamen

• Grafikformate
  • Formate für Rastergrafiken
    • BMP
    • JPG
    • PNG
    • GIF
    • WebP
  • Formate für Vektorgrafiken
    • SVG

• Grundbegriffe
• Helferlein: Farbwähler

• Favicon - Bild in Adresszeile und Reiter
• animierte Grafiken
• Grafiken mit Data-URI

Siehe auch

HTML

• HTML/Tutorials/Bilder im Internet
• HTML/Multimedia und Grafiken
  • Grafiken einbinden (img)
  • hochauflösende Bilder responsiv darstellen
  • Verwendung des picture-Elements
  • Tutorials/Lightbox-Galerie einbinden

CSS

• hochauflösende Bilder responsiv darstellen
• Bilder mit Bildunterschriften
• Bilder mit CSS-Sprites zusammenfassen
• Image-Replacement
• Mehrere Hintergrundbilder verwenden (von Matthias Apsel)
• Bildergalerie
• Bilderkarussell
• Bildwechsler (mit CSS-animation)

JavaScript

• Lehrgang zum Erstellen einer Slide-Show
• canvas

SVG

• Warum SVG nutzen?

Weblinks

Deutschsprachige Hilfen und Quellen zur Grafikbearbeitung

fastix.org

Data-URI-Generator sowohl online als auch zum Download

Internationale Hilfen und Quellen zur Grafikbearbeitung

Hands-On

Tipps und Tricks zur Gestaltung web-gerechter Grafiken mit Photoshop.
von Thaddeus Ozone, einem der bekanntesten Web-Designer.

Deutschsprachige Quellen für Grafiksammlungen

• pixabay.com: alle Bilder und Videos frei von Urheberrechten unter Creative Commons CC0 veröffentlicht, Namensnennung ist nicht erforderlich (verschiedene Kategorien)
• fotodatenbank.com: alle Fotos zum kostenlosen Download und zur lizenzfreien Verwendung (verschiedene Kategorien: Tiere, Lebensmittel Computer, Business,...); Registrierung erforderlich, um Bilder in voller Auflösung herunterladen zu können

Beachten Sie das Urheberrecht: Vorsicht bei der Nutzung kostenloser oder vermeintlich lizenzfreier Bilder

Internationale Quellen für Grafiksammlungen

• Perry-Castañeda Library: Map Collection: Ausführliche Landkarten aller Länder der Welt, frei verfügbar zur eigenen Verwendung
• openclipart: Grafik-Community mit unter Public-Domain stehenden SVG-Grafiken
• Wikimedia Commons: Mediensammlung der Wikipedia; die Medien sind frei, die einzuhaltenden Lizenzbedingungen variieren allerdings von Bild zu Bild.

Beachten Sie das Urheberrecht: Vorsicht bei der Nutzung kostenloser oder vermeintlich lizenzfreier Bilder

Farben

• Farbenlehre / Die Evolution der Farben: Farbenlehre für Fortgeschrittene. Themen unter anderem: biologische Ursachen des Farbenreichtums; was ist falsch an den Dreifarben-Theorien? Polarität von Farben; neuere Erkenntnisse über Goethes Farbenlehre.
  Autor: Reinhold Sölch
• Tutorial: Farben im Webdesign: Großes und fundiertes Tutorial zum Thema "Webseiten und Farbenlehre" mit JavaScript-basiertem Farbwaehler.
  Autor: Hartmut Rudolf
• Zwisler: Skripten zur Psychologie: Wissenschaftliche Texte, unter anderem zur Farbforschung: Farbwahrnehmung, Konzepte der Farbforschung, Photometrie, Grassmann-Struktur der Farben, Geschichte der Psychologie des Sehens nach Boring
  Autor: Rainer Zwisler