How to Create Flat Icons in Photoshop

Okay, let’s face it. Flat design is the new ‘thing’ for web interface. With iOS and even Windows now adapting this design scheme, it will not be any longer when almost (if not all) all websites in the World Wide Web adapt this design scheme. You would just be baffled to know one morning that as you woke up, opened your browser and typed in your favorite website (we hope it is 1stwebdesigner, just kidding!) and be surprised to see that it followed with the trend of flat design! So you would immediately re-code your website or blog, for that matter, to be ‘in’ with the trend, and that would entail a lot of grueling hours again.

So why not start today? Why not start your web motif revamp today? Try to be there before it happens. Try to be cool before being cool is cool. Be a hipster!

You may be thinking, “Where will I start?” Of course, revamping your website design is hellish as hell is. But that’s why we are here – so that you’ll have a helping hand in going with the flow of design. Right?

A good start for reconstructing your skeumorphic-designed website is to render the images you used in the interface to flat. This is probably the easiest because it does not require a lot of coding. What you really need is creativity and knowledge of a graphic designing software. There are a lot of images to ‘flatten’. It could take a lot of time to do this. But, of course, it is imperative to transform the more important images first. This will give you a sense of alleviation because these images will be present in every page on your website. You could start with your logo, or better yet, with the navigation icons.

In this tutorial, I will make that trouble less troubling. I will try, with my best efforts, to try to teach you how to make flat-design-inspired navigation icons. We will be creating navigation icons for your website or blogs. This tutorial will be using the Adobe Photoshop CS6 software. (You could use previous versions too) So brace yourselves, flat design interfaces are coming.

Here’s what we will be working on:

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 you could use your own color for this.) Do it according to the color motif of your website.

flat-icon-tutorial-home-icon-2

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.

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 by 396 shape with the color the #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 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:

home-icon-7

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.

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 with the Post icon:

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

Here are the About Me and Contact Me Icons:

Download the entire pack here.

post-icon-final-final-about

post-icon-final-final-contact

I just hope that after these tutorials, you’ll start revamping your websites. I tell you this is a very difficult process but change is inevitable, so might as well go with it. And besides, the flat design scheme is designed to be appreciated not only for its beauty but for its purpose. So you’ll hit all whammies at once.

I remind you that these are just tutorials. You could experiment with these. Try to be as creative as possible. Your mind is your limit. You’ll never know how far it will take you if you won’t stretch it and make it work.

Rudolph Musngi

Rudolph is a geek. He loves reading: books, blogs and even nutrition facts found at the back of products. He loves to read interesting internet stuff. Since joining 1stwebdesigner last year, Rudolph has written several articles that concerns Typography, Wordpress, Freelance Lifehacks, Graphic Design and Showcase of Beautiful Web Designs. He also write poems, movie reviews and he puts them in his blog together with rants and some daily life updates.

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. says

    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 says

      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?

  2. Tim says

    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 says

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