Create an Adobe Box Icon in Photoshop

17 avr 2009

Tutorial #07

Create an Adobe box Icon in Photoshop, to fill your dock with new icons. Learn techniques on brushes, blur, layer mask and blend modes.

A few weeks ago, I did a tutorial to make a folder icon, I’m not really an icon designer but I love dock so I thought this little box box could be interesting to make. The tutorial is inspired from the original install icon of adobe illustrator and from a dock icon made by http://noove.deviantart.com/

Final Image Preview

Step 1 – The Inevitable New Document
Open photoshop and create a new document, mine is 1000×1000px with a white background.

Step 2 – Front and Top
In this step we’ll make the front and top of the box, select the rectangle tool make sure you’ve got those options selected.

Make a rectangle of about 720×440px name the layer Front, duplicate that layer and name the new one Top. Place it on top of the original rectangle then select the Free Transform Tool Ctrl+T, reduce the Height to 30% and place back the rectangle on top of the original one. Go to Edit – Transform – Perspective and move one the top corner inside till you have a box shape.

Step 3 – Layer Styles for the Rectangles
Add a Gradient Overlay to both Front and Top layers, go to Layer – Layer Style – Gradient Overlay or double click on the layer and enter these values:

Front Layer

Top Layer

Step 4 – Front Stripe
Select the Rectangle Tool again and draw a stripe in the middle of the box, name the layer Front Stripe. Then make a selection of the Front layer by doing Ctrl+Left Click on the little thumbnail in the layer panel and when you’ve got the selection go back on the Front Stripe layer. Go to Select – Invert Selection and press delete.

Add a Gradient Overlay and Drop Shadow layer style to the Front Stripe layer like we did in the previous step, Layer – Layer Style – Gradient Overlay, Layer – Layer Style – Drop Shadow.

Now let’s create a glow on the stripe, select the Pen Tool (P) with these options.

Draw a curved shape on the stripe, when you like the shape, go on the Front Stripe layer make a selection of the stripe shape by doing Ctrl+Left click on the little preview in the layer panel, then go back on the curved shape layer we just created and create a layer mask, Layer – Layer Mask – Reveal Selection. Name the curved glow layer Soft Curves. Then add a Gradient Overlay layer style to it, Lower the opacity to 10% and the fill to 0%.

Step 5 – Text
ASelect the Text Tool, write what you want, I’ve just put Ai in white with a font called Qlassik Bold, you can download it http://www.dafont.com/qlassik.font. create a new group name it Front Stripe and drag the Front Stripe, Soft Curves and Text layers in it, place it between the Front and Top Layers.

Step 6 – Shadow
We’re going to add some shadow to the box, create a new layer and select the Rectangular Marquee Tool, make a selection a the bottom of the box, fill it with black and deselect it Ctrl+D. Apply the Gaussian Blur Filter on the layer, Filter – Blur – Gaussian Blur with about 4px. Name the layer Shadow, drag the layer between the Front and Background layers.

Step 7 – Opening
Create a new layer, select the Rectangular Marquee Tool then create a selection of about 2-3 px on top of the Front of the box, fill the selection with black on the same layer make an other selection of 1px and fill it with #b59965 colour. Then with the Erase Tool and a big soft brush erase both sides till it give you the effect of an opened box. Name the layer Opening, you can also use a layer mask to erase the parts you don’t want.

Step 8 – Duck Tape
Create a black line on a new layer in the middle of the top part of the box then select the Rectangular Tool and create a white stripe on the top, select the Free Transform Tool Ctrl+T and right click select Perspective then pull one top corner inside. Duplicate that layer and place the shape under, with the Erase Tool and a small brush delete some parts to give a torn effect. Lower the opacity of the line layer to 50% and 40% for the duck tape layers. Regroup all these layers in a new group named Duck Tape.

Step 9 – Glow and Light
Create a new layer, name it Soft Light. Pick the Brush Tool (B) with a big soft rounded brush and white color paint on the top part of the box, put 50% for the opacity and place the layer under the Opening layer.

Create a new layer, name it Top Glow. Make a selection of the Top layer and take the Ellipse Marquee Tool with those options on top.

Make an oval selection; it should erase a part of your original selection. Fill the selection with white and lower the opacity of the layer to 15%.

Step 10 – Saving
To save the box icon for your dock, hide the background layer so your background is transparent then save the file as a PNG file so it keeps the transparency.

I hope you liked the tutorial, you can replace the orange stripe by any color, logo or image and create a lot of different boxes. For any questions or problems on the tutorial leave me a comment. You can download the PSD source file: