You searched everywhere for the perfect icon theme, but didn’t like what you found, so you decided to make your own folder icon. Which software should I use and how do I get started? This Boxy SVG tutorial provides step-by-step instructions for creating a simple folder icon.
That’s what it looks like: How can I view SVG thumbnails in Windows Explorer?
Many tools can be used to create SVG files, but the relatively new Boxy SVG is one of the simplest and most flexible. Boxy SVG is available for Windows, MacOS and Linux. It can be downloaded for free from the Windows Store, Mac App Store and Snap. Just find the boxy svg in the right App Store to install it. Linux users can install it on any Ubuntu-based distribution. Find it in the Software Center or start the terminal and use it:
sudo snap boxy-svg installation
In Arch and Manjaro you must first add support for linking packets and then use the same command.
Boxy SVG is also available as a web application, although a subscription is required to use it.
Start with rectangle
This Boxy SVG tutorial icon folder design. Since the folders are rectangular, select the Rectangle tool, 12. on the left toolbar, with the Full Rectangle icon.
Use this option to identify the rectangle that covers the lower half of the canvas by default – as shown in the figure below.
Cloning and reformulation
When the conversion tool is selected (first in the left toolbar with the cursor arrow), click on the rectangle. Use the checkpoints on the edge to change the size of the device slightly horizontally so that there is a small space on the right side.
You can duplicate an element by copying and pasting it (Ctrl + C, then Ctrl + V on the keyboard), but try : Hold down the Alt-key, left click on the rectangle and drag it to the right. While dragging, also press and hold the Shift key to limit the movement of the rectangle to a single axis, in this case horizontal. Move it to the right of the existing rectangle.
When you click an object a second time with the selected conversion tool, the checkpoints change color to indicate that you don’t need to resize the object anymore, but that you can now rotate (if you use points on the corners) or tilt (with points on the sides) the object.
But let’s look at an even more universal way of transforming objects using separate points. The new rectangle must be adjusted so that it lies to the right of the previous rectangle. Then choose Form -> Form to Path from the top menu to convert the selected object to an editable path.
You can now adjust the different points to change the shape. Although there is no need to simply tilt a rectangle, it shows how to adjust individual points, create more interesting shapes or get a better control perspective.
Use the Edit tool (second on the left toolbar, just below the Transform tool, with a triangular arrow) to select two checkpoints on the right side of the new rectangle.
After you have selected the two points, left-click on one of the two points while holding down the Shift key and drag it upwards (to limit the movement of the vertical axis).
Colours and perspectives
Use the transformation tool to move your new rectangle – now smaller and tilted – to hit your larger rectangle. Use the fill tool (first in the right toolbar with a brush) to give it a colour. For the time being, use any colour as a springboard.
Create a clone of a small angled rectangle and move it to the left side of the large rectangle using the above methods.
When the conversion tool is active, select the Organize tool (with the cross symbol in the right toolbar or press A on the keyboard). Left click on the first slanted rectangle, hold down the Shift key and click on the second slanted rectangle to select both.
Use the option group Return Z-order in the spreadsheet to send these rectangles behind your largest rectangle. The facade does the opposite and puts the object first. With the corresponding up and down options, the object can be moved forwards or backwards in individual steps.
Make a clone of your largest rectangle and move it to the right and up so that it touches the other side of the distorted rectangle. One large rectangle must be in contact with the left side and the other with the right side, as shown in the figure below.
Give this rectangle back and give it a different colour so that it can be easily distinguished.
Creating a valve
When the basic form of our file is complete, it’s time to make it look more like a file. You can do this with the category panel. The figure below for the portfolio had to be adjusted slightly because it seemed too thick.
Make a short, wide rectangle on the white canvas. You have a basic idea of its size when you consider that it will soon turn into a flap for an already developed basic shape of a backrest.
Select the editing tool (the second one in the left toolbar), hold down the Ctrl key and drag the checkpoint to the top left of the rectangle to the center of the vertex. This changes the top left edge into a curve. Repeat the reverse movement for the reference point at the top right by dragging it to the left, again to the center of the top edge of the rectangle. The result should be a rectangle with a square bottom and a convex top, as shown below.
Move the flap so that it touches the top left of the large front rectangle of the backrest.
Change the size and position until you are sure the result looks like a folder.
Gradients and shades
The easiest way to create the illusion of volume and make the colors of the icons more interesting is to use gradients. Select the large rectangle at the front and the fill tool (first in the right toolbar or F on the keyboard). In the input area, select the second symbol of the linear gradient.
Leave the other options as they are and pay attention to their color. To edit, select the edit tool (second in the left toolbar) and click on each checkpoint of the gradient line in the rectangle. You can see the color selectors in the right panel. Use it to change the color of the gradient to a dark gray, which then changes to a light yellow.
Note the value directly below the colour selectors – this is accompanied by a hexadecimal setting by default. Copy this value to the clipboard.
Select the other rectangles and give them the same slope. Since it is not possible to copy gradients in Boxy SVG, you have to enter the color values manually. So you need to copy the color value from the previous gradient. You have to go back there to also copy the value of the second color and paste it into the gradient of the second rectangle. Repeat this process for the other two until all sides of the backrest have the same inclination.
If the edit tool is active, play with the gradient on each side of the folder. Make the left and right side a little darker by dragging the light spot of your gradient outside the rectangle. Do the same for the back, but make it even darker.
Here are the top 5 graphic design tools for non-designers
To make the folder icon look more like a folder than a yellow box, some pages need to be simulated as a good extra detail. At this stage you should already be familiar with the processes involved.
Start by making a light grey rectangle for the back that is slightly smaller.
Add a line around this rectangle to create the illusion of depth without the pseudo-perspective effects used in the portfolio. To do so, select a rectangle and choose the AVC tool (second on the right toolbar or S on the keyboard). Put it in black, but set the transparency control to about 80%, on the right. The border that appears around your rectangle should be transparent and grey, which is slightly darker than the main colour of the rectangle.
Copy and paste your rectangle. Give the new clone a slightly darker grey filling. Leave it as it is.
Use the Arrangement Panel to move the new rectangle backward, but with a right and left offset of the rectangle on the main page. Use the transformation tool to rotate it two to five degrees to the right.
Repeat the last steps to create a third page after the first two.
Go back to the Organize section, select the three pages and send them back. Use the Lift option to bring them to the front of the backrest step by step, so that they are in front of the backrest but behind the front of the backrest.
In this example, another rectangle is added to the folder. It was tilted in one direction, a gray gradient was added to the banner, and a composite panel was used to add a Gaussian blur filter (third on the right side of the toolbar, C on the keyboard). The result is a nice smooth shadow under the backrest. You can skip this little detail if you want.
In the last step of this Boxy SVG tutorial use File -> Save as … (Ctrl + Shift + S) to save the file. You can also export it to a more user-friendly bitmap format that you can use in other programs such as PNG or JPEG by choosing File -> Export…. (Ctrl + E). Set the desired format options – resolution, compression – in the right pane and click Export to save your file to a selected file type.
After saving the file, you can replace the gnome icons with the icons you just created.
Now that you’ve created your symbols, follow the instructions to create a logo in Inkscape.
That’s what it looks like:
Is this article useful?
YesNohow to make a picture a folder icon windows 10,how to change the icon of a folder mac,how to change folder icon windows 10,change program icon windows 7,change file icon windows 7,change program icon windows 10,how to make a picture a folder icon on mac,how to put picture on folder icon