85 Photoshop and Illustrator Icon Design Tutorials

May 5, 2012 · 12 comments

by Lars

icon-tutorials

Icons can be used effectively almost everywhere in design to send a clear message or assist users to navigate. Some Icons are detailed to a degree that makes them look almost photographs while others are the simplest possible drawings. You are probably aware that there are tons of icons available both for free or on commercial license to cover nearly any you may have. However if you cant find the perfect match you still have the option to create the icon yourself. Mastering the required techniques in either Illustrator or Photoshop needed to create Icons can be really useful and with a bit of practice it is not that hard. In this article tripwire magazine provides a list of more than 70 great tutorials and articles to get you started creating your own Icons. The article has been split up in 3 sections – Photoshop Tutorials, Illustrator Tutorials and Useful articles in Icon design.


ElegantThemes
ThemeForest

Advertisement Before you jump right into designing your own icons make sure you know the pitfalls. 10 Mistakes in Icon Design provides great general advice on what mistakes you should avoid. You will find more resources like this at the end of this article.

Index

Photoshop Icon Design Tutorials

Shiny Lock Icon Design Tutorial

Create a great looking lock with excellent metallic effects.

lock-icon

Radar Icon in Photoshop

This tutorial will show you how to create a Mac style radar icon in Photoshop.

radar-icon-photoshop-tutorial

How To Design a Realistic Takeout Coffee Icon

This tutorial will show you how to design a realistic takeout coffee cup icon in Adobe Photoshop.

takeout-coffee-icon-tutorial

How to Create a Battery Icon in Photoshop

In this tutorial you will learn to draw a battery icon with 3D look in Photoshop.

battery-icons

Photoshop Laser Printer Icon Tutorial

How to Create Photoshop Laser Printer Mode

laser-printer-icon

Under Construction Helmet Icon Tutorial

In this tutorial, we’ll be creating our very own icon from a photograph. The tutorial is published by psdtuts and it is of exceptionally high quality and may be used as inspiration for transforming other objects from photographs into icons!

helmet-icon

Create a Realistic iMac Icon in Photoshop

There is a lot that you can do in Photoshop with just a few select tools. Today, we will demonstrate how to create a realistic iMac icon in Photoshop that includes a 27-inch screen, a keyboard, and a mouse.

imac-icon-tutorial

Industrial Folder Style Icon

In this tutorial you will be guided through the process of creating an industrial style folder icon.

industrial-folder-icon-tutorial

Create a Glossy Volt Icon in Photoshop

This is an inspiration from the Bolt movie poster. In this tutorial you will create a glossy thunder logo using a few layers and some white shapes that will make the thunder more interesting and glossy.

volt-icon-tutorial

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.

shiny-pencil-icon

Design a Detailed Compass Icon in Photoshop

Another drawing tutorial for icon lovers in which we’ll be illustrating a metallic compass. You will learn how to be controlling shadow and reflection to add realism to the illustration. As with any icon design, it’s a combination of the overall design and subtle details that gives quality results.

compass-icon-tutorial

Create a Download Folder Icon in Photoshop

In this tutorial you will find how to create a download folder icon using different shapes and reflections in Photoshop.

download-folder-icon

Create a Microchip Icon Using Photoshop

In this Photoshop tutorial you will see how to create an isometric microchip icon using basic drawing tools and transformations.

microchip-icon-tutorial

Learn To Create A Safe Illustration

In this tutorial you’ll see all the process of creating a Safe Illustration. Number of tools used in this tutorial so there’s plenty to be learned.

safe-icon

How to Create a Van Icon in Photoshop

Learn how to create a old style van from scratch in Photoshop.

van-icon-tutorial

New iMac Mini Icon Design Tutorial

In this detailed tutorial you will find out how to create a realistic looking new iMac mini, you’ll be able to use the iMac as an illustration or an icon.

new-imac-mini-icon

Traffic Cone Icon Tutorial

Illustrate a Traffic Cone Icon in Photoshop, cool icon for “under construction”. Another great psdtuts tutorial.

