Line25

How To Create a Detailed Briefcase Icon in Photoshop

Read the full post

Follow this step by step guide to create a detailed briefcase icon in Photoshop. We’ll build the rough outline with basic shapes, then add depth and definition with various Photoshop layer styles such as Inner Glow and Stroke. To really bring the icon to life we’ll use real photographic textures to give a tactile leather feel to the icon.

Briefcase icon

The icon we’ll be building has that crisp digital appearance popular in icons on the web. The sharp lines really help define what the icon actually depicts, which is important when it’s used at small scales in a web design or web app. What really brings the icon to life is the subtle gradients and textures. These additions don’t stand out when viewing the icon at a whole, but without them the design would appear flat and lifeless. Let’s go through the step by step process of how it’s made in Photoshop.

Many icons nowadays come in a huge range of sizes, anything from 16px right up to 512px. We’ll create a document at 256x256px to build the largest version of the icon.

Start by drawing a Rounded Rectangle onto the canvas. Change the corner radius to 10px and ensure the method is set to Fill Pixels by checking the third icon in the options bar at the top of the screen. Double click the layer to open up the layer styles options. Add a Gradient Overlay spanning from dark to light brown.

Next, add an Inner Glow. Alter the settings so the Blend Mode is Normal, Opacity is 100%, Colour is a lighter brown, Choke is 100% and the size is around 3px.

Finally, add a Stroke using a Size of 2px, aligned to the Inside and a darker brown tone as the fill colour.

Open up a leather texture and scale it down to sit over the icon. CMD-Click (CTRL-Click for Windows) on the thumbnail of the icon layer to load the selection, then use the shortcut CMD-Shift-I to inverse the selection. Delete out the excess to trim down the texture to the confines of the icon.

Change the blending mode of the texture to Soft Light to allow the brown gradient to show through, then go to Filer > Sharpen > Sharpen to bring out the details of the texture.

On a new layer draw another rounded rectangle, this time with a 5px corner radius. Make a selection with the marquee tool and trim the rectangle down to leave a straight bottom edge.

Right click on the layer containing the lower portion of the briefcase and select Copy Layer Style. Then right click on this new rectangle and select Paste Layer Style to duplicate the effects.

Paste in another copy of the leather texture, scale down and trim to size to match the upper portion of the briefcase to the lower half.

Draw a thin rectangle in the centre to represent a buckle strap. Add the same layer style, but also give it a subtle Drop Shadow to add a touch more depth.

Use the marquee tool to draw a simple square. Set the Eraser tool to Pencil mode at 1px and clip the lower two corners, but leave a straight top edge.

Double click this layer and begin adding similar layer styles to build up the effect of a metal lock. Use similar Inner Glow, Stroke and Gradient Overlay options but with grey tones as opposed to brown.

Draw a few extra details on a new layer using a mixture of the Pencil tool and layer style effects to create a keyhole.

Add a simple and subtle texture to the lock mechanism by filling a new layer with noise (Filter > Noise > Add Noise). Set this layer to Soft Light and reduce the opacity to around 50%.

Use the same metal layer style to create two handle mounts on the upper edge of the briefcase. Start with basic squares, notch the corners with a 1px Eraser, then trim them down to fit flush with the briefcase lid.

To create a handle, draw and fill an ellipse on a new layer. Then draw a slightly smaller ellipse selection and delete out the centre. Use rectangular marquee selections to trim down any excess to leave a semi-circular handle between the two mounts.

To finish the icon off, add a subtle shadow. Begin with a tiny radial gradient then squash it vertically.

Make a selection across half of the radial gradient and move this into position on the opposite side. Fill out the centre area by making a tiny selection of the gradient, then transform and stretch it horizontally.

Briefcase icon

Toggle off the background layer and export the design as a PNG-24 with transparency making it ready for use in your next web project. All that’s left is to create the design in the various other icon sizes. Simply scaling down the icon will blur the lines and lose the detail, so the best option is to follow the same steps but on a smaller canvas size.

Download the PSD icon file

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://www.designbeep.com Arshad Cini

    Thanks for the tutorial Chris..

    Good for beginners

  • http://www.alan-horne.com/blog Alan

    Good and simple tutorial Chris, great work!

  • http://twitter.com/vincentveri Vincent Veri

    That's cool. Thanks

  • http://www.fourteenfortyone.com Aldrin

    Great tutorial Chris! Keep up the good work :)

  • http://webdesigners.ca/ Web Designers

    great tutorial, thanks for the info

  • http://laroouse.com esranull

    awesome tuts thanks a lot

  • http://www.studiorepublic.com Alec

    nice tutorial, much appreciated… do you have any on how to create navigation bars in photoshop for dreamweaver?

  • http://www.adrice.co.uk Adie

    Nice tutorial,

    lovely little detailed icon that

  • AJ Barayuga

    Nice stuff…the texture looks fantastic!

  • http://www.alongthelake.com James

    easy follow tutorial. :) I like your wordpress tips post. It improve my wp knowledge.

  • http://www.macroblu.com/what_we_do.php Graphic Design Toronto

    tutorial is really wonderful. .It is interesting and helpful. Good luck

  • John

    Here is how you do the same thing in illustrator in case anyone is wondering.

    http://vectips.com/tutorials/create-a-briefcase-icon/

  • http://moltee.com Reece

    Very nice tutorial, Great result

  • http://www.cruzine.com oliver

    Nice tutorial, thanks for this :)

    The Best Text Decoration Tutorials on the Web – http://www.cruzine.com/2010/07/30/text-decoration-tutorials/

  • http://alalle.wordpress.com al

    Nice briefcase,
    here's my version made in Adobe Fireworks.
    http://alalle.wordpress.com/2010/09/25/fireworks-briefcase/

    Greetz
    Al

  • http://www.tulsawebdesignz.com Tulsa Web Design

    Thanks for the tutorial Chris. Can this same briefcase design be done using Gimp (rather than Photoshop)?

    -Daniel

  • http://finkaboutit.com FinkAboutIt

    Cool Stuff! Worked perfectly.

  • Valentine

    I didn't like the part with working without vectors…
    Isn't it better to just use vector shapes and then resize it all we want without loosing any detail? (well except for the textures, but still, it's a lot easier to change a texture rather than make a new briefcase every time you need a new size)