Create a trendy, highly detailed app icon in Photoshop

Create a trendy, highly detailed app icon in Photoshop

In this tutorial we’ll be creating a highly detailed iOS app icon for an imaginary golfing app in Photoshop. We’ll use various layer styles and customized brushes to create the shading of the wood and the grass. The golf ball will be built using a 3D sphere with a realistic bump map.

The Final App Icon

Creating The Wooden Box

Start with a blank document with a width and height of 512px each and start with creating a couple of guides like shown below.

With our guides set up, we can now start creating the icon. Add a new group in the layers window and name it WoodenBox. Select the Rounded Rectangle Tool, set the radius to 90px and create a shape layer from top left to bottom right. Set its color to #ab8a57 and change the name of this layer to Front.

Create another shape layer using the same radius and color as before by dragging the rounded rectangle from top left to bottom right stopping at the second lowest guide. Name this layer Top.

Pick the Rounded rectangle once more, reduce the radius to 60px and create one more layer following the most inner guides. Set its color to #9b7438 and change its name to Inner. Make sure all these three layers are placed inside the WoodenBox group.

The document should look like this so far (I added red strokes to all three layers for better differentiation).

Hold the cmd-key and click on the vector mask of the layer named Front to select its shape. Select the WoodenBox group and click „Add layer mask“. This will make sure, we won’t draw anything outside the allowed region.

Next, we will adjust the layer styles to give them some depth and to create a 3D-ish effect. Start with the styles of the layer named Front and use the following settings:

