50 Must See Icon Design Tutorials

Using icons make your blog design look minimal and modern. There are several kinds of icons which serve different purposes such as Website icons, Desktop icons and Application icons. In this round-up we present excellent useful Icon Design Tutorials. Enjoy!

How to Create a Quirky Twitter Bird in Corel Draw

Learn here how to create a this bird using a few techniques in Corel Draw. Successful completion of this tutorial requires an intermediate knowledge of Corel Draw. We think it’s easy as there is no need for Art school sketches that are usually needed in the first step. Let’s get started!

twitter icon

Design a 3D Box Icon in Photoshop

In this tutorial I’ll explain step by step how to create a sleek Box Icon in Adobe Photoshop for use in apps or websites. I would like to thank Luca Vlad(Wlady) for collaborating with me in creating this tutorial! – Cucu Tudor Ionel

3d icon

Design Float Circle Icon (AI Tutorial)

Finding the right icons isn’t always easy and in this case i had the perfect socialbookmarking icon set by fasticon, except one problem, it was missing a Designer float icon! so i decide to create one my self.

circle icon

Simple Coffee Cup Icon Photoshop Tutorial

In this tutorial we’ll be going though creating a semi-photo realistic coffee cup, with some nice frothy coffee.

cup icon

Creating A Vector Style MacBook From Scratch

This tutorial is quite a long one, so I would go get a drink now if I were you, OK we are going to make a MacBook Pro in Photoshop using shapes and different blending options, combining these two simple things we get a realistic vector outcome which can be used in many different situations, so…let’s begin – By Steve Tolley

mac icon

Create A Mockingly Smiley

smiley icon

Angry Emoticon

Learn about special effects while converting an ordinary orb into a fantasy art piece in this Adobe Photoshop tutorial.

icon design

Create a Jaguar Style Folder Icon

In this tutorial, we will show you how to cover an object in a Jaguar style fur texture. In this example, we’ll cover a computer folder, but this technique can be used with any other object, like a CD cover, a mouse, or even a computer.

icon tutorial

Design a Glossy Download Icon

The difficulty in designing web graphics is not so much in the actual execution of the design, but more in the planning of it. At the same time you want the graphic to be eye-catching, yet smooth and small enough so it doesn’t dominate your layout. This tutorial will teach you how to create a graphic that does just that.

download icon

Create a Magic Hat Icon

In this tutorial, we’ll explain how to create a magic hat icon with a cute bunny inside. We’ll use the pen tool, pathfinder palette, and other tools to create this design. Let’s get started with making a magically cute, vector design!

hat icon

Create a Recycling, Paper Bag Icon

In this tutorial, we’ll explain how to create an eco-friendly paper icon with simple shapes and gradients. This tutorial is great for beginners to get started with icon design, as this is a fairly simple icon to create. Let’s dive in!

icon

How to Create a Shiny Bucket Icon

In this tutorial you will learn how to make a realistic vector bucket icon. You will learn to use the 3D Revolve function, how to add realistic light effects and how to draw different objects to form a composition.

icon

 

How to Make an Opulent Chair Icon

In this tutorial, you will learn how to make a chair icon using gradient mesh, the pathfinder tool and the appearance panel. Don’t let this tut deceive you, with a bit of imagination you can create an entire collection of soft furnishing icons in minutes with a few easy tricks.

chair icon

How to Create a Simple Cardboard Box Icon

In this tutorial you will learn how to create a simple cardboard icon using 3D Extrude & Bevel and basic gradient fills. It’s a great starting point for budding icon designers or people who have previously used Photoshop for their creations and will teach you a few useful techniques to get you started with Adobe Illustrator.

box icon

How to Create a Fun Circus Tent Icon

Roll up, roll up! In the following tutorial you will learn how to create a simple circus tent icon. You may discover some interesting things about the magic of Warp effects. Warp effects are often overlooked in digital illustration, but as you can see, they make some really nice results.

fun icon

Make a Mailbox Icon Using Adobe Illustrator

This icon was not created solely for educational purposes. You can see the working process of real designing! We are going to use various professional techniques to create this icon, and I will give you many useful tips along the way. So, let’s get down to work, experts!

mail icon

Create 3D Buttons in Illustrator

In the following tutorial you will learn to create shiny, 3D buttons in Adobe Illustrator. We’ll cover a complete workflow and every step to take to create this high quality design element. These techniques can be used to create other graphics as well, and is especially useful for creating web design icons and graphics.

