Junoteam Logo

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.

woodbox_icon_tut_01

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.

free_app_icon_guideline_from_junoteam_02

iconsgarden, app icon, IOS icon, icon maker, PSD icon, android icon, icon design, icon market, IOS icon market, Free PSD icon, Freebies, icon symbol, create icon, icon art

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.

woodbox_icon_tut_02

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

woodbox_icon_tut_03

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

woodbox_icon_tut_04

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!

woodbox_icon_tut_05

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

woodbox_icon_tut_06

Don’t forget you named the layers.

woodbox_icon_tut_07

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.

woodbox_icon_tut_08

woodbox_icon_tut_09

And paint the Blur layer like this:

woodbox_icon_tut_09b

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

woodbox_icon_tut_09c

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:

woodbox_icon_tut_10

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

woodbox_icon_tut_10b

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

woodbox_icon_tut_10c

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

woodbox_icon_tut_10d

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

woodbox_icon_tut_10e

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

woodbox_icon_tut_10f

Set 6.0 px for the radius

woodbox_icon_tut_10g

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

woodbox_icon_tut_10hh

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

woodbox_icon_tut_11

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

woodbox_icon_tut_12

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

woodbox_icon_tut_14

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

woodbox_icon_tut_15

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.

woodbox_icon_tut_16

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

woodbox_icon_tut_17

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

woodbox_icon_tut_18

Outer Glow with yellow (#fbf7c2)

woodbox_icon_tut_19

Third shape with Rounded Rectangle Tool (U)

woodbox_icon_tut_20

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

woodbox_icon_tut_21a

Add the layer mask to the third layer

woodbox_icon_tut_22b

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

woodbox_icon_tut_23

Create a new layer and apply the wood brush on it

woodbox_icon_tut_24

Duplicated the third layer

woodbox_icon_tut_25

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

woodbox_icon_tut_26

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

woodbox_icon_tut_27b

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

woodbox_icon_tut_28

Paint the new layer like this:

woodbox_icon_tut_29

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

woodbox_icon_tut_30

5. Add stripes to the box

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

woodbox_icon_tut_31

Add Inner Shadow with black color

woodbox_icon_tut_32

Add Drop Shadow with skin color (#fdc8a5)

woodbox_icon_tut_33

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

woodbox_icon_tut_34

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

woodbox_icon_tut_35

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

woodbox_icon_tut_36

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

woodbox_icon_tut_37

Keep doing this step with the other lines

woodbox_icon_tut_38

Do the same with the right side of the lines 

woodbox_icon_tut_39

Righ click to Enable Vector Mask

woodbox_icon_tut_40

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

woodbox_icon_tut_41

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

woodbox_icon_tut_42

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

minecraft_02

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!

Welcome to see the designs by Junoteam on Dribbble and Behance

JOIN OUR MAILING LIST AND GET A FREE DESIGN RESOURCES BUNDLE!

Iconsgarden