Workflow - Bilder mit Photoshop fürs Web optimieren

[Robert S.]

Hallo,

Mit diesem Beitrag möchte ich euch heute erklären, wie man ein Foto von der Digitalkamera richtig für das Web bearbeitet und abspeichert.

Vorraussetzung für diesen keinen Workflow ist allerdings, dass man Adobe Photshop besitzt!

Die gezeigten Anwendungen sollten sich zum Teil aber auch auf andere Grafikprogramme wie z.B Gimp übertragen lassen, wobei es bei der Bezeichnung und Handhabung der Funktionen und Filter deutliche Unterscheide geben kann!

Fangen wir mal an, wie es wohl die meisten machen dürften.

Man macht ein Foto mit der Digitalkamera, in diesem Fall ist es eine Libelle.

Ich lade anschließend das Bild von der Kamera auf den Rechner, verkleinere es mit einem Programm auf 900 x 600 Pixel und rechne es auf max. 256kb runter.

Ich stelle das Bild ein.

Verwendetetes Tool war hierfür Easy Thumbnails, damit lassen sich auch schon gute Ergebnisse erzielen, zumal man in den Einstellungen noch den Kontrast der Bilder und die Schärfe regulieren kann.

Empfohlene Einstellung hierfür: Schärfe +5; Kontrast +5.

Die Qualität ist von Bild zu Bild unterschiedlich einzustellen, sollte aber wenn möglich nicht unter 80% gesetzt werden!

Vorteil von diesem Programm ist, dass man gleich mehrere Bilder mit nur einem Mausklick verarbeiten kann! Ist also für eine schnelle Präsentation im Web sehr gut geeignet. Allerdings bleibt dafür die Qualität etwas auf der Strecke!

Wer allerdings gern alles aus seinen Bilder raus holen möchte, so wie ich und diese auch in guter bis sehr guter Qualität im Web zeigen möchte, der Kommt um ein richtiges Bildbearbeitungsprogramm leider nicht herum!

Fangen wir mit dem Workflow im Photoshop an.

Wir öffen zunächst unser Foto mit der Libelle im Photoshop.

Das Bild ist wie man sieht flau und kontrastarm, es scheint als würde ein Grauschleier über dem Bild liegen.

Also gehen wir in die "Tonwertkorrektur" (Bild > Anpassungen > Tonwertkorrektur o. Strg + L) und sehen uns die Tonwertspreizung etwas näher an.

Im optimalen Fall, sollte das schwarze „Gebirge“ links und rechts bei den beiden markierten Pfeilen enden. Dies ist hier nicht der Fall, wie man deutlich sehen kann.

Weshalb das Bild auch so flau wirkt, da die Tiefen und Lichter hier nicht optimal ausgenutzt werden.

Also müssen wir die Tonwerte entsprechend „Spreizen“, damit unser Bild von diesem Grauschleier befreit wird.

Dazu ziehen wir die beiden Pfeile links und rechts an das „Gebirke“ ran, wie im folgenden Beispiel zu sehen ist.

Das Bild gewinnt somit an Kontrasten, und wirkt lebendiger.

Falls das Bild noch einen Farbstich aufweisen sollte, z.B. einen Blau- der Grünstich hat, kann man in der Tonwertkorrektur unter „Kanal“ noch die einzelnen Farbkanäle des Bildes Bearbeiten.

Nehmen wir mal an, unser Bild hätte jetzt noch einen Grünstich, so könnte man in den Grünkanal wechseln und diesen etwas zurück nehmen. In dem meisten Fällen reicht es schon aus, den mittleren Pfeil einfach etwas nach rechts zu verschieben.

Wenn alle Einstellungen vorgenommen wurden und man mit dem Bild zufrieden ist, kann man den Vorgang mit einem Klick auf „OK“ bestätigen.

Als nächstes gehen wir in den selektiven Scharfzeichnungsfilter (Filter > Scharfzeichungsfilter > selektiver Scharfzeichner), hier schärfen wir das erste mal unser Foto.

Dazu verwenden wir folgende Einstellungen. Die Stärke sollte bei 100% sein, während der Scharfzeichnungsradius zwischen 0,3 und 0,6 Pixel betragen sollte.

Wenn diese Einstellungen vorgenommen wurden, mit „OK“ bestätigen.

