50+ High Quality Icon Design Tutorials (Part 1)

Home Graphic Design 50+ High Quality Icon Design Tutorials (Part 1)

50+ High Quality Icon Design Tutorials (Part 1)

Robert Luke

-

October 20, 2009

Icons play such a key part of any contemporary website, application or user interface design. I find that strategically placed icons can do one of two things. The first is that it visually enhances your design. Secondly is the usability factor, by drawing more attention to the icons gives the end user a much easier time navigating your design and finding what their looking for with much greater ease. This article is a two part series on icon design tutorials. These tutorials will guide you in creating some amazing icons for your next project. Enjoy this post, and come back soon to check out the second installment of icon design tutorials.

Want more articles on useful tutorials? Check out some of my previous post:

Logo Design: 40+ Must Have Tutorials

Web Layout Designs: 60 Must Have Tutorials

30 Must See Character Illustration Tutorials

Create a Magnifying Glass Icon in Photoshop CS4

Create a Magnifying Glass Icon in Photoshop CS4 — In this tutorial, we’ll combine simple vector shapes, layer styles and generous amounts of shininess to create the perfect magnifying glass for all your search icon needs. Let’s get started! – Author: Andrea Austoni

Design a Vintage Radio Icon in Photoshop

Design a Vintage Radio Icon in Photoshop — In this Photoshop Tutorial, you’ll learn how to design an old vintage radio using simple shapes, gradients, patterns and textures. – By Jurgis Narvils

How to Create an Alarm Clock 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. – Author: Rype

How to Create A Swanky Coffee Table Icon in Photoshop

How to Create A Swanky Coffee Table Icon in Photoshop

How to Design a Custom Newspaper Icon – Vector Plus Tutorial

How to Design a Custom Newspaper Icon – Vector Plus Tutorial

New Quicktime Icon in Photoshop

New Quicktime Icon in Photoshop — Apple is about to release their new version of Mac OS X, code-named as Snow Leopard. With this new release there will be a totally new version of Quicktime. One thing that is really cool is the new icon for the app. Because of that I decided to play a bit with Photoshop to reproduce the effect. – By Fabio Sasso

Draw a Speaker Icon in Photoshop Part 1

Draw a Speaker Icon in Photoshop Part 1 — This tutorial is contributed by Sohan Negi and will show you in every details on how we can create a set of speakers icon from scratch in Photoshop. As this is the longest tutorial ever, it was split into Part 1 and Part 2. – By Sohan Negi

Design a Realistic 3D Baseball Cap in Photoshop

Design a Realistic 3D Baseball Cap in Photoshop — In this Photoshop tutorial, I will show you how to create a realistic 3D Baseball cap in Adobe Photoshop using the Pen tool, brushes and some nifty tricks. – By Cucu Tudor Ionel

Design a Stylish Mail Icon in Photoshop

Design a Stylish Mail Icon in Photoshop — I have worked on this new tutorial with Cucu Tudor. In this tutorial you will learn how to create a glossy mail icon that can be used for your apps or websites. – By Constantin Potorac

How to Create a Golden, Vector Compass in Illustrator

How to Create a Golden, Vector Compass in Illustrator

Create an Adobe Box Icon in Photoshop

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. – Via drawingclouds.com

Create a Fun Icon of Frozen People on Ice – Part II

Create a Fun Icon of Frozen People on Ice – Part II

Icon Design Tutorial – Designing a New Icon In Illustrator

Icon Design Tutorial – Designing a New Icon In Illustrator — Icon Design Tutorial – Designing a New Icon In Illustrator – Via designreviver.com

Create a Dock Icon Folder in Photoshop

Create a Dock Icon Folder in Photoshop — Create a dock icon folder in photoshop, customize it and fill your dock with all your favorite folders. – Via drawingclouds.com

Glossy RSS icon

Glossy RSS icon — In this tutorial we are going to create a colorful RSS icon for your blog. – By ART-D

Create a Stylized GPS Icon

Create a Stylized GPS Icon — Location based software and peripherals are very popular these days. So, In this beginner/intermediate Illustrator tutorial, I will show you how to create a stylized GPS icon using simple shapes and gradients. Using these basic techniques, you can easily create other icons, logos, and illustrations. – Via vectips.com

Design a Vector Audio Speaker Icon In Illustrator

Design a Vector Audio Speaker Icon In Illustrator

Create an iMac – Design Your Desk – Part 2

Create an iMac – Design Your Desk – Part 2 — In part two of our seven part series called “Design your desk”, we’re going to be looking at the creation of your computer’s horsepower – The Tower – or in this case, an iMac. As usual, this tutorial will cover everything from drawing the basic shape, to shading and shadowing. – Via psvibes.com

How to Create a Van Icon in Photoshop

How to Create a Van Icon in Photoshop

How to Create a Yellow Submarine Icon with Gradient Meshes – Vector Plus Tutorial

How to Create a Yellow Submarine Icon with Gradient Meshes – Vector Plus Tutorial

How to Create a Gearbox Settings Icon Using Simple Shapes

How to Create a Gearbox Settings Icon Using Simple Shapes

How to Create a Transparent Battery Icon

How to Create a Transparent Battery Icon

Craft a Delicious Chinese Food Icon

Craft a Delicious Chinese Food Icon

Draw a Classy 3D Poker Chip in Photoshop

