Bild mit abgerundeten Ecken versehen

So funktioniert es

Wählen Sie die Bilder im Feld aus (tippen oder klicken), stellen Sie die Rundung mit dem Regler ein und tippen Sie auf Ecken abrunden. Der Radius wird in Prozent angegeben, weil ein fester Pixelwert bei jeder Auflösung anders wirkt: Bei einem App-Icon von 1024×1024 Pixeln ergeben 15 % einen Radius von 154 Pixeln, bei einem Avatar von 96 Pixeln sind dieselben 15 % nur 14 Pixel — beide sehen für das Auge gleich weich aus. Der Radius wird pro Achse aus deren eigener Länge berechnet: Bei einem Kartenbild von 1200×800 Pixeln bedeuten 10 % einen Bogen von 120 Pixeln waagerecht und 80 Pixeln senkrecht. Schieben Sie den Regler ganz auf 50 %, treffen sich die vier Bögen in der Mitte; ein quadratisches Bild wird zum vollen Kreis, ein rechteckiges zum Oval. Die Pixelgröße ändert sich bei keiner Einstellung, es fallen nur die Eckpixel weg. Lassen Sie den Hintergrund auf Transparent, wenn in den Ecken keine Farbe stehen soll — dann wird die Ausgabe auch bei einer JPG-Quelle als PNG gespeichert, denn JPG kann keine Transparenz tragen.

Dieses Werkzeug ist auch als bild ecken abrunden, abgerundete ecken bild, runde ecken hinzufuegen, foto ecken abrunden, bild mit abgerundeten ecken, app icon ecken abrunden, avatar runde ecken, eckenradius bild bekannt.

Was ist Eckenradius?

Der Eckenradius ist die Größe des Bogens, der an der Ecke eines Rechtecks gezeichnet wird: Je größer der Radius, desto runder die Ecke. Im Webdesign heißt derselbe Wert border-radius und wird in Pixeln oder in Prozent notiert. Hier wird Prozent verwendet, weil das unabhängig vom Maßstab ist — eine Ecke wird im Verhältnis zur Größe ihres eigenen Bildes gerundet, sodass ein kleiner Avatar und ein großes Titelbild nebeneinander gleich weich wirken. Erreicht der Radius die halbe Kantenlänge, treffen sich die Bögen und der Begriff Ecke verliert seinen Sinn.

Was ist Alphakanal?

Der Alphakanal ist ein vierter Wert neben der Farbe eines Pixels und gibt an, wie sichtbar dieses Pixel ist: 255 bedeutet vollständig deckend, 0 vollständig leer. Eine abgerundete Ecke ist genau das — die Farbe der Eckpixel wird nicht gelöscht, ihre Sichtbarkeit wird auf null gesetzt. Die wenigen Pixel entlang des Bogens erhalten Zwischenwerte, und erst diese Zwischenwerte lassen die Kante glatt statt treppenförmig aussehen. Wird die Datei in einem Format ohne Alphakanal gespeichert, geht diese Information verloren und die leere Fläche wird zu einer glatten Farbe.

Was ist App-Icon-Maske?

Die App-Icon-Maske ist die Form, die ein Betriebssystem über Ihr Icon legt, bevor es auf den Bildschirm kommt. iOS rundet die Ecken mit seiner eigenen Kurve, Android setzt je nach Version und Hersteller einen Kreis, ein Quadrat oder eine Squircle-Form ein. Deshalb verlangen die Stores ein quadratisches Icon ohne eigene Rundung: Die Maske steckt bereits im System. Ein vorab gerundetes Icon zeigt unter der Maske eine dünne Kante, wo sich zwei Kurven überlagern. Auf einer Website, in einer Folie oder in einem Dokument gibt es dagegen keine Maske; dort müssen Sie die Ecke selbst mitbringen.

Worin unterscheiden sich abgerundete Ecken und ein runder Zuschnitt?

Es sind zwei verschiedene Arbeiten mit zwei verschiedenen Ausgabegrößen. Die Kreis- und Ovaloptionen im Zuschneidewerkzeug schneiden zuerst: Aus einem Foto von 4000×3000 Pixeln wird das mittlere Quadrat von 3000×3000 genommen, die 1000 Pixel an den Seiten verlassen die Datei endgültig, und erst dann wird ein Kreis in dieses Quadrat gesetzt. Dieses Werkzeug schneidet nichts weg — der Rahmen bleibt 4000×3000, und nur die Pixel in den Ecken fallen heraus. Wenn Sie also nichts verlieren dürfen, was am Rand Ihres Motivs liegt, sind Sie hier richtig; soll das Bild dagegen in einen quadratischen Rahmen und danach in einen Kreis, ist das Zuschneidewerkzeug das passende. Auch hier ergibt der Regler auf 50 % einen vollen Kreis, doch dieser Kreis sitzt im ursprünglichen Rechteck, sodass ein nicht quadratisches Bild als Oval zurückkommt.

Transparente Ecken erzwingen eine PNG-Ausgabe