3d icon

How to Create a Simple 3D Lollipop Icon

In the following tutorial you will learn to create a lollipop icon. By using some simple shapes and the Distort & Transform function, you will see just how easy it is to make a great looking icon.

3d icon

Create a Safe Icon in Adobe Illustrator

In the following tutorial you will learn to create a safe icon. We’ll use a variety of Adobe Illustrator tools and techniques to create this icon. Learn how to make a place to stash your vector gold. It’s all about the details you put into this design to give it a bit of shine.

safe icon

Create a Grungy Launch Button

In the following tutorial you will learn to create a grungy launch button. You will learn how to make a 3D style button and an industrial looking background with a few simple techniques some vector texture. Let’s begin!

button icon

Create a Suitcase Icon in Adobe Illustrator

In the following tutorial you will learn to create a suitcase icon, suitable for a travel oriented site, or vacation brochure. Grab hold of your vector tools and let’s get to building.

Suitcase Icon in Adobe

Create a Nice Award Medal Icon

In the following tutorial you will learn to create an icon of an award medal. You will use various shapes and pathfinder techniques to make this great looking icon. This illustration can be made without the use of the Pen Tool, so it’s a great tutorial for beginners. You will be proud of the results!

medal icon

Create a Jeans Pocket Icon Using Adobe Illustrator

In this tutorial, we’ll work with basic elements for creating a series of icons. After studying this simple tutorial, you will learn many useful and necessary techniques, such as the creation of vector texture, working with the Scatter Brush, using the Graphic Style palette, creating scuffs and creases on the fabric, using the Gradient Mesh, and more. Believe me, it’s worth your attention.

Pocket Icon

Create a Super Glue and a Paint Tube Icon

In the following tutorial you will learn how to create a super glue and a paint tube icon. These shiny icons are simple to create, we’ll cover a complete workflow, and show you techniques that will speed up your work process.

paint icon

Create an Anti-War Icon Using Adobe Illustrator

In this tutorial we will learn how to create a hand grenade with the help of 3D modeling. This tutorial contains plenty of useful tips and description of manual techniques.

war icon

Create an On and Off Button in Adobe Illustrator

In the following tutorial you will learn to create an on/off button. It’s simple to create and you will learn how to make an object that’s perfect as a web element or icon.

button icon

Create a Clean Style Folder Icon

In the following tutorial you will learn to create a clean folder icon. By using some simple shapes and the Appearance Panel, you will see just how easy it is to make a great looking icon.

Folder Icon

Create a Transparent Battery Icon

In this tutorial, we’ll create a detailed icon of a battery similar to the one used for the iPhone touch. The battery “fuel” color can be changed as well as the “fuel” level, allowing the icon to be used to create a battery or power meter for applications, or simply as a graphic in any type of design.

battery icon

Craft a Delicious Chinese Food Icon

This tutorial will demonstrate how to craft a delicious Chinese food icon set. This tutorial requires a generous command of Adobe Illustrator’s tools. Let’s dig into this yummy icon design tutorial, which includes numerous vector illustration techniques.

food icon

How to Make a Vector Military Cap Icon

This tutorial will show the intermediate-to-advanced Adobe Illustrator artist how to make a realistic military style cap icon using predominately gradients, blends, and the Gradient Mesh Tool. We’ll be using a photo reference to base this illustration on, though utilizing creative judgement throughout the process.

cap icon

Juicy RSS Feed Icon

Let’s learn how to make a unique RSS feed icon. This tutorial requires a familiarity with Adobe Illustrator’s basic tools as we’ll use the gradient mesh tool and make light use of Illustrators mapping feature.

rss icon

How to Create a Vector Safari Compass in Illustrator

The Safari browser from Apple has a great little icon that works well in small formats while also displaying quite a lot of intricate details when viewed in large format. Navigate through this Adobe Illustrator tutorial to draw up your own vector Safari inspired compass in Adobe Illustrator.

vector icon

Detailed Camera with Photo Icon

This tutorial will show the intermediate Adobe Illustrator artist how to make a sleek web 2.0 style icon. You should have a basic understanding of Adobe Illustrator tools before you begin this tutorial, as the tutorial moves at a rapid pace.

camera icon

Photoshop Nike Sports Cap Icon

nike icon

