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
  • Farbmodelle
    • rgb(), rgba()
      • Hexadezimale Schreibweise
    • hsl(), hsla()
      Farbton/Sättigung/Helligkeit
    • color()
  • Farbpaletten
    • Farbnamen
  • Variablen (currentColor)

 

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

• Farbkonzept
  • Farbenlehre
  • Beispiele für Farbkonzept
  • Farben und Kontraste
  • Licht und Schatten
  • Dark Mode - unterschiedliche Themes für Tag und Nacht

 

• Grundbegriffe
• Helferlein: Farbwähler
• Favicon in Tab und Favoriten
• Grafiken mit Data-URI

JavaScript

• Bild-Wechsler mit Web Animations
• canvas

Siehe auch

• SELF-Blog: GIF - heute noch aktuell? vom 26.03.2022

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