Wohl jeder Webmaster und Onlineredakteur kennt das Problem: ein Foto muss auf eine exakte Pixelgröße zugeschnitten werden.

Selbstverständlich gibt es dafür in jedem Bildbearbeitungsprogramm eine mehr oder minder komplexe Methode um diesen Vorgang zu erledigen. Da das Zuschneiden eines Bildes eine elementare Aufgabe im Workflow eines Online-Redakteur darstellt und meist sehr oft gemacht werden muss, hier einige Möglichkeiten mit verschiedenen Bildbearbeitungsprogrammen von Photoshop über die Freewareprogramme Gimp, Paint.net und IrfanView bis hin zu einem Onlinedienst.

Vergleich Bilder zuschneiden und fürs Web aufbereiten

Ich liste hier die Arbeitsschritte vom Öffnen eines Bildes, über das Zuschneiden auf eine exakte Pixelgröße bis hin zum Schärfen und fürs Web abspeichern auf. Es gilt den Marktführer Photoshop in Sachen Anzahl Arbeitsschritte und komfortable Arbeitsweise zu schlagen.

Photoshop – der einfachste und schnellste Weg

1. Das gewünschte Bild mit Datei > Öffnen oder mit den Tasten: STRG + O öffnen.
2. Freistellwerkzeug anklicken oder die Taste: C klicken.
3. In den Optionen des Freistellwerkzeuges die gewünschte Breite und Höhe in Pixel (Einheit px) eingeben. z.B. 200 px und 100 px.
4. Ausschnitt zeichnen und mit Enter bestätigen
5. Bild schärfen mit Tasten: STRG + F *
6. Bild fürs Web abspeichern mit Datei > Für Web und Geräte speichern oder mit der Tastenkombination ALT + UMSCHALT + STRG + S.
7. Vorgabe JPG hoch wählen und speichern

Ich komme mit Photoshop auf 7 Arbeitsschritte. Nachteil Photoshop kostet fast 1.000 Euro. Zum Glück gibt es aber auch noch den kleinen Bruder von Photoshop und zwar Photoshop Elements. Kostenpunkt circa 90 Euro.

*Es ist zu bedenken dass der Schritt Nr. 5 nur unter der Voraussetzung, dass man einmal im Vorfeld die Funktion Filter > Scharfzeichnungsfilter > Unscharf maskieren aufgerufen hat, zur Verfügung steht.

Für das Zuschneiden von Fotos mit Photoshop habe ich auch ein Video-Tutorial vorbereitet: Photoshop lernen: freistellen.

Gimp – die freie Alternative zu Photoshop

Gimp ist ein kostenloses freies Bildbearbeitungsprogramm. Es gibt Leute die behaupten, dass es eine echte Alternative zu Photoshop sein. Ich bin nicht dieser Meinung, aber es ist trotzdem für sein Geld (kostenlos!) Gold wert! Also das Preis-Leistungsverhältnis stimmt auf jeden Fall. Man muss aber bereit sein sich in eine ziemlich ungewohnte, nicht Windows konforme, Benutzerführung einzuarbeiten.

1. Bild öffnen mit Datei > Öffnen oder mit den Tasten: STRG + O wählen und das gewünschte Bild öffnen.
2. Zuschneiden Werkzeug anklicken oder die Tasten: UMSCHALT + C betätigen.
3. In den Optionen des Zuschneiden Werkzeugs das gewünschte Seitenverhältnis eingeben z.B. 200:100.
4. Ausschnitt zeichnen und mit Enter bestätigen
5. Bild mit Bild > Bild skalieren auf die gewünschte Endgröße skalieren z.B. Breite 200 px und Höhe 100 px.
6. Bild schärfen mit den Tasten: STRG + F *
7. Bild mit Datei > Speichern unter oder mit der Tastenkombination UMSCHALT + STRG + S speichern.
8. Im Fenster Als JPG speichern die Qualität 80 einstellen und speichern.

