50 icon design tutorials | Bypeople

50 icon design tutorials

Hi dear readers what’s up?, are you doing something special right now?, because if you’re not, we have a very special activity for you. Do you realize that there are many people out there creating new things at every moment?, from illustrators to photographers, to developers to interactive designers, there is a whole community that is working all the time and improving their design skills.

But don’t worry my friend, because you’re about to start taking advantage of your free time ‘cause, thanks to Tutorialshock, you’re going to become a sensei in the art of icon design. On this showcase we will list several icon tutorials, starting from the most basic tips to further ahead start working in more advanced tutorials and finally acquire the ability to create realistic icons just like the ones that design masters make all the time. Just for reading this introduction we will award you with your white belt, it’s now your job to earn the orange one and for then, nothing will stop you from getting your own black belt for being a top quality icon designer.

icontuts52

Illustration by Iconshock.

You still can’t beat a Panda, but that’s going to change
icontuts52

Illustration by Iconshock.

On this level we’re going to learn the basic icon design techniques, nothing complicated but rather quite easy for you to start knowing the tools and interfaces of the main graphic programs. Let’s start with some basic tutorials that you need to complete before you can reach the next belt level.

1. Share this icon

icontuts01

On this tutorial you will learn how to make a share this icon, like the one you see on many websites, not much practice required in order to complete this.

2. Create a vector RSS icon

icontuts03

This is a great beginner tutorial, because with a few tools and a nice color management you will be able to create this beautiful RSS icon.

3. How to make a calendar icon

icontuts00

Beautiful icon made with the basic Illustrator tools, perhaps the only “non-newbie” thing is the shadow that goes in the bottom of the object.

4. Designing a sleek pencil icon

icontuts02

In many occasions, learning to draw a pencil object is an essential step that people need to take, and this case is not the exception.

5. How to create a television icon

icontuts04

As you can see, with basic gradients and figures you can easily recreate real-life objects such as this nice television icon.

6. Design float circle icon

icontuts05

For those who are familiar with this social network, completing the respective tutorial will be a lot of fun, now you know how they made the famous float icon.

7. How to create an envelop icon in Photoshop

icontuts06

A few shadows, a basic color palette and a nice use of references, that’s all you need to create an envelop icon like this one.

8. Create an envelop icon with a satin feel

icontuts07

Similar icon than the previous one but with a pretty arrow added to it and some light and shadow modifications.

9. Website Skype icon design in Photoshop

icontuts08

As you can see, some of the most famous icons were made with basic designing skills, which means that after completing this tutorial, you will be able to start making your first social icons.

10. Adobe Photoshop CS3 Style Icons

icontuts09

Beautiful icons that resemblance the CS3 look, glossy buttons with subtle reflections.

Yellow belt level conclusions

So what have we learned from these basic tutorials?, here is the summary:

– If you’re looking to make a simple icon and you don’t have enough skills, do not try to use perspectives or realistic angles, instead go for the basic and make frontal icons, think about logos icons suck as Windows or Google, they don’t need to be on an isometric style to work.

– Simple gradients can work for creating pretty icons with not too much detail. A black and gray gradient will look better than just a plan gray tone and besides, the use of gradients can generate highlights and shadows easily.

– Do not focus on placing effect after effect, that’s something that we will manage on the next levels, for the present time it’s more than enough with just playing with the transparency values, remember that you’re still learning young apprentice.

You’re starting to learn, now you can beat the amateurs
icontuts53

Illustration by Iconshock.

Congratulations, you made it to the third belt level, now you’re a proud guy (or girl?) wearing a lovely yellow belt, which means that you have managed the basic Illustrator and Photoshop tools and you’re ready to face more difficult challenges. If you get to complete the following 10 tutorials you will be honored with the orange belt.

11. How to create a basic house icon in Photoshop

icontuts10

It may seem difficult but once you complete it, you will see that there’s nothing strange on this tutorial, just many objects, strokes and gradients.

