create your
custom iPhone icon by Brad Sant
downward and slightly to a right diagonal for style. 5. On the left main toolbar, select Elliptical Marquee Tool (near top of toolbar). Zoom out, draw an ellipse twice the size of your “button” rectangle and move ellipse over the top half of your “button”, slightly to the left for style.
begin... 1. Open Photoshop. File > New Document. Set width and height each to 800px. 2. To create the icon’s rounded shape, select Rounded Rectangle Tool. Set radius to 100px (or 1/10 of canvas size for any other size of canvas). Hold shift and drag an even square. Leave space (about .25in) on sides for shadow later. Name layer “Button”. 3. In Layers panel, set the background color of your “Button” layer by double clicking icon and selecting color from popup window. Create new layer above button layer, rename as “Main Glare”.
4. Select the Gradient tool, change Foreground color to White, select Liner Gradient, and select Foreground to Transparent from the Gradient dropdown menu.
Starting from the top of your “button” rectangle, draw a gradient
6. Right click > Select Inverse > Delete. This will give the button a rather primitive glassy look.
7. Create New Layer, rename as “Top Glare”. Use the same Linear Gradient as before (White to Transparent). This time, draw it a lot closer to the top, no more than .5in. 8. Create New Layer, rename, “Bottom Glare”. Using the same gradient settings, draw from the bottom of your “button” upwards (again no more than .5in). For this layer, in the Layers panel, change the blending mode to Overlay and opacity to 60%.
9. In the Layers Panel, hold Cmd and click on the vector mask of the “button” layer. Marching ants will appear on the outside of your “button”. Select > Modify > Contract > Set to 20px (for our 800x800 icon). 10. Create New Layer, move this layer directly above the “button” layer and rename as “Edge”. On the toolbar at the top of your screen, select Edit > Stroke > Width = 10px, Color = White, Location = Center. In Layers Panel, change blending mode to Overlay. 11. To make a true shining edge, Select Gradient Tool and this time set it to Foreground to Background and Reflected Gradient in the Gradient dropdown box. From the middle of your “button”, draw a gradient down to the left. This will give your edge the effect of a light source.
*At this point, the icon could be considered “complete” for the iPhone display size but since we are doing a larger icon for the computer, here are 9 more steps to really give your icon flare!*
down 10 clicks on your arrow buttons. Change opacity of “Strong Shadow” to 80%. 14. To create a soft shadow, select “Strong Shadow”, right click and select Blending Options and select Drop Shadow (click on words to see options, not the check box). Set Distance = 0, Spread = 20, Size = 40. There is a piece of the ellipse protruding off the sides now. ** To fix this, select your “main glare” and “button” layer together. With those selected, Cmd click “button”s vector mask. This will bring back the marching ants around your icon and your canvas. Now select “main glare” and click delete. This deletes every part of the “main glare” layer that isn’t within the button. **
12. To create a shadow, duplicate the original “button” layer (Cmd+J), and move the copied “button” layer directly below the original. Rename this layer “Strong Shadow”. 13. Double click on “Strong Shadow” to change color to black. Select your black arrow tool and Nudge the “Strong Shadow” layer
15. For lens glare, duplicate “button” layer again, rename as
“Flare”. This must be on top of the “button” layer. Right click > Rasterize Layer. From the toolbar at the top of your screen, select Filter > Render > Lens Flare. Position Lens Flare in the top right corner. Select Movie Prime, Roughness = 100%. Change Blending Mode of your “Flare” layer to Overlay.
16. For a final touch, create a New Layer above your “Edge” layer and rename it “Glass”. Select your gradient tool with Foreground Color to White and Background Color to Black. In the Gradient drop down box, select Radial Gradient and make sure it is still set to Foreground to Background. Start from the middle of your icon and draw to the right
edge, directly to the edge of your icon (not your shadow). Don’t panic due to the black covering everything. Simply change the blending mode to Overlay and the opacity to 30% and you will see this:
17. Finally, add whatever you want to the icon you just created. I used a vector I made of a photographer. Make sure you place your text/photo layer directly above the “button” layer to maintain the glassy effect. Feel free to change the color afterward as well. Enjoy!
Inspiration from YouTube: http://www.youtube. com/watch?v=AtDgj_ cD9Wg&feature=fvwrel
...end