Mit Gimp komme ich auf 8 Arbeitsschritte, da in GIMP leider ein zusätzlichen Schritt gemacht werden muss. Das Zuschneiden Werkzeug von Gimp kann nämlich nicht gleichzeitig das Bild skalieren, so wie das das Freistell-Werkzeug von Photoshop bewerkstelligen kann. Vorteil: GIMP ist kostenlos!

*Es ist zu bedenken dass der Schritt Nr. 6 nur unter der Voraussetzung, dass man einmal im Vorfeld die Funktion Filter > Verbessern > Unscharf maskieren aufgerufen hat, zur Verfügung steht.

Einige interessante Gimp-Basisfunktionen findest du in meiner Dokumentation: Grundlagen GIMP.

Paint.net – das freie verbesserte Paint

Paint.net ist auch ein kostenloses freies Bildbearbeitungsprogramm. Im Prinzip ist Paint.net eine verbesserte MS Paint Version. Ja genau, des Malprogrammes, welches man unter Zubehör findet. Die neueste Version dieses MS Paint-Ersatzes, ist ab Windows XP installierbarermöglicht, Voraussetzung ist das .Net Framework. Paint.net ermöglicht wie Photoshop und Gimp die Arbeit mit Ebenen.

1. Bild öffnen mit Datei > Öffnen oder mit den Tasten: STRG + O wählen und das gewünschte Bild öffnen.
2. Werkzeug Rechteckige Maske anklicken oder die Taste: S betätigen.
3. In der Optionen-Leiste rechts neben dem Markierungsmodus von Normal auf Festes Ratio umschalten und das gewünschte Seitenverhältnis bei Breite und Höhe eingeben z.B. 200 und 100.
4. Ausschnitt zeichnen und mit dem Symbol Auf Markierung zuschneiden oder übers Menü Bild > Auf Markierung zuschneiden oder mit der Tastenkombination: STRG + UMSCHALT + X den Ausschnitt zuschneiden.
5. Bild mit Bild > Größe ändern auf die gewünschte Endgröße skalieren z.B. Breite 200 px und Höhe 100 px.
6. Bild schärfen mit den Tasten: STRG + F (siehe *)
7. Bild mit Datei > Speichern unter oder mit der Tastenkombination UMSCHALT + STRG + S als JPEG speichern.
8. Im Fenster Einstellungen zum Speichern des Bildes die Qualität 80 einstellen und speichern.

Mit Paint.net komme ich auf 8 Arbeitsschritte, genau wie mit GIMP. Auch Paint.net bietet leider nicht die Möglichkeit die beiden Arbeitsschritte: Zuschneiden und Bildgröße ändern in einem Arbeitsschritt zu erledigen. Paint.net ist wie Gimp kostenlos. Gegenüber GIMP fällt die Bedienung – vor allem für Windowsanwender – viel leichter.

*Es ist zu bedenken, dass der Schritt Nr. 6 nur unter der Voraussetzung, dass man einmal im Vorfeld die Funktion Effekte > Foto > Verschärfen… aufgerufen hat, zur Verfügung steht.

IrfanView – freier Bildbetrachter mit Grundfunktionen für Bildbearbeitung

1. Bild mit Datei > Öffnen oder mit der Taste: O öffnen.
2. Mit dem Menüpunkt Bearbeiten > Spezielle Markierung erstellen oder den Tasten UMSCHALT + C das Fenster Spezielle Markierung erstellen aufrufen.
3. In den Feldern Breite und Höhe die gewünschte Breite und Höhe in Pixel eintragen z.B. 200 und 100.
4. Ausschnitt zeichnen mit der Schaltfläche Aufs Bild anwenden die Markierung auf das Bild anwenden.
5. Ausschnitt an den Ecken oder Kanten der Markierung mit gedrückter STRG-Taste vergrößern oder verkleinern und mit der rechten Maustaste verschieben bis er den eigenen Wünschen entspricht. Achtung keinen Links-Klick in den Ausschnitt machen, da ansonst die Markierung verschwindet!
6. Bild mit Bearbeiten > Freistellen oder mit den Tasten STRG + Y freistellen.
7. Bild mit Bild > Größe ändern oder mit den Tasten STRG + R auf die gewünschte Endgröße skalieren z.B. Breite 200 px und Höhe 100 px.
8. Bild schärfen mit Bild > Schärfen oder mit den Tasten: UMSCHALT + S.
9. Bild mit Datei > Speichern unter oder mit der Taste S als JPG speichern.
10. Im Fenster JPG/GIF Speichern die Qualität 80 einstellen und speichern.

Mit IrfanView komme ich auf 10 Arbeitsschritte. Auch IrfanView ist ein kostenloses Programm. Das Hauptaugenmerk dieses Programmes liegt nicht so sehr in der Bildbearbeitung, sondern vielmehr in der Bildbetrachtung.

Picnik.com – Onlinedienst – Bildbearbeitung ohne Programm

Der Online-Dienst Picnik.com bietet Bildbearbeitungsfunktionen ohne dass ein Bildbearbeitungsprogamm installiert sein muss. Toll an dem kostenlosen Online-Service ist, dass man sich für die Grundfunktionen nicht registrieren muss. Nachteil des Online-Services ist natürlich, dass die Bilder die bearbeitet werden sollen einerseits für die Bearbeitung hochgeladen und anderseits um in den Genuss des Endproduktes zu kommen wieder herunter geladen werden müssen, was nur mit einem Breitbandinternetanschluss halbwegs erträglich ist.

1. Schaltfläche Jetzt loslegen und dann Schaltfläche Foto hochladen anklicken um ein Bild vom eigenen Computer zu den Online-Service hochzuladen.
2. Schaltfläche Zuschneiden anklicken.
3. In den Feldern tatsächliche Größe die gewünschte Pixelgröße eingeben z.B. 200 x 100 und die Option Skalieren aktivieren!
4. Ausschnitt verschieben und nach Wunsch vergrößern oder verkleinern und dann mit der Schaltfläche OK das Zuschneiden bestätigen.
5. Mit der Schaltfläche Schärfe die gewünschte Schärfe einstellen und mit OK bestätigen.
6. Bild mit dem Register Speichern speichern.
7. Das Listenfeld Format auf JPG einstellen und mit der Schaltfläche Foto speichern das Foto vom Online-Service zum eigenen Computer herunter laden.

Man glaub es kaum! Der Online-Service kann mit dem teurem Platzhirsch Photoshop bzgl. der Anzahl der Arbeitsschritte mithalten, ist in der Bedienung sogar noch intuitiver! In Punkto Geschwindigkeit muss sich der Online-Dienst aber dennoch geschlagen geben. Der Zeitaufwand für das Hochladen und Downloaden von größeren Fotos schlägt nämlich stark zu Buche. Was löblich zu erwähnen ist: die hochgeladenen Fotos sind laut Datenschutzbestimmungen nicht öffentlich zugänglich. (Es gibt im Web nämlich ähnliche Dienste die das gegenteilig händeln, sich sogar die Rechte am hochgeladenen Bild sichern!)

Wenn du bzgl. des einen oder anderen Programmes einen schnelleren Weg kennst um obigen Workflow abzubilden, dann schreibe bitte einen entsprechenden Kommentar. Würde mich interessieren. Danke.

Nachtrag:

Der Online-Dienst Picnik.com ist leider nicht mehr verfügtbar. Alternativen:

• https://pixlr.com/editor/
  Kostenlose Online-Bildbearbeitung, keine Registrierung notwendig.
• http://www.fotor.com/de/index.html
  Kostenlose Online-Bildbearbeitung, keine Registrierung notwendig.