In einer abgerundeten Ecke steht überhaupt keine Farbe: Die Pixel dort werden geleert, nicht neu eingefärbt. Um das in einer Datei festzuhalten, braucht es einen Alphakanal, und den tragen nur bestimmte Formate. PNG und WEBP können es, JPG nicht. Deshalb schreibt das Werkzeug bei der Einstellung Transparent auch aus einer JPG-Quelle eine PNG-Datei und ändert die Dateiendung gleich mit.

Dass die Endung mitwandert, ist wichtiger, als es klingt. Eine Datei, die innen PNG ist, aber weiterhin .jpg heißt, kommt durch die Formatprüfung des Zielsystems und lässt sich danach nicht öffnen oder wird fehlerhaft dargestellt. Genau wegen dieses stillen Fehlers stimmt die Endung hier immer mit dem Inhalt überein.

Sollen die Ecken gefüllt statt leer sein, nehmen Sie Weiß oder Schwarz. Die Eckpixel erhalten dann diese Farbe, ein Alphakanal wird nicht gebraucht, und eine JPG-Quelle bleibt JPG. Für ein Bild, das auf Papier geht, ist das die sicherere Wahl: Drucktreiber färben transparente Flächen gelegentlich schwarz.

Welchen Prozentwert sollten Sie nehmen?

Die Rundung verändert den Ton eines Bildes: eine leichte Rundung wirkt sachlich und ruhig, eine starke weich und verspielt. Die folgenden Bereiche stammen aus der Praxis und sind als Ausgangspunkt gedacht, nicht als Regel.

Ein Detail lohnt sich zu wissen: App-Icons werden meist vom Betriebssystem selbst gerundet. iOS legt seine eigene Kurve an, Android je nach Version und Hersteller einen Kreis, ein Quadrat oder eine Squircle-Form. Ein vorab gerundetes Icon zeigt darunter eine feine doppelte Schnittkante. Halten Sie das Icon für den Store quadratisch und nutzen Sie dieses Werkzeug für die Fassung, die auf einer Website, in einer Präsentation oder in einem Dokument erscheint.

• 2-5 % — Firmenkarten und kleine Bilder in Tabellen: weicher, aber kaum bemerkt
• 8-15 % — Webkarten, Produktbilder, Blogtitelbilder: der häufigste Bereich
• 20-30 % — Sprechblasen-Optik, verspielte Layouts
• 50 % — voller Kreis bei quadratischen, volles Oval bei rechteckigen Bildern
• Nur oben — Kartenbilder mit Textblock darunter; die Unterkante bleibt gerade

Was bei mehreren Dateien passiert

Wählen Sie mehrere Bilder aus, gilt für alle derselbe Prozentwert, der Pixelradius wird aber für jede Datei aus ihrer eigenen Größe berechnet. Bei gemischten Größen ist genau das erwünscht: Jede Ausgabe wirkt gleich stark gerundet, statt dass eine ihre Ecken verliert und die nächste kaum verändert aussieht.

Die Ergebniszeile nennt für jede Datei die ursprüngliche Größe, den berechneten Radius und den gewählten Hintergrund. Dort sehen Sie auch, dass sich die Größe nicht geändert hat.

Häufige Fragen

Wie runde ich die Ecken eines Fotos ab?

Wählen Sie die Bilder im Feld aus, stellen Sie den Regler auf den gewünschten Prozentwert und tippen Sie auf Ecken abrunden. Sollen die Ecken leer bleiben, lassen Sie den Hintergrund auf Transparent; die Ausgabe kommt dann als PNG.

Wird das Bild dadurch kleiner?

Nein. Dieses Werkzeug schneidet nicht zu: Breite und Höhe der Ausgabe entsprechen exakt der Eingabe. Es fallen nur die Eckpixel weg, und die Ergebniszeile zeigt, dass die Größe unverändert bleibt.

Was passiert bei 50 %?

Die vier Eckbögen treffen sich in der Mitte. Ein quadratisches Bild wird zum vollen Kreis, ein rechteckiges zum Oval. Der Rahmen behält seine ursprüngliche Größe; die Fläche außerhalb der Form ist je nach Einstellung transparent, weiß oder schwarz.

Kann ich nur die oberen Ecken runden?

Ja. Nehmen Sie in der Eckenauswahl Nur oben oder Nur unten. Oben gerundete, unten gerade Bilder sind in Kartenlayouts üblich, weil der Textblock darunter eine gerade Kante braucht.

In welchem Format kommt die Datei zurück?

Bei transparentem Hintergrund immer als PNG, denn JPG kann keine Transparenz tragen. Bei Weiß oder Schwarz bleibt eine JPG-Quelle JPG, andere Formate kommen als PNG zurück. Der Dateiname erhält den Zusatz -yuvarlak.

Kann ich das für ein App-Icon nutzen?

Für die Fassung auf einer Website oder in einer Präsentation ja. Das Icon für App Store oder Google Play sollte jedoch quadratisch bleiben: Der Store legt seine eigene Maske an, und eine vorab gerundete Ecke hinterlässt darunter eine sichtbare Doppelkante.