Open the layer styles dialog for the second layer Top and apply a gradient from 50% grey (#808080) at the bottom to #666666 at the top. Set the blend mode of the gradient to Overlay.

For the layer Inner, we use the same gradient overlay as we used for the Front layer. You can simply copy the Front layer’s styles and paste them onto the Inner layer. Remember to deactivate the Inner Shadow on the layer Inner, since we don’t need it here.

The current document should look something like this by now:

Well, it doesn’t really look like wood yet, so let’s add some textures to give us a better idea of what we’re going for. Download this free wood floor texture and open it in Photoshop. Hit cmd+a to select all and desaturate the image by hitting cmd+shift+u. Open the Brightness/Contrast dialog and change the parameters like shown below:

This will make sure, the average color of the texture is now 50% grey, which is the best average color for overlaying textures, if you only want to benefit from the structures without changing your current colors.

Select all (cmd+a), copy (cmd+c) and switch back to our original document. Paste (cmd+v) the texture as the top most layer within the WoodenBox group and set its blending mode to Overlay. You might want to name this layer Texture.

We’re a little closer to wood now but still far from being finished. Let’s add some more glossy shading to the edges. Create a new group within the WoodenBox group and name it Highlights. Within this new group, add a new layer named Top_Small. Select the Brush Tool and pick a basic soft brush with a diameter of 10px and a hardness of 0%.

Click the vector mask of the layer named Top to select its path. Open the path window, double click the currently selected path and give it a temporary name. Now, select the latest layer Top_Small and pick the Direct Selection Tool. Right click somewhere inside the stage and click „Stroke Path…“ from the options menu. Make sure „Brush“ is selected in the dialog, then hit OK.

This will outline the path with the soft brush. The color you used doesn’t matter, once you applied layer styles like this:

Create more of these shiny layers using all the three vector paths and different diameters for the brush. Adjust the opacity of those layers to make sure, they don’t add up to much. Next, use layer masks to remove the highlights from certain areas. You might want wider highlights in the corners for example.

Here’s what my preliminary result looks like so far:

We’ll probably have to tweak the shading later, but for now, it’s fine. The way we’ve built up the layers so far will make it easy to change any setting at any time.

Drawing The Grass

Let’s start creating the grass now. We will use a basic Photshop brush named Dune Grass as a starting point and apply a range of custom settings within the Brushes panel. Especially the Color Dynamics section allows us to get a really cool effect, so that almost every blade of grass will have its own individual color and shade:

Don’t forget to hit the „Create new brush“ button in the lower right corner to save this brush for later use.

Create a new group named Grass above the WoodenBox group and use the Rounded Rectangle Tool with a radius of 60px again to create a shape like this:

Name this layer GrassMask, set its fill to 0% and make sure to check and uncheck the Advanced Blending options as follows. It’s very important to set up the Advanced Blending settings like this, so that we can use this layer as some kind of invisible clipping mask.

Next, set the forground color to #72be34 and the background color to #58a120 or whatever shades of green you prefer. Create a new layer, cmd+click the layer Inner from our WoodenBox group and go to Filter->Render->Clouds from the menu to create a background for the grass.
Hit cmd+d to deselect, hold the shift-key and hit the down-arrow twice to move the green area down a little. Now, right-click this layer and hit „Create Clipping Mask“.

Add another layer inside the Grass group and create a clipping mask for it as well. Switch to the Brush Tool, select our customized brush and start drawing the blades of grass from top to bottom.

Repeat this step by adding another layer, again applying the clipping mask, but set the forground and background colors both to white this time. Also set the spacing in the brushes panel to something like 80%. Draw some white blades on the new layer and set its blending mode to overlay. This will add some highlights to the grass and help bringing it to life.

The wooden walls would probably throw some shadows on the grass. Hold the cmd key and click on the GrassMask layer to select its shape. Create a new layer and fill the selected area with any color you like. Open the layer’s styles, set its Fill to 0% and check „Layer Mask Hides Effect“ from the Advanced Blending options. Then apply an Inner Shadow to this layer.

Apply a layer mask to this layer and place a gradient from black to white at the top to smoothly fade out the shadow at the top.

Creatinge The Golf Ball

We’re done with the grass for now, so let’s add the main character of our icon: the golf ball. There are a couple of ways to create a golf ball in Photoshop and you’ll find a range of tutorials on this topic as well. In this post, I’ll show you another way using a 3D sphere with a bump map. To me, this is the best way to go along with.

Create a new layer and go to 3D->New Shape From Layer->Sphere to create the basic sphere. Move it upwards until the sphere’s top reaches the wooden border.

Open the 3D window and select the Sphere Material. There’s a tiny dropdown menu next to the Bump Strength setting. Select „New Texture“ from it and make the texture 2048px by 2048px. You can now open this new texture via the same dropdown menu.

Fill the background with black, create a new layer and fill it with a free hexagon pattern from shapes4free or something similar. In the layer styles, set the overlay color to white and add a strong, white outer glow. Select all (cmd+a), copy merged (cmd+shift+c) and paste on top (cmd+v). Apply a Gaussian Blur so your bump map looks smooth. Here’s what the different steps looked like when I did it:

Hit cmd+s to save your changes and cmd+w to close the map and get back to the original document. You should see the changes immediately, though it propably looks a little weird right now.

To adjust the size of the tiled bump map, select „Edit Properties“ from the Diffuse menu. Play around with the values of „U Scale“ and „V Scale“ until you’re happy with the texturing. I used 0.9 and 0.5.

Still in the 3D window, select „Scene“ at the top and change the Global Ambient Color to #adadad. You can also tweak the shading in detail by editing the individual lights, but for this project, the global lighting might be fine.
Use the 3D Rotate Tool to, well, rotate the golf ball a little bit.

To give the illusion of the ball laying in the grass, add a layer mask to the golf ball, select the brush tool and our custom brush. Set the colors to black, disable the Color Dynamics and draw some blades on the mask at the bottom of the ball. This will make it look like there were some blades hiding the very bottom of the ball.

Something is still wrong with this. It doesn’t really seem like the ball is laying in the grass. We need to work on that. To add a little shadow under the ball, create a layer underneath it, use a round, soft brush and draw a black shadow. You might want to apply some Gaussian Blur and adjust its opacity to fit your needs.

Looks much better now, but there are still some things to work on. Play around with the lights, adjust the material settings and edit the Diffuse Map to place a logo on the ball. Here’s what I ended up with:

To finish the icon off, you might want to go back to the highlights layers within the WoodenBox group and adjust them as needed. I also added some darker areas and more shading by overlaying more rendered clouds.

The Final Image

And that would be the end of this tutorial. We created a modern, highly detailed icon ready for use in your next iOS application or web app. On our way, we covered a range of very interesting techniques including 3D objects, bump maps and custom brushes with dynamic colors. I think the outcome is truly beautiful considering the little effort put into it.

Since this is my  first tutorial ever, I’m very interested in your thoughts on the design and the tutorial itself. Please leave a comment and share this post if you enjoyed it!

One Comment on “Create a trendy, highly detailed app icon in Photoshop

  1. Thanks a lot, Ditscheri. Right now I need a cool app icon and with the help of your tutorial and photoshop I’ll create something amazing …. I hope ;)