Next Generation Emulation banner

1 - 2 of 2 Posts

19,429 Posts
Discussion Starter · #1 · (Edited)
Since my desktop always featured a lot of unique icons (mandatory desktop scren link here :p: i've been asked on a site if i could make a tutorial for making/converting icons, and since i made it, it was only natural to post it here to.

Leaving that aside this is what programs i used and what i will use as a base for this tutorial:

- Photoshop (personally i love CS5, but it should work with CS2 and upwards)
- IrfanView
- XnConvert
- Axialis Icon Workshop

Also make sure you download the attached, this is the photoshop document in which you will create your icon, i also included some elements into it to make things easier. The archive also contains base_edited.psd which is the photoshop document i used as an example for this tutorial.

Important note: save often, i will not mention saving in this tutorial but i'd suggest you do it :p.

Let's get started:

A. Open base.psd in photoshop. You will see some red borders and a black arrow, those are there just to act as guide lines for this tutorial and be sure that the icon's edges wont be affected. Effects such as shadows or trying to smooth edges aren't an issue if they go past the red borders a little, but make sure the main shape does not leave those boundaries.

First thing is first, let's prepare your tools and workspace:

1. go to Window => Navigator and check it if it is not already checked, a new window should appear and move it to the sidebar so you get something similar to the image bellow. Then enlarge until you feel its easy to work with, i used ~282%.

2. First select the pen tool then make sure you have paths selected and not shapes, then go to shape tools and select the Eclipse Tool, but make sure that you still have paths selected and not shapes like with pen tool. For this tutorial i will use a circle, it looks decent, fairly simple to use and its a shape everyone is accustomed to, of course as you learn more or find (or create) another shape you can use that instead.

B. Starting with the Basics:

1. As you can see in the image bellow I made a general guideline from where to start creating your shape, it pinpoints from where you need to start creating your shape and center your mouse pointer from. Of course its just a guideline you don't need to be that precise but you do need to keep within the confines of the red borders, the rest of the guideline is there just to maximize on the use of space.

2. Okay now place your pointer at the starting point,

-press and hold shift;
-then press and hold mouse button (left click);
-drag the shape towards the opposite corner so that the shape gets as close as possible to the other borders and don't forget you need to hold shift and the mouse button for this to work properly;
-when you have a satisfactory result first let go of the mouse button and after that only let go of shift, do not do it the other way around...

You should have something like this:

Note: keeping shift pressed keeps/forces the proportions of the shape you are about to create equal.

3. Make sure the foreground color is black this is important! (if its not black then just press "D" on the keyboard and it will reset to default.) First create a new layer and then with the new layer selected right click on the shape's path and then select fill path and hit okay.


4. Now click the pen tool and right click on the shape again and choose "Delete path"

5. Duplicate your current shape layer by right clicking on the shape layer and choosing Duplicate Layer:

6. Apply Screen Blending:

7. Hide all layers except for the one you just duplicated:

8. Apply some edge smoothing effects by right clicking on the layer and going to Blending Options:

Now select Outer Glow And Inner Glow, and for both use the settings shown here:

Note: the screen blending will make the black invisible if there is any image layer under it but it will not effect the edge smoothing effects, this is why it was so important to use black, you will understand in a second....

C. Using a image resource to create an icon.

Okay now that we have set up a base for our icons lets get to the good part.

Personally i like to use imageview and browse for an image i want to create an icon from, here's an example:

When you have your desired image opened either press "Ctrl+C" or go to Edit=> Copy to copy the said image to the clipboard.

Now go back to Photoshop and make sure you have the original shape layer selected under the duplicated one, not the duplicated one or above it.

Either press "CTRL+V" or go to Edit=>Paste to insert the desired image as a new Layer.

Now you need to manipulate and shrink it so that the desired part is fitted within the black edges. With the image layer selected either press "CTRL+T" or go to Edit=>Free transform, choose to keep proportions and only manipulate the images from the nods shown here:

When you are satisfied click OK.

Good... Now make sure you have the image layer selected and click within the space of the green border like shown here:

This only selects the shape but not the layer.

Now either:

a. press "CTRL+J"
b. right click the image layer and select Duplicate layer
c. Go to the Layer Menu and select Duplicate Layer.

And you should have something like this after hiding the original image layer:

D. Saving...

In photoshop go to File=> Save For Web and use the following settings:



19,429 Posts
Discussion Starter · #2 ·
E. XnConvert

For ease of use its better to work with 128px but the default windows icon size its smaller and if we just convert the icon like this when axialis makes it smaller we will loose to much detail, which is where XnConvert comes into place, its a great png manipulation tool with which we can batch resize multiple files and the impact on detail wont be as severe.

Its pretty simple to use:

1. add files:

2. Add action for resize:

3. Configure the resize as seen here:

4. Configure output settings to your liking or leave it be....

5. Click convert

F. Final Step using Axialis to convert the PNG into an icon.

There are multiple ways to convert using this program but i'll just show you the best ways when handling multiple files so you don't have to do each convert separately.... Just follow the instructions here:

And use this settings:

And this is pretty much how i convert images to icons, if you just want to convert some png dock icons just skip to step "E" and then "F".
1 - 2 of 2 Posts