Wer eine ältere Photoshopversion als CS2 hat, der muss auf den Filter "unscharf Maskieren" ausweichen, dieser befindet sich ebenfalls unter den Scharfzeichungsfiltern.

Die Einstellungen bleiben die gleichen wie im selektiven Scharfzeichner.

Nun sind wir soweit, dass wir unser Bild verkleinern können, wer mag, kann hier sein bearbeitetes Bild erstmal in Originalgröße abspeichern.

Zum verkleinern müssen wir das Fenster „Bildgröße“ öffnen (Bild > Anpassungen > Bildgröße o. Alt + Strg + I), hier tragen wir in der Breite 900 Pixel ein, wenn unten das Häkchen auf „Proportionen erhalten“ gesetzt ist, errechnet sich die Höhe des Bildes automatisch.

Der Vorgang wird mit einem Klick auf „OK“ bestätigt.

Als nächstes gehen wir erneut in den "selektiven Scharfzeichner" oder alternativ zu "Unscharf maskieren", diesmal aber, tragen wir in das Feld "Stärke" nur 80% ein, der Radius kann hier wieder 0,3 – 0,6 Pixel betragen, besser ist aber den Radius auf 0,3 zu stellen.

Unser Bild sollte jetzt im Normalfall knackscharf sein, vorausgesetzt das Ausgangsbild war auch Scharf.

Mit gut 1,5MB ist das Bild aber noch deutlich zu groß um es so im Internet zu veröffentlichen. Dafür gibt es unter Photoshop die Funktion "Für Web Speichern", zu finden unter Datei.

Nachdem wir "Für Web Speichern" angeklickt haben, öffnet sich ein Fenster.

Hier empfiehlt es sich, oben die Registrierkarte "2fach" zu öffnen, denn dann hat man das Originalbild (links) und die runter gerechnete Version (rechts) im Bild und kann beide immer miteinander abgleichen.

Da im Web, vor allem aber in Foren, eine Dateigröße bei Bildern von max. 256kb die Regel ist, müssen wir den Schieber bei „Qualität“ soweit nach links ziehen bis das Bild eine geeignete Größe erreicht hat. Die Dateigröße kann man unterhalb des Bildes, in der Infozeile sehen.

Wenn das erledigt ist, oben auf Speichern klicken, Speicherort wählen und bestätigen.

Das Bild kann jetzt Hochgeladen und Verlinkt werden!

Hier beide Bilder zum vergleich:

Mit Easy Thumbnails:

Photoshop:

Gruß,

Robert

[Nicole Rebbert]

Hallo,

die Tipps für die Tonwertkorrektur sind wirklich sehr hilfreich! Auch wenn ich immer noch ungern meine Fotos korrigiere...

Das war übrigens mein Problem:

Bei Photoshop Elements gibt es keinen Scharfzeichnungsfilter! Nur über "Überarbeiten">"Schärfe einstellen..." geht es mehr oder weniger. Das sieht dann aber in den meisten Fällen nicht so toll aus, da manche Details verloren gehen.

Viele Grüße,

Nicole

[Gast Daniel Zastrow]

Hallo Robert,

Vielen Dank für dieses wirklich toll ausgearbeitete Tutorial. Da kann man sicher den einen oder anderen Anreiz mitnehmen.

[Marcel V]

Hi,

super Tutorial!

Ich habs auch gleich mal ausprobiert(Bild ist im Anhang;))

Bei mir gibts bloß nie ein richtigen "Anfang" also wo es in der Tonwertkorrektur hochgeht...

Bearbeitet 11. Januar 2009 von Gast

[Robert S.]

Hallo Marcel,

bei Deinem Bild sind die Tonwerte ja soweit Ok, um hier etwas mehr Kontrast zu bekommen, reicht es nur den mittleren Regler nach rechts zu schieben.

Siehe Anhang:

Gruß,

Robert

PS: Wenn es denn geht, versuche doch mal die Rauschunterdrückung bei Deiner Kamera zu reduzieren, die scheint mir etwas zu stark einzugreifen, Dir gehen so viele Details verloren!

Bearbeitet 11. Januar 2009 von Gast

[Martin Hingst]

Hi Robert,

vielen Dank - das sind super Tipps, die ich auch ganz bald ganz dringend brauchen kann!

Viele Grüße

Martin

[Stefan]

Hallo Robert,