traffic-cone-icon-tutorial

How to Make a Calendar Icon

In this tutorial we’re going to show you how we made the Calendar Icon from our most popular icon set “Coquette”.

calendar-icon

Design paint brush logo icon in Photoshop

Learn how to create a Photoshop design paint brush logo icon in photoshop.

paint-brush-icon

How To Make An Icon

How to create a car key icon from scracth

image

Create a Speed Gauge and Watch Icon

watch-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

Design the iTunes Icon for the iPhone in Photoshop

This tutorial will show you how to effectively create the iTunes icon found on all iPhones and iPod Touches. This tutorial will walk you through the various filters and layer styles needed to create this very sleek icon.

itunes-download-icon

The Making of an Icon

A great tutorial on process of designing an note pad icon. Download the finished icon from the Icons Section.

the-making-of-an-icon

Draw magnifying glass

Learn essential drawing skills in Photoshop when creating this good looking icon

magnifying-glass

Create an Adobe Box Icon in Photoshop

Create an Adobe box Icon in Photoshop, to fill your dock with new icons. Learn techniques on brushes, blur, layer mask and blend modes.

ADOBE-box-icon

Computer Icon Tutorial

computer-icon-tutorial

Create a USB Speaker Icon in Photoshop

Learn how to create a Photoshop design USB portable speaker logo icon in photoshop.

usb-speaker-icon-tutorial

Safety Icon Design

safety-signs-icon

Photoshop Scissor Icon

you about How we can Create Photoshop Scissor Icon

photoshop-scissot-icon-tutorial

XP Style Woman Icon Photoshop Tutorial

In this tutorial, you will learn to draw a xp style woman icon. Final output of this xp style woman icon can be seen below

xp-style-woman-icon

World Icon Photoshop Tutorial

Create a great looking world icon in Adobe Photoshop. This tutorial shows some really great techniques.

world-icon-photoshop-tutorial

Glossy Round RSS Icon Tutorial

This tutorial will teach you how to create a round RSS icon for our website or blog with some really cool light effects.

glossy-round-rss-icon-tutorial

Create a Shiny Lock Icon Design

A popular icon that you can find on the internet is the lock icon. It is widely used to identify secure Web pages. It often indicates password fields for secure files. Wherever you wish to place a lock icon, this tutorial will show you how to create an attractive one for you to use!

shiny-lock-design-icon-tutorial

Making digital watch icon

Here is a tutorial that will teach you how to make a nice digital watch icon.

image

Glossy Graduation Hat Icon Tutorial

Step by step turorial that will show you how to design a glossy, clean graduation cap icon.

graduation-hat-icon-tutorial

Handy Web 2.0 Icons In Photoshop

When we are working on a Web design project, we quite often need icons to show commands like add, delete, or edit. With the Web 2.0 trend, the use of badges and subtle 3D has become very popular. In this tutorial, I will show you how to create a really easy and very nice 3D effect to be used in either buttons and icons or elements that need some depth.

web-2-0-icons

How to Design Mini Icons

Learn the technique of using Photoshop pens tool for creating mini pixel icons. Download PSD

how-to-design-mini-icons-tutorial

Vista Error Icon Photoshop Tutorial

Learn how to create a Windows Vista erroe icon using basic Photoshop techniques.

vista-error-icon-photoshop-tutorial

Pyramid Icon Design

You will be creating a pyramid icon or logo on this tutorial. All steps are on separate pages – really annoying.

pyramid-icon-tutorial

Create a Jaguar Style Folder Icon

n 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.

jaguar-style-folder-icon

Creating an XP Style Monitor Icon

Let’s go back in time and look at Windows XP system icons. We’ll get inspired by an old computer icon. Then we’ll create a simple monitor icon in that style. Icon Factory is the company that created the icons for both Vista and XP Windows operating systems. Their works serves as inspiration for not only this tutorial, but many icons created today.

xp-style-icon-tutorial

Illustrator Icon Design Tutorials

