Kanten beim Bild abrunden - Wie?

vom 30.09.2009, 13:53 Uhr

Also öfters sehe ich auf Websiten Bilder, die abgerundete Kanten oder auch Ecken haben. Dies ist dann nicht im Design der Website "miteingebaut", sondern liegt am Bild selbst. Da hat man die Ecken einfach abgerunden.

Nun frage ich mich allerdings, wie ich das anstellen soll und welches Programm ich denn dafür benötige. Wenn ich das Bild dann anschließend auf die Website einfüge, dann soll man eben nur noch die Rundungen sehen. Ich kann es leider nur schwer beschreiben, von daher habe ich mal von tausenden von Websiten diese ausgesucht. Ihr seht, dass bei beiden oberen Bildern die Ecken abgerundet sind.

Benutzeravatar

» h4wX » Beiträge: 1875 » Talkpoints: 1,24 » Auszeichnung für 1000 Beiträge



Wie du hier sehen kannst handelt es sich um ein ganz normales, rechteckiges, Bild, bei dem einfach eine Ecke in der Farbe des Hintergrunds gefühlt worden ist.

Das bekommst du mit jedem halbwegs guten Graphik Programm hin indem du die Ecke einfach in der entsprechenden Farbe "anmalst". Es gibt auch ein paar einfach Tricks um die Ecke so hinzubekommen, das es auch ordentlich aussieht, aber es macht natürlich wenig Sinn hier ins Detail zu gehen da ich nicht weiß, welches Programm du benutzt.

Von transparenten Ecken würde ich abraten. Im Gif Format wird die Ecke ausgefranst aussehen und die Transparenz im PNG Format wird nicht von allen Browsern unterstützt und aus irgendeinem Grund werden die transparenten Teile meistens durch ganz grausige Farben ersetzt.

Benutzeravatar

» Cloudy24 » Beiträge: 27476 » Talkpoints: 0,60 » Auszeichnung für 27000 Beiträge


Bestimmt gibt es Programme, die das automatisch machen, ich hätte da aber auch noch einen komplizierteren Weg, den man beispielsweise mit der kostenlosen Bildbearbeitungssoftware GIMP gehen könnte. Du öffnest erst einmal nur das Bild in GIMP, dann ziehst du eine quadratische Auswahl um die Ecke und kopierst diese in die Zwischenablage (Rechtsklick -> Kopieren oder alternativ Strg + C).

Jetzt kommt der komplizierte Teil: Den gerade kopierten Teil fügst du in das Bildbearbeitungsprogramm Paint ein. Hier ziehst du einen ausgefüllten Kreis durch das komplette Quadrat, am besten nimmst du als Farbe für den Kreis eine, die so nicht in diesem Ausschnitt des Quadrates vorkommt. Das ganze kopierst du dann wieder in die Zwischenablage und fügst es in ein neues Bild in GIMP ein. In diesem neuen Bild gehst du jetzt oben auf "Ebene" dann auf "Transparenz" und auf "Farbe zu Transparenz", jetzt wählst du die Farbe des Kreises aus.

Dann wählst du in GIMP das "Zauberstab"-Werkzeug aus, setzt die Schwelle auf den Maximalwert von 255 und klickst in den Bereich, wo man noch etwas vom Bild sieht, du letztendlich aber die runde Ecke haben willst. Diesen übermalst du dann zum Beispiel in einer Farbe deiner Wahl, dann wählst du diesen quadratischen Bereich aus und kopierst ihn wiederum ins Ursprungsbild. Jetzt hast du praktisch das "Kreisgegenstück" in dieser Ecke bzw. die Ecke abgerundet.

Es kann sein, dass du ein paar Anläufe brauchst, bist du verstehst, was ich beschrieben habe, letztendlich funktioniert diese Methode aber. Ich hätte es auch noch so weit gehen lassen können, dass man statt einer bestimmten Randfarbe einen Transparenten Rand verwendet, aber das wäre noch etwas komplizierter geworden.

Download GIMP: Link

» AP Nova » Beiträge: 336 » Talkpoints: 19,85 » Auszeichnung für 100 Beiträge



Mit Photoshop kannst du das ganz gut machen. Dort gibt es z.B. auch die einfache Funktion "abgerundetes Rechteck", welches du einfach zeichnen und weiter bearbeiten kannst. Ecken malen finde ich persönlich nicht wirklich gut, da die qualität des selbst gemalten ziemlich schlecht.

» stang2k » Beiträge: 161 » Talkpoints: 5,22 » Auszeichnung für 100 Beiträge



Ähnliche Themen

Weitere interessante Themen

^