Ishimaru-Design > Home > Tutorials > GIMP > Rounded corners on thin borders - Tip

[GIMP] Rounded corners on thin borders - Tip

  • Author : Ishimaru Chiaki
  • Posted on : 2013-10-24 04:01:26
  • Updated on : 2013-11-13 02:53:58
  • Comments : 0
  • Type : Tip
  • Level : Intermediate
  • Version : 2.6.x

If just like me, you had trouble making rounded 1 pixel borders that remain as thin and crisp on rounded parts than on straight parts, for your buttons, here's a tutorial that will show you how to make a perfect rounded border for your buttons, with guides and selections.  To follow this tutorial, it is recommended to have bases in layers, guides and selections manipulation.

Summary

  1. A magical option : Rounded corners !

A magical option : Rounded corners !

If you already made buttons and icons with rounded corners with GIMP and put a 1 pixel border, you have probably noticed that the rounded parts of the border seem thicker than straight parts ?

An example :

coins-arrondis1.png

This problem is more apparent with thin borders and comes from the use of the Rounded rectangle script followed by shrinking the selection by 1px and then filling between each step. Actually, reducing selection is the main source of problens but it was the only way to make 1px if we used the script, and you'll see why by reading what follows.

Before GIMP 2.4, there were only two ways to make rounded corners, each of them having annoying inconvenients :

  • The "Rounded rectangle" script : Accessible from Selection menu, this script rounds the corners of a rectangle selection.  But this script has two flaws.  Firstly, radius can be set only in %, so this didn't allow us to set it precisely.  Secondly, I noticed that if the % is set at maximum, this creates balloon effect on both ends ef the rectangle and thus, it doesn't look very nice.

  • By combining selections : This consists of combination using guides and the "Add to current selection" two rectangle selections and four elliptic selections.  Even if this allows to have a precise radius, this technique require many manipulations and precision work, making it more difficult for novices and not very efficient in terms of speed.

Fortunately, since version 2.4, the "Rectangle select tool" has "Rounded corners" option that allows to set radius by pixels, making this option much more precise than the script, and much simpler for novices than combining selections.

I will show you a tip to avoid this problem, so you will have a result like this :

post-en.png


1- First of all, create a new 80*30 document (it's sufficient for the demo) with white background.
tuto-coins-arrondis-01.png

Here is our new document :

tuto-coins-arrondis-02.png

Zoom it at 800% so we'll be at ease to work.

tuto-coins-arrondis-03.png

Now we'll take the "Rectangle select tool" and enable the "Roundes corners" option and set radius to 8 pixels.

tuto-coins-arrondis-04.png

Starting from upper-left corner to bottom-right corner of the pic, make your selection.  Oh magic, you'll see your selection with rounded corners !

tuto-coins-arrondis-05.png

Create a new transparent layer and fill it with a dark color (ex: maroon).

tuto-coins-arrondis-06.png

Disable your selection then create a new transparent layer.

We'll make our internal selection.  For this, decrease radius by 1 pixel.
tuto-coins-arrondis-07.png

Then redo your selection, one pixel from each edge of the canvas. You can help yourself with guides (by positioning them at 1px from each edge) if you have trouble making your selection.  To make a guide appear, click on the left ruler (for a vertical guide) or the top ruler (for an horizontal guide) and then, while holding your left button down, drag your guide to position it.

tuto-coins-arrondis-08.png

Now, fill the new layer with a light color or a slight linear gradient with two light tones, the first should be a little darker than the second :

tuto-coins-arrondis-09.png

Disable your selection and the guides' display

Here's the final result with the zoom :

coins-arrondis12.png

And the real-size result (I enlarged the canva to round the pic with white, to give you a better view) :

coins-arrondis13.png

The border is nicer, isn't it ? tongue

0 comments