Skip to main content
Apr 18, 2019

The GIMP is an image manipulation program suitable for photo retouching, image composition and image authoring. It is extremely useful and we use it on daily basis, especially for creating graphics for web pages. 

In this tutorial we'll show how to create a social media icon with GIMP image editor.

We're going to crate an social icon for Randez.com. Randez is a social network that we own and it's very popular in countries of former Yugoslavia (Serbia, Croatia, Montenegro, Bosnia and Herzegovina, Macedonia...)

Creating icon background

1) Start Gimp > File > New...

2) Enter values as follows

Image
Randez social icon 01

 

You can enter any other size if you want, but icon with size 256x256 can easily be resized to any smaller size (and you'll be able to see more details)

3) Blank canvas will be displayed (note that it's transparent as we configured in the previous step)

Image
Randez social icon 02

 

4) Select Bucket Fill Tool in the toolbox (or press Shift+B) and then pick desired color. We're going to work with red color for Randez social icon background. 

Image
Randez social icon 021

 

Click on the image and canvas will changed color to red.

Image
Randez social icon 03

 

Round corners

The next step is to round the icon's corners.

5) Press Ctrl+A to select the whole layer

6) Select > Rounded Rectangle...

7) Enter value in the new screen. We'll enter 30 for this purpose.

Image
Randez social icon 031

 

8) Our image will look like this:

Image
Randez social icon 04

 

9) Select > Invert in order to select corners themselves (and not the working part of the image)

10) Edid > Cut will delete the corners and the image will be:

Image
Randez social icon 05

Create border

Our icon will have border darker than the rest of the image so let's create it.

11) Reverse selection back to the working part of the image: Select > Invert

12) Shrink the selection: Select > Shrink...

13) Enter the shrink value as we did on the screen below (eight will be enough) and click OK.

Image
Randez social icon 06

The idea is to copy the selection and make it's color lighter than the margin. You can do this is many ways but we chose this one.

14) Copy the selection into new layer: Ctrl+C to copy and then Ctrl+V to paste it. New floating selection in the pasted layer will be displayed in the layers window:

Image
Randez social icon 07

 

15) Click Create new layer button and you'll get the following screen

Image
Randez social icon 08

16) While new layer is active press Ctrl+A to select it

Image
Randez social icon 09

 

(You can now pick some lighter red and change the layer's color but we suggest to follow our instructions further)

17) Click again Bucket Fill Tool and pick white color

18) Click on the image and new layer will turn to white

19) Change the layer's opacity (i.e. transparency) to 10

Image
Randez social icon 091

Our image will be like this:

Image
Randez social icon 10

Add simple glossy effect

Almost all web 2.0 icons have glossy efect so we'll add it to the Randez icon, too.

20) Create new transparent layer for glossy part

Layer > New Layer... > Choose Transparency option and click OK button

21) Choose Ellipse Select Tool in the toolbox and create a selection like this one:

Image
Randez social icon 11

22) Choose Bucket Fill Tool, pick white color and click on the selection. It will get white color, so change the color's opacity to 10 as in the one of the previous steps; the image will look like:

Image
Randez social icon 12

Add logo

22) You can draw your own sign or letter but we'll paste the Randez logo as new layer

Image
Randez social icon 14

and the image will be

Image
Randez social icon 13

 23) Here is the final result of Randez social network icon

Image
Randez social icon finished