Here’s what we will be working on:

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


Use the Rounded Rectangle tool and create a new shape with the dimensions of 1736 pixels x 1736 pixels, radius 83px, color #82d8b5 (Or you could use your own color for this.) Do it according to the color motif of your website.

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

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.

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

(You could save it as an image in this part. This could actually be considered as a flat Home icon. But, I would 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:


Send the shadow backwards. Rasterize the layer of the shadow. Using the magic wand tool, select the whole 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.


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.




Source: http://www.naijaclux.fnhost.org/index.php?/topic/3-creating-flat-icon-on-photoshop/