We’ve been working on a new app over at 9magnets, which I’m real excited about and should be released here in the next week or two. Every new app is exciting as you get to witness the birth of an idea, it’s growth into maturity, and its final release out to the world.
A big part for any designer in that process is the app icon, serving as a first impression for potential users in the App Store or on a device home screen. If extra time or money goes into any part of app’s design, it should probably be spent on the icon.
But it doesn’t take a whole lot of money or an experienced Photoshop graphic artist to create an attractive icon, just stay simple and stick to some easy tricks. Here’s a look at the icon for our upcoming app Shove, along with some instruction on how to re-create the look. I’ve also attached the PSD file at the end for download in hopes that it helps as well.
For Shove, I wanted to build a colorful, yet simple icon that would stand out on an iPhone or iPad home screen. While basic, I think I achieved that and hope you can learn a bit from my work.
- First, and maybe most important, is the selection of a primary color. For this app, color was dictated heavily by a service that we’re building the app upon. I liked this shade of purple because it’s distinct and not a common iOS icon color that’s over used like blue, steel silver, or a leather/wood pattern.
- I’ve used #c40a68 as solid background color, then added pattern and gradient overlay blending options to add texture and depth. I’ve used the overlay blend mode for each blend, about 80% on a sandstone pattern and 20% on a black-to-white gradient. The texture breaks up the simplicity of a solid color and the gradient overlay is an easy way to simulate the effect of a light source on the icon.
- Next, I’ve added an angled crop of pure white, to which I’ve also applied an overlay layer style tuned down to 15%. This gives a gloss or reflection effect to the icon.
- Now I need to create the box and arrow shape that will be the center of attention for the icon. I’ve used a regular rectangle and a rounded rectangle to make the box shape, as you can see in the screenshots below. The application involves pushing out short messages, much like an email, and I’ve often seen an icon similar to this shape used as a universal symbol for outgoing email.
Commonly accepted symbols are important when designing interfaces, as they are quickly familiar to the user. Much like a traffic yield sign would look out of place if drawn on a sign of any shape other than a rounded triangle, so I don’t want to diverge too far from generally accepted practices.
- I’m going to begin the design of this shape by merging the rounded rectangle and squared off rectangle into a solid shape. Then, I’m going to crop a box and circle out of the center of the shape in order to re-create the common “inbox” shape.
- It’s time now to include the arrow into the icon shape, but I just can’t merge the arrow because it will blend in color with the background box and make an incoherent mess. So I’m going to select the shape of the arrow, then remove 15 pixels to the left of the arrow’s center point as well as 15 pixels to the right of the center point.
- I finally have the shape of our icon’s focus point perfected at this point, so it’s time to give it some depth and texture. I’ve used a melting pot of blending options here, and you should feel free to try your hand at what feels best for your icon.
There’s an extremely subtle outer glow in my final version, with a strong inner glow to give the impression of a shadow so that the icon looks as if it is cut into the background. An inner bevel expounds upon this illusion, giving volume to the inside edges. I’ve also used the bevel’s texture property to give a bit of a rugged look. Finally, I’ve used the stroke style to emphasize and harden the lines of the box and arrow shape a bit further as well.
Once I’ve thrown everything together, I’m left with a pretty good looking icon that has a nice pop when sitting on an iPhone. I hope you’ve found this tutorial to be of use in the creation of your own icon. If you need a bit more help, here’s the Photoshop file so that you can poke around a bit.
