Wood box app icon tutorial

As designers, we know that a successful icon will attract more consumers to download or purchase the apps or games. In this tutorial, we’ll use Photoshop to explain how to make a cool wood box app icon which you can use for many apps or games.

1. Create a new document

We will be designing our icon at 1024×1024 px (For IOS) but feel free to design yours at 512×512 px (For android). Since this is going to be used on-screen, we must set the color mode to RGB (not CMYK for printing) and the resolution to 72 px, named the design “Wood_box_app_icon” then click OK. You can check an image bellow for reference.

Or you can download our own app icon guideline to design yours. We would like to share this great guideline to you guys, please find the download link by clicking on the image below.

2. Draw the first shape for a box background

If you have downloaded our app icon guideline, please open the PSD file and rename the group to “Wood_box” maybe.

You should remove the symbol layer and create a new group and named it “Design”

Double-click on the background layer, choose Gradient Overlay and fill with a brown from (#833a14) to (#ca6911)

Let’s turn off the guideline for a while, download the free wood brush here and apply on the background layer. Please set your own opacity for the best result!

Keep applying the different wood brush shapes until the background looks good.

Don’t forget you named the layers.

Next, create a new layer named “Blur” use the brush tool with 275 px size, 80% opacity, 80% flow, yellow color (#eeaf58). Please notice that you can set your own parameter for the best result.

And paint the Blur layer like this:

Keep painting until you have a result like an image bellow and group these four layers, named it “Wooden Texture”

3. Create the details inside the wood box

Use the Line tool (U) to create a line with dark brown color (#2c1101) shape like this:

Set 20% opacity for the guideline so you can see everything clearer.

Command-J seven times and arrange the lines like an image below. Group them all and named “Lines”

Create a new line with white color, place it under the brown line

Double-click the while line layer and click on “Convert to Smart Object”

On a top menu bar, chose Fllter/ Blur/ Gaussian Blur

Set 6.0 px for the radius

Move the shape under the Lines group and set 40% for the opacity

Keep doing until you have a result like an image below, and don’t forget to group them

4. Add depth to the box

Create a new group named “Depth”, make a new shape using the Rounded Rectangle Tool (U) with radius corner is 180 px

Double-click on the layer to open Blending Options, choose Gradient Overlay with a brown from (#974e1a) to (#481e00) and the other parameters below

Next, choose Outer Glow with light brown (#d18744)

Again, with the Rounded Rectangle Tool (U) draw the same shape but make it smaller than the first wood shape which fit with the guideline.

In Blending Option, choose Gradient Overlay with a brown from (#27140c), (#624539) to (#5d311e), set 120 for the angle

Select the Inner Shadow and fill it with very dark brown (#2e1103)

Outer Glow with yellow (#fbf7c2)

Third shape with Rounded Rectangle Tool (U)

Choose Gradient Overlay with a brown from (#753410), (#cc6f2a) to (#6d2e0c) and 135 for the angle

Add the layer mask to the third layer

use the brush tool with black color, 200 px size, 70% opacity, and 80% flow to paint the mask

Create a new layer and apply the wood brush on it

Duplicated the third layer

Move the rounded rectangle shape from the third layer to the fourth layer so it’ll cover the unnecessary wood brush, then remove the fourth layer

Follow the process, you’ll have a result like this:

Create a new layer and choose Brush Tool (B) with dark brown color (#271107), size: 200 px, opacity: 50% and flow: 50%

Paint the new layer like this:

Then we have the blurred border like this, please group these 5 layers and named the group “Bottom”

5. Add stripes to the box

Use Line Tool (U) with dark brown color (#5c3117) to create the line below

Add Inner Shadow with black color

Add Drop Shadow with skin color (#fdc8a5)

Then Command-J that layer three times to create the other lines and group these four lines named it “Lines”

Now, let’s create mask for “Lines” group

Sellect Brush Tool (B) with black color, size: 200 px, opacity: 100% and flow: 60%

Then paint the mask to hide the left side of the lines

Keep doing this step with the other lines

Do the same with the right side of the lines 

Righ click to Enable Vector Mask

Then you’ll see how it looks with IOS round corner

6. Create your own symbol inside the box

Now you can create your own app icon by applying the main symbol inside, don’t forget to turn on our guideline

We use this wood box to contain the pickaxe for Minecraft game app icon.

Minecraft app icon design by Anh Le, Junoteam.

You can now create a variety of wood box using all the techniques you learned in this tutorial. We all hope to see your app icon so drop us a message with your icon. Have fun and continue creating art!