Yesterday, we shared a video tutorial we found on Phandroid that shows you how to design an Android style app icon. Today, we’re sharing a step by step tutorial on how to design a simple glossy icon. This style is neither Android or iPhone.
A successful icon will attract more consumers to your app. The tutorial below gives super simple step by step instructions. We chose to make an icon using our initials, MK. You can do the same with letters, or a simple logo/image. We used Photoshop CS4, but the tools we used are found in older versions of Photoshop.
Do not use this image as your icon. The image we created is for your reference only! Now that that’s out of the way, let’s get started.
Step 1: Open a new file, 500 x 500 pixels. Double click the layer to unlock it. Then fill the canvas with a color of your choice. We chose MiKandi Red #BF2121.
Step 2: Select the Type tool (looks like a T), and type your initials. Choose a fat font. We used a non-default font in color #efbb55.
Note: You can download fonts by doing a simple search for them. You must read the terms of the font before you download and use a non-default font! Many are free for personal use, but require payment if used for professional purposes.
Step 3: Double click the text layer you just created. You will see a Layer Style pop up. Select Stroke, and add a 3px stroke in black, position “Outside”.
Step 4: Next we added a gradient over everything. Change your foreground and background colors to white and black respectively. Then add a new layer over the 2 current layers. Next, select the Gradient Tool. Hint: if you don’t see it, select and hold the Paint Bucket tool in the tool bar. The Gradient Tool will appear underneath. In the top left corner right under “File” you will see a Gradient color bar. To the right of that, there are gradient options. Choose the second option (radial). Then double click gradient color bar and the Gradient Editor will pop up. Select the second option.
Now that your gradient settings are complete, take the cursor to the middle of the canvas, hold and drag to one of the corners. You should see a gradient that is transparent in the center, and black on the edges. If it’s the other way around, hit Ctrl + Z, select Reverse (next to all the gradient settings up top), and try again.
Next, go to the layer your gradient is on, and change the layer opacity to 50%
Step 5: We want to give the icon a glass button look. To do that, we add a “reflection”. First, add a new layer. Then change your foreground color to white. Select the Brush tool, and change the brush size to 401 px, hardness “100%”. Hint: right click over the canvas, and the brush options will pop up. Position the brush so that it cover almost half of your image and click your mouse once.
Change that layer’s opacity level to 35%.
Step 6: The design is almost finished. First, you need to merge all of your layers. So select the top layer, hold down Shift and select the bottom layer. All of your layers should be selected. Now hit Ctrl + E. This merges your layers into one.
Now we want to give the button a shape. You can either create a square button with rounded curves, an oval button, or even a button shaped like a chicken! We chose to make an oval button. Select the last image on the tool bar that looks like a circle inside a rectangle. This is the Quick Mask. Now go to the Shape tool, and select your desired shape. For a custom shape, select the last one, and you will be shown a selection of default Photoshop shapes. Hint: look at the top bar for these custom shapes.
Once you have selected a shape, hold and drag it over your image. The red oval shows what the area of my app icon will be. You can reposition this by nudging it with your arrow keys.
When you’re satisfied with the shape location, select the Quick Mask button once more. Now you will see a selection around your image. Hit Delete and the area that was not in red previously will be deleted.
Step 7: Add effects to your image. Double click the layer to get the Layer Style popup. The effects we used were Drop Shadow, Inner Shadow (which we used as a glow) and Stroke. Click on these images for the effect details.
Step 8: Now your app icon is finished! Save your image as a .PNG file and load it up on developer.mikandi.com
Awesome!!