Digitalisierung / Bildbearbeitung für das Internet WBLMed mit Photoshop 5.5

1. Digitalisierung / Bildbearbeitungfür das InternetWBLMedmit Photoshop 5.5

2. Inhaltsverzeichnis Vorwort Bildgröße, Auflösung Bildschirmauflösung Ausgabeauflösung, Dateigröße Dateiformate GIF, JPG Scannen von Bildern Arbeitsoberfläche Adobe Photoshop 5.5 Scannen in Adobe Photoshop 5.5 Bildgröße Wechsel in ein anderes Dateiformat Konvertierung in ein anderes Bildformat Konvertierung für das Internet Werkzeug-Palette Bilder zuschneiden Helligkeit/Kontrast Farbvariationen Selektive Farbkorrektur Filter Linien, Pfeile Text Ebenen Hinweis Folie 3 Folie 4 Folie 5 Folie 6 Folie 7 Folie 8 Folie 9 Folie 10 Folie 11 Folie 12 Folie 13-14 Folie 15 Folie 15 Folie 16 Folie 17 Folie 18 Folie 19 Folie 20-24 Folie 25 Folie 26 Folie 27 Folie 28

3. Vorwort Um Bildmaterial für das Projekt WBLMed in die gewünschte internettaugliche Form zu bringen, stehen mehrere Möglichkeiten zur Verfügung. Digitalisierte Bilder können auf verschiedene Weise erzeugt werden. Dieses Tutorium beschäftigt sich allgemein mit dem einscannen von Bildern und Dias, deren Abspeicherung, den geeigneten Dateiformaten, Maßeinheiten, Dateigröße (= Datenmenge), Auflösung (= Datendichte), Scanner-Beispiel usw. Weiters werden anhand des Programmes Photoshop 5.5 die wichtigsten Bildbearbeitungstechniken demonstriert.

4. Bildgrösse / Auflösung Bildmaße: Die Anzahl von Pixeln, die die Breite und Höhe eines Bildes ergeben, bezeichnet man als Bildmaße. Die Anzeigegrösse eines Bildes auf dem Bildschirm ist abhängig von den Bildmaßen des Bildes sowie der Grösse und Pixel-Einstellung des Monitors. 17 Zoll-Monitor: 823 x 624 Pixel20 Zoll-Monitor: 1024 x 768 Pixel Bildauflösung: Die Anzahl von Pixeln pro Längeneinheit auf dem Monitor bezeichnet man als dpi (dots per inch – Punkte pro Zoll). Die normale Auflösung eines PC-Monitors beträgt 96 dpi (Mac 72 dpi) Die tatsächliche Größe des Bildes wird exakt dargestellt, wenn die Einstellungen des Bildschirms mit der Auflösung des Bildes übereinstimmt.Die meisten Bildschirme können über die Systemsteuerung auf eine Vielzahlvon Pixel-Auflösungen eingestellt werden.

5. Bildschirmauflösung Ein Bild mit einer hohen Bildauflösung enthält mehr – und damit kleinere Pixel – als ein Bild mit den gleichen Maßen bei niedrigerer Auflösung. Beispiel: 72 dpi (entspricht der Bildschirmauflösung) 553 x 369 Pixel132 KB (Dateigrösse) 19,81 x 13,21 cm 20 dpi (schlechteres Ergebnis) 156 x 104 Pixel19 KB (Dateigrösse) 19,81 x 13,21 cm

6. Ausgabeauflösung, Dateigröße Für den Ausdruck ist die Bildschirmauflösung qualitativ nicht ausreichend. Die meisten Laserdrucker können mit einer Auflösung von 600-1200 dpi drucken. Dies würde aber sehr große Dateigrössen ergeben, die für die Publizierung im Internet viel zu groß sind. Wir empfehlen einen Mittelweg von 72-300 dpi für eine ansprechende Qualität. Als maximale Dateigröße eines Bildes wird für das Internet allgemein 50 KB empfohlen. • Es ergeben sich also 3 Anhaltspunkte für das Scannen von Bildern: • Bildmaße in Pixel • Bildauflösung in dpi • Dateigröße in KB Diese Werte sind stets proportional zueinander. Sie sind für das Scannen maßgeblich und in allen Scannertypen frei wählbar.

