How to Create Flat Icons in Photoshop

Last Updated on March 30, 2016

Facebook

Twitter

Google+

Pinterest

+

Okay, let’s face it. Flat design is the new ‘thing’ for web interface. With iOSand 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.

How to create Flat Icons in Photoshop

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:

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.

Next, we’ll be working on with the Post icon:

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

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.

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

4. Draw 15 pixelated lines as shown below:

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.

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.

Below you will find 39 more tutorials that will help you create awesome icons.

The Ultimate Roundup of 39 Icon Designing Tutorials

Icon designing is very essential and important for graphic designer as there are plenty of clients who are willing to pay good for some unique and creative icons for their projects. There are many sites offering free icons for commercial use but they cannot be unique as anyone can use them or they may not be according to your requirements like size or color so it is very important for designers to know, how to design their own spicy icons.

In this section we have compiled a list of very useful tutorials for icon designing. Mostly of them are performed in Photoshop or Illustrator. After going through these tutorials, you will have basic skills for icon designing, which you can utilize in your or your client’s projects.

In this tutorial you will learn to create a speed gauge and watch icon using Photoshop.

Anything missed? Feel free to shout at us via comments section. :)

Now you know how to create flat icons and where to learn more about creating icons. However we couldn’t leave you without of some great sets of premium icons. Check the next section.

29 Beautiful Premium Icon Sets for Your Next Project

When designing a website, beautiful icon sets are always the priority of any web designer. Designers search for attractive icons that can catch the attention of their users. They are essential in every project that is related with web design. Even though icons are very small the detail and attraction that they provide to the site is extraordinary. This is reason why designers look for high-quality and premium icon sets rather than going with cheap and free ones.

You can always use icons to connect with your visitors. Instead of creating icons that are time-consuming, you can use pre-designed premium icons that guarantee in giving solid appeal to your visitors.

All these icons are of the highest quality and can be used in your business and personal websites. Icons can be very helpful when you want to give your users a smooth navigation. Also, they add beauty to your websites and blogs.

Although there are free icons available on the Internet but, if you don’t want to compromise on quality, I recommend that you go with premium sets. In the end, please tell me about which icon sets do you use for your web design project? Or if you want to say something about my icon list, feel free to share your opinions in the below comment section. I would love to hear about it!

We gave you all of these option, however you may be wondering but how do you choose the right icons for you website? We’ve got an answer prepared below in the final section of this article.

Choosing the Perfect Icons for Your Website

This thought might be the prevailing philosophy that hides beneath the shroud of web design: that small details sometimes happen to be the most important ones. That the things we think do not matter in our design are, in fact, necessary for the smooth flow and exchange of information.

Sometimes small things tend to have the biggest importance.

One of these small things that are commonly taken for granted are icons. Icons can be considered as a worldwide-understood element of web design. They are apprehended by most people, making the websites benefit from the addition of such. It is in this universality that icons are considered to be one of the most important design elements that have ever walked (figuratively) on the face of the earth.

Icons are good tools of stamping an impression to an audience. They play a vital role in making the viewers understand what the message or the context of the website or application is.

What’s amazing about icons is that, even in their small space they occupy in the pixels of the screen, their role is immense. A lot of websites have invested a lot of effort, creativity and even money just to produce good icons that would suit the needs of their website. The ones created, in turn, reciprocate this by producing more viewers and easy to understand content. However, due to the variety of available icons, it becomes slippery to a point that designers seem to be confused. Iconography is a rather broad field because it encompasses a lot of concepts in fulfilling a lot of roles. As you all know, icons can be used for a lot of purposes, methods, occasions and motifs. Thus, the need to choose the correct and most appropriate icons is heightened.

By Joshua Sortino

As web designers, this lesson will make us more equipped with the ideas on how to choose the right icons. Most website failures result in poor iconography. This all branch out and eventually lead to the effect that readers find themselves to be out of place, just seeing the website. And how could we evade that situation? Here are a few tips.

Icons should be appealing and readable

Icons should be visually appealing. They should be beautifully designed; thereby, be remembered by ordinary people. When designing or looking for icons for your website, remember that the people’s memory retains for two things: either they are beautiful enough to be remembered, or horrible enough not to be forgotten. If you prefer the former, then you should always look for beautiful icons.

They should be universal

Choose icons that are easily understood by people. These icons should be famous enough that it would not produce confusion. Because you are dealing with imagery and its interpretations, the image that you should produce should always be universal. You need to make every person, at the very least, know what you are talking about. Make your icons be transcendent!

Example, never use a wrench, or a gear icon if you will not going to refer it as a settings link or menu. Of course, the average people, who are so used to seeing gears or wrenches for settings would think of it as a link or menu to the preferences of your website. They will get lost. Think of it as if you are making road signs. If you were the traffic sign manufacturer or installer and you happen to have made a mistake by switching signs, people might get lost, or worse, their cars might stumble with each other and your face will be all over the news.

They should be consistent

Ever experience having a nice conversation with a friend and then suddenly, you say something that is out of context, and your friend will pose a besmirched face, with an eyebrow raised and say, “Huh?”

Well, that will happen if you don’t start adding consistency to your icons. It will result into a breakage in the flow of information, and you won’t want that to happen.

For this, you should remember to use the same color or color scheme. Adding a very consistent color theme will make the identity of your icons stable. People will see your website and remember it. Also, you should remember to use, as much as possible, the same shapes. Shapes are also very good memory tools. Third, is that you should style your icons without borders. Borders, shadows, and gradients affect the technical and aesthetic quality of the icons.

It should complement with the motif

The illustrations have to look legit. They need to be visually compatible with the motif of your website. Before choosing the icons, ask yourself, how would my site look like? Will it be comical, formal, creative, flamboyant or plain? The answer to your question, should match the icons that you will use. Like fonts and colors, icons are thematic. They are occasional and prefer to be represented and used in specific occasions.

They should be functional

Icons should be functional. Period. Their quality should not defeat its true purpose. Sometimes, we tend to extravaganize the design by adding unneeded icons. But you should remember to put what you need. Don’t be greedy. Less is more. Lesser is most. The more that you add, the more it becomes visually heavy. So be wise.

Conclusion

The thing that you need to know in choosing icons for your web design is that you need to be understood and purposive. You have to be so universal that even a simpleton will understand you. You have to apply the purpose and try to achieve it in your design. A great web designer does not stop just because he is tired of looking for good icons. A great web designer will just stop, when he sees it in the website.

Truly, small things tend to have greater roles and those bits of facts can mean a great deal of inspiration. And I bet the icons agree.

Comments

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!~

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?

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.

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