ICON DESIGNING

Sketching
Then the process of swirling out your ideas begins. It doesn't
matter if the sketch looks like monotone roadkill, you are just
throwing ideas down onto paper at the moment. If any
aspiring filmmakers ever needed encouragement they should
look at the Taxi Driver storyboards of Martin Scorcese. The
man has incredible talent in filmaking but would be thrown
out of kindergarden art class. Once you have placed some
ideas down on paper you can scan them in and dive into your
image editor of choice. I'm using Photoshop CS and
IconBuilder Pro for this one. The method I use to create icons
could be wildly different from someone else so go with whatever method feels
comfortable. The end result will be a series of scaled resources that the OS will use
in different views.

Blocking In Colours
From my sketch ideas I'm going to take the angled key with a button for operation
at a distance. The icon is going to be built using vector shapes and layer styles so
there is no need to build a huge source file and scale down as these will scale up
quite well. First we draw out the base layer with the pen tool. It's usually helpful to
have the sketch on a layer at the top set to overlay mode as you can then check
you are following the rough idea. When we have the base layer laid down we can
then start to fill in certain shapes with layer styles such as gradients and inner
glows to give definition. The pattern overlay tool can be quite useful to give some
texture in certain areas.
Highlights And Shadows
When we have filled in the base layers with colour and some
effect we can start building up highlight layers for each of
these examples. The main concern with the highlight layers
is to reinforce the overall shape of the icon, be it a sphere,
pipe, or circle. So on this Icon, we use a lighter shade of
grey to build up the curve of the rubber. The surface would
be quite dull so the edges and highlights would all be quite
soft. Lastly some shadow layers complete the overall
impression of the icon shape.

If you want to apply a nice edge highlight, try putting an

inner and outer glow on a shape and then setting the fill content to 0%. Use a layer
mask to knock out the shadowed side. Make sure to click “Layer Mask Hides Effects”
in the Blending options palette All through these layers, masks are used to bring
down the edges of highlights or bring up shadows in certain areas. If you are
unhappy with the angle of something , clicking on the approriate point with the
Direct Selection tool and nudging the point with the arrow keys usually solves most
issues.

Smaller Sizes & Exporting

While the Icon we’re building may look decent in 128x128, the majority of the time
it is going to be viewed in a smaller size in the Dock, sidebar or Column/List view. So
we have to think about what we do to make it look well at smaller sizes. Sometimes
a simple scale and sharpen will work. Other times, it helps to build a version of the
Icon specifically at that size.

The vector nature of this method helps making scaling or style changes at a later
date without any loss of quality. This Icon could be scaled up to 256x256 or larger
and only the layer effects and masks need a small cleanup to match the 128x128
look. With the 32 and 16 resouces we can zoom in and see what detail if any we can
clear up. One tip is to sharpen the edges by judging the overall colour of the icon
and applying a very subtle stroke using that shade to harden the edges of the icon.
Thus in list and sidebar locations the icon can be more visible. The final step is to
build the icon resouces in IconBuilder (using the IconBuilder Photoshop template,
you can instantly fill in the various sizes by clicking QuickBuild). For most
Application Icons, you will be creating a ICNS file.
Metaphors and Wild Fowl
An Icon is not a turkey. Stuffing it with extra elements will not give it more flavour. If
the urge to fiddle is overwhelming, take a break from the Icon for a few hours and
come back to it. The Icon can be given extra elements like little light indicators or
graphics on the button but are they contributing to the meaning or just an excuse
for pixel pushing? Simple is very hard to achieve consistently but it’s something
that’s worth aiming for.

Mobile iOS devices have seen some tremendous growth over the 2010 period. With the growing
sales of iPads and the popular release of the new iPhone 4 Apple has had an amazing year. Not
only in these two markets but all iPod Touch devices are also running iOS which can access the
App Store.

Here we’ll be going over brief ideas of how to design icons for iOS devices. There are many
sizes and scales which require careful attention to detail and focus. iOS designers are required to
submit an icon with their app into the store during publishing.
The process may be time consuming but the rewards are outstanding and provide a true sense of
empowerment.