Nice ‘n’ Simple Subscribe Badges

There have already been quite a few tutorials around documenting the making of these sleek, supermarket-style badges, but none of them have made them into subscribe badges! Well I actually have no proof of that assumption, but anyway.

In this Photoshop tutorial we’ll be making those cool supermarket-style badges, then we’ll be turning them into subscribe buttons for your website, a must-have for any blog!

subscribe icon

 

Designing Glossy (Web 2.0) Badges

This is a relatively basic Photoshop tutorial, but you should have basic knowledge of Photoshop and its tools to follow through to the end.

We’ll be learning how to design these glossy “Web 2.0? badges in Photoshop. We’ll start off making the shape then styling it using layer styles and additional separate glossy layers.

badge icon

Photoshop Scissor Icon

scissor icon

Photoshop website skype icon design in photoshop

Here we will tell you how to make a Photoshop website skype icon design in photoshop.

skype icon

 

How to Create a Super Shiny Pencil Icon

The Pencil is one of the visual metaphors most used to express creativity. In this tutorial, I’ll show you how to draw a pencil icon. We’ll have a look at gradients, selection tools, and basic transform operations. Let’s have some fun with this.

pencil icon

 

Quick Tip: Create a Shiny Shield with Illustrator

In this Quick Tip, you’ll learn how to harness the Appearance panel to make the basic structure of a shiny, beveled shield. Once the structure is in place, a few well-placed gradients are all it takes to achieve a sharp, polished look.

shiny icon

 

Make a 3D Recycling Bin Icon with Photoshop

In this tutorial we will show you how to make an appealing drawing of a recycling bin with crumpled and creased white paper inside and around it all from scratch.

bin icon

 

Design a 3D Digital Clock Icon with Illustrator

In this tutorial will explain how to create a glossy and stylized digital clock from scratch in Adobe Illustrator composed of basic shapes and nifty gradients.

clock icon

 

 

Create a Cardboard Box Icon in Photoshop

In this tutorial we will show you how to make a cardboard box that can be used for a number of purposes, such as for icons or for other design purposes.

box icon

How to Make a Detailed Printer Icon Using Illustrator

In this tutorial we will construct a desktop printer icon that is rich in detail. We will use the industry-standard vector illustration tool Adobe Illustrator.

printer icon

Create a Download Folder Icon in Photoshop

In this tutorial we will demonstrate how to create a download folder icon using different shapes and reflections in Photoshop. Let’s get started!

folder icon

How To Draw a Vintage Polaroid Camera Icon

In this tutorial we will learn how to create a Polaroid camera icon. We will use lots of layer styles and draw manually with the brush tool to achieve a realistic appearance.

draw icon

How to Turn Glasses into a Great Geek Icon

In this tutorial, we’ll show you how to make a cool, or should we say geeky, glasses icon. You should be versed in Adobe Illustrator’s tools to complete this tutorial. You’ll learn how to take creative license and create an illustration that uses a photo reference, but differs a bit in the final design.

geek icon

Translucent IM Style Illustrator Icon Tutorial

The shiny and glossy image of ‘Web 2.0’ is right at home when it comes to icons. Follow this Adobe Illustrator tutorial to create a scalable vector Instant Messaging style icon with the impression of a glossy and semi-translucent surface.

im icon

Create an Open Book Icon In Photoshop

Most people don’t realize how much time and effort goes into creating something like an icon. Icons can take many hours to complete and the techniques used can take a long time to perfect. In this tutorial we will demonstrate how to create an open book icon in Photoshop.

photoshop icon

 

skyje

Skyje is a Blog for Web Designers and Web Developers featuring Social Networking news and everything that Web 2.0. You can Subscribe to Skyje feed.

You may also like...

2 Responses

  1. Mark says:

    Hi everyone,

    We are having some problems in creating some icons for our new web site, I think the problem is that we are not using a vector programme such as Illustrator to crate them and then rendering them in PhotoShop, instead we have been creating them directly in PhotoShop. We cannot seem to get clear, sharp lines and edges like some of the Icons/Images I see on the web, can anyone give us some advice? I am not a designer but did do some design about 10 years ago, I have always thought that Icons should be created in a Vector programme but my designer is not in agreement..

    We would really appreciate some help/thoughts.

    Many thanks.

  2. Great icons design tutorials, Thanks for sharing!

Leave a Reply