Create a Jeans Pocket Icon Using Illustrator

In this tutorial, you will 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.

jeans-pocket-icon

Coin stack icon in illustrator

This tutorial will show how to create a very simple coin stack icon. First, you will need a simple circle and some 3D Extrude&Bevel effect to create the starting coin. Next, you will use multiple fills and strokes to improve the look of this first coin and Transform effect to multiply it.

coin-stack

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.

image

3d Isometric Vector Icon Tutorial

Isometric projection is a 3d method, being a form of ortographic projection; representing a 3dimensional object in 2 dimensions.

In a bit simpler english; we can make 2d objects easily converted to 3d objects by adding equally measured perspectives. That’s what we will do to create our 3d vector icon =)

isometric-vector-icon-tutorial

3D House Icon in Adobe Illustrator

Illustrator’s CS5 Perspective Drawing Tools are just perfect for creating buildings. From this advanced tutorial you will learn how to create a detailed 3D house icon.

3d-house-icon

How to Create a Shiny Bucket Icon

Learn how to create a rational vector bucket icon with this tutorial.

bucket-icon

How to Draw a Vector Kiwi

Ever wonder how to make a vector kiwi in Adobe Illustrator. In this tutorial, you will see how you do it using illustrator effects like Texturizer, Pointillize, Grain and Film grain. Hope you can learn some new stuff in this tutorial.

kiwi-icon-tutorial

Create a Vector RSS Icon with Illustrator

Probably one of the most popular and recognisable icons in the web universe; the RSS icon is displayed on many website to indicate the availability of a subscription feed. There are pre-made icons you can download and place on your website, however this tutorial cover the process of creating your own custom vector RSS icon in Illustrator.

vector-rss-icon-tutorial

Make a 3D Shopping Basket Icon in Illustrator

Learn how to create a custom shopping basket icon for your next web design project. We’ll combine 3D qualities with a flat look. You’ll need a firm understanding of Adobe Illustrators tools to complete this tutorial.

3d-shopping-cart

Create a Cute Panda Bear Face Icon

In the following easy tutorial you will learn how to create a cute panda bear face icon all from ellipses (well, actually there is one rectangle for the background). The great part about this tutorial, is that you can easily apply the techniques to other icons, illustrations, logos, or other projects.

create-panda-icon

Make a Handy 3D Vector Calendar Icon

Learn to make a handy calendar icon to use on your blog, website, or print projects. We’ll use Illustrators Path and 3D tools to create this design. Also, a simple page curl effect will be demonstrated as well.

3d-vector-calendar-icon

Create a 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.

detailed-camera

Create an Awesome Space Rocket in Illustrator

space-rocket-illustrator-tutocial

Create a Simple Bomb Icon

In this new tutorial you will see how to create a very simple bomb icon. You will only need the Ellipse Tool and the Rectangle Tool. Then you’ll be using Warp effects, simple strokes, various gradients, Offset Path and several effects to create the other components.

create-bomb-icon

iTunes Icon Illustrator Tutorial

Great tutorial that will help you master your Blend techniques in Adobe Illustrator while replicating the iTunes icon. The challange of this tutorial is to use various Blending modes and blending techniques to replicate the iTune icon. This tutorial is a good exercise to master your Blend techniques. Download Source File

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 judgment throughout the process.

military-cap-icon

Create a simple paperclip icon

In only seven steps you’ll learn to make a paperclip icon. You will only need the Rounded Rectangle Tool, the Direct Selection Tool and the Gradient Tool. Also you might learn some basic stuff about working with grids and strokes.

create-paper-clip-icon

Beginner Illustrator Tutorial – Create a Vector RSS Icon

The best way to learn the ropes of a new application is to get stuck in with a working project. This Adobe Illustrator tutorial covers the simple steps involved in creating a vector RSS icon and includes a range of handy techniques that can be put into practice in future creations.

vector-rss-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.

chinese-food-icon

How to Create an Alarm Clock Icon

