Posted on October 22, 2008 - by Khaled
Create your own Icons using Photoshop
Yet another old tutorial from the old Kyscorp tutorials depot.
I read in many forums some threads from people asking how to make icons (windows icons) but i did not appreciated the answers because they wasn’t well explained or totally wrong (changing the extension of a gif file to .ico!!!). So i made this tutorial and tried to explain all the steps needed to get the final result.Yes, I’m not a professionnal but this might help beginners.In this tutorial I’m using photoshop cs (or newer) and microangelo (5.58 or +) (this is what i’m using to make my icons).
Introduction:
Before making an icon you should know some tips:
-
An icon is composed of several images of different sizes to be displayed correctly in windowsexplorer.WindowsXP supports these sizes: 48×48,32×32,24×24 and 16×16 px. -
The size 24×24 is used in the right part of the start menu . So if you make an icon and think that it will be used in this part of the start menu include this size in your icon.(this size is not used in windows explorer window).
- 128×128 px size is also recommended if you want your icons to be converted to other fomat (mac icons) or simply to use it in dock programs (y’z dock, objectdock, mobydock) or may be in futur realease of Microsoft Windows.( please note that only recent versions of dock programs supports icons ;old versions uses pngs only).
- you can also include 96×96, 72×72, 64×64 px sizes because some people are using this sizes but affects windows and may cause some trouble if used (especially on the start menu).
The tutorial:
Step 1: Creating the psd file.
What you need firstly is to make the picture that you want to convert to an icon.So use any skills you have to create it.Now merge all the layers together to get the final picture in one layer (please delete the background if you used it ).
Your layer palette should look like this ( With the picture you created sure):
Step 2: Cropping the psd file.
In order to make the icon as big as possible you can use this method:
- Go to View> New guide to add a guide (choose vertical and press ok), repeat the step but this time check horizontal and press ok.
-
use the move tool
to put the 2 guides in the middle of your picture, you’ll see that the guide will jump to the middle by it self. Repeat this step for both horizontal and vertical guide.
-
Now hold down shift+alt and create a selection around your picture with rectangular marquee starting from the intersection of the 2 guides (this is the center of your picture) .
- Go image>crop and you’re done with the picture.
- All what you have to do now is to resize the picture to the different sizes used by icons (128×128,48×48,32×32,16×16 ) and save the pictures one by one. (for example you’ll resize the picture to 128x128px and save it as 128.psd and do the same thing for the other sizes).But using an action is easier because the hole process is “automated”(the action is included with the tutorial and resizes the picture to 128×128, 48×48, 32×32, 24×24 and 16×16 and saves the files as 128.psd, 48.psd, 32.psd, 24.psd and 16.psd).
Step 3: Converting the psd into an icon:(windows xp icons only) .
- Once you finished with the psd file and saved the different sizes run Studio
(start>all programs>microangelo>studio) . -
Add the formats that we will use in our icon (press new image format
and add the first size (128×128)) and repeat the process for the rest of the format (all with color depth set to windows XP).Delete all the other formats set by default in studio.
-
In the end the studio window should look like this:
-
Now drag and drop the psd files from the desktop to the studio window (Click on the format in the studio window it becomes highlighted with blue and put the respective psd file in the window) and repeat the process for all the sizes.
- Finally all you have to do is to save the icon.So easy ? if you want to skip step3 (converting the psd into an icon) use axialis iconworkshop. (See Softwares description).
Softwares you may use:
Axialis Iconworkshop: this is the best software you may use to create and manage icons.It’s able to create icons from image fies and pngs from icons, convert mac icons to windows icons and create icl files (icon library). Iconworkshop also installs a photoshop plugin that permits you to transfer psd’s from photoshop directly to iconworkshop without saving the psd files firstly, then scales them and create the icon in one click.
download it here: www.axialis.com
» Take a look on the Icon Workshop (opens in a new window) «
Microangelo: this program is composed of 5 modules :
- Animator: to create cursors.
- Studio: the icon editor (i’m using version 5.58) supports psd (not multi-layered) and pngs and exports also to psd, pngs, gif, bmp and ico.
- Librarian: Search for icons and create icl files.
- Explorer: Explores Folders in your computer and displays icons or files that contain icons.
- OnDisplay:Permits you to customize folders,Drives, filetypes and cursors.
You can download microangelo Here: www.microangelo.us
Articons: this is an other icon editor simple and powerfull.What i like in this softwares is that it opens icl files and icons files in tabs in the same windows (microangelo opens a window for each icon and each library).
download articons here: www.aha-soft.com
52 Comments
We'd love to hear yours!
Leave a Comment
Here's your chance to speak.
Visit My Website
December 11, 2008
Permalink
Very nice tutorial, but i can not find:
“the action is included with the tutorial and resizes the picture..”
Visit My Website
January 11, 2009
Permalink
Good Tutorial! It was chosen for the home page of http://www.tutorialsroom.com
Waiting for your next tutorial
Visit My Website
March 27, 2009
Permalink
[...] Create your own Icons using Photoshop [...]
Visit My Website
September 15, 2009
Permalink
I love the flaming moose icon. Thanks for the great how to!
Visit My Website
September 17, 2009
Permalink
I think that microangelo is my fave of the programs. Of couse it was the first I tried so that might make me biased.
Visit My Website
September 18, 2009
Permalink
hahahaha That flaming moose is great! I would actually like to use that on a t-shirt if possible. =D
Visit My Website
September 18, 2009
Permalink
Do you think it would be possible to create a tight icon using a real life graphic? I would like to take some photos of the acai plant and create an icon of it for use on my website. I wonder how that will come out. thanks for the tutorial
Visit My Website
September 18, 2009
Permalink
Your tutorial is great, but I still have one question. How can I then go and create .ico files from these graphics. If you could include that info, this tutorial would officially be complete.
Visit My Website
March 11, 2010
Permalink
cool tutorial thanks.
Visit My Website
March 21, 2010
Permalink
I'm starting to really like this site.. thank you so much!
Visit My Website
June 25, 2010
Permalink
Great tutorials on creating icons. Very helpful
Visit My Website
February 10, 2012
Permalink
love it, icons are some of the most difficult things for me to do in PS
Visit My Website
April 2, 2011
Permalink
i just got good at photoshop so this is gonna come in handy thanks! from lord and taylor coupons site
Visit My Website
May 4, 2011
Permalink
Wow, this is really a great tutorial. I have been thinking on creating my own icons. This truly nice!
Clifford Adam
WaterHeatersExpert.com
"Learn how to repair hot water heaters"
Visit My Website
May 5, 2011
Permalink
thanks for all your help. this is just great…
Visit My Website
May 12, 2011
Permalink
I recently upgraded my antivirus software. When the antivirus features are running, I get two error messages, "Attempt to access invalid address" and then, "The action you have requested could not be completed because the application is not responding. It may still be loading or waiting for a response from you." If I turn off the virus checking, Elements 4.0 works as it should.
Visit My Website
May 18, 2011
Permalink
This sure beats trying to fiddle with photoshop. Form the Tire Rebates HQ
Visit My Website
May 20, 2011
Permalink
Very nice icon dude! I like these icon so so. I use photoshop CS5. It is so much effective. wastewater treatment
Visit My Website
June 2, 2011
Permalink
bvlgari sunglasses its tradition of providing luxurious and elegant accessories
with their eyewear collection. Bvlgari Sunglasses are embellished with semi-precious rhinestones, Swarovski crystals and small diamantes for that dash of
glamour and sophistication.
bvlgari eyewear are the favorite of the rich and famous
due to its timeless designs and intricate detailings.
Bvsunlgari glasses are like nothing you have ever seen before. When you look at the
authentic Bvlgari sunglasses offered to you here, at Sunglassesitaly.com, you will
be amazed by the luxury that is delicately presented in each pair. They are like
nothing you have seen before. If you want to be original in your choice of eyewear
and want to be alone in your exclusivity of elegant design, then
Bvlgari sunglasses is the right decision for you.
Visit My Website
June 14, 2011
Permalink
This is very cool and will be very helpful. It will be fun to make and use my own icon's – Ellyn Deuink
Visit My Website
June 22, 2011
Permalink
What an informative post! Will send this to everyone. I love how the icon was made. This is uber cool. I ue CS3. Think I must upgrade. Thanks for the post!
Visit My Website
June 24, 2011
Permalink
This is amazing, now i can also create my own icons here with the help of photoshop, i have never tried it yet, but this is really very interesting and very creative. I like this.
quick cash loans
Visit My Website
June 27, 2011
Permalink
I was very pleased to search out this web-site.I wanted to thanks on your time for this wonderful learn!! I positively enjoying each little little bit of it and I’ve you bookmarked to take a look at new stuff you weblog post.
Visit My Website
June 28, 2011
Permalink
It's glad to search this out, your website I mean. For just a bit of time, I found some interesting part regarding your presentation. I like the photo editing icons. I would prefer to use these icons too. Perhaps, it is creative and new for the eyes. Good ideas!
Chris Daily
<a href="http://bedandmattresses.com/mattresses/why-it-is-a-necessity-to-purchase-the-best-mattresses
" rel="nofollow">best mattresses online
Visit My Website
July 1, 2011
Permalink
I really like "shy guy". That is how I feel sometimes
.
Visit My Website
July 8, 2011
Permalink
Good post. Learnt a lot from this post. Thanks for sharing
Visit My Website
July 22, 2011
Permalink
Very extraordinary article. I merely stumbled on your blog post along with planned to declare i get genuinely liked looking at your notions.
mayweather vs ortiz and home ideas
Visit My Website
August 28, 2011
Permalink
I am really liked this useful article. Thanks for sharing this post.
Visit My Website
September 2, 2011
Permalink
I have Windows Microsoft Office 2010 7 and had no problems Office 2010 at all with the install, it was Microsoft Office done in about 15 minutes Office 2010 key including reboot. I chose the customize option during install Office 2010 download and the button to remove all prior installs and upgrade. I find the programs easy to navigate too.
Visit My Website
September 9, 2011
Permalink
<a href="http://www.l<a href=” target=”_blank”>Longchamp
Longchamp bags
Longchamp sale
Longchamp outlet
Longchamp Le pliage
Longchamp Le pliage Tote ongchamp-sales.net">Longchamp
Visit My Website
September 15, 2011
Permalink
Create work with the characters of Street Fighters. I was really an addict of the video game back in 1995. Even until now, I still play the game. Nice job!
Julie Arnolds
Associate: Tampa Misdemeanor Attorney http://www.tampacriminaldefenders.com/
Visit My Website
October 1, 2011
Permalink
I always love to see my icons in different pictures, I frequently change my icon in different colors. But I never used this type of icons using photoshop. I will try these styles by using photoshop.
Regards,
promotional items
Visit My Website
October 8, 2011
Permalink
louis vuitton outlet is really so well-liked and also treasured during the human beings to be a number of high-end, they may realize that the bring up to date might impact their very own laurels signature in the fashion world as well as talk about in your predisposition in their enthusiasts.
Visit My Website
October 20, 2011
Permalink
I think I'll be making some icons out of the images of the angry birds or plant vs zombies. I have a feeling the icons would give me hits. Thanks!
Romeo Reese
Associate: lasik surgery long island
Visit My Website
October 27, 2011
Permalink
I really like those street fighters icons. Great job dude! Thanks a lot for sharing this tutorial!
Visit My Website
October 28, 2011
Permalink
Okay then, though angry birds is obviously mainstream. I'm still going to have those birds for icons. I just think their cool have as icons.
Francis Moore
tampa dui trial lawyer
Visit My Website
October 28, 2011
Permalink
Excellent and amazing information post. Thanks for sharing this excellent and amazing information post.
Visit My Website
November 5, 2011
Permalink
The first two scenarios used a digital-only booster’s effect on the main 50W FM TRANSMITTER’s analog signal as received on a Chrysler and a Delphi receiver.
Visit My Website
November 20, 2011
Permalink
Very happy to see your article, I very much to like and agree with your point of view. Thank you for sharing. At the same time,i love best pram very much .Welcome to look at my website and blog articles.Hope we can become good friends, and exchange and to help each other! Thanks!! cheap wedding dresses
Visit My Website
November 22, 2011
Permalink
Mario icons are so cute!.. I can't wait to use my own icons. Thanks for sharing this!
Visit My Website
December 2, 2011
Permalink
Indeed you're right, Vannie. The icons are just as cute! Though I'm thinking of icons from plants vs zombies or angry birds.:)) lose weight with chia seeds
Visit My Website
December 2, 2011
Permalink
God is waiting for the response of our freedom. Our own choice, our own creativity, is essential to the drama, and this makes the world a drama fraught with real peril.
Outdoor Lighting | Pellet Stoves
Visit My Website
December 7, 2011
Permalink
I really appreciate free tutorials online. I find it very generous for someone who's sharing valuable information free of charge. Thanks a lot for helping me to create my very own icons! tarpon springs optometrist
Visit My Website
December 13, 2011
Permalink
I've been making my own icons but really aware of the right steps. I'm not yet an expert with photoshop so I really am thankful for this free guide. I believe I can do better this time. Thanks! lose weight with flax seed
Visit My Website
December 23, 2011
Permalink
Basic tutorial but definitely useful and user-friendly. A lot of beginners would surely appreciate this guide. Thumbs up! King Rogers
Check out the best gas hot water heater brand today!
Visit My Website
December 27, 2011
Permalink
It seems the basic steps for making icons are the same with using corel draw. This is truly a useful reference for a a beginner. Thanks indeed! Hardwood Flooring Tampa Bay
Visit My Website
December 28, 2011
Permalink
This a very user-friendly guide for any beginner to making icons. So generous and kind of you to share such valuable guide. Thanks indeed! Get your back pains treated at Midtown Manhattan Chiro today!
Visit My Website
January 9, 2012
Permalink
Good and nice information post. Thanks for sharing this post.
Visit My Website
January 10, 2012
Permalink
This is probably the easiest guide of icon making that I have ever read. You did a very good job making this tutorial. Thumbs up for your contribution! Tampa Felony Lawyer
Visit My Website
January 10, 2012
Permalink
The guide is plain simple and very much easy to follow. Even a 5 year old kid could carry out such instructions. Very well done tutorial!
Advertise with Your Marketing Crew for better results!
Visit My Website
January 26, 2012
Permalink
The guide is utterly easy to follow like ABC. All beginners should be able to keep up with this simple guide into making icons. You really did a good job making this tutorial. Keep up the good work! Protect your rights with Tampa Bay DWI Lawyer today!
Visit My Website
February 2, 2012
Permalink
A little bit of tweaking will do to make the icons look more professional. Nevertheless, the entire tutorial is pretty crystal clear to follow. Thanks indeed for sharing!