iOS App Development

The main process for designing an app for iOS requires two bits. The frontend design concept
requires a branding or icon design to fit in the Apple App Store. Designers are also required to
craft UI wireframe concepts for each screen of the mobile app.

Developers then enter XCode and spend hours working with views and libraries to produce a
fantastic final result. Combining the graphics and programming can produce amazing
applications to stand the test of time.

Designers do not often consider how much work is put into development of a mobile application.
The style is different with Android-powered devices where Google hosts an open platform for
any and all to build on. The iOS App store is much more exclusive and also offers the greatest
chance of reaping a small profit.
Graphics Split on iPhone/iPad

Each icon has a specific size which is used for a certain purpose. The large amount of devices
currently running iOS means designers must be on their toes to incorporate a keen icon set with
each mobile app.

iPhone/iPod Icon Sizes

• Application Icon – 57x57px

• iPhone 4 icon – 114x114px
• App Store Icon – 512x512px
• Spotlight Search – 29x29px
• iPhone 4 Spotlight – 58x58px

The iPhone doesn’t have many icon size variations. The official app icon which rests on one of
your users’ home screens is 57 pixels length and width. The iPhone 4 supports higher resolution
settings so it’s optional to include a 114 pixel icon, though not required.

The largest size necessary of an icon is 512 x 512 pixels. This is a fairly large graphic which is
displayed throughout the App Store and when browsing apps in Cover Mode. When opening
Photoshop to design a new icon it’s always recommended to start at 512 and scale your way
down.
Spotlight search supports slightly smaller sizes for icons. 29×29 may seem downright puny but
when you’re viewing the search results screen it’s a fairly intuitive interface. The iPhone 4
similarly supports a Spotlight Search icon refined to 58 x 58 pixels for the higher resolution
screens.

iPad Icon Sizes

• Application Icon – 72x72px

• App Store Icon – 512x512px
• Spotlight Search – 50x50px
• Settings Icon – 29x29px

The application icon is slightly larger this time around. The app store and cover flow sizes are
still the same with an increase in our spotlight search dimensions. The iPad boasts a fairly large
tablet touchscreen so icons can fit nicely.

The 29px version previous mentioned can be re-used for iPad as a settings icon. If you create a
settings page within the iOS general functionality it will display a small icon next to your tab.
This can be nice to allow users to change themes, include different accounts/usernames, and also
fiddle with smaller options regarding your app.
Basic Icon Rules

The App Store only accepts applications which offer PNG files for icons. For many detailed
reasons PNGs are able to hold deeper colors while not requiring much hard drive space.

You may also notice that icons from the app store have a gloss over their exterior. This is an
effect added at runtime and shouldn’t be added into your actual icon. There is a Boolean switch
which any app developer can use to turn the glossy icon effect on or off. However most icons
benefit from the effect when done properly, so it’s best to leave this setting alone.

The iOS platform also applies rounded corners to icons in most screens. When designing your
icon set be sure to keep all corners flat at 90 degrees for a perfect square. This is very important
because Apple will add the rounded corner effects for your icons by default. If you apply this
beforehand your graphics may publish improperly.

UI Tips & Design Kits

Icon designers should also shy away from using transparency in designs. This is reflected poorly
when apps get published to the store since iOS has a difficult time rendering areas from an icon
as transparent. If you’d like some inspiration check out our best iPhone apps for web designers.

There are also many resources available to app designers today. Icon artists are fairly open about
sharing their projects and love helping the design community with their contribution. Browse the
many UI kits for iPhone and iPad development which are free of charge and easy to download.

