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