7. Dateiformate In Webseiten werden im Allgemeinen drei Grafikdateiformate verwendet: GIF, JPG, und PNG. GIF und JPG werden von den meisten Browsern unterstützt. GIF-Dateien (Graphic Interchange Format) verwenden maximal 256 Farben:Sind besonders gut für Bilder geeignet, die nicht kontinuierliche Farbtöne oder große Bereiche mit flache Farben enthalten (Schaltflächen, Navigationsleisten, Symbole, Logos. GIF-Bilder können mit einem transparentem Hintergrund erstellt werden. JPG-Dateien (Joint Photographic Experts Group) eignet sich am besten für Fotos und Bilder mit kontinuierlichen Farbtönen, da JPG-Dateien Millionen von Farben enthalten können. Sie sind im allgemeinen grösser als GIF-Dateien, es kann aber durch die richtige Komprimierung ein sehr guter Ausgleich zwischen Bildqualität und Dateigröße erzielt werden (z.B. in Photoshop).

8. Scannen von Bildern Zum Scannen eines Bildes muß die entsprechende Scanner-Software installiert sein, diese werden direkt vom Scanner über ein zu Adobe Photoshop kompatibles Zusatzmodul oder die TWAIN-Schnittstelle importiert. Sie können natürlich auch ein anderes Bildbearbeitungsprogramm wie Corel Photo Paint, Picture Publisher, Paint Shop Pro, Photo Draw etc. verwenden. Wir empfehlen Photoshop, da es sich im jahrelangen Einsatz bestens bewährt hat und sehr viele Möglichkeiten bietet. Nur die wichtigsten Programmfunktionen sollen hier vorgestellt werden. Die anderen erwähnten Programme weisen ähnliche Werkzeuge und Filter auf. Die Bildgröße, Auflösung und Dateigröße lassen sich aber in allen Programmen für den Scan auswählen, und können in der Definition abweichen.

9. Arbeitsoberfläche Adobe Photoshop 5.5 Bild-Titelleiste Menüleiste Werkzeuge Arbeits-bereich Statusleiste gescanntes Bild Ebenenfenster Werkzeugspitzenfenster

10. Scannen in Adobe Photoshop Beispiel für einen 35 mm Diascanner: Menüleiste Datei importieren Nikon....(je nach installiertem Scannertyp) Hier werden vor dem eigentlichen Scan alle wichtigen Werte zumindest vorgewählt ! Ausgabegröße DPI Dateigröße Bildausschnitt vordefinieren

11. Bildgröße Jetzt folgt die eigentliche Feinjustierung der Bildmaße. Menüleiste Bild Bildgröße... Dateigröße Größe in Pixel Ausgabegröße Auflösung in DPI

12. In ein anderes Dateiformat wechseln Menüleiste Datei Speichern unter... Photos als JPGBilder als GIF

13. Konvertierung für das Internet (1) Für das Internet sollte man die Pixelgröße beachten. Da Bilder möglichst vom Browser nicht skaliert werden sollten, werden Bilder gleich in der Richtigen Pixelgröße und einer angemessenen DPI-Auflösung abgespeichert. Für diese Beispiel wurde das Bild von ursprünglich 1145 x 905 Pixel, 2.96 MB, 250 dpiauf ein kleineres Maß von 400 x 315 Pixel, 370 K und 300 dpi verkleinert. Nun erfolgt der „Feinschliff“: Menüleiste Für Web speichern Dateigröße, Bildqualität, und Ladezeiten lassen sich je nach Wunsch einstellen. Bilder für das Internet sollten nicht größer als 50 KB werden, da der Browser sonst beim Laden der Bilder zu lange braucht.

14. Konvertierung für das Internet (2) Endergebnis: Fertig konvertiertes Bild für das Internet: 400 x 315 Pixel, 38,15 KB Dateigröße 300 dpi (um auch für den Druck ein akzeptables Ergebnis zu bieten) 8 Sekunden Ladezeit (56,6 Kbps Ladegeschwindigkeit)

15. Werkzeug-Palette Menüleiste Fenster Werkzeuge einblenden Adobe Online Freistellungswerkzeug Bewegen Lasso (Auswahlwerkzeug)... Zauberstab (Auswahlwerkzeug) Airbrush Pinsel Stempel... Protokoll-Pinsel,Kunstprotokoll-Pinsel Radiergummi... Linien, Buntstift Weichzeichner... Abwedler... Zeichenstift... Textwerkzeug... Meßwerkzeug versch. Verlaufsmöglichkeiten.... Füllwerkzeug Pipette... Hand-Werkzeug Zoom-Werkzeug Vordergrundfarbe Hintergrundfarbe Standardfarben Standardfarben Bildschirm-Standard-Modus Maskierungs-Modus Standard-Grafikeditor starten

16. Bilder zuschneiden Klicken Sie mit dem Mauszeiger auf das Freistellungswerkzeug in der Werkzeugpalette. Wählen sie einen Ausschnitt und bestätigen Sie mit einem Doppelklick auf die linke Maustaste.

17. Helligkeit / Kontrast Menüleiste Bild Einstellen Helligkeit/Kontrast

18. Farbvariationen Für eine einfache, schnelle Farbkorrektur, Helligkeit, Farbsättigung etc.... Menüleiste Bild Einstellen Variationen

19. Selektive Farbkorrektur Für eine genaue Farbkorrektur: Menüleiste Bild Einstellen Selektive Farbkorrektur..

20. Filter Photoshop bietet eine große Anzahl von Filtern. Bsp. spezieller Scharfzeichner-Filter: Menüleiste Filter Scharfzeichnungsfilter Unscharf Maskieren Original angeschärfte Version

21. Korrekturfilter (Anti-Moiré-Effekt) Beim Einscannen von gerastertem Bildmaterial (aus Zeitungen, Magazinen etc.) kann ein störender Moiré-Effekt entstehen, der mit dem Filter „Störungen entfernen“ behoben oder abgeschwächt werden kann, um eine einheitliche Farbgebung zu erzielen. Menüleiste Filter Störungsfilter Störungen entfernen Original korrigierte Version mit deutlich verringertem Raster

22. Kombination verschiedener Filter Durch den Einsatz von Filtern lassen sich Bilder sehr gut optimieren. Bsp. Einsatz verschiedener Filter. • Änderung des Bildes : Menüleiste Bild Modus Graustufen • Filter: Störungen entfernen • Menüleiste: Bild Einstellungen AutoTonwertkorrektur Original korrigierte Version

23. Retusche (1) Schmutz, Kratzer usw. können mit dem Tool „Radiergummi“ entfernt werden.Achten Sie bei der Einstellung auf die Auswahl der richtigen Hintergrundfarbe. Für dieses Bsp. :WEISS ohne Retusche mit Retusche

24. Retusche (2) Eine weitere Möglichkeit zur Bildretusche bietet das Tool „Stempel“ Sie können durch das Drücken der „ALT“-Taste einen bestimmten Bildbereich definieren und an anderer Stelle im Bild übertragen. ohne Retusche mit teilweise kopierter Zelle

25. Linien, Pfeile Klicken Sie mit dem Mauszeiger auf das Werkzeug „Linienzeichner“ in der Werkzeugpalette. Über einen Doppelklick auf dieses Werkzeug in der Tool-Leiste aktivieren sie ein weiteres Fenster für die Einstellung von Linienstärke, Pfeilspitzen, Pfeilform etc... .

26. Text Klicken Sie mit dem Mauszeiger auf das Textwerkzeug in der Werkzeugpalette. Setzen Sie den Kursor auf die gewünschte Stelle und geben Sie Ihren gewünschten Text ein. Das Fenster „Textwerkzeug“ erlaubt die Auswahl versch. Schiftarten, Größe, Farbe usw..

27. Ebenen Photoshop fügt selbständig eine neue, eigene Ebene ein wenn Sie z.B. Text einsetzen. Menüleiste Fenster Ebenen einblenden Dieser Text ist über das Ebenen-Fenster direkt anwählbar und nachträglich veränderbar, da er als Vektorgrafik editiert wird. (ab Photoshop Version 5.0) Textebene Hintergrundebene

28. Hinweis Photoshop ist ein sehr umfangreiches Programm. Es bietet aber noch sehr viel mehr Möglichkeiten der Bildbearbeitung als die hier erwähnten. Dieses Tutorial kann lediglich die allerwichtigsten Funktionen zeigen. Daher ist es unumgänglich, zur Vertiefung in die Materie das Handbuch für das Programm genauer zu studieren. Für Fragen stehen die Mitarbeiter des ZMM gerne zur Verfügung.