Installation
There are many tools you can use to create SVG files, but the relatively new Boxy SVG is one of the most straightforward and fluid. Boxy SVG is available for Windows, macOS and Linux. It is available to download for free in the Windows Store, Mac App Store and Snap store. Simply search for “boxy svg” in the respective app store to install it. Linux users can install it on any Ubuntu-based distribution. Find it in the Software Center or fire up a terminal and use: In Arch and Manjaro, you’ll first have to add support for snap packages and then use the same command. Boxy SVG is also available as a web app, though it will require a subscription to use it.
Start with a rectangle
This Boxy SVG tutorial designs an icon for folders. Since folders are rectangular, select the Rectangle tool, the 12th one on the left toolbar, with the solid rectangle icon. Use it to define a rectangle covering the bottom half of the default canvas – like the one seen in the screenshot below.
Clone and Resize
With the Transform tool selected (the first one in the left toolbar with the cursor arrow), click on your rectangle. Use the control points on its bounding box to resize it a bit horizontally so that you have some empty space on its right. You can duplicate an element by copying and pasting it (Ctrl + C, then Ctrl + V on your keyboard), but try this instead: Hold the Alt key, left-click the rectangle and drag it to the right. While dragging it, also hold the Shift key to constrain your rectangle’s movement to only one axix, in this case, horizontally. Move it to the right of your existing rectangle.
Basic Transformations
If you click a second time on an object with the Transform tool selected, the control points will change color to show you that instead of resizing, you can now rotate it (if you use the points on its corners) or skew it (with the points on its sides). But let’s see an even more versatile way to transform objects by using individual points. Resize your new rectangle so that it’s to the right of your previous one. Then, select “Shape -> Shape to Path” from the menus on the top to convert the selected object to an editable path. Now you can tweak its individual points to change its shape. Although that wasn’t necessary to simply skew the rectangle, this shows how to tweak individual points, to create more interesting shapes or have better control over perspective. Use the Edit tool (second one in the left toolbar, directly under the Transform tool, with a triangular arrow) to select the two control points on the right side of your new rectangle. With both selected, left-click and hold one of those points to choose it, then drag it upwards while holding the Shift key (to constrain the movement on the vertical axis).
Colors and Perspective
Use the Transform tool to move your new – now smaller and skewed – rectangle so that it touches your larger one. Use the Fill tool (first on the right toolbar, with a paintbrush icon) to give it a color. For now, use any color you wish as a placeholder. Create a clone of the smaller, skewed rectangle and move it to the left side of your larger rectangle, using methods demonstrated earlier. With the Transform tool active, select the Arrangement tool (with the cross-alike icon on the right toolbar or press A on your keyboard). Left-click on your first skewed rectangle, hold the Shift key and click on the second skewed rectangle to select them both. Use “Back” from the Z-order group of options in the Arrangement panel to send those rectangles behind your larger one. “Front” does the opposite and will bring an object in front of everything else. The accompanying “Raise” and “Lower” options move an object “forward” or “backward” in individual steps. Create a clone of your larger rectangle, and move it to the right and up so that it’s in contact with the other side of your skewed rectangles. You should have one large rectangle in contact with its left side and another one in contact with its right side, as shown in the screenshot below Send this rectangle to the back as well, and give it a different color so you can easily tell each one apart.
Make the Flap
With the basic shape of our folder ready, it’s time to make it look more folder-like. A category flap will help with that. The folder’s shape below had to be tweaked a bit since it looked too fat. Create a wide and short rectangle on a blank spot of your canvas. You’ll have a basic idea of its size if you keep in mind this will soon turn into a flap for the already-designed basic folder shape. Select the Edit tool (second in the left toolbar), hod the Ctrl key and click and drag the top-left edge control point of your rectangle toward the middle of its top side. This will turn the top-left edge into a curve. Repeat with the opposite motion for the top-right edge control point, dragging it to the left, again, toward the center of your rectangle’s top side. The result, as you can see below, should be an ex-rectangle, with its bottom side angular and the top one curved. Move the flap so that’s in contact with the top-left side of the front large rectangle of your folder. Tweak its size and placement until you believe the result looks folder-like.
Gradients and Shades
The easiest way to give the illusion of volume and make icon colors more interesting is through the use of gradients. Select the large, front rectangle and the Fill tool (first on the right toolbar or F on the keyboard). Under “Type,” select the second icon, “Linear Gradient.” Leave the rest of the options as they are and turn your attention to its color. To edit that, select the Edit tool (second on the left toolbar) and click on each control point of the “gradient line” in the rectangle. You’ll see color selectors appearing on the panel on the right. Use them to change your gradient’s colors to a dark grey going to a light yellow. Notice the value directly under the color selectors – that will be by default accompanied by a “Hex” setting. Copy this value to your clipboard. Select the rest of the rectangles and assign the same gradient to them. Since there does not seem to be a way to “copy gradients” in Boxy SVG, you’ll have to enter the color values manually. That’s why you should copy the color value from the previous gradient. You’ll have to return to it to also copy the second color value and paste it to the gradient of your second rectangle. Repeat for the other two until all sides of your folder have the exact same gradient. With the Edit tool active, play with each folder side’s gradient. Make the left and right sides a little darker by dragging the light point of your gradient outside your rectangle. Do the same for the side at the back, but make it look even darker.
Final touches
To make the folder icon look more like a folder than a yellow box, fake some pages as a nice extra detail. By now you should be familiar with the processes involved. Start by creating a light-grey rectangle in front of your folder, somewhat smaller in size. Add a stroke around this rectangle to give an illusion of depth, without any pseudo-perspective effects that were used on the folder. To do this, with your rectangle selected, choose the Stroke tool (second on the right toolbar or S on the keyboard). Assign a black color to it, but turn the transparency slider to around 80 percent, close to the right side. The border that appeared around your rectangle should look transparent and be a gray that is somewhat darker than the rectangle’s main color. Copy and paste your rectangle. Give the new clone a somewhat darker grey fill value. Leave the stroke as it is. Use the Arrange panel to move your new rectangle behind but offset to the top and right compared to your primary page rectangle. Use the Transform tool to rotate it two to five degrees to the right. Repeat the last steps to create a third page behind the first two. Return to the Arrange panel, select all your three pages and send them Back. Use the “Raise” option to bring them toward the front step by step so they’re in front of your folder’s back side but behind its front side. This example adds another rectangle under the folder. It was skewed to one side, a grey-to-transparent gradient was added, and the Compositing panel (third on the right toolbar, C on the keyboard) was used to add a Gaussian Blur filter. The result was a nice, smooth shadow under the folder. Feel free to skip that little detail if you wish. 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 friendly bitmap format that you can use in other programs, like PNG or JPEG, by choosing “File -> Export…” (Ctrl + E). Set the format parameters – resolution, compression – you wish using the panel on the right and click on “Export” to save your file in the selected filetype. Once you have saved your file, you can replace your Gnome icons with this newly created one. Now that you have created your icons, follow along in the next tutorial to design a logo in Inkscape.