This has been a developed overview for starting iOS icon design. The process will require
months of hard work and dedicated practice to master such an art. However the skills and
production value of iPhone apps is tremendous and surely icon design is a skill worth acquiring.
ICON DESIGN TUTORIALS
10 Mistakes in Icon Design - It is much easier to criticize somebody else’s work than to create
something cool yourself. But if you apply a systematic approach to criticizing, make a numbered
list and prepare illustrations, it will be regarded as a fully-fledged analysis! In my opinion, icon
design is undergoing a transitional period. On the one hand, screen resolutions are increasing,
hence enhancing icons. On the other hand, we still have good old pixels. Icons sized 16×16 and
even smaller are still widely used. And so, here are the most commonly observed mistakes in
icon design…

7 Principles of Effective Icon Design - Before approaching icon design, there are some
guidelines and principles that are worth studying. If you want to create effective icon designs,
then you should take a holistic approach to issues such as audience, size, simplicity, lighting,
perspective, and style. This article gives you a good starting place for creating icons that work
well together and fit seamlessly within your designs.

Are your icons working for you? - Icons and infographics are so integral to all GUIs (OS’s and
online) that, like the street signs outside your window, we hardly notice them, even when we’re
using them. And that’s exactly the way it really should be. The first time we see one it should
help explain a concept behind a menu item, button or link — perhaps with a shopping cart
silhouette next to a purchase option or a disk next to the ’save’ option. After the first time, we
then tend to use them as flags or landmarks to move around interfaces we are familiar with.

Drawing an Icon: Sketches and Metaphors - Rejoice, our young fans of digital miniature! The
festival has finally come to your town. Turbomilk in my person is starting a series of posts on
how we draw icons: from the moment of placing the task and receiving an advance payment to
sending the final versions to the customer. Eugene Artsebasov, our illustrator, was so kind to
assist me.

Designing Effective Icons - Icons should be suggestive of the functionality with which they are
associated. The best icon will suggest to the user the primary purpose of the program or
operation without having to read accompanying text. Users recognize functionally suggestive
icons more rapidly than other forms because they directly associate with a physical object or
action.
How to Design Mini Icons - Numbers of people have asked me how to design my popular Mini
Pixel Icon pack. In fact, they are relatively easy. All you need is just some basic Photoshop
skills. Here I will show you how to use the Pencil tool to design pixel icons, and then re-use
them to create a full collection. This is the technique that I used to create over 320 icons within a
day.

How to Make Icons - This tutorial will follow the construction of an Icon for an imaginary
application called “Keyfob.” We’ll say that it’s an application for locking and unlocking the Mac
remotely. This is partly inspired by a process where someone managed to put their Mac to sleep
using a mobile phone.

Icon Design: Bitmap vs Vector - PNG vs Vector icons explained Here at Firewheel, we create a
boatload of icons, and one of the most common questions we get asked about icon design is,
"Why do you deliver your icons individually sized in PNG or GIF files, when a single vector file
like SVG or EPS can be made any size we desire?"

Icon Design Tip : Weight - Avoid cramming the 128×128 canvas with full-size square graphic.
It’ll make your dock feel heavier and not balanced.

Icon Design : Sizing - One of the more deceptively time-consuming things you’ll do when
creating an icon is producing out size variations. If you require a single icon in more than one
size, the time you spend designing the first size is only about two thirds of the work you’ll end
up doing; the other third lies in tweaking it for different dimensions.

Icon Analysis : Evaluating Low Spatial Frequency Compositions - Immediately recognizing

danger to a school amongst lumber yards, garbage dumps, and plant nurseries is imperative; any
time-slip in the search and discrimination task could delay notification and evacuation of
hundreds of children. How then can we diagnose problems with icons that fail in this regard?

Icon Design Explained Quickly - Last night was a great Oxford Geek Night, with a good mix of
topics. I particularly enjoyed ‘Designing a web app with character’ by Denise Wilton, not
because I got a mention, but because she brought up concepts that saved me some time in the
wee 5 minutes that I had to explain Icon Design!

Icon Resource Video Tutorials - Let yourself be taken by the hand through the world of visual
interface design, and learn how to design icons for your own application, website, or company.
Here a few reasons why it’s worth checking out.