12. Create an Adobe ox icon in Photoshop

icontuts11

On this tutorial you will learn how to create a cute Adobe Illustrator box in Photoshop, funny isn’t it?, drawing an AI design within the PS interface.

13. How to create an alarm clock icon

icontuts12

The level is improving step by step, as you can see on this clock icon. We’re starting to gamble with subtle volume touches and overlaid gradients.

14. Iconshock tutorial: Ace of Hearts (Super Vista)

icontuts13

This tutorial starts exploring with shadows and highlights a little bit more, as you can see on the card’s heart symbol.

15. Create a Simple Storefront Icon

icontuts14

This cute little house can be quickly made and with some pretty cool details on it.

16. Icon tutorial: Administrator icon using Illustrator

icontuts15

This pretty icon seems to be easy to do, but you will find that you need to make some stroke adjustments that you haven’t studied before.

17. Making of a clock icon in Sophistique style

icontuts16

This clock is a little better than the last one, more details, thoughtful color management and a nice use of gradients and highlights.

18. Alexa logo Photoshop tutorial

icontuts17

This glossy blue icon made in Photoshop is a nice practice for those who enjoy making social network icons and things like that.

19. Create a cute Panda bear face icon

icontuts18

Now you should be able of making beautiful icons like this Panda face graphic, you don’t need to have and extended understanding of the graphic software to make it.

20. Create an Electrical Outlet Icon in Photoshop

icontuts19

Nice tutorial that will guide you through the making of a good looking icon in Photoshop.

Conclusions regarding the orange belt level

After completing this level you will have more practice on taking advantage of the Illustrator and Photoshop tools, thinks like blending modes, dashed lines and gradients are now easier to handle.

– The blending mode is a good way to play with gradients and solid colors in order to generate nice shadows and highlights. Try for example an overlay mode to overlap different layers in a subtle way, or if you’re looking for something more drastic, you can experiment with the color burn mode.

– Things like dashed lines are often useful for generating subtle textures or to implement within infographic works and statistic drawings. You can play with the dash properties and find newer ways to use this kind of lines on your designs.

Things are gettin’ better. Let’s kick some butts
icontuts54

Illustration by Iconshock.

I’m surprised, I didn’t expect to see you reaching this level, now you have the honor of be wearing the orange belt. Don’t start celebrating so fast, because from now on things are going to get a little bit complex, so get ready to face the following 10 tutorials.

21. Illustrator tutorial: Creating a realistic vectorial macaw

icontuts20

The first Tutorialshock article featured on the list, if you want to make this great macaw icon you must know perfectly all the basic Illustrator tools and well, prepare to use a blur effect for the first time.

22. Illustrator tutorial: How to design a vector character

icontuts21

Being at this level means also that you’re starting to be more creative and you can make good looking characters like this one, technically the tutorial does not require complex tasks and procedures.

23. Photoshop tutorial: Padlock icon

icontuts22

Things are starting to get real, as you can see on this tutorial. The final result after completing all the steps is a high quality padlock icon that starts to look more realistic than the previous icons.

24. Icon tutorial: Windows 7 icon with Illustrator

icontuts23

Pretty cool speaker icon made with Adobe Illustrator, there’s not to much effects and stuff, just the necessary to create something that looks realistic without losing its drawing essence.

25. How to create a transparent battery icon

icontuts24

Nice battery icon, the important thing to consider whilst making this icon is to make a nice appropriation of the gradient techniques, as well as the blending mode adjustments.

26. How to turn glasses into a great geek icon

icontuts25

I really love this tutorial, because I consider a geek myself and seeing the guys of VectorTuts+ making such a nice icon really made my day.

27. Photoshop Scissor Icon

icontuts26

See how the tutorials are getting more realistic. This scissors are starting to look quite real, without being too complicated to make for you.

28. Create a tasty burger icon in Illustrator

icontuts27

