We create a rectangular figure the same height as the diameter of the icon element.Īnother very useful and effective option is to use a Photoshop action, and you're ready to go. This method may be slower but at the same time it gives the closest thing to a perfect result. We can also build long shadows using the Pathfinder tool. If we do the same with the background shape of the icon on top of the image background, we get an optimal result. This is simple to do by duplicating the background shape, keeping it in the same position on top of all the other elements, selecting them all and applying Make Clipping Mask Lastly, since we want to keep the look of the icon consistent, we want to crop the shadow to the shape of the icon or button. Applying a gradient is another valid and interesting option. If we play with changing the color, opacity or the blending mode, we can get different effects. The result of the Blend option will be the long shadow. One of the options with this tool is to specify a high number of specified steps to keep the separation between them to a minimum, until it's no longer visible to the naked eye. If we select this tool and click on the two elements, we get a row of them in between the first and last. To get the shadow we'll use the Blend Option tool. This is how we achieve the characteristic 45º or 135º angle for our long shadow. Then we shift the same number of pixels on the +x or -x axis- depending where we want the shadow to point- and on the -y axis. To do this, we need to duplicate the element, keeping the copy in the same position.
Here are some examples.įirst we'll do the long shadow of the icon element. Also, we need our choice of color palette in flat style. To start with, we need to have the elements prepared: the icon element and the shape.
One uses the Pathfinder tool and the other uses the Blend Option. We'll show you two different ways to achieve this long shadow finish with Adobe Illustrator. It has always been a widely-used resource in photography to emphasize shapes and transmit different emotions to the viewer. These shadows have a characteristic 45º angle below the horizontal axis and a gradient color close to the background shade can be applied. Within the flat design trend on the rise at the moment, especially in this world of the web, one thing that stands out is the use of long flat shadows, particularly for small UI elements and icons.