With simple shapes and gradients, this easy tutorial will show you how to create an alarm clock icon. We’ll be using Illustrator CS4 for this tutorial, but those of you with older version should be able to follow along as well. Let’s jump into this tutorial, which beginning illustrators will find especially useful!

arlarm-clock-icon

Translucent IM Style Icon Design 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-style-icon-design

Design Float Circle Icon

Great tutorial to help you design a float circle.

design-float-icon-tutorial

Create an envelpe icon with a satin feel

In this tutorial i will show you how using the basic tools of illustrator , ie gradient , rectangle , pathfinder and line we can create a simple looking envelope. With changing the arrow icon you will have multiple defined icons

envelope-icon-design

Vector Lock Icon Design

In the following tutorial, you’ll learn how to create a lock icon with some effects, opacity masks, gradients, and simple shapes in Illustrator. Many of these techniques can be applied easily to other icon designs.

lock-icon-design-tutorial

Create An Aperture Style Camera Lens Icon

In this tutorial, we’ll create a detailed camera lens similar to the one used as the logo for Apple’s Aperture photo-editing software. A camera lens is good for a software icon, logo, or just as a graphic for use in any design. Although, the image appears detailed, the process of creating it involves little more than simply layering objects with different fills and gradients to give a three-dimensional illusion.

aperture-style-camera-icon-tutorial

How to Design a Set of Multicolored Buddy Icons

In this Illustrator tutorial, I’ll show you how to create a set of multicolored buddy icons. This tutorial uses some basic shapes, gradients, Feather, and Illustrator’s powerful Live Color feature. These techniques are easily translated into other designs and illustrations.

multicolored-buddy-icon-tutorial

StumbleUpon 3D Icon Tutorial

Learn about designing a 3D social bookmarking icon in Adobe Illustrator. You can download the icon here as well

3d-stumbleupon-icon-tutorial

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.

image

Icon Design Articles and General Tips

Icon Design Explained (Quickly)

Quick slides for teaching some fundamentals

10 Mistakes in Icon Design

Denis Kortunov explains the mosty commonly observed mistakes in icon design

mistakes-in-icon-design

Icon Design Explained (Quickly)

image

7 Principles of Effective Icon Design

Some guidelines and principles before approaching icon design

principles-of-effective-icon-design

10 Tips for Effective Icon Design

Translating the ‘iconic’ features of an object into something that is metaphorically meaningful and instantly recognizable is no easy task — particularly when the design needs to be as effective at 48×48 pixels as it is at 256×256!

tips-for-effective-icon-design

Icon Design: Bitmap vs Vector

A good article about differences between bitmap and vector file formats

{ 7 comments… read them below or add one }

Khalid Hasan Zibon June 18, 2012 at 8:17 pm

Very useful tutorials. Thanks to Site Owner :)

Reply

Freelancer May 15, 2012 at 10:53 am

It is so encouraging that there are sites like this one, which share all these tutorial. Great support for both professionals and newbies. Keep it up!

Reply

Webdesign - NL May 13, 2012 at 1:28 am

A good custom icon set can make or break the look of a website. More people should spend a bit more time to make them themselves and make them original! I think it is a great way to show that your titel as a web designer doesn’t mean you can only do web but are also great in design.

Reply

SEO services Company India June 12, 2011 at 4:47 pm

This just made my day much brighter. Thanks a lot. Something else I across was thishttp://www.technosofts.in/ Take a look!

Reply

Alexander May 26, 2011 at 6:21 am

I am speechless!!! Your site is just fantastic and tutorials are great!!! The best I have ever seen!!!

Reply

lvraa May 26, 2011 at 7:26 am

Thanks a lot Alexander! Appreciate your feedback.

Reply

Tutorialshock September 13, 2010 at 5:42 pm

Really interesting stuff here! Thanks for sharing :D
Your readers will also like some of our latest tutorials and we will highly appreciate if you add them to the list.
http://www.tutorialshock.com
Keep it up guys!

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 5 trackbacks }

Previous post:

Next post:


Web Analytics