Draw a Classy 3D Poker Chip in Photoshop — In this tutorial we are going to illustrate a 3D Poker Chip in Adobe Photoshop starting from scratch. New Photoshop users should consider running through our Pen Tool guide first! – By Federico Sportelli

Create a Cute Panda Bear Face Icon

Create a Cute Panda Bear Face Icon — Lately, I have been working on some children illustrations, creating some über cute creatures. In the following easy tutorial, I’ll show you how to create a cute panda bear face icon all from ellipses (well, actually there is one rectangle for the background). – Via vectips.com

paint brush logo icon in Photoshop

Today I will show you how to create a Photoshop design paint brush logo icon in photoshop. – Via tutorialagent.com

panic button logo icon in photoshop

Today I am telling you about How to Create Photoshop design panic button logo icon in photoshop. – By gnews

Glossy Black Button Icons

Glossy Black Button Icons — Today’s Etc Tutorial is a glossy black button icon. We will also be creating the accompanying spot light background effect. The check mark is a standard Photoshop shape. – By Tutorials Etc

Making a Photoshop Shield

Making a Photoshop Shield

How to Illustrate a Brain Icon for OSX and Vista

How to Illustrate a Brain Icon for OSX and Vista

Handy Web 2.0 Icons In Photoshop

Handy Web 2.0 Icons In Photoshop

Photoshop Tutorial: Design the Mac OS X Leopard Folder

Photoshop Tutorial: Design the Mac OS X Leopard Folder — Learn how to create the popular Mac OS X Leopard Folder icon using Photoshop in just Ten Easy steps. Comes with a PSD, useful brushes and custom shapes! – By Shashank Tejura

How to Create a Moka Express Icon

How to Create a Moka Express Icon

Cubite graphics icon

Cubite graphics icon — Today I will show you how to create a Cubite graphics design logo icon Photoshop in Photoshop. – By tutorialagent.com

Create a High-Gloss Graduation Hat Icon Design

Create a High-Gloss Graduation Hat Icon Design — Photoshop is great to use for creating quality icon designs. In this tutorial, I will teach you how to make a professional, shiny, clean graduation hat icon. The techniques in this tutorial will help you graduate to the next level in icon design. – Author: Constantin Potorac

How to Create a Magic Wand Icon

How to Create a Magic Wand Icon

MP3 player icon

MP3 player icon — Today I will show you how to create a Photoshop design sell MP3 digital player logo icon in Photoshop. – Via tutorialagent.com

Creating A Vector Style MacBook From Scratch

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

Sony playstation Icon

Sony playstation Icon — Today I will show you how to create a Photoshop design sony playstation logo icon in photoshop. – Via tutorialagent.com

Photoshop Gold Ipod Shuffle Icon

Photoshop Gold Ipod Shuffle Icon — In this tutorial,I am telling you about How to Creae Photoshop Gold Ipod Shuffle Icon. – Via tutorialtown.com

Make a 3D Vector Film Roll, Drawn In Perspective

Make a 3D Vector Film Roll, Drawn In Perspective

Compact Disc Icon

Compact Disc Icon — The icon were going to be creating is all done using shape layers which means you can resize up and down without loss of quality. Were going to start off with a fairly big canvas so create a new document 600 x 600 pixels, fill your background with any color, ive opted for a nice blue gradient background. – Author: Richard Carpenter

Simple Coffee Cup Icon Photoshop Tutorial

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. – By Alex Rogahn

Halloween Pumpkin Icon

Halloween Pumpkin Icon — This tutorial will show you how to draw a pumpkin, with a scary cut out face for Halloween. – By ART-D

Photoshop Video Game Mario Icon

Photoshop Video Game Mario Icon — Here I will teach you about How to Create Photoshop Video Game Mario Icon – Via tutorialqueen.com

Carbon Style Icon

Carbon Style Icon — Right lets get started create a new document im using 600×200 but you can use what ever size you want depending on how many icons you want. Im also using a nice bright background so i can see everything abit more clearly. Select the rounded rectangle tool, change all the settings in the top tool bar to reflect the image below. – Author: Richard Carpenter

Design Float Circle Icon (AI Tutorial)

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. – Via qbrushes.com

iTune Icon

iTune 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. – Via ndesign-studio.com

Sleek Icon Design

Sleek Icon Design — Today were going to be creating a colorful image icon from scratch, the icon features a colorful design in a shiny metal like border the icon also used a bokeh effect. – About The Author: Richard Carpenter

Design a 3D Box Icon in Photoshop

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

How to Create a Super Shiny Pencil 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. – Author: Eren Goksel

Custom Hard Drive Icon

Custom Hard Drive Icon — In this tutorial il show you how to create a custom hard drive icon in various colors. – Author: Richard Carpenter

Create a Vector Lock Icon Design

Create a Vector Lock Icon Design

Photoshop Pedometer Icon

Photoshop Pedometer Icon

3D Mp3 Player

3D Mp3 Player — 3D Mp3 Player – Author: Richard Carpente

Photoshop Film Clapper Logo Icon

Today I will teach you about How to Create Photoshop Film Clapper Logo Icon. – Via tutorialqueen.com

Vista Error Icon

Vista Error Icon — In this Photoshop tutorial I’ll show you how to create Windows Vista icons using a few basic layers, creative layer styles and some web 2.0 gradients. – Via pshero.com

Creating an XP Style Monitor Icon

Creating an XP Style Monitor Icon