How to make Flat Long Shadows: Step-by-step Tutorial - Today’s tutorial, I will share a technique used to create a flat icon with long shadow design on Inkscape vector graphics editor.
The Flat design is a type of design that’s been stripped of any three-dimensional elements. It removes any stylistic tastes that try to imitate the real-world equivalent of those elements.
The Flat design is a type of design that’s been stripped of any three-dimensional elements. It removes any stylistic tastes that try to imitate the real-world equivalent of those elements.
Part of the recent flat design trend, long shadow effects are a popular but not necessarily new phenomenon. The effect has become a quick trend. One thing that stands out is the use of long flat shadows, particularly for small UI elements and icons.
The shadows have a characteristic 45-degree (although some designers are using 120 degrees) angle below the horizontal axis and a gradient color close to the background shade.
Designers are creating long shadows using a tint of the color without fading, shading or graduation of color, which is greatly used primarily for smaller objects such as icons and branding.
Building Icon Vector: Flat Long Shadow Icons
Now prepare your computer, Inkscape, and may a cup of coffee. Let's start!
Step 1 - Open your Inkscape. Create a new document. i.e 300 x 300 px.
Step 2 - Now create a new square using Rectangle tool.
Set the Foreground color to Turquoise, Green Sea, Emerald or anything you want. If you need the flat design colors code, you can take a look and read our previous post Importing Flat, Material Design Color Palette into Gimp and Inkscape.
Step 3 - Create a text in white, or I assume you've made the logo.
Step 4 - Select all objects you have so far, press Ctrl+Shift+A and set it to center.
Step 5 - Duplicate the text / logo by Right Click -> Duplicate or press Ctrl+D. Please make sure the duplicated text is a path. Click Path -> Object to Path to convert an object to path on Inkscape.
Note : An Object with cello color is a duplicated logo. The original behind the cello object.
Step 6 - Select the duplicated logo, go to Extension -> Generate From Path -> Motion. Fill the Magnitude to 300,0, and Angel to 45,0.
Now you have the long shadow effect with 45-degree.
Step 7 - What's next? Duplicate the square.
Also on Linuxslaves :
- How to Create a Gradient Mesh in Inkscape 0.91
- Inkscape Vector Graphics Editor 0.91 Advance Keyboard Shortcuts
- How to Create Instagram Effect on Your Linux PC
Step 8 - Once duplicated, press and hold the Shift key, then select duplicated square and long shadow object, then right click and hit Set Clip.
Step 9 - Select the shadow then press PageDown to lower selection one step.
The final step it setting the shadow color. The shadow color can vary in its darkness compared to the background color, and in some cases, fade out into a transparent fill. It's all up to you to decide what final result you're going for.
Flat Long Shadow Icons Video Tutorial
So that is all I can write about a guide, creating flat design icons with a long shadow effect on Inkscape vector graphics editor, plus a video. Thanks for visiting Linuxslaves!