Create Flat Design Icons With Long Shadow Effect on Inkscape

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.

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.

Create Flat Design Icons With Long Shadow Effect on Inkscape

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.

Flat Design Icons With Long Shadow Effect

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.

Flat Design Icons With Long Shadow Effect

Step 4 - Select all objects you have so far, press Ctrl+Shift+A and set it to center.

Long Shadow Design Icon

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.

Tutorial, Create Flat Icons Design

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.

Create long shadow effect on inkscape

Now you have the long shadow effect with 45-degree.

Step 7 - What's next? Duplicate the square.

How to make Flat Design Icon Vector

Also on Linuxslaves :

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.

Clipping Mask Object on Inkscape

Step 9 - Select the shadow then press PageDown to lower selection one step.

Flat Design Icons With Long Shadow Effect

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!