Add to Flipboard Magazine.
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.
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.
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.