Photoshop Video Tutorials: How to Create a Flat Design Shadow for a Logo or Icon

7
1685

Learn How to Create a Flat Design Shadow Effect for your Logo, Type Lockup or Icon with our expert tutorial video.

 

This video is part of an Adobe Creative series on flat design, make sure to subscribe and follow so you don’t miss out!

 

[youtube]https://www.youtube.com/watch?v=yTKYGtktMK0&w=690&h=385[/youtube]

Flat Design is the latest design sensation being used for mobiles displays, websites and logos. Find out more about Flat Design and why it’s so popular here.
Watch the video and follow along with the transcript below. Share your genius flat designs with us on Twitter and Google+ – we’ll repost your name and a link to your website if you impress us 😉

1. Set-Up

Firstly gather your logo and colour schemes, if you not have a logo or an icon, you can find great icons one here at flaticon.com. If you want an update to your colour scheme you could try having a look at some flat colours at flatuicolours.com.

Flat Long Shadow Step 1

2. Open Photoshop & Set Size

Open up Photoshop and create a new document. I have gone with the size 1000 x 1000 pixels with a resolution of 300 pixels and make sure your colour mode is set RGB (never use RGB for print, if you’re making a business card or other print artwork, always set the colour to CMYK). In the ‘Background Contents’ click on the small coloured box and select your desired colour.

flat design long shadow tutorial

3. Import your Graphic

We need to import your logo to document, to do this go ‘File’ > ‘Place Embedded’ and locate your logo. We use a PNG format, this allows us to have a transparent background this is useful when designing. (TIP: There are other formats do offer the same qualities as the PNG format e.g. GIF, TARGA, TIFF, PSD & AI.) Now your logo will embed onto the document.

Select the logo and with the corner of the image and hold ‘Shift’ and resize the image. (TIP: Holding ‘Shift’ when resizing the image will keep the entire image in proportion.) Once everything is complete select the tick to confirm your action.

4. Centre & Guides

Now make sure the artwork is in the centre of document, we can add grid lines to help. To do this go to ‘View’ > ‘New Guide’, set the position to 500 pixels vertical and 500 pixels horizontal. Select the image and match up the middle anchor point to the green cross.

long shadow tutorial

5. Rasterizing

Currently we cannot edit our picture because the image is a set as a smart layer, in order to do this we need to rasterize the layer, head over to the ‘Layers Window’ right click on the image layer and select ‘Rasterize Image’. We now need to change the colour of our logo white; we simply invert the colour of the image. To do this go to ‘Image’ > ‘Adjustments’ >‘Invert’ the logo colour will now have changed to white.

flat icon logo

6. Create a Shadow

Now create the first flat shadow. Make sure the colour is set to black and select the ‘Rectangle Tool’ in the tools menu on the left hand side of the screen. Make a long rectangle; keeping the width around the same size is your Logo. Rotate the image to a -45-degree angle making sure the rectangle stretches off the document. Adjust the width to match up with the edge of the logo and once that is complete confirm the changes by selecting the tick mark.

long shadow

7. Opacity & Gradients

In the ‘Layers Window’ move the shadow layer underneath the Logo. Now using the ‘Rubber Tool’, rub out left and top parts of the shadow that surrounds the logo. Once that is complete in the ‘Layers Window’ change the ‘Opacity’ down to 30%. We have now created a block shadow, we now want to fade out the shadow.
Right click on the shadow layer in the ‘Layers Window’ and select ‘Blending Options’. In ‘Layer Style’ select ‘Gradient Overlay’ and click on the gradient colour bar. This brings up the Gradient Editor; we need to change the two colours in the colour bar. Select the right hand colour (Colour Stop) to the background colour and change the left hand colour to black. Change and alter until we have a nice gradual shadow. Select ‘Ok’ and change the angle on the gradient to -45% then select ‘OK’.

Flat Icon Shadow

8. Rounded Rectangle Tool

Next we create a square box, select the ‘Rounded Rectangle Tool’ and make sure the colour is set to a slightly darker shade to the background. In the ‘Layers Window’, move the square box underneath the logo and shadow layers and centre the box using the guides as help if needed.

Flat Design Shadow Tutorial

Select the shadow layer, and using the ‘Rectangle Marquee Tool’ in the tools menu, highlight and delete any shadow that is outside the box.

Flat Design Marquee Tool

9. Duplicate Layer

In the ‘Layers Window’ right click the square box and go to ‘Duplicate Layer’. A new square box layer will now appear, click on the layer and rotate the box to a 45%. Same as before adjust the width to the square box and make sure the length stretches off the document page. Repeat the same steps as shown previous when and create another shadow.

Finished Long Shadow Tutorial

 10. Admire your Flat Design Shadow!

You now have a finished flat design icon, logo or type lockup, well done.

 

Follow or Subscribe on Twitter, Facebook or Youtube to get the latest Adobe Creative Tips & Tutorials.

7 COMMENTS

  1. Back when I worked in web design, I could have done with tutorials like this. Very simple to follow and the effect is fantastic. Really makes the icons pop out from the page.

LEAVE A REPLY

Please enter your comment!
Please enter your name here