Grunge design elements are one of the most popular trends in modern site design. Knowing how to create grunge elements can be a useful tool in any designer's tool belt.
For perhaps a decade, designers have frequently traded sleek and shinny web elements for visuals that include natural or industrial textures, worn edges, aged colors, and even stains or tears. This worn and used look is perhaps a very simple way to describe the grunge motif, which actually grew out of a musical movement (the Seattle sound) from the mid-80s.
In this tutorial, I will show you how to create several grunge design elements in Adobe Photoshop CS4.
To begin, I will show you how to load custom, commercial, free brushes (meaning that you can use them in your ecommerce designs) to aid in the creation of grunge elements. I will then show you how to set up a grunge background using the newly imported brushes.
With the background in place, I will show you how to create a grunge feel to both a sample content area and menu bar by adding paint splatter brushes to their edges. I will also show you how the same grunge brushes can be used to add a texture to any design element.
Next, I will show you how to create a custom link area by modifying one of the brush shapes with the Free Transform tool. I will also show you how to create a unique header, similar to one on the Von Dutch website, using multiple paint splatter brushes.
Finally, I will show you how to create a custom grunge font that does not contain any repeating patterns. By using a large, bold font and many grunge brushes, I will show you how to set up the foundation for the custom grunge font. And, I will show you how to use the same grunge brushes with the Eraser tool to create additional distresses along the font.
By the end of this tutorial, you should have a better understanding of some of the techniques that can be used to create grunge elements in Adobe Photoshop CS4.
