Medienformate bestimmen

Siehe auch → Berufskunde → Medienformate

FOTOS

800x800-foto

.jpg Format
→ Foto in Photoshop in RGB umwandeln (falls noch in CMYK)
→ Auflösung 72 DPI
→ "Datei" → Export → "Für Web speichern" (Tastaturkürzel Mac: Alt-Umschalt-Cmd-S)
→ Format "jpg" wählen, Qualität 50% üblicherweise genügend, bei sehr grossen Bildern unter 50%
→ Sichern mit korrektem Dateinamen (in den Webordner)

GRAFIKEN

800x800-grafik

.png Format
→ Foto in Photoshop in RGB umwandeln (falls noch in CMYK)
→ Auflösung 72 DPI
→ "Datei" → Export → "Für Web speichern" (Tastaturkürzel Mac Alt-Umschalt-Cmd-S)

→ Format "png 8-bit" wählen falls keine graduelle Transparenz nötig, und falls max. 256 Farben genügen
→ Ansonsten "png 24-bit", wenn mehr Farben und/oder graduelle Transparenz benötigt werden

→ Sichern mit korrektem Dateinamen (in den Webordner)

KOMPLEXE GRAFIKEN

800x800-graustufen

.jpg Format
Komplexe Grafiken mit Verläufen, vielen Graustufen etc. besser in jpg als in png-24 speichern, da das Dateigewicht so deutlich verringert werden kann.

→ Vorgehen wie bei jpg normal

Einfache Animationen

pinky

.gif Format
→ Einfache Animationen in Photoshop oder Fireworks erstellen (mit Zeitleiste)
→ RGB Farbmodus
→ Auflösung 72 DPI
→ "Datei" → Export → "Für Web speichern" (Tastaturkürzel Mac: Alt-Umschalt-Cmd-S)

→ Format "gif" wählen, verschiedene Farbselektionsoptionen ausprobieren

→ Sichern mit korrektem Dateinamen (in den Webordner)

Logos, Vektordateien

SVG Grafik

.svg Format
→ Grafik in Illustrator in RGB umwandeln (falls CMYK),
→ "speichern unter" > als SVG, mit korrektem Dateinamen (in den Webordner)

→ Danach im HTML einbinden wie normales Bild

VIDEOS

1. Möglichkeit: via Youtube oder Vimeo einbetten

→ Code direkt bei Youtube besorgen (→ Teilen → Einbetten → Mehr anzeigen → Optionen beachten)
→ Erhaltenen Code ins eigene HTML einsetzen (iframe)
→ Zusätzliches CSS anwenden für die Responsivität des iFrames (download Muster)

2. Möglichkeit: lokales Video einbinden

→ Video im mp4 Format ausgeben
→ korrekt benannt in den Webordner legen
→ als Videotag einbinden gemäss Anleitung w3schools


 

Bildausgabe für Web mit Photoshop

 

Photoshop: Vorgehensweise bei der Bildausgabe ("Sichern für Web")
Tastaturkürzel Mac: Alt-Umschalt-Cmd-S
Tastaturkürzel Windows: Alt-Umschalt-Ctrl-S

(Bild anklicken zum Vergrössern)