85 Photoshop and Illustrator Icon Design 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.

[exec]$filestr = file_get_contents(‘http://www.tripwiremagazine.com/googleadsensebelowmoretag.inc’);echo $filestr;[/exec]

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
• Illustrator Icon Design Tutorials
• Icon Design Articles and General Tips

Photoshop Icon Design Tutorials

Shiny Lock Icon Design Tutorial

Create a great looking lock with excellent metallic effects.

Radar Icon in Photoshop

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

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.

How to Create a Battery Icon in Photoshop

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

Photoshop Laser Printer Icon Tutorial

How to Create Photoshop Laser Printer Mode

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!

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

Industrial Folder Style Icon

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

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.

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.

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.

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

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.

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.

How to Create a Van Icon in Photoshop

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

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

Traffic Cone Icon Tutorial

Illustrate a Traffic Cone Icon in Photoshop, cool icon for “under construction”. Another great psdtuts 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”.

Design paint brush logo icon in Photoshop

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

How To Make An Icon

How to create a car key icon from scracth

Create a Speed Gauge and Watch Icon

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.

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.

The Making of an Icon

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

Draw magnifying glass

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

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.

Computer Icon Tutorial

Create a USB Speaker Icon in Photoshop

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

Safety Icon Design

Photoshop Scissor Icon

you about How we can Create Photoshop Scissor Icon

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

World Icon Photoshop Tutorial

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

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.

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!

Making digital watch icon

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

Glossy Graduation Hat Icon Tutorial

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

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.

How to Design Mini Icons

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

Vista Error Icon Photoshop Tutorial

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

Pyramid Icon Design

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

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.

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.

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

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.

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.

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 =)

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.

How to Create a Shiny Bucket Icon

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

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.

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.

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.

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.

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.

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.

Create an Awesome Space Rocket in Illustrator

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

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.

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.

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.

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.

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!

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

Design Float Circle Icon

Great tutorial to help you design a float circle

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

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.

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.

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.

StumbleUpon 3D Icon Tutorial

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

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.

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 desig

Icon Design Explained (Quickly)

7 Principles of Effective Icon Design

Some guidelines and principles before approaching 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!

Icon Design: Bitmap vs Vector

A good article about differences between bitmap and vector file formats

Lars

Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development and loves to look into new technologies, techniques, tools etc. and to write articles for his readers.