Illustrating a Business Briefcase in Windows 7 Style

by Kahlil Gibran

January 26, 2010 in Tutorials

The new O.S. Windows 7 has improved aesthetics to make the user interface at least more appealing. There are huge ultra detailed icons for folders, devices and so on. This time we will use Illustrator CS4 to create a nice briefcase with the Windows 7 style. You need only a few basics on how to copy, paste, rotate, scale and color the shapes. Let’s focus on business.

Illustrating a Business Briefcase in Windows 7 Style

Step 1:

Start selecting the Rounded Rectangle Tool (fig. A) and make a single left click on the art board to bring the Rounded Rectangle options configuration window appear. Use 16 px. for corner radius (fig. B) and press Accept. Then left click and drag to draw a shape as shown.

Illustrating a Business Briefcase in Windows 7 Style

Step 2:

Take a look of the main axes (fig. B) that give a sensation of perspective. We will now transform the first rounded rectangle by selecting the Shear tool (fig. A) from the Tools Panel and drag the right side downwards. Also notice that the left side is just a bit smaller than the right one. This can be done by pressing E (Free Transform Tool) and dragging a corner while holding Ctrl after clicking.

Illustrating a Business Briefcase in Windows 7 Style

Step 3:

Now prepare a smooth curve which will be reused in Step 12. First, select the Line Segment Tool and draw a horizontal line. Take that line and apply the Zig Zag effect from the Effects Menu – Distort & Transform (fig. A) and apply the configuration shown in the picture. After that, press – (minus) or select the Delete Anchor Point Tool and delete some of the points (fig. B) in order to get a single curve and shear it just like you previously did in step 2. You should have now a line like in fig. C.

Illustrating a Business Briefcase in Windows 7 Style

Step 4:

Now rotate a copy of that line and place it over the first rectangle done in step 1 as shown in fig A, select both element and apply the Pathfinder – Divide operation to cut them, ungroup the results and delete the hole. Now copy the new shape (fig. B), place it behind the former one, add an intersecting line in the upper left corner, an intersecting rectangle in that same corner and an ellipse in the bottom right corner. Select all and Divide, delete unnecessary parts so that at the end you get the side shape of the briefcase (step 5).

Illustrating a Business Briefcase in Windows 7 Style

Step 5:

Duplicate the front side of the briefcase (step 3) and press E (Free Distort tool) like in step 1 to deform it from both bottom corners.

Illustrating a Business Briefcase in Windows 7 Style

Step 6:

Make a grid with the Rectangular Grid Tool and apply the settings shown in the picture. Rotate it a bit and apply a distortion (Object – Envelope Distort – Make with Warp  or Alt+Shift+Ctrl+W). Use the arch distortion so that you get a set of curved lines as you can see in the picture. Finally, convert the grid from line to shapes with the Object – Expand Appearance command and cut them with the base shape.

Illustrating a Business Briefcase in Windows 7 Style

Step 7:

Use the same procedure above to make the stripes for the right side of the briefcase. Note that this time we will not use a Warp Distort but a Free Distort because we need to simulate perspective.

Illustrating a Business Briefcase in Windows 7 Style

Step 8:

Prepare a decorative stripe under the lines of the front side by duplicating and cutting the shape of step 5. Apply a linear fill with whites and light grays as shown in the picture.

Illustrating a Business Briefcase in Windows 7 Style

Step 9:

With the Pen Tool draw a small black shape in the upper right corner and press U to pick the Mesh Tool and single click in the middle of the shape to make a color point. Select that center point with the Direct Selection Tool (key A) and color it with white. Set the transparency of that shape to Screen so that blacks become transparent and whites convert into a shine.

Illustrating a Business Briefcase in Windows 7 Style

Step 10:

Prepare a contour line for the division of the briefcase by using a copy of the side shape (steps 4 and 3), make it black as in fig. A and duplicate it, apply Object – Expand – Expand Lines to convert the lines into shapes and fill them with linear black and white gradient like in fig. B and set the opacity to Screen as in step 9.

Illustrating a Business Briefcase in Windows 7 Style

Step 11:

Make another set of shine lines (as in step 10, part B) for the front edges of the briefcase.

Illustrating a Business Briefcase in Windows 7 Style

Step 12:

Now use a copy of the shape from step 2 to apply a mesh gradient as in step 9. Note how many points you should click and which ones are white. Set the transparency to Screen.

Illustrating a Business Briefcase in Windows 7 Style

Step 13:

Using the first curved line (step 3) several times to make the handle of the briefcase. From A to B in the picture, use a copy of the line and convert it to a shape. Note that in each step the weight of each line is different so that we can give the impression of volume. In fig. B we add a tiny rectangle to make the end side of the handle.

Illustrating a Business Briefcase in Windows 7 Style

Step 14:

As in step 10, part B; add some extra shines to the upper and right front side of the briefcase. We are almost done.

Illustrating a Business Briefcase in Windows 7 Style

Step 15:

To make the lock, prepare a simple shape out from a circle and a rounded rectangle, using the Divide command (step 4) and add some shines with the same procedure of steps 10 and 14.

Illustrating a Business Briefcase in Windows 7 Style

Step 16:

This last part is also the easiest one. The front plaque can be made from a rounded rectangle with gradient fill as shown in the picture. Make the front part, the back part and add a shine to finish the plaque.

The End Result:

Illustrating a Business Briefcase in Windows 7 Style

About the Author:

Kahlil Gibran and the IconShock team want to teach you how to make great professional designs an icon sets.

Powered by Shutterstock

About Kahlil Gibran

  • Tom Ross

    Jan 26th

    Nice amount of detail, but the final result looks pretty fake. Also I’d quite like to see a final image at the bottom of the post, it feels a little incomplete ending on the plaque close up.

  • Andrea Austoni

    Jan 27th

    I’m not a fan of the line pattern. Is that how Win 7 icons look? ANother reason to stay away from it. This yera I’m switching to the Mac, I’ve had it with Windows.

    I feel forced to link to my Briefcase tutorial on Psdtuts:

    http://psd.tutsplus.com/tutorials/icon-design/create-a-leather-textured-realistic-briefcase-icon/

    Juat an innocent plug.
    Keep up the good work.

  • Morten FC

    Jan 27th

    Nice tutorial. And Tom, I don’t think it’s supposed to look real. It’s supposed to look like a detailed icon, which I think it succeeds in doing. But yeah, a final image in the end is probably a good idea

  • Steven Snell

    Jan 27th

    Thanks for suggestions. I’ve added the final image at the end of the post.

    Tom,
    When used at a typical icon size I don’t think it looks fake. It’s probably not going to be used at the size that it’s shown in the post.

  • Tutorijali HDonWEB

    Jan 29th

    Great post :-)

  • vuitton

    Aug 8th

    Great post :-)

  • Mark

    Aug 10th

    Very nice! Hope to see more W7 related illustrations!

  • Leave a Comment

    Your email address will not be published. Required fields are marked *