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
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)
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.
Click on the image and canvas will changed color to red.
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.
8) Our image will look like this:
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:
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.
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:
15) Click Create new layer button and you'll get the following screen
16) While new layer is active press Ctrl+A to select it
(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
Our image will be like this:
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:
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:
Add logo
22) You can draw your own sign or letter but we'll paste the Randez logo as new layer
and the image will be
23) Here is the final result of Randez social network icon