vielen herzlichen Dank für die Tips, ich beantrage/bitte darum, Deinen Beitrag in die "Liste lesenswerter Artikel" aufzunehmen oder ganz oben festzupinnen. Da werde ich noch öfters mal reinsehen!

Grüße Stefan

[Marcel V]

Hi,

vielen Dank für den Tip mit dem mittleren Regler!

Das mit der Rauschunterdrückung werde ich mir mal ansehen, glaube aber nicht, dass das geht - ist nur eine gewöhnliche Digitalkamera:-(

Ich wäre auch dafür dieses Tutorail oben festzupinnen

[Carnivorced1887]

Hallo,

Sehr schöne informationen, vielen Dank!

Warum wird dies eigentlich nicht oben angeheftet. Ich persöhnlich finde es wichtig und hilfreich für alle. In 2 Monaten wird der Thread in vergessenheit geraten und keiner findet ihn nach mühevoller Suche wieder.

Gruß Cedrik!

[Georg J. Stach]

Kleine Frage zum Unschärfefilter: Ist der Radius (0,3..0,6px) abhängig von der Größe des Ausgansbildes oder nimmst Du diese Werte standardmäßig?

[Robert S.]

Hallo Georg,

diese Werte verwende ich meist standardmäßig.

Alles was diese Werte überschreitet kann im späteren verlauf zu Schärfungsrändern führen.

Gruß,

Robert

[Piesl]

Hallo Robert, sehr schöner Artikel!:icn13:

Ich selbst arbeite zu Hause mit 7.0. Für die Besitzer der Vor-CS Version gibt es eine sogenannte "Bild skalieren..." Funktion im Menu Hilfe. Hier ist dann ebenfalls die Möglichkeit für Druck bzw. online zu skalieren. Eine weitere sehr wirksame online Reduktion besteht darin die Auflösung herab zu setzen. Für die Monitordarstellung sind 72ppi ausreichend, mehr können sie nicht, etwas mehr z. B. 120ppi schaden aber auch nicht. Kleiner Tipp noch: du hast beispielsweise bei dir noch 350ppi eingestellt. 300ppi sind der industrielle Druckstandard, mehr wird beim normalerweise verwendeten 60er Raster sowieso verschluckt, es bläht also nur deine Datei auf dem Rechner auf. Die Bildgröße kannst du in dem Reiter "Bildgröße" in "Für Web & Geräte speichern" direkt einstellen. Nachschärfen ist aber in jedem Fall nötig!

Für die experimentierfreudigen Bildbearbeiter sei noch als kleine Warnung gesagt, alle Bildbearbeitungsprogramme - insbesondere solche ohne Protokollfunktion wie Photoshop - überschreiben die Ursprungsdatei! Das heißt einmal zwischengespeichert und Mist gemacht ist's vorbei.

Nach dem Schließen gibt es generell kein Zurück mehr. Solltet ihr also einmal vorhaben einen echten 4Farbendruck machen zu lassen wird aus RGB in den CMYK Modus konvertiert und die tolle Darstellung am Monitor (jeder zeigt es anders, es sei denn er ist kalibriert) endet im Desaster. Dies betrifft vor Allem die Einstellungen in der Tonwertkorrektur, zuweit die Tiefen nach rechts gezogen knallen die Tonwerte zu, im Gegenzug können die Lichter im rechten Regler ausbrechen. Also immer erst eine Kopie erstellen, nur RAW Programme hinterlegen lediglich die angewandten Einstellungen und exportieren dann ein anderes Format! Online Skalierungen machen das automatisch. JPEG ist zudem für mehrfaches Bearbeiten schlecht geeignet, da verlustbehaftet komprimiert. Besser wird dann das Format Tiff oder PSD mit der verlustfreien LZW Komprimierung angelegt.

Und nun viel Spaß und Erfolg beim Nachmachen :-)

[Dominik P.]

hallo,

ich habe mal aus dem Internet ein Blatt von der Drosera Capensis genommen und nach deiner Anleitung bearbeitet:

Was meint ihr??Könnte man daran noch etwas verbessern?

[Piesl]