The Making of an Icon - This won't be a tutorial or a step-by-step walkthrough, more like a
general guideline based on my own experience. It's how my workflow crops up. Enough
disclaimer, let's see if we can make an icon. To illustrate the creation of an icon, I've decided to
redraw my old TextEdit icon from the bottom up.

FAVICON DESIGN TUTORIAL

 Online Tools and Software to Generate Icons and Favicons - This is the ultimate list of
tools, utilities, and software for generating these pesky little icons / favicons.

Creating a Simple web 2.0 Favicon : Tutorial - Inspired with the favicon design of web 2.0 sites
like Tech Crunch, Lifehacker, Technorati, etc? Well follow this simple tutorial for creating web
2.0 fav icon using Photoshop. All you need is just Adobe Photoshop software installed.

Creating favicons with Adobe Photoshop and GoLive - Do you want to learn how to create
custom web site icons like the ones above? Due to recent developments in the web browser
market, more and more web designers want to create these custom favorites icons called
"favicons." Adobe GoLive and Photoshop make it easy to create and manage these custom icons
that are used in the address bar and bookmarks of many new web browsers.

Creating a Favicon with Adobe Photoshop - In this tutorial I will teach you how to create a
favicon for your site. A favicon is a little icon that appears in the address bar of your internet
browser on the left-hand side. Our site has one, if you're unsure what they are, just look at the top
of your browser right now, and look the the left of the text in the address bar. See it? That's a
favicon.

Create Your Own Favicon for URL Bar and Bookmarks (Photoshop) - A favicon is that little
image you can see in your url section just before the site address. Don't be anonymous! Give
your site a full personality. Most browsers save your favicon when your visitors bookmark your
site and this is a good wey to catch your visitors'attention, when they do to browse their
bookmarks your site will be different from the mass! Now I'll show you how our favicon got life.

Daily Blog Tips : How toCreate a Favicon - favicon.gifA favicon (short for “favorite icon”) is
that small icon displayed on the browser URL bar, on the bookmark lists and, for certain
browsers, on the navigation tabs. While a favicon will not drastically change your traffic it will
certainly improve the look of your blog, adding a unique icon and making sure that readers are
able to individuate your site inside bookmark lists easily. Below you will find a step by step
guide to create a favicon.

Favicons : Demystified - One of the few things you only come across once in a while is creating
a favicon. It only needs to be done once, doesn’t need any ongoing maintenance or debugging.
Do it once, done. That’s the reason, at least in my case, that every time I get to the task “Create a
favicon for the page”, I try to remember how exactly they need to be created and what to pay
attention to. So this is another “remember for next time” article.

Favicon Tutorial : ClickFire - A favicon should be 16 X 16 pixels with 16 colors and the file
name should be favicon.ico. IconEdit32 is a good freeware program that allows you to create
favicons as well as icons of other sizes and color depths.

Favicon Tutorial : Learn How to Make a Basic Favicon Button - A detail tutorial for creating
favicons in Adobe Photoshop
How to Create a Favicon.ico for Your Web Site - This brief tutorial will show you how to create
a unique favicon.ico

How to Create Favicon.ico file - I am going to present several ways in witch one can create
favicons.

How to Create a Favicon : Basic Tips - A very basic tutorial for Favicon creation.

How To Make a Favicon : GraphicsAcademy - A Favicon is a small graphic used to represent a

particular web site. It can be displayed by various browsers (including Internet Explorer 5 and
above) when navigating or bookmarking that web site. In this tutorial, I'll show you how to
create a FAVICON for your web site.

