I am not a graphic designer, but I would like to add my own images to the web page I’m going to do. Some months ago I learnt the basics of Inkscape and GIMP, the free software alternatives to Illustrator and Photoshop, so now it’s time to use them for real.

The first thing that I’m going to do is very simple, but also powerful. My friend has a logo that are 2 images combine. I will get some examples from the web and use them as a model to copy the stroke and create my own one.

To achieve this, I will use different layers in Inkscape. In the first and second layer I will put the examples and in the third and fourth layer I will create my own designs. After the copies are done, I will hide the two first layers to have only the final design with the 2 image together (one behind the other).

The first thing that I will do is to import the example image (File-> Import) that will be in the first layer. I will create the second layer and import the second example image. After that, I will go to ‘Layers’ pallet and add 2 more layers, the first one for the image that will be in the background and the last one for the image that will be in the foreground.

For security, the best thing is to lock the layers where I want to draw and when I draw, I have to make sure that the design is done in the correct layer (I have to click in the layer that I want to activate and it will have a different color than the others).

With the Bezier curves tool (Shift+F6) I click around all the stroke until I reach the beginning, then with nodes edition tool (F2) I select all the nodes that I want to smooth and after that, I click in autosmooth the nodes selected (this tool is displayed below the menus in the top when F2 is activated). Finally I have to move and readjust a little the nodes that don’t have the appropiate result until everything is smooth and curved.

After drawing the 2 images and hiding the first 2 layers, I can export the result as png or save it as svg.

I can use this logo with the page title to use it in the cover photo and in the profile picture in social networks. For facebook for example the cover photo is lately saved with the size 828px x 315px and the profile photo with the size 168px x 168px, so exporting as png in Inkscape should have in consideration the final size to have the best resolution. The best thing is to scale the image to the final size before exporting, but also save the svg version to be able to keep working with the logo in Inkscape in the future.