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

Welcome to the second part of my tutorial in which we are going create a social media icon in SVG format. If you are not already familiar with the basic functions of Inkscape I highly recommend reading the first part of this tutorial.

Before we start creating something, we need some input of ideas on how the final result should look like. I decided to create a social media icon for 500px.com. To get a reference image, lets move over to their website.

Right click on the image with the 500px logo and select “Save as…”. Save the image to your hard drive.

Inkscape_025

Open Inkscape and hit the blue arrow on the top toolbar (depending on your setup it may be also on the right side). Navigate to the previously downloaded image. A pop up appears whether to embed or link the image. Leave it at embed and confirm it with OK. The resolution is quite low but it does not matter here, because we just want to get an overall idea of the shape.

Inkscape_026

After importing it should look like this:

Inkscape_027

Zoom into the image with CTRL+MMB (scrolling) and add a circle. Hit SHIFT+CTRL+F, disable the fill and change the width of the path to something of 0.6. Also convert the circle to a path with SHIFT+CTRL+C, because we need nodes for path manipulation. You could also change the stroke paint to a light color. (I have picked light green)

Inkscape_028

Currently we have only for nodes. To add more nodes select all four by click drag and hit the add node icon on the top left two times so we end up with 16 nodes. Do not worry if the node number is high enough. We still can remove/add some later on.

Inkscape_029

In the next step we will trace the outline of the logo with our path by placing the nodes on turning points, where the outline changes its direction. Lets start on the top left corner of the 5. Zoom in and place the first five nodes on the sharp edges like in the image below. Rotate the handles, so the path shapes a curve around the logo. Add more nodes to the path. (Do not forget to select the outer nodes when adding new ones ๐Ÿ˜‰ )

Inkscape_030

Inkscape_031

Now continue outlining the shape of the logo. Place one node on top of each of the upper bulges. Do not forget the sharp corners.

Inkscape_032

Now continue outlining the shape of the logo. Place one node on top of each of the upper bulges. Do not forget the sharp corners.

Inkscape_032

Continue adding and moving nodes all around the shape, until all bulges and all corners have one node placed on them.

Inkscape_033

ย In the next step we will clean up the shape, so the path is following the outline of the logo more precisely. Select the top two nodes on the upper corners of the 5 and hit the line icon. This will convert the selected segment of the two nodes into a straight line.

Inkscape_034

To create a sharp corner between the first two bulges, select the node and hit the corner icon.

Inkscape_035

Adjust the shape by moving the handles of the new corner node and the node on the top of the first bulge.

Inkscape_036

Complete the straight lines by selecting segments of two nodes an converting them into lines. Reposition the nodes, so they match the reference image better.

Inkscape_037

Complete the outline of the logo by creating corner nodes between the bulges and adjusting their handles. Also adjust the handles of the nodes on top of the bulges so the make an even curve.

Note: Creating straight lines works nicely, but the handles of line nodes are locked by default (because they are supposed to be straight). This can cause problems when a line is transitioning into a curve.

Inkscape_038

To fix that, just convert the end nodes of the lines into corner nodes. This will unlock the handles and the outer handles can be moved into place. Do not touch the inner handles of the line, because then the line will become a curve ๐Ÿ˜‰ .

Inkscape_039

Finish the shape by moving and adjusting the nodes untilย  you are happy with the result. Try to keep the node count as low as possible. Because the higher the node count the more work you will have getting a clean outline.

Inkscape_040

Now we need to create the interior of the logo. Add another circle and convert it to a path.

Inkscape_041

Change the right node to a corner node and adjust the shape until it matches the reference.

Inkscape_042

Select all nodes with CTRL+A, copy them with CTRL+C and paste them somewhere on the right with CTRL+V. Press h to flip the new shape horizontally. Move the new path into place.

Inkscape_043

We now have created three different paths. We need to convert them into one single path if we want use color fill effects on the logo. To do this select the last created path and double click it to switch into edit mode then shift select the other inner path. Hit CTRL++ (the inner plus means together ๐Ÿ˜‰ ). The shapes are being added together.

Inkscape_044

Then shift select the inner and outer shape. Now hit CTRL+- to subtract the inner shape from the outer one. We can now set a fill color to our new logo. Lets try this. Go into color menu (SHIFT+CTRL+F) and adjust the color. Make sure that the alpha is not 0 because this means your color is fully transparent and you will see nothing.

Inkscape_045

Finally we need to create the bottom infinite sign. To make this as easy as possible we are going to use the upper shape, because it already has a large portion of the path, that we need. Select the path. Copy and paste it to the bottom of the reference. (Disable the color fill if necessary). Position it appropriately until matches the reference.

Inkscape_046

Go into node edit mode by double clicking and delete the nodes that make up the 5 on the left, so we keep the infinite sign part only.

Inkscape_047

We are left behind with the two ugly long handles on the nodes on the left. These nodes are diamond shaped which means, that they are corner nodes. To fix this, convert the corner nodes into curve (smooth) nodes by hitting the smooth node icon (their shape will switch back to a square). Then adjust the length of the handles until your path matches the reference.

Inkscape_048

Finally turn on fill color again and adjust the color and width of the outline. We are done.

Inkscape_049

We now have created a basic logo shape in SVG format. This enables us to create an icon series of different sizes. In the 3rd and final part of this tutorial I would like to polish things up a bit by adding a frame and some shades to our logo.

Get the logo of this part here.

Thanks working through this. Critiques and comments are welcome. ๐Ÿ˜‰