Bilder für's Web
Bilder für's Web
Bilder für's Web
Kann ich meine Bilder selber machen?
Jain!
Bilder für's Web
Wenn Du talentiert bist,
Dich in Computerprogramme einarbeiten kannst,
Geduld und Zeit hast.
Ja.
Bilder für's Web
Wenn's professionell sein soll,
Du wenig Zeit hast
und nicht viel Arbeit reinstecken willst.
Nein.
Bilder für's Web
Warum?
GrafikerInnen sehen mehr und kümmern sich um wichtige Kleinigkeiten.
FotografInnen wissen wie wichtig das richtige Licht ist.
Laien brauchen viel länger.
Bilder für's Web
Grafiken:
Fotos:
Bilder für's Web
- Bilder liegen als Dateien auf dem Server
- Es gibt verschiedene Bild-Datei-Typen
- .gif . - Graphics Interchange Format
- .jpg -Joint Photographic Experts Group
- .png - Portable Network Graphics
- .svg - Scalable Vector Grafic
Bilder für's Web
.gif
- Grafik
- 256 Farben
- klein - lädt schnell
- kann Transparenz
- kann Animationen
Bilder für's Web
.jpg
- Fotos
- bis zu 16 Millionen Farben
- Komprimierung (unnötige Daten werden gelöscht)
- verschiedene Auflösungen
- keine Transparenz
Bilder für's Web
.png
- Fotos und Grafiken
- bis zu 16 Millionen Farben
- verlustfrei
- Transparenz
- Dateien sind größer
Bilder für's Web
jpg
png
gif
372kb
559kb
190kb
Bilder für's Web
110kb
60% 30kb
90% 42kb
jpg-Komprimierung
Bilder für's Web
Verschiedene Originalgröße.
Runter Rechnen geht,
rauf Rechnen geht nicht.
Bilder für's Web
Das ideale CMS
kann
Bildgrößen ans Gerät anpassen,
auf dem die Website ausgeliefert wird.
Bilder für's Web
.svg
- Grafiken
- bis zu 16 Millionen Farben
- Keine Pixel, sondern Mathe
- Transparenz
- "immer scharf"
Bilder für's Web
svg 14kb
png 15kb
jpg 10kb
gif 10kb
Bilder für's Web
svg
png
jpg
gif
Bilder für's Web
Bilder für's Web
Was wofür?
gif |
jpg | png |
svg |
---|---|---|---|
einfache Grafik |
Foto | Grafik und Foto | Grafik |
wenig Verlauf | Verläufe | Verläufe | Verläufe |
Transparenz | - | Transparenz | Transparenz |
Animationen | - | - | Animationen |
- | Kompression | - | Klein |
- | - | - | skalierbar "immer scharf" |
Bilder für's Web
Bildbearbeitung am PC
(Wenn's nun doch sein muss?)
https://www.gimp.org/ jpg, gif, png
https://inkscape.org/ svg, png
Fotoberabeitung online
https://www.fotor.com/
https://pixlr.com/
https://picresize.com/de
Bilder für's Web
Wenn's nun doch sein muss?
Fotoberabeitung online
https://www.fotor.com/
https://pixlr.com/
https://picresize.com/de
Bilder für's Web
Warum schaut mein Bild im Druck
anders aus als am Monitor?
- Monitor = Durchlicht
- Druck = Auflicht
- Monitore haben unterschiedliche Farbwärme
- Die Auflösung macht den Unterschied.
Bilder für's Web
Bildauflösung
dpi = Bildpunkte pro Inch (~2,5cm)
(ppi = Lichtpunkte pro Inch)
Monitor alt: 72 - 96 dpi
Monitor Retina: 200 - 300
Smartphone, HD: 200 - 800
Bilder für's Web
Bildauflösung
Bildgröße 800x600
Wird auf einem 400px breitem Bildschirm schärfer als auf einem 1080px breiten.
Beispiel
Bilder für's Web
Druck
Mind. 300 dpi für Fotos -> Auflösung des menschlichen Auges.
Für große Plakate kann es weniger sein.
Bilder für's Web
Ausdrucken eines Webbildes
Kleines Format, 72 dpi
Am Bildschirm scharf.
Ausdruck auf Papier unscharf oder verpixelt.
Bilder für's Web
Remember
Bei Fotos immer die Originale aufheben.
SVG Grafiken sind immer scharf
Bilder für's Web
By Eva Broermann
Bilder für's Web
WebCafé
- 532