Advertise here with BSA

A pixel is a single point in a raster image. Computer displays are capable of showing millions of these at a time. So how can one lone pixel have an impact on a web design? It probably can’t. However, if you extend that pixel in one direction, it becomes a line, and in the hands of a masterful designer with an attention for subtle detail, the 1px line is a powerful design element. It can be used in many different ways, but in this article we’re going to take a look at how pixel perfect line work can add depth to a design.

The Light from Above

To effectively create depth, one must understand light sources. A light source creates two things: highlights and shadows. The combination of these two things can make something appear as if it’s coming off the page, since lighter elements appear closer and darker elements appear further away.

A light source can come from any direction, but normally light comes from above. Our brains are even wired to expect this. That’s why it’s a typical practice in web design to use a 1px highlight on the top of an element to make it pop, and a darker 1px line on the bottom as a shadow.

Lines that Make Edges Pop

Icon Dock is a great example of how to effectively use subtle 1px lines to achieve depth. Nick La, the designer and owner of Icon Dock, uses 1px lines all over the place to make various design elements pop. Notice the 1px highlight that runs across the top of the main banner area. This pushes the top away from the background and gives the edge a slightly raised look.

Also notice the 1px highlight lining the bottom of the nav bar. This is a nice touch and amazing attention to detail. It gives the illusion of a slightly reflected highlight, but more importantly it helps separate the dark color of the nav bar from the shadow below. If the line was not there the bottom edge of the bar would blend with the shadow and be lost.

If we look at the bottom of the Icon Dock design we will see that the highlight/shadow combination is completed with the use of a dark 1px shadow that runs along the bottom edge of the content box.

UXBooth uses the same technique to give the green bar separating the header form the content a slightly three dimensional look. Notice the light green line on top and the dark green line along the bottom.

Make Buttons Stand Out

Buttons are another element where this technique can work wonders. Since buttons are meant to be clicked, it helps if they look as if they are raised off the page a bit. The buttons on NOSOTROS use a slightly lighter color than the background that brings it closer to the eye, but it is the 1px border around the buttons that completes the effect and makes the buttons look very clickable.

Michael Dick’s portfolio also uses pixel perfect lines to highlight the edges of the main navigation buttons. What I really love about these lines is the fact that they are broken and worn looking to match the grungy style of the over all design. Whether he did or not, it appears that Michael painstakingly erased random portions of the lines to give it this tattered look. It’s this kind of attention to detail that sets some designs apart from the rest.

1px Lines Can Be Very Groovy

Another technique for creating depth with 1px lines is pairing one light and one dark line right next to one another. This creates the illusion of an inset groove, but the key is the placement of each. As mentioned earlier, our brains are wired to assume the light source is coming from above or the top. Notice here that the dark line on top is representing the shadow cast by the top edge of the groove. The light line represents the highlight created by the bottom edge.

If we reverse the positions of the two lines, we loose our groove. Now it appears to be more of a lip that is casting a shadow.

Now let’s get our groove back and take a look at some sites that use this technique to perfection. Atebits uses grooves to separate content and uses the same technique on the main navigation bar to separate the links. This type of line work looks as if it was laser etched into the surface of the design, which is a perfect fit for the over all style of the site.

Tim Van Damme’s portfolio has grooves everywhere. Along with some gradients, the 1px lines here that make up the grooves give this design lots of depth and makes the big buttons look very clickable.

Advertise here with BSA

Have you ever looked at a web site and immediately been impressed with it’s design? Then you take a closer look and discover what really makes it amazing. It’s the subtle details. Some designers are great at including this in their designs. These types of designers are border line perfectionists and aren’t afraid to make full use of the zoom tool and 1px brush size in Photoshop. In this article, we will look at several ways subtle details are being used in web designs to take them from great…to amazing.

Pixel Perfect Line Work

The designer of Image Spark, used a 1 px line along the top of the nav bar and around the bottom of the search field to make the edges pop. Anytime you have a lighter color next to a dark color, the lighter one will appear closer giving the illusion that there is a raised edge. Notice that the lines are only a few shades lighter than the background color. This is what makes the technique effective. If a white line was used, it would have been overpowering and the effect lost.

A similar technique is being used on atebits, but here it’s used to create dividers. Notice that they are made up of two 1px lines side by side, one dark and one light. This gives the illusion of an inset groove. Another nice touch is how the ends of the lines fade away instead of ending abruptly.

Shadows with Restraint

Shadows are a great way to give a design depth, but when creating shadows, it’s important to not over do it. Photoshop’s drop shadow effect can be a dangerous thing when in the wrong hands. The intensity of a shadow should have a lot to do with the color of the background. A darker background will require a darker shadow, and a lighter background a lighter shadow.

The designer of Fubiz uses a subtle shadow below the nav bar to give the illusion that it is raised off the page.

For fun, let’s see what would happen if the designer went a little crazy with the shadow. Take a look at the image below. The result appears to be quite amateurish.

The official site for the White House has shadows everywhere, but since they are all done subtly, the site maintains a very clean appearance.

Simple Gradients

Gradients are such a simple effect to create. They can be used to achieve various results, such as giving the illusion of a light source or creating depth, but again the key is to keep it subtle. The change in color from one end of the gradient to the other should be minute.

Tapbots uses a simple gradient in the background to make it appear that a light source is illuminating the iPhones. Subtle details like this contribute to pulling the entire design together. In this case, the gradient plays a big role in making the reflections of the iPhones believable.

The tabs on MetaLab each have a gradient fill. This give the illusion of depth and that they are slightly raised. MetaLab is also an excellent example of the pixel perfect detail mentioned above.

Precise Textures

Textures are often used to fill a large area. This is an easy and quick way to add a lot of interest to a design, but textures can also be used in a more precise manner to add multiple layers of subtle details.

Try to overlook the shameless self promotion here. On my portfolio, I used plenty of textures to give it that worn and weathered look. However, instead of just being content with filling the larger areas with texture, I took it a step further and used bits and pieces of texture to add more detail along the edges.

Liam McKay is the master of creating subtle grunge effects in his designs. On his blog, he uses subtle grunge textures that are perfectly placed to accent the content instead of distracting. Notice how even the 1px border lines have a worn look.

Advertise here with BSA

Websites that possess a “subtle grunge” style are some of my favorites. Electric Pulp and Function are excellent examples of this particular style. If you’re wanting to achieve this look in one of your upcoming designs, these textures will come in handy.

psychosomatic texture

textures 66 (6 textures)

Trials and Tribulations

Subtle Grunge 2

Subtle Splat Texture

Subtle Scratches 2

Untitled Texture CXVII

Texture 73

Grungy paper texture v.5

Subtle Grunge Textures (8 textures)

stocktexture4

textures 77 (7 textures)

Advertise here with BSA

Grunge design elements are a great way to give a design a worn and weathered look. Since it’s a popular style in modern web design, there are plenty of resources out there, but sometimes it’s difficult to find the ones that are the highest quality. I’ve taken the time to hand pick what I believe are the best grunge textures and Photoshop brushes out there.

Textures

Grunge II Texture Pack

Grunge Textures

Package – Vintage Grunge – 2

hardcore vintage grunge

Grunge Background Textures

A Little Dirty

Grunge III Texture Pack

Ultimate Grunge Pack: 40 High-Res Textures

Painted Grunge Texture

Brushes

Dumpster Brushes

Grunge Brushes 007

High Res Dirt Brush Set

Grunge brushes

Grunge Ink Splatter Brushes

Grungy Watercolor

Grungy Wings

Grunge Brush Set

grunge brushes 2

grunge brushes

Advertise here with BSA

If there is one thing that is ubiquitous among almost all grunge web designs, it’s having a good quality grunge texture or dirty background image. I’ve created the following 40 grunge textures to help you in the search for that perfect texture for your designs. If you’d like to discover more free, high-res textures come visit LostandTaken.com where I give away textures so rad you’ll be tempted to feel your screen.

For your grunge designs, you might also want to check out 50 Most Extreme Free Grunge Fonts.

Below is a preview of 30 out of 40 of the textures. At the bottom of the post you will find links to download the complete texture pack.

Download Textures 1-20 Zip File

Download Textures 21-40 Zip File

Advertise here with BSA

Grunge style has been popular for a while now, and it doesn’t look like it’s going away anytime soon. So if creating grunge style designs is your thing, then you are in luck. Here are 50 free grunge fonts that should fit almost any of your grungy typographic needs.

Scumbag

Inked God

Soul Mission

VTKS ROCK GARAGE BAND

Black Oak

Ginga Font

Dirty and Classic

Bill Hicks

Panhead

Loserboi Grunge

FT Twisted Ontogenesis

Phat Grunge Bold

Pulse Sans Virgin

Yukon Gold

Broken Ghost

Laundromat 1967

Barber shop

The Last Soundtrack

Charles S.

Caracura

Rough Linen

Akoom

Distorted and Scratchy

Staubiges Vergnügen

Gridlock’d

EpoXY histoRy

Retro Rock Poster

District

Trashco

Bleeding Cowboys

Chicago House_trial Font

28 Days Later

Ascent 2 Stardom

A Bite

Sidewalk

Dead Secretary

Acid Label

TRASHED

Cocaine Sans

Everyday Ghost

Cheap Stealer

HARD ROCK

Chic decay

rusted plastic

UNDECAPPED Vinyl

KILLED DJ

Mohawk

Defused

American Bravado

Heroin 07

Advertise here with BSA

The trend of using texture in web design has been around for a while, but in 2008 it was taken to a new level. Not only were there many beautiful sites launched that made use of textures, but there were also lots of useful texture packs created. I’ve taken the time to sort through them and hand pick the ones that I feel stand out in usefulness and beauty.

Grunge Textures

Christy Sobolewski Textures

vintage grunge textures

color grunge textures

hardcore vintage grunge

Large Paper Grunge Textures

Anatomy of a Dumpster: 12 Textures

rust textures

Grunge II Texture Pack

Old Grunge Photo Texture Pack

Grungy and Dirty Textures

24 Free High-Res Textures

TEXTURES PACK 1

Vintage Textures

15 Old Book Cover Textures

17 More Old Book Cover Textures

Free High-Res Texture Pack: The Anatomy of a *Really* Old Book

Vintage II Texture Pack

Vintage Texture Pack

Vintage Bum

Wood Textures

Textures – Wood

Local Texture: Three by One

Dark Wood Texture Pack

Free Hi Resolution Wood Textures

Fabric Textures

20 Fabric Textures to Dress Up your Design

Free Fabric Texture Pack

Paper and Cardboard Textures

Natural Paper Texture Pack

Cardboard Textures and Objects

Rough Paper Textures

5 Fantastically Free High Res Brown Paper Textures

Free High Resolution Plain and Grunge Paper Textures