Hmmm I’m getting a little hungry for seeing this burger icon, although I think that is not good if it does not have ketchup.

29. Create a vintage TV set icon in Illustrator

icontuts28

Do you see how the TV icons are getting better every time we reach a higher level?. This one has more details and even a wood texture on top of it.

30. Create an aperture style camera lens icon

icontuts30

This is probably the most difficult tutorial that you will need to complete before passing to the next level due to its carefully planned design. If you are able to complete it you will be ready to start making the best icon designs.

Bonus: Create a beautiful paint brush icon in Photoshop

Our friends at DesignInstruct made this great paintbrush icon, carefully explained and illustrated, this tutorial is an essential reading for all designers.

Blue belt level summary

Well, that’s it for this level, let’s read a review about the main things that we have learned:

– You can create nice vectorial textures or overlap them within your bitmap files, they’re often great choices to provide nice details to your icons. You can be a Photoshop master in making textures, but why should you effort if you can always grab a RAW picture of a good leather texture?.

– The basic gradient tools can be manipulated to generate nice light and shadow effects, you should know at this moment that by pressing the G key you can move the center of the gradient, this trick is usually implemented by icon designers to create realistic highlights around their objects.

– Many realistic icons take more time to be completed than the amount of effects used during the process, so the effect’s master won’t be always the best icon maker. You can either go for a pixel effect or try to draw it directly, it’s up to you.

Your moves are getting better, faster and stronger
icontuts55

Illustration by Iconshock.

I can’t believe it, you’re only at one level of distance from becoming an icon master, I should advice you that the next 10 tutorials are some of the toughest and nicest around, so get ready and show me what you’re made for.

31. Tutorial: High Quality Button – GUI set slider

icontuts38

Since this level, you will need to make an often use of effects, blending modes, transparency and gradients, because from now on, you will be looking to create the most realistic and/or detailed icons.

32.   How to create a vector Safari compass in Illustrator

icontuts31

This is an advanced icon that you will be able to manage easily by following each step of the tutorial.

33. Design USB portable speaker logo icon in Photoshop

icontuts32

See what we’re talking about?, on each level the realism and detail of the icons is increased, as you can clearly appreciate on this great USB speaker icon.

34. How to create a super shiny pencil icon

icontuts33

Do you notice the difference between the first pencil tutorial and this one?, of course this one is more realistic due to the amount of details and light management that the icon possesses.

35. 3D Mp3 Player

icontuts34

I personally have to admit that the song played on this device made it gain a few extra points when we were making the countdown, but even without it, this is a great icon tutorial.

36. Sony PlayStation logo icon in Photoshop

icontuts35

Well crafted icon, that’s quite closer to how the real PS3 console looks on real life, come on and give it a shot.

37. How to create a highly detailed hi-tech power button

icontuts36

PSD tuts + is one of the best tutorial resources on the internet, as you can see on this beautiful icon tutorial that will teach you how to create technologic objects such as this power button.

38. Illustrator Tutorial: Designing a vector robot character

icontuts37

This robot might look easy to do, but it’s not. You will need to execute several steps before completing it, including the use of the knife tool and a few clipping masks.

39. Photoshop Tutorial: Realistic, High quality printer icon

icontuts41

This is one advanced tutorial. If you are able to complete this beautiful printer icon, you’re then ready to face the final icon of this belt level.

40. Illustrator Tutorial: Realistic high quality camera icon

icontuts40

And your final test before you can move to the next level. This camera icon has a lot of little details that will leave you sit for a while.

Bonus: Make a 3D recycling bin icon with Photoshop

Another beautiful tutorial from our DesignInstruct buddies, I think that this recycling bin icon is way much nicer than the default ones.

Green level belt, what have we learned?

That was the last tutorial of this level, now you have the ability of create great looking icons using not only the basic PS and AI tools but also effects, clipping masks, blending mode adjustments and more.

So bottom line, these are the basic lessons introduced after completing this level:

