Page 1 of 1

Creating a folder icon in InkScape CREATING A FOLDER ICON IN INKSCAPE This tutorial will teach you how to Rate Topic: -----

#1 VulcanDesign   User is offline

  • D.I.C Head
  • member icon

Reputation: 6
  • View blog
  • Posts: 98
  • Joined: 06-December 09

Posted 13 December 2009 - 08:17 PM

This tutorial will teach you how to make a simple folder icon in Inkscape. To understand this tutorial, you will need at least a basic understanding of how Inkscape works and the basic tools.
1) The basic shapes
2) Editing the nodes and colors
3) Creating the paper
4) Shadowing

The first step in this process is to create the basic shapes for the folder. For this folder icon, you will need 4 main shapes that will become the back of the folder, the front, and the tab. Notice only three things? To make the folder icon look more polished, we will make the bottom edges square, and round the top edges rounded – something which Inkscape is not capable of doing in one shape without a lot of fussing. OK, on to creating the shapes. First, set the default color of your objects to black – this removes difficulty later on. Next, resize your document to 500x500 pixels (File>Document Properties>Custom Size) – I will be naming sizes in this tutorial, and it will be easier to follow if your document is the right size. Now make a 300x300 square, and reposition it to 0X 0Y; make sure the corners are not rounded.
Posted Image
Next, duplicate square, and move it away from the first square to make it easier to edit. Give it well-rounded corners with the node tool. You want the second shape with rounded corners to look like it is a part of the first shape, so we want to align it – move it back to 0X 47.5Y.
Posted Image
Next, duplicate both shapes and drag off to a different area of the screen (separately). You will need these shapes for later. Then, select the shapes at 0X 0Y (shift+click on both objects) and make a union (Path>Union). This combines them into one object and path. Now return to the objects you duplicated and dragged off; first, select the square with the rounded corners, and resize it to W: 150, H: 62. Finally, position it at 25X 316Y.
Posted Image
This object is now the tab for the folder. You should make it a union with the rest of the folder (shift+click on the folder and the tab, Path>Union). And finally with the basic shapes, we go to the non-rounded square that you dragged out of the way a few steps back. Change its color to red (so it will be noticeable), and position it at 0X 0Y.
Posted Image
GRATZ – you’ve made the basic shapes. Now we need to change the nodes and colors.

Now that we have the basic shapes, we need to change the look – black objects do not a folder make. First of all, select the red square in front of everything, and change it to a path (Path>Object to Path). Now that it is a path, use the node tool to drag the right and left upper edges to the right, giving it an open look.
Posted Image
Now that the folder is coming into existence, we have to make it look like a folder; that’s right, color changing time. First, select the front part of the folder (currently red), and change it to a folder-looking color, such as the color RGBA ffe680ff. Finally, select the back part of the folder and color it appropriately, such as with the color RGBA ffdd55ff, which makes a nice folder-tone, and is darker than the front (something which makes it look more realistic).
Posted Image
And so for the coloring. And now we start addressing the stylistic points of the folder: every folder must have its paper.

For the folder to look like a folder, it must have paper inside. Aside from looking more realistic, it just looks nicer. You will want to give the impression that a piece of paper is in the folder, and to do that you will need a white sheet that is under the top of the folder and is smaller than the outside of the folder so it seems to be contained inside the folder. SO: change the default color to white, and make a square. The square should have a width of 268.5, and a height of 315.5. Position the white square at 14X 0Y. Finally, lower the square down one level (select the square, then Object>Lower). This gives the impression that a piece of paper is resting in the folder.
Posted Image
Great! You’re almost done. Just some shadowing left…

And now for the last part – the shadowing! Shadowing is necessary in most works of graphic design, not only because it gives it a more realistic and slightly 3D effect, but also because it just looks better – without it, you have a clump of plain colors and shapes, and shadowing that makes each part more distinct. Since there are three separate objects in this folder (the back, the paper, and the front), you will need to create three shadows. This is easy. Select the back of the folder and duplicate it. Now change the duplication to black, give it a blur of 3 using the Fill and Stroke menu, and send it to the bottom by selecting it and clicking Object>Lower to Bottom. Next, select the paper, duplicate it, and change the duplication’s color to black. Using the Fill and Stroke menu, give it a blur of 2 this time – the paper should stand out less than the folder. Then send the paper blur down 2 levels so it is behind the actual paper but above the back of the folder. Finally, duplicate the front of the folder, change it to black, give it a blur of 3, and send it down one level so it is behind the front of the folder. And now select everything (ctrl+a), and group it (Object>Group).
Posted Image
Now you can save it, export it, scale it, whatever.
And that concludes making a folder icon in Inkscape.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1