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.
- Photoshop Icon Design Tutorials
- Illustrator Icon Design Tutorials
- Icon Design Articles and General Tips
Create a great looking lock with excellent metallic effects.
This tutorial will show you how to create a Mac style radar icon in Photoshop.
This tutorial will show you how to design a realistic takeout coffee cup icon in Adobe Photoshop.
In this tutorial you will learn to draw a battery icon with 3D look in Photoshop
How to Create Photoshop Laser Printer Mode
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!
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
In this tutorial you will be guided through the process of creating an industrial style folder icon.
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.
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.
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.
In this tutorial you will find how to create a download folder icon using different shapes and reflections in Photoshop
In this Photoshop tutorial you will see how to create an isometric microchip icon using basic drawing tools and transformations.
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.
Learn how to create a old style van from scratch in Photoshop.
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
Illustrate a Traffic Cone Icon in Photoshop, cool icon for “under construction”. Another great psdtuts tutorial.
In this tutorial we’re going to show you how we made the Calendar Icon from our most popular icon set “Coquette”.
Learn how to create a Photoshop design paint brush logo icon in photoshop.
How to create a car key icon from scracth
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.
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.
A great tutorial on process of designing an note pad icon. Download the finished icon from the Icons Section.
Learn essential drawing skills in Photoshop when creating this good looking icon
Create an Adobe box Icon in Photoshop, to fill your dock with new icons. Learn techniques on brushes, blur, layer mask and blend modes.
Learn how to create a Photoshop design USB portable speaker logo icon in photoshop.
you about How we can Create Photoshop Scissor Icon
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
Create a great looking world icon in Adobe Photoshop. This tutorial shows some really great techniques
This tutorial will teach you how to create a round RSS icon for our website or blog with some really cool light effects.
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!
Here is a tutorial that will teach you how to make a nice digital watch icon.
Step by step turorial that will show you how to design a glossy, clean graduation cap icon.
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.
Learn the technique of using Photoshop pens tool for creating mini pixel icons. Download PSD
Learn how to create a Windows Vista erroe icon using basic Photoshop techniques
You will be creating a pyramid icon or logo on this tutorial. All steps are on separate pages – really annoying.
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.
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.
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
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.
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.
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 =)
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.
Learn how to create a rational vector bucket icon with this tutorial
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.
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.
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.
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.
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.
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.
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
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
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.
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.
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.
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.
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!
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
Great tutorial to help you design a float circle
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
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.
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.
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.
Learn about designing a 3D social bookmarking icon in Adobe Illustrator. You can download the icon here as well
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.
Quick slides for teaching some fundamentals
Denis Kortunov explains the mosty commonly observed mistakes in icon desig
Some guidelines and principles before approaching 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!
A good article about differences between bitmap and vector file formats
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.