How to Create a Flat Navigation Icon Set in Adobe Photoshop

post-icon-final-6
(You could save it as an image in this part. This could actually be considered as a flat Home icon. But, I still want to add a long shadow, so keep up.)

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

flat-icon-tutorial-home-icon-1

Create a Flat Home Icon in Photoshop

post-icon-final-4
5. Draw a rectangle to symbolize an image in the sticky note.
This is what we will be creating:
Hopefully, after completing this tutorial, you will take your new skills and start incorprating flat design into your own websites and projects.
Hopefully, after completing this tutorial, you will take your new skills and start incorprating flat design into your own websites and projects.
Next, using the pen tool, with the #000000 color fill, draw a shape. Start it with the right edge of the roof. (At the edge where the red and white and red colors intersect) Extend the drawing to the outside of the bounding rounded rectangle and close the shape in the bottom-left edge of the house image. You’ll arrive into this:
flat-icon-tutorial-home-icon-3
post-icon-final-1
Using the Pen tool, draw something like the image below. Use the color #a30d00. This will serve as the roof of our ‘Home’ icon.
Open Photoshop. Create a new file using the preset photo (10inches x 8 inches, 300 DPI, transparent background, RGB color).
home-icon-7
Next, still using the Pen tool, draw a rectangular shape like the image shown below.  Use the #ffffff color. Also, draw a small square using the Rectangle tool and color it #3498db.
flat-icon-tutorial-home-icon-4
post-icon-final-2
And besides, the flat design movement is not only aesthetically beautiful, it has a functional purpose as well.
post-icon-final-9
Your icon is done. To save it, click on File>Save for Web (Shortcut is CTRL+Shift+ALT+S). Save it as PNG-24, with transparency checked. We would be wanting everything to be saved as PNG-24 as it supports transparency.
post-icon-final-final-about
1. I opened Photoshop and repeated steps one and two of the tutorial.
flat-icon-tutorial

DOWNLOAD NOW

Unlimited Downloads: 500,000+ Fonts, Web Templates, Themes & Design Assets

Take note of the spacing. I spaced them a little bit wider to give a minimalist feel on the icon. Minimalism is a characteristic of the flat design trend.
flat-icon-tutorial-home-icon-2

The About Me and Contact Me Icons

6. Draw the shadow as you did in the Home Icon Tutorial.
fnal2-570x456
home-icon-13

Posted by WordPress Guru