Hi Dominiki, zuerst mal gut dass du es probiert hast :thumbsup: Ich wollte mir dieBilder mal runterladen und checken, aber zum Einen ging es nicht aus deinem Post, zum Anderen sind sie etwas klein von der Pixelgröße her. Jetzt kommt's drauf an was du erreichen wolltest. Bei mir am Monitor, jeder unkalibrierte lässt anders erscheinen, wirken die Kontraste stark überzogen. Am leichtesten zu erkennen am Hintergrund, der beinahe völlig zu läuft, die hellgrünen Bereiche im Blatt wirken sehr künstlich bunt. Wenn du also Wert auf poppig gelegt hast o.k., wenn nicht dann nochmal mit etwas mehr Fingerspitzengefühl!?

Gruß Peter

[Dominik P.]

mhh irgendwie hast du recht, ich muss die Bilder überarbeiten. Morgen beim Tageslich mache ich noch Bilder meiner Karnivoren und versuche sie dann auch noch etwas zu bearbeiten.

Diese 2 kleinen Bilder waren ja auch nur ein kleiner Test, den ich zum Anfang meiner "Fotobearbeitungskarriere" mache.

Hahah Karriere vorallem...

p.s. mine namr ist DOMINIK nicht Dominiki

Bearbeitet 17. Februar 2010 von Dominik2512

[Piesl]

Dran bleiben, Microsoft und Apple haben auch klein angefangen und dann die rieeesen Karriere gemacht ;-)

[Dominik P.]

Hi,

ich wollte mal fragen, wie ihr das mit dem schwarzen Hintergrund macht. Scheidet ihr die Pflanze aus und fügt sie einfach auf schwarzem Hintergrund ein?

[Chrissi-M.]

Hi Dominik,

hinter die Pflanzen kommt einfach ein schwarzes Brett oder schwarzes Plastik.

Grüße

Chrissi

Bearbeitet 20. Februar 2010 von Chrissi-M.

[Dominik P.]

geht das echt so?

Was sagen den die Fotografen dieser Bilder dazu?

[Chrissi-M.]

Das haben sie mal gesagt. :wacko:

[Marius M.]

Hallo,

danke für diesen tollen Thread! Ich finde es klasse, was man mit der Adobe CS3 alles aus seinen Bildern holen kann. Hier mal ein Beispiel von mir.

Original und unbearbeitet (recht passabel wie ich finde)

und danach bearbeitet

Ein echt genialer Unterschied. Und wenn man das zweite Bild erst mal gesehen hat dann findet man das Erste total langweilig und eher schlecht.

Ps.: Da hats wohl jemandem geschmeckt

Gruß, Marius

Bearbeitet 1. März 2010 von Marius M.

[Piesl]

Hoffentlich waren es nicht deine Karnivoren, die so lecker waren :startle: ! Da du das Glück hast eine Vollversion zu besitzen hier noch eine kleine Detailverbesserungsmöglichkeit. Maskiere nur die Iris mit weicher Kante (ca. 1-2 Pixel; Maskenansicht zur Unschärfebeurteilung über Kanalpopup/Maske oder Taste"Q" Abb.-maßstab 1/1). Nun mit z.B. Tonwertkorrektur (Strg+L) den Mittelton (Tonwertspreizung 1,00 nach rechts) aufhellen, zusätzlich den Rot-Kanal, evtl. auch etwas den Grün-Kanal (im RGB Modus). So erhältst du eine bräunliche Iris, die Pupille bleibt Schwarz. Wie immer mit Gefühl korrigieren! Dies bringt mehr Realität und Spannung ins Auge deines, äh was isses eigentlich - Kaninchenbaby?

Im Original siehst du, dass die Pupille heller erscheint als die Iris, so wirkt das Auge leicht blind. Sonst sehr schön geworden! :thumbsu:

[Marius M.]

Hallo Piesl,

danke für den Tipp, da werde mich gleich mal dahinter machen! Und nein, waren natürlich keine Pflanzen (Die sind Hasensicher aufgestellt). Eher Ananassaft mit Medizin.

Und das "Kaninchenbaby" ist 8 Jahre alt und hat deshalb leicht trübe Augen Die Pupille ist in Wirklichkeit tatsächlich ein wenig heller... Tierarzt meint aber alles OK.

Gruß, Marius

[Piesl]

Ups, da hat sich aber das "Baby" super gehalten! Dann ist der leicht trübe Blick natürlich entschuldigt. Hat das digitale Facelifting aber dennoch geklappt?

[Asto]

Hi.

Die Tonwertkorrektur von Photoshop ist wirklich ein Muss, aber darüber hinaus gibt es noch viele kleine Spielereien, die dann aber eher Geschmackssache sind.