– There are two ways to make a realistic icon, you can either apply a lot of details and elements to it or make a good use of the effects, which is a little bit harder. We said before that the effect master is not always the sensei of icon designing, but it’s also true that a good mixing of drawing and effects can turn out into really nice creations.

– Perspective works great when is used properly, it can help you to create some amazing icon designs. Imagine a plain cap, it will look odd, but in perspective, oh yeah.

– Use your creativity, don’t limit yourself to recreate your surroundings, there’s always a huge potential within your mind. Many times the greatest ideas start from the most basic things, the Recycle Bin icon was probably based on someone’s trash can at Window’s headquarters.

This is it, it’s time to meet the real icon masters
icontuts56

Illustration by Iconshock.

Congratulations, you’re now a proud carrier of the green belt, you can start teaching others what you have learned so far and yes, since this point you are ready to begin creating your own icons and compete on the market, but if you really want to outstand, then wait for this final belt level.

41. Create a glossy volt icon in Photoshop

icontuts42

OK, this is definitely the black belt level, this volt looks like something made by the guys of Pixar (just kidding :P). the entire icon was done with Illustrator.

42. Icon design tutorial – designing a new icon in Illustrator

icontuts43

This beautiful StumbleUpon icon inside a chest is a great exercise to work on your Illustrator skills, notice how every detail has been carefully planned.

43. How to create an open book with Illustrator

icontuts44

Using 3D extrude and the bevel tool, you will be able to explore the capacity of Illustrator to make realistic volumetric objects.

44. Design a stylish mail icon in Photoshop

icontuts45

This icon works well inside the Mac interface, so if you’re one of those guys who really love the glossy style, here’s a tutorial just for you.

45. How to illustrate a marvelous violin icon

icontuts46

Do you love music?, then this icon is a nice quote of inspiration for you that will integrate music and design in a single piece.

46. Glowing orb with dial

icontuts47

As you can see, textures are another good resource to implement on your icons, although due to the reduced size of the icons you will need to be careful whilst using textures.

47. Design a realistic 3D baseball cap in Photoshop

icontuts48

Such a realistic level, it’s amazing what you can do with a few tools and a lot of dedication, you can easily think of this as a real-life photograph.

48. How to Create a Yellow Submarine Icon

icontuts49

We all live in a yellow submarine, yellow submarine, a beautiful yellow submarine icon made with the mesh tool on Illustrator.

49. AI Tutorial: How to make a realistic film projector icon

icontuts50

And reaching the top of our countdown we find this great tutorial from the Tutorialshock files. You will learn how to make a complex object such as this realistic film projector icon.

50. How to create a photo realistic camera

icontuts51

Here it is, the top icon tutorial, a hyper realistic camera icon. You will even need to complete a secondary tutorial to make exclusively the leather texture of the left side, consider yourself a master if you manage to finish this tutorial.

Final conclusions

Well guys that’s it, 50 of the most useful icon design tutorials out there, from the simplest pieces to the hyper realistic camera icon at number 50. We recommend you to try at least half of the tutorials on each level before moving to the next one because remember, the practice is what makes the master.

To resume what we have learned, here are some final tips for you:

– The best ideas usually came first, don’t make 50 attempts because it’s probably that you will end working with your 2nd idea.

– Find your own style, not everyone is made for working with effects, some people create outstanding icon designs with only vector designs, it’s a matter of test and error.

– If you want to become a realistic icon designer, remember that the light does not flow in a vertical way, the volumes are not perfect and the shadows are more blurry depending on the distance, try to always remember how physics work.

OK, that’s the end of our roundup, we wish you good luck on completing your own icon portfolio, maybe we will be working together on the future and you will be writing our next icon tutorial, feel free to leave us your thoughts about this article and so, we hope to see you on our next post.

If you show us your love by leaving a comment below, these ninja characters will be released for free in our next post.


Related Deals


Related Posts