How to Create a Favicon.ico with GIMP - You want to create an icon for your website (which is
displayed in the browser's location bar). You already know, that you have to place a file called
favicon.ico in your web server's document root directory. But how can you create one?

How To Create A Favicon - So what’s the trick to creating lightweight multi-size favicons? I
used to use the online java tool the folks at favicon.com offered, but now they seem more
concerned with making money than providing free tools. More recently I’ve used Icon Forge
which I can easily say is one of the most awful programs I have ever used in my life. Truly
horrid. I wouldn’t recommend anyone do that, so here’s the process I came up with. (Any excuse
to use a nested list.)

How to Create Animated Favicons - I’m sure you’ve seen plenty of favicons while browsing the
internet as they are becoming more and more common. However, have you ever seen an
animated favicon? That is to say, have you ever seen one that shows a moving image? It’s
actually quite easy to do!

How to create a Favicon with IconArt - In order to make your own icon, you need a special
program that can save images with the .ico extension. Until recently I used to use a freeware
called IconArt to create favicons.

How to Make a Favicon - Have you ever noticed those little icons in the address bar of your web
browser? They also appear next to your bookmarks, and sometimes next to the items in your
RSS feeds. These favicons - or "favorites icons" - are more fun to look at than they are
functional, but almost every website has one these days.

How to Create Custom Favicons - Favicons often go unnoticed by webmasters, but I like to think
they’re an important part of any website, because they can be the symbol of your website and can
leave a message to your audience about what they can expect from your business or blog.
Favicons are just the small icons that appear in your browser’s address bar, just to the left of the
web address itself.

How To Create And Install A favicon.ico - Learn how to create and install a favicon.ico
Mysteries Of The Favicon.ico : How To Create A Favicon In Photoshop - A Favicon is a little
custom icon that appears next to a website's URL in the address bar of a web browser. They also
show up in your bookmarked sites, on the tabs in tabbed browsers, and as the icon for Internet
shortcuts on your desktop or other folders in Windows. And when I say little, I mean 16 pixels
by 16 pixels. So if you like a good design challenge try your hand at this one.

The Making of a Favicon in Adobe Photoshop - There are numerous sites such as flavicon that
can help you build these graphics, however I prefer to do it all through Photoshop, here’s how…

Tutorial: Make a Favicon - This is how you create a favicon for your site. Let's begin shall we?

WikiHow : How to Create a Favicon.ico - When you visit a website like Google or Yahoo, you
might notice their personal icon in the far left of the address bar. This is called a Favicon, and
you can create your own for your personal webpage. Following these steps will further
personalize your website, as well as give it a more professional feel. (This wiki assumes the user
has a Windows computer.)

ADOBE ILLUSTRATOR ICON DESIGN TUTORIALS

Create a Vector Film Slate Icon : Illustration - In this tutorial, I'll show you how to create a
vector film slate icon. The tutorial uses some basic shapes, some gradients, and even a blend.
Moreover, you can easily customize this tutorial with your own logo or typography.

Creating a Windows XP Folder Icon Illustror Tutorial - This article describes what I've found out
about making icons and gives a simple example of making a Windows XP folder icon in Adobe
Illustrator. This can then be used for further design work and eventually end up as an icon.

Create XP-style Icons Using Illustrator or Freehand - In this third and last article of our vector
graphic series, you'll use your knowledge of faux 3d vector graphics as we walk step-by-step
through a real-life, practical application that I think you'll find extremely useful.

Design a Vector Audio Speaker Icon In Illustrator - In this intermediate tutorial, I'll show you
how to create a vector speaker icon. When you break down the elements you'll find it fairly easy.
We'll be using some ellipses with gradients, the Grid Tool, and the Mesh Tool to create this icon
design.

Creating a comment icon in Illustrator - A short tutorial on creating a vector-based comment icon
in Illustrator. The tutorial includes a downloadable illustrator file to work through the example
with. We are going to create a simple comment icon that can be use on a website or CMS. We'll
use some simple illustrator techniques to achieve the effect.

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.
Creating an icon "about company" in Illustrator - In this tutorial, you will learn to create an
“about company” icon in Illustrator. After a little treatment in Photoshop, the result can be like
this:

Create a Vector RSS Icon with Illustrator - Since the icon is to be created in vector format, it can
be scaled up or down in size for implementation on future websites you may work on, unlike a
raster version which would have to be remade in larger dimensions to prevent pixelation.

Creating Reflecting Web Icons in Illustrator - One of the looks of “Web 2.0″ is the aqua icons
that Matt Kloskowski shows us how to make in the first issue of Adobe Illustrator Techniques
print issue. Another look is the reflecting icon. The clean, crisp look of these attractive images
makes clicking through a website’s navigation fun. Here’s how to make one of those neat icons.

Create a vector icon in Adobe Illustrator - In this tutorial, you are going to learn how to use
various effects in Illustrator to make unique, classy looking icons like the one below. I will be
going into great detail during many of the steps. If you are an advanced Illustrator User, you may
skim through some of the steps to get to the finished product faster.

DesignFloat.com's Circle Float Icon - In this tutorial i will create a Designer float icon using
adobe Illustrator that will match with the awesome fasticon set…

Drawing a Pencil Icon Tutorial - This article explains the process of designing a simple pencil
icon, one of the icons of the icon set. The tutorial is very detailed and in-depth, so you will
hopefully be able to follow each step without any problems.

How to Create a Juicy RSS Feed Icon in Illustrator - Let's learn how to make a unique RSS feed
icon. This tutorial requires a familiarity with Adobe Illustrator's basic tools as we'll use the
gradient mesh tool and make light use of Illustrators mapping feature.

How to Create XP Style Icons Using Illustrator - This tutorial will give you a basic idea of how
you can create Xp Style icons using Adobe Illustrator and Photoshop. You can use free hand or
any other graphic software and create the same by following the basic steps.

How to Create a Transparent Battery Icon with Adobe Illustrator - 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.

ITunes Icon Design Tutorial in Adobe Illustrator - 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.

Translucent IM Style Illustrator Icon 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.
PHOTOSHOP ICON DESIGN TUTORIALS
Apple Style Menu Tutorial Using CSS Sprites - The menu that Apple uses on its website is
becoming more of an iconic menu bar, especially to us web designers and developers. It is really
simple to create and there are a variety of states. One interesting aspect that Apple has also used
here, is the CSS sprite effect. Here, we will recreate the menu using Photoshop and CSS sprites!

Create an Adobe CS3 Icon - This tutorial will teach you how to quickly make a slightly altered
looking Adobe CS3 Icon.

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!

Create a Glossy Home Icon in Photoshop - Learn how to design your very own glossy home icon
in Photoshop.

Create Icons Tutorial - How to make icons with Adobe Photoshop.

Create a Jaguar Style Folder Icon - In 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.

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.

Creating a Cool Yellow Helmet Icon - Construction icons have always been popular on-screen,
and although those dot-com "under-construction" pages have mostly vanished from our screens,
the trusty ol' yellow helmet icon still has its uses. In this tutorial, we'll be creating our very own
icon from a photograph.

Creation of Unique and Funny Digg Icon in a Bottle for Bloggers - Creation of Unique and
Funny Digg Icon in a Bottle for BloggersThis tutorial explains what to do if you wish to make a
unique icon for a social network on your resource. I will describe in details the process of
creation of unique and funny Digg icon in a bottle for your website.

Creating A Cool Web 2.0 Icon - Web 2.0 are those cool icons which you see every where, but do
you no how to make them? This tutorial will explain how. Click on any of the images for the full
version.

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.

Creating A Web 2.0 Flag Icon - Web 2.0 Icons are every where. On websites coming into
programs. This icons are graphics that have reflective shadows and look really cool. But how do
you do them for country Icons. Heres how. Click any of the image to enlarge them.

Design a Detailed Compass Icon in Photoshop - Another drawing tutorial for icon lovers in
which we'll be illustrating a metallic compass. We'll 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.

Design a Coffee Mug Icon - This tutorial is the result of some of my experimentation in the
Illustrator realm. It will go through the steps to creating a typical web icon. In this case, a pretty
nifty coffee mug.

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 and iPod Touch - 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.

Glossy RSS Icon - How to make a glossy RSS icon.

Home Icon Photoshop Tutorial - In this tutorial, you will learn to create a home icon.

How to Make Icons in Adobe Photoshop - This tutorial will follow the construction of an Icon
for an imaginary application called “Keyfob.” We’ll say that it’s an application for locking and
unlocking the Mac remotely. This is partly inspired by a process where someone managed to put
their Mac to sleep using a mobile phone.

How to Make Mac Icons - This article will be a "rubber-meets-the-road" tutorial on the steps
necessary to transform your ideas into reality. This tutorial will not necessarily be the way to do
it, but it is one way (my way, actually). At the end of this tutorial, you will have a beautiful* icon
with a transparent background suitable for a web page or application.

How to Create and Edit Icons in Mac OS X … Using Photoshop - All you need is Preview
(comes free with OS X), img2icns (a free download) and Photoshop. If you don’t have
Photoshop, there may be an equivalent way of doing this in your graphics app of choice but I
don’t know it.

How To Create Your Own Unique RSS Icon - This tutorial will teach you some key skills that
come in handy when creating different things in Photoshop, it’s main aim is to show you how to
create your own unique RSS icon, very useful if you have your own website and you want to
make it more unique, easy to understand and follow.

How to Create a TV Icon - In this tutorial, you will learn to create a tv icon

How to Make a Folder Icon - In this tutorial you will learn how to create a nice folder for your
desktop or a website.

How To: Create Custom Icons for your Mac - Have you ever wanted a custom icon for a hard
drive or folder? I have, and I found out that it is easy to do, even if you can’t make an icon from
scratch. For example, I got tired of seeing the default white removable drive icon whenever I
plugged in my CompactFlash reader. I decided to make a custom CompactFlash icon to use
instead.

How To Create iPhone Webclip Icons - I was baffled by the little 16x16 icons that were showing
up in my URL toolbar, and it took a surprising amount of searching to find out how to create
one. I refuse to let this happen again. So: if you want to make a custom icon for your website that
will show up in the Springboard when a user makes a "webclip", using their iPhone or iPod
Touch, the dirt simple way is.

How to Make a Folder Icon - In this tutorial you will learn how to create a nice folder for your
desktop or a website.

Icon Design Tutorial : Designing a New Icon In Illustrator - Here is a tutorial explaining how
they were made in Adobe Illustrator. We’ll try to cover the basics and give you an idea how
things are rendered, how they appear in smaller sizes and the constraints we can find when using
Vector (Illustrator) instead of Pixel (Photoshop) based image software.

Illustrate a Traffic Cone Icon in Photoshop - Previously I showed you how to illustrate a
construction helmet icon. Today we'll be drawing a traffic cone, another handy icon for "under
construction" elements. Our cone icon is inspired by one I saw on the VLC Player site recently.

Mac Os X Mail Icon Style - Learn how to make the Mac OS X Mail’s icon in a easy way.

Making a Compact Disc Icon - This tutorial will show you the steps and techniques used when
creating a CD icon which can be used on websites etc… Very useful as the same techniques can
be applied when making other icons/images.

Make Web 2.0 Icons in Photoshop - This is a tutorial on how to make glassy icons. This is just
one of many ways to create web 2.0 images. I have tried to keep it simple but it assumes you
know your way arround Photoshop.

Making a 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.
Perfect Shine Button or Icon Tutorial - Ever cracking your head on how to design an awesome
button or icon for your application’s GUI? and feeling of jumping out from Web 2.0 style once
in a while? In this tutorial will be teaching you on how to create a cool looking button or an icon
to suit your need.

Photoshop Tutorial: Custom RSS Feed Icons - I took the great source files from Feed Icons and
morphed it into something of my own. I’m going to show you two ways to make your Feed Icons
custom.

Photoshop Video Game Mario Icon - Here I will teach you about How to Create Photoshop
Video Game Mario Icon

QuickTime Icon Tutorial - We'll begin this tutorial, by creating a new canvas at a size of 281 x
168 then download the Quicktime Shape Pack which will have the two custom shapes necessary
for this tutorial. Then choose the "Custom Shape Tool" and find the "Quicktime Logo" shape.
Then draw the shape as I have done below. Name this layer "Quicktime" in the Layers palette.

Skype Buddy Icon Photoshop Tutorial - Learn to draw skype buddy icon with this tutorial. Final
output of the skype buddy icon can be seen below.

Stylish Search Icon Photoshop Tutorial - Learn how to design a professional stylish search icon.

The Making of an Icon - This won't be a tutorial or a step-by-step walkthrough, more like a
general guideline based on my own experience. It's how my workflow crops up. Enough
disclaimer, let's see if we can make an icon. To illustrate the creation of an icon, I've decided to
redraw my old TextEdit icon from the bottom up.

TUAW Tutorial: Custom Stack Drawer icons - In this little tutorial I'll show you how to make
your own customized drawer icons using nothing more than Preview.

CORELDRAW ICON TUTORIALS

Creating Icons with CorelDRAW Graphics Suite - Users frequently ask how to create icons with
the CorelDRAW Graphics Suite. While the ICO file format is listed as one of the file types you
can create with CorelDRAW and/or Corel PHOTO-PAINT, it is not the best way to create icon
files.

Create Your Own Icon by Using CorelDrawX4 - By using this powerful software for creating
icons, brochures, newsletters, flyers, business cards ,calling cards, and other related stuff. While
creating your stuff you can be sure at the end the output of your creation will be extremely good
and high in quality.

How-To's Day: CorelDRAW: Create Custom Icons For Your Computer - How to create icons
with CorelDraw.
How to Make a Icon in CorelDRAW - The attached CDR file is in Corel 10 format but will work
fine in 10 or 11. Have fun with it. Also you can se a vidio of my methods over at www.fauxs-
x.com

YouTube : Making iconsin Coreldraw [Video] - A video tutorial in Spanish (if you don't speak
Spanish, you can still watch how the icon is made) Making icons in Coreldraw.

GIMP ICON TUTORIALS

Creating 3D Icons with GIMP - Creating 3D icons with GIMP. Want some cool 3d-icons? Then
you're right here ;) We're going to create some 3d-icons today. We're demonstrating the 3D-
effect with a simple arrow that could be used as a download-button.

Creating iPhone style icons in The Gimp - Creating neat looking iPhone style icons is not as hard
as you may think, follow this tutorial and you wont go far wrong.

Create an iMac Vector Image in The Gimp - In this tutorial I will show you how to develop a
vector iMac in The Gimp, this is based loosely on the tutorial for Illustrator from Blog.Spoon
Graphics. This is designed at the more advanced level Gimp users but for you beginners I will try
and explain it as easy as possible.

Draw an RSS feed icon in GIMP - How to create an RSS feed icon using just GIMP.

GIMP Tutorial : Arwen Icon - Here’s a very detailed tutorial showing how to create a beautiful
avator icon from a photo in the GIMP.

GIMP Animated Icon Tutorial [Video] - A video tutorial to teach you how to design an icon
using GIMP.

GIMP: Creating Inventory Icons - We have a nice tutorial on this site for those wishing to make
transparent weapon and other icons, and it's here.

How to Create Icons with GIMP - Almost every desktop enviroment I've seen has a special
application for creating icons, usually a very limited drawing application. In this short tutorial,
we'll show you how GIMP (GNU Image Manipulation Program) can help you create icons for
your desktop.

Make a Forum Icon in Gimp - Tutorial on Creating Your Own Avatar for Message Boards

Windows Vista Folder Icon Creation with GIMP - In this tutorial I will show you how to make a
Windows Vista Icon in Gimp. This is the first time I use GIMP. so if I name a tool name wrong,
sorry. I was using GIMP 2.2 on Mac OS X during the tutorial.

YouTube : GIMP (JIMP) Icon Tutorial [Video] - a video tutorial to teach you how to create
icons with GIMP.