Als Beispiel habe ich 3 unterschiedliche Versionen der Libelle angefertigt. ( Ich hoffe mal, dass ich sie verwenden durfte )

Die Spielerei zielt in diesem Falle natürlich auf meinen Geschmack ab... d.h. sehr kontrastreich und etwas weich scheinend.

Zum Vergleich ist hier noch einmal die fertige Photoshop-Version von Robert

Generell würde ich auch nicht empfehlen, es anders zu machen. Mit seiner Beschreibung kitzelt man das beste aus seinen Fotos heraus und das sieht auch die breite Masse so.

Meine Bearbeitungen sind wie gesagt nur Geschmackliche Spielerei.

Um den Kontrast noch etwas kräftiger zu machen ohne mit empfindlichen Werten regeln zu müssen, dupliziert man einfach die vorhandene Ebene ( Das Ebenenfenster findet man unter: "Fenster" und ein haken auf "Ebenen"..also einfach drauf klicken... oder F7)

Um die zu Duplizieren: Rechtsklick auf die Ebene und "Ebene duplizieren..." oder strg+J

Nun wählt man die obere Ebene aus und klickt auf das "Normal", welches in der weißen Box steht. ( Direkt links neben "Deckkraft" )

Ein Klick darauf sollte bewirken, dass die Box sich aufklappt und zahlreiche Optionen angezeigt werden. Angefangen bei dem besagten "Normal" bishin zu "Luminanz"

Hier wählt man nun "Weiches Licht"

Und erhält schlagartig ein solches Ergebnis:

Wem der Kontrast gut gefällt, aber das Foto an sich zu dunkel findet, kann bei der oberen Ebene wieder in die Tonwertkorrektur gehen, und unter "Vorgaben" auf "heller" stellen, oder es manuell einstellen, wie Robert es mit seinem zweiten Bild bereits erklärt hat (den Rechten, weißen Pfeil etwas nach links verschieben).

Zuerst wirkt diese Methode vergleichsweise kompliziert, aber sie eröffnet einem viele neue Möglichkeiten:

Bei meinem nächsten Bild habe ich die obere Ebene angewählt und auf ihr mehrere Weichzeichner angewendet. Am besten sollte man das machen, bevor man das "Normal" auf "weiches Licht" stellt, damit man genau sieht, wie weich man es macht. Ich habe "Filter -> Weichzeichnungsfilter -> weichzeichnen" einfach mehrmals angewendet bis es richtig schön verschwommen war.

Man kann es im Nachhinein ja auch ausprobieren wie es einem am besten gefällt.

Danach wieder "Normal" auf "weiches Licht" stellen und man bekommt zu dem erhöhten Kontrast ein leichten, weichen Schein um alles, ohne dass das Motiv dadurch an schärfe verliert....obwohl es manchmal danach aussehen kann.

Der Unterschied ist zugegebener Maßen nicht sehr groß, aber auch stark vom Foto abhängig.

Die letzte Version ist mein persönlicher Liebling:

Zuerst habe ich einfach alles so gemacht wie bei der Version davor.

Dann hab ich die obere Ebene, also die verschwommene mit der "weiches Licht"-Funktion nochmal dupliziert.

Die duplizierte Ebene ist also genau so verschwommen und hat genau so die "weiches Licht"-Funktion.

Inzwischen müsste das gesamte Ergebnis recht düster sein, also hab ich die aller oberste Ebene genommen und Mit der Tonwertkorrektur sehr sehr hell gemacht - es relativiert sich durch die beiden anderen Ebenen wieder.

Und wieder auf die selbe Weise wie für das erste Bild beschrieben. Also strg+l und den rechten, weißen Pfeil relativ weit nach links geschoben.

Der Effekt sollte der gleiche sein wie in der vorherigen Version, nur etwas ausgeprägter.

Mich erinnert das ganze dann mehr an Abendsonne.

( Professionelle Fotografen knipsen am liebsten zur "Goldenen Stunde", das ist eine Stunde nach Sonnenaufgang und eine Stunde vor Sonnenuntergang. )

Wahrscheinlich ist es aber doch einfach nur Geschmackssache ... ;-)

Trotzdem könnte dieses Tutorial ne nette Anregung zum experimentieren bieten.

Mfg

Asto

Bearbeitet 24. April 2010 von Asto