Bilder und Fotos auf exakte Größe zuschneiden

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:

 

14 thoughts on “Bilder und Fotos auf exakte Größe zuschneiden”

  1. wiso says:

    hallo,
    vielen dank für die auflistung. schon lange war ich auf der suche eines werkzeuges, das fotos so wie photoshop in einem arbeitsgang beschneidet und die auflösung reduziert.

    vielleicht interessiert dich das programm auch:
    http://www.heise.de/software/download/jpegcrops/15345

    danke,
    mfg,
    wiso

  2. admin says:

    Hallo Wiso, danke für den Tipp. Schaue ich mir bei Gelegenheit mal an.

  3. Ralf says:

    Sehr schön! Danke für den Tipp.Bin schon mal gespannt! Tolle Seite, weiter so!

  4. gonthar says:

    hallo,

    picnik.com existiert leider nicht mehr. die sind wohl eine kooperation mit google+ eingegangen.
    schade.

  5. Webmaster says:

    Wahrscheinlich eher von Google geschluckt worden 😉 Ist nun in Google Picasa integriert…

  6. pixelschubser says:

    Leider existiert der Online-Dienst „Picnik.com“ nicht mehr.

    Eine Gute Alternative: http://pixlr.com/editor/

    @Webmaster: Wäre sicher toll diesen ebenfalls step-by-step hier zu erklären.

  7. Webmaster says:

    Hallo Pixelschubser,

    danke für den Tipp.

    Grüße
    Dietmar

  8. JaKi says:

    Guter Vergleich. Aber ich muss sagen, für 1000 EUR Ersparnis nehme ich doch gerne einen einzigen Arbeitsschritt mehr in Kauf. Das zusätzliche Skalieren ist in Gimp doch schnell gemacht!

  9. Webmaster says:

    So gesehen hast du natürlich recht. Man könnte aber auch das Photoshop Elements für einen Bruchteil des Geldes kaufen… Photoshop ist meiner Meinung vor allem interessant, weil es a) gut ist und b) es massenhaft Dokumentationen, Lernvideos (auch sehr gute kostenlose) gibt…

    Grüße

    Dietmar

  10. Stephan says:

    Hallo,
    ich hätte eine Frage zu Gimp, aber vielleicht betrifft das ja die anderen Programme genauso:
    Wenn ich ein Jpeg-Bild, mit Gimp 2.8, mit 800×600 Pixeln auf 700×525 Pixeln herunterskaliere, dann wird mir in der Statusleiste angezeigt, dass das Bild jetzt 5,1 MB hat statt vorher 4,9 MB.
    Wieso wird ein Bild, d.h. seine Speichergröße, größer, wenn man es herunterskaliert? Es werden doch beim herunterskalieren Pixel entfernt?

  11. JaKi says:

    @Stephan: Das ist kein absoluter Wert, der dir da angezeigt wird. Das ist der Platz, den die Datei momentan unkomprimiert im Arbeitsspeicher benötigt. Es kann z.B. sein, dass ein JPG, das mir mit 15 MB in der Statusleiste angezeigt wird, nach dem Herunterskalieren mit 17 MB angezeigt wird, dann gehe ich einen Bearbeitungsschritt zurück, es werden mir 13 MB angezeigt, ich zoome in das Bild herein, es werden mit 16 MB angezeigt usw. – ein dynamischer Wert.

  12. Martin says:

    Hallo Dietmar

    Ich möchte mit Paint.NET ein Bild in z.B. sechs genau gleich grosse Teile zerlegen. Wie geht das? Mit dem Tool „Rechteckige Maske“ geht das schon, nur entstehen dabei die Seitenverhältnisse halt eher zufällig und dadurch ungenau.

  13. Paul says:

    IrfanView kommt im Test zu schlecht weg denn es kann x-beliebig viele Bilder im Batchbetrieb verarbeiten und dabei gleichzeitig zuschneiden (crop) und Größe (resize) ändern. Dabei ist die Reihenfolge der Schritte wahlfrei einstellbar – also auch die Reihenfolge (erst crop dann resize – oder umgekehrt) ist konfigurierbar.
    All das ist ein ini-Dateien speicherbar.
    Ein tolles Programm, das immer wieder unterschätzt wird!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert