Ever wondered how desktop icons are made or how to make an icon from graphics? In this tutorial you will follow a simple design process and design a icon in high resolution and learn how to export it in ICO format so you can use it on desktop or in the file system. Outcome Design […]
Ever wondered how desktop icons are made or how to make an icon from graphics? In this tutorial you will follow a simple design process and design a icon in high resolution and learn how to export it in ICO format so you can use it on desktop or in the file system.
Design icon in Photoshop
- Open up a new document (CTRL+N). I named it “Photoshop_Icon” and gave it 10 centimeters in width and height. Do not forget to set resolution to 300 Pixels per Inch. If your computer has problems with big images just resize it to how much you want but keep the proportions.
- Create a rounded rectangle with the rounded rectangle tool (U). Mine is 7 centimeters in both width and height with radius of 30 pixels.
- Transform it (CTRL+T) and set it to the center by changing X and Y to half of the document’s width and height. In this case 5 centimeters.
- Create a new layer “Color“. Now click CTRL+ALT+G to make a clipping mask on the layer below. After, pick a gradient and gradient it like this. From top right to bottom left corner.
- Create a new layer “Border“. Now CTRL+CLICK onto the little icon of “Box” layer. Go Select > Modify > Contract and contract your selection by 25 pixels. Fill that selection with white color. Put it to “Soft Light” blending mode with 25% opacity. Duplicate “Border” layer with Right click > Duplicate layer or shortcut (CTRL+J). Now we need to blur it a bit, Filter > Blur > Gaussian Blur around 15 pixels. Put that layer to “Overlay” on 25% opacity.
- Type something with Text tool (T).
- Duplicate that layer, then move it down for 5-10 pixels and set it to 40% opacity.
- Make a new layer “Ps_Fill“. CTRL+Click on text layer icon to make a new selection. Now contract it for 10 pixels. In case you forgot, Select > Modify > Contract.
- Fill it with gradient of your choice. I filled it with Soft Gray to White gradient.
- Make a new layer “Highlight“. CTRL+Click on “Box” layer icon to make a selection. Now using White to nothing radial gradient fill it like I did.
- With Elliptical Marquee Tool (M) make a selection like this than hit delete.
- Put it to “Soft Light” blending mode with opacity around 75%. Duplicate the same layer, transform it (CTRL+T) to make it bigger and put it’s opacity to 50%. Duplicate it again, make it bigger again and put it’s opacity to 25%.
- Make a new layer “Noise“. Fill it with black. Now go Filter > Noise > Add noise and add some noise. The options do not matter. Set it to be 3% opacity.
- New layer “Result“.
- Put it to “Color Burn” blending mode with 75% opacity.
- Make a new layer below “Box” layer. Name it “Shadow“. Using Elliptical Marquee Tool (M) make a selection like I did and fill it with black. Filter > Blur > Gaussian Blur , around 15 pixels.
- Duplicate that Shadow layer and bring it on top of the document.
- CTRL+Click on the “Box” layer icon. Right click on your selection > Select inverse . Hit DELETE.
- That’s it. Now you can play around with colors or whatever you wish.
That’s the graphics in high resolution. Save it. The next step would be downloading the plugin, installing it, resizing it and exporting to a working .ico file. Then you can assign it to any file or folder on your Windows desktop. Download the “ICO (Windows Icon) file format plugin for Photoshop by Toby Thain” from official webpage http://www.telegraphics.com.au. If you have problem finding the resource, then just follow this link.
Learn how to install the plugin on our Custom resources in Photoshop tutorial.
Make icon from image
- Install the plugin.
- Open up your icon document.
- Remove the background.
- Resize it to 32×32 pixels. Image > Image Size. Set “Resolution” to 72 pixels per inch.
- Image > Mode >Indexed Color. Put Colors to 256.
- File > Save As. Be creative about the file name and put Save As to ICO (Windows Icon) (*.ICO).
- Right click file or folder > Properties. Switch to “Customize” tab and click “Change Icon…“. Click on “Browse…” and point to your newly created icon.
- Click on “OK“.
These were the steps in creating an icon in Adobe Photoshop with the new plugin by Toby Thain. Now your Photoshop has the ability to work with ICO files. Using this process now you can make .ico from any graphic you like.
Thank you for reading our tutorials and be sure to check others out!