How to create your own social icons/logos with Inkscape in SVG-format part 3

Hello,

Happy New Year and welcome to the third part of my little tutorial series on how to create an social media icon in Inkscape. The first part was on getting familiar with the software, the second was about creating a logo outline and the third part is on polishing the logo by adding some shaders to it.

Start Inkscape. At first hit SHIFT+CTRL+D (this calls the document properties). Uncheck the box that says “Show page border”. This makes the frame disappear.

Activate the layer dialog with SHIFT+CTRL+L, transformation dialog with SHIFT+CTRL+M and color dialog with SHIFT+CTRL+F.

We  start with adding a circle. This will be the frame for the logo. Click the circle symbol, hold CTRL while dragging down to the left to preserve the aspect ratio. Change its color to a light grey.

Inkscape_050

Switch to the layer dialog and rename the default layer to ‘Color’ by double clicking on it. Add two more layers by clicking on the green “+” sign. Name them “Shadow” and “Highlight”. Place them in as shown in the the image below. Color on bottom and Highlight on top, Shadow in the middle. (Change the order with the orange arrows if necessary)

Inkscape_051

Select the circle and copy it with CTRL+D. Move it to the Shadow layer by SHIFT+PAGE UP. (The new layer is being highlighted in the layer dialog). Hide the Color layer (Uncheck the eye icon in the layer editor). Copy the circle on more time with CTRL+D and move it to the Highlight layer. Hide the Highlight layer by unchecking the eye next to its name. We now have three layers with one circle on each of them. All three circles are exactly on top of each other. The Shadow layer is selected Highlight and Color are hidden.

Inkscape_052

We are now taking care of the shadows first. Select the circle and duplicate it with CTRL+D. Go to the scale tab in the transform dialogue and scale it down to 96%. (Make sure Scale proportionally is checked). Move the smaller circle on top of the bigger one with PAGE UP / PAGE DOWN.

Inkscape_053

Select the smaller circle, disable the fill color change its stroke paint to black, set width to 6 and blur it with a value of 3,5. Select the bigger circle also disable fill color.

Inkscape_054

Now the shadow is a bit larger than the outline where our logo will be placed. We can fix this by using the outline as a mask. All parts that are outside of the mask will be clipped off. Select the inner circle (it is now the bigger one because of the blur) and move it under the outer circle with PAGE DOWN. SHIFT select the thin outer circle, so both are selected. Go to the menu Object ==> Clip ==> Set. The inner circle is gone and we get a nice sharp edge and a falloff shade to the center.

Inkscape_055

This will give us the illusion of a 3D effect. Additionally to it, I would like to simulate some light coming from the top right, creating a shadow on the bottom left. For this task we will use the clipped shade that we created in the previous step. SELECT the circle and duplicate it with CTRL+D. The outline becomes a bit darker, but this is not a problem. Change the stroke color to a linear gradient. Go to node edit mode and adjust the new gradient, so it is on the bottom left corner. Also change the stroke width to approx. 40 and the blur to about 5. You can experiment with different values. The higher the blur, the softer the shadow will be.

Inkscape_056

Next step is to create the highlight. Duplicate the previously created shadow-circle (CTRL+D) and move it up to the Highlight layer. Hide Color and Shadow layers and unhide the Highlight layer. Move the grey circle (that we have created in the beginning) to the bottom with PAGE DOWN  to make the copied shadow visible (if necessary).

Inkscape_057

Now adjust the stroke color of the dark area in the bottom left to a pure white and place it on the top right by manipulating the gradient. (Do not forget change both stops of the gradient to white)

Inkscape_058

Finally you can select the grey circle in the background and delete it. Unhide the Shadow and Color layers.

Inkscape_059

Adjust the overall shadow in the Shadow layer by changing stroke width and adjusting blur. (eg Width: 3,9 Blur: 5,5). This makes the appearance a bit smoother. I also changed the opacity of the corner shadow to about 60%.

Inkscape_060

Finally we can add our logo. Go to Menu File ==> Import. Navigate to the logo that we have created in part 2. Create a new layer called Logo and place the logo path in it. Make sure the Logo layer is on top of all others. (!) Scale it up and pick the shape that you like. Delete the other one. Place the logo in the middle of the outline and change its fill color to pure white. Disable the stroke color (if you like).

Inkscape_061

As a final effect we will add a drop down shadow to the logo. It will look like the logo is hovering above the button. Select the logo and go to: Filters ==> Shadows and Glows ==> Drop Shadow. Adjust the settings to your personal preference. ( I have also disabled the stroke paint of the circle on the Color layer).

You should end up with something like in the image below.

Inkscape_062

We have created different layers to simulate the shading of our logo/button. The good thing about this workflow is, that now you can adjust the color of the logo and of the button without affecting the shading.

Try out yourself. Go to the Color layer, select the base circle and change its  fill color to whatever color you like. 😉 (I picked a dark red)

Inkscape_063

Last but not least bring back the outline of the document and resize it to fit our logo (SHIFT+CTRL+D).

Inkscape_064

By the way, it is a good habit to protect those layers, you are currently not working on, by clicking on the lock in the layer dialog.

You can get the final file here.

If you open it up in GIMP, the program asks you what size you want to have. For a social media icon you could choose something like 32×32 or 64×64 or even 3000×3000 😉 (since we are working with SVG, right ?). then export it to PNG and you are done.

This is it. If you followed all three parts you got a short peek into Inkscape and on how to work with it. If you are interested further into SVG graphics and Inkscape I recommend to you this website. There are a lot of great video tutorials there. Check it out. It is really worth it.

Thank you very much for reading this stuff. I hope it was not too boring.

Regards