May 11, 2009
drawingclouds
39 Comments

Create an Adobe Box Icon in Photoshop

Tutorial #07

Mini Preview

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 Preview

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

Step 1

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.

Step 2
Make a rectangle of about 720x440px 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 2

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
Step 3

Step 3

Top Layer
Step 3

Step 3

Step 3
Step 4 – Front Stripe
Select the Rectangle Tool again and draw a stripe in the middle of the box, name the layer Front Stripe. Next right click on the layer in the layer box and select rasterize. 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 with the selection still active and create a layer mask, Layer – Layer Mask – Reveal Selection.

Step 4

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.

Step 4

Step 4

Step 4

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

Step 4

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 4

Step 4

Step 4

Step 4

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 5

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 6

Step 6

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 7
Step 8 – Duct 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 duct tape layers. Regroup all these layers in a new group named Duct Tape.
Step 8
Step 8
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.
Step 9
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.

Step 9

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 9

Step 9

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:

PSD File

Become expert web designer with testking and learn all about web design art using testking ccna guide and testking ccie photoshop tutorials.

Similar Articles:
Create a Frilly 2009 Typo
Create a Retro is Future Poster in Photoshop
Create a Download Icon in Photoshop
Create a Dock Icon Folder in Photoshop
Create a Colorfull Pastel Typo in Photoshop
Create an Origami Swan Logo in Photoshop

 

39 Comments

Leave a comment