Oct

Grunge Style In Web Design:Tutorial, Showcases and Resources

font, Grunge, showcase, Tutorial, web design

Texture Screenshot
Most design trends come unexpectedly, evolve over time, become pointless and finally disappear from the design landscape. This holds particularly for web design, which is — just as every other creative field — prone for over-hyping and over-usage of trends. Being used excessively (sometimes properly, but mostly without any reasonable purpose), trends lose their ability to communicate information, express something unique or innovative and consequently lose their visual appeal.

Examples of Grunge Style

Grunge doesn’t necessarily stand for dirty. Grunge designs may have subtle dirty elements, providing the content with the dominant position it deserves. Let’s take a look at some examples how it might look like. All screenshots are linked and lead to the sites from which they have been taken.

Web 2.0 meets Grunge.

Notice the clear, rigid structure of the site blocks, supported by the grunge style.

Visually appealing design with grunge elements.

Not that visually appealing, however unique and unusual. Wood in use.

Grunge can be used not only in personal web-sites, but also in galleries and blogs.

Grungy Free Fonts

5 Excellent Free Grunge Fonts
A selection of free “grunge” or “eroded” typefaces.

Bleeding Cowboys Font
Free for personal use. PC / Mac OS X.

Grungy Icons

Stretched, torn and dirty: grunge icons at its best. They don’t necessarily fit to all designs, however it’s nice to have them ready to hand once you might need them.

RSS Grunge Icons
A set with Feed-Icons in blue, red and green. Sizes: 128 x 128, 64 x 64 and 32 x 32 px. In .png-format. One of the icons has an ornament embedded into it — you can see it in the right hand side of the screenshot.

Grungy Olive Icons
This set by designed by Dryicons fits not only to grungy cloth and weapons. 28 icons in the .png-format. 16 x 16, 24 x 24, 32 x 32, 48 x 48 and 128 x 128 px. Released under the Creative Commons Attribution 3.0 license. You can do with them almost everything you might ever need to.

Grungy Asphalt Icons
Another set, in a different color.

Litho System
A bright and well-worn system replacement icon set. This collection contains 99 individual icons with large resources for Vista & Leopard.

Grungy Textures

The Best Textures Flickr Group offers excellent textures, among them also pretty colorful grunge textures. More than 900 images offered in a variety of sizes.

Texture Screenshot

Torley Textures presents 11 sets with quite impressive images in the size 512×512 — available in the .png-format.

DeviantArt: Textures is probably one of the largest sources for textures. For instance you can find excellent textures by searching for rust, grunge or wood. The choice is enormous, so you better take a portion of patience with you: advertisements are annoying, but the search is worth it.

Example: Flaky Old Gold

W-Enter Textures
Three excellent collections of grungy textures. Preview (links on that page don’t work, use this link to download the textures)

Textures Download
A number of textures: walls, dirty, wood, graffiti, metal, plastic, stone, sand and cloth. Feel free to use these (mostly dirty) textures for any project, personal or professional. Click any thumbnail and use your mouse to “save image as…”

Garden Grunge Macro Photos
This is what the photographer Neil Creek explored in his garden under the macro-objective.

Urbandirty collects the dirty of cities. Virtually, of course, in form of textures. No, this is not beautiful, but real. The collection includes 291 photos in three sizes. Released under the Creative Commons License.

Free Grunge textures from TextureKing
A growing collection of grungy textures, available for free download. 319 textures.

10 Grunge, Rusty and Dirty Tileable Textures
This is a collection of ten 1000×1000 pixels seamless textures. These textures were created using Filter Forge plugin. And they are free.

Grunge Textures
Craig Jewells texture set contains 211 photos on Flickr. Different themes: rock, wood, rust, floors and more.

24 Free High-Res Textures
By Bittbox. There is also a set of Photoshop brushes made from these grungy textures. There are 12 brushes in the set, and they are all 2500px. Available for CS3, CS1, and in PNG formats.

Grunge Textures
Huge choice, (mostly) high quality. For instance in categories Asphalt, Brick, Concrete, Drains, Vents, & Grates, Graffiti & Vandalism, Metal, Mud, Clay & Earth, Old Machinery, Paper & Cardboard, Peeling Paint, Rusted Metal, Spills & Splatter, Stone, Trash & Garbage and Wood Textures. Hotlist displays the most popular textures.

Grungy Brushes, Corners etc.Jenn B’s Typographic Grunge Brushes
A random collection of grungy, decayed typographic brushes. Texture Screenshot
Grunge Brushes
Photoshop set.

50 Free Vector Grunge Corners
Formats: AI, EPS, SVG, PNG, Ill8. Source grunge is also included to let you play around with.

RisingSun Brushes
This set contains brushes of the size 1280×1024px.

Grunge Brushes
Photoshop set.

Dumpster Brushes
8 Photoshop brushes created from photos of old dumpsters. All brushes are over 800px.

Vector Ink & Paint Splatters
Vector images that would make a niece background touch or even a nice finishing touch to top off a grungy piece of art.

XiconTexturesX
15 icon with two large scratchy / grungy textures in .pat (Photoshop Patterns Format).

Grungy Tutorials
Grunge Photoshop Tutorials
An overview of grungy Adobe Photoshop tutorials.

Grungy Cover Design Tutorial
Learn how to create a nice grungy cover design with grungy textures.