Hopefully, after completing this tutorial, you will take your new skills and start incorprating flat design into your own websites and projects.

And besides, the flat design movement is not only aesthetically beautiful, it has a functional purpose as well.

Create a Flat Home Icon in Photoshop

This is what we will be creating:

fnal2-570x456

Open Photoshop. Create a new file using the preset photo (10inches x 8 inches, 300 DPI, transparent background, RGB color).

flat-icon-tutorial-home-icon-1

Use the Rounded Rectangle tool and create a new shape with the dimensions of 1736 pixels x 1736 pixels, radius 83px, color #82d8b5 (or choose use your own color for this).

flat-icon-tutorial-home-icon-2

Using the Pen tool, draw something like the image below. Use the color #a30d00. This will serve as the roof of our ‘Home’ icon.

flat-icon-tutorial-home-icon-3

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

Next, using the Rectangle tool, draw a 248px x 396px shape with a #fcab3a color fill.

flat-icon-tutorialhome-icon-5

(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.)

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:

home-icon-7

Send the shadow backwards. Rasterize the layer of the shadow. Using the Magic Wand tool, select the entire bounding rounded-rectangle layer and inverse the selection (you can use the shortcut CTRL+Shift+I). With the selection (marching ants) still on, click the shadow layer and press delete.

home-icon-8

home-icon-12

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.

home-icon-13

flat-icon-tutorial

Next, we’ll be working on the Post icon.

Create a Flat Post Icon in Photoshop

1. I opened Photoshop and repeated steps one and two of the tutorial.

flat-icon-tutorial-home-icon-1

flat-icon-tutorial-home-icon-2

2. Draw a rounded rectangle with the size of 929px by 929px and a radius of 38 px. I used the color #f5ea74 to resemble a sticky note.

post-icon-final-1

3. Draw a 1px line with the color #5d5608. Place it in the top of the sticky note.

post-icon-final-2

4. Draw 15 pixelated lines as shown below:

post-icon-final-3

post-icon-final-4

post-icon-final-6

post-icon-final-5

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.

5. Draw a rectangle to symbolize an image in the sticky note.

post-icon-final-7

6. Draw the shadow as you did in the Home Icon Tutorial.

post-icon-final-9

post-icon-final-8

7. Save it!

post-icon-final-10

The About Me and Contact Me Icons

You can download the entire pack here.

post-icon-final-final-about

post-icon-final-final-contact

Editorial Team

Written by Editorial Team

  • Thanks. Creating Flat icons became this easy. What about illustrator? Does that fit well when compared to PS?

  • omg… wtf?
    Sorry but this is a awful tutorial… If you are going to illustrate / vector anything you have to use Adobe Illustrator not photoshop.
    Because Photo shop is purely for editing photos…. Its not for creating vectored graphics?

    Photoshop is the most unforgiving program for making vectored art. Don’t do it. Use illustrator!~

    • Fitz

      I agree with Tyler. Illustrator allows for much more control. It’s really the program that you want to be creating icons in.

      I am surprised at how many digital designers use Photoshop for jobs more suited to Illustrator. I can only imagine that people use Photoshop because they never bothered to really learn Illustrator, which has a steeper learning curve. Am I wrong about this?

  • Tim

    If you want to keep things editable, there is no need to rasterize the shadow layer. Leave it as a shape move it directly above the rounded rectangle and (on the Mac) option-click between the two layers. This will make the rounded rectangle into a clipping group and mask the shadow. No rasterizing necessary and you can scale the icon up and down without worrying about quality loss.

    • Rudolph Musngi

      Thanks for that tip!

  • KalakritiWeb

    very thanks for this tutorial

  • Jon

    Thanks for the guides and yes please put out more tutorials, some of us really need them :)

    • Rudolph Musngi

      Oh we will. Just stay tuned! Happy Holidays!

  • Slim

    great tutorial.

  • Nikhil Malhotra

    Nice simple tutorial Rudolph.

    • Rudolph Musngi

      Thanks!

  • Jotpreet Singh

    Yep, buddy, these guides are awesome. Hope you’ll put out more of these kind of simple-to-follow photoshop tutorials

    • Rudolph Musngi

      Of course, we will. Just keep visiting our website for more. We’ll be working hard to give you more knowledge. If I may ask, what more would you want to learn? So that we’ll at least know where to go. :)