Realize Icon Tutorial

First off you need 3 things;
- An image you want to "realize"
- "realize.png" <------- HERE
- Photoshop or suchlike

I have now made a VIDEO TUTORIAL AVAILABLE ---> HERE

Step 1: Select the images that you want to open, in my case 1.png and realize.psd, right click and open them with Photoshop.

 

The images will then be open, and you should have something that looks approximately like this.

 

Step 2: Resize the image you want to realize, so that it fits appropriately over the icon template, in this case 60x60 is the best fit, as is quite common. To do this go to Image -> Image Size.

 

Step 3: Using the arrow tool (top tool on toolbar) drag the image onto the template psd file. The results should look like this.

 

If you look at the template you should be able to see how the image fits, and realign to suite your taste. The properties bar at the bottom right hand side show that the new layer (layer 1) is entered between the "stuff" and "highlight" layers.

 

Step 4: You then want to drag the little box on the "stuff" layer onto the layer with your image. As below.

 

You should them end up with something that looks like the below image. Notice everything outside the edge of the icon, has been made transparent.

 

Step 5: Go to File -> Save As

 

Step 6: Select PNG from the Type/Format list

 

Step 7: Name it whatever you want, but the suffix should be .png

 

VOILA!! You now have a saved and ready to use "Realized" Icon.

 

Hopefully this was easy enough to follow, and I hope that you find it helpful.

Enjoy!

TJ