5 Pixel Exploded Techniques

admin Posted on 03. Apr, 2009 | Comment in!

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

pixels-title

In this tutorial, I will demonstrate you 5 great behavior to really make your pixels explode in layout and interface design using Photoshop. These necessary techniques will really give your designs a more 3D, substantial feel to them!
I refer to these techniques as “Pixel-Exploded” because they tend to use very few extra pixels (than you would ordinarily use in a design) to make your graphics explode out a bit more. As cliche as it may sound, these diverse effects really do work, and many modern websites and designs use them regularly.

Let’s take a look at a few:

5 Different Effects that really help your pixels “Pop”!

The 2 Pixel Divide

2 Pixel Divide Example

The two pixel divide is a widely used effect on interface design, and layout design. Some quick examples would be Windows Media Player (Version 11), Pixel2Life.com, and 2Advanced.net. It’s a very subtle effect (as most effects should be), so you might not knowingly take note of it. However, the results from it are usually great when used responsibly.

It’s very easy to accomplish, and only takes Two Pixels to really make it.

Start out with a simple design, such as a header for a website, with a navigation bar underneath:

Website Header without a 2px Divide

Now, Zoom In (Ctrl + “+”) to a close level where you can really start to work with single pixels. Select your Pencil Tool from the tool bar, and select a Foreground Color of White. In a New Layer, draw a horizontal line dividing the banner from the menu (Hold Shift to draw perfect lines).

1px Divider

Create another new layer, and using a Foreground Color of Black, repeat this process directly above the white divider.

2 Pixel Divider taking form

That’s it! After this, I usually lower the opacity on both of these new layers until I find desirable results that don’t conflict with the surrounding elements too much.

With and Without the Divide Example

The Pixel Shadow

I like to use this effect when I’m working with text or simple designs on top of soft backgrounds. Again, it’s nothing extravagant, but it gives me that extra flare I’m looking for sometimes.

Let’s say I’m working with the document shown below. Adding an ordinary Drop Shadow is going to give the shape and text a very soft shadow, which is not what I’m looking for. However, I do want it to pop out a bit more.

An Example with no shadow

What I do instead is add a Very Hard Drop Shadow.

I’m going to go into the layers blending options (Right click the layer, “Blending Options”). From here I’m going to Add a Drop Shadow, and then set it up so that the Size is set to “0″, and the Distance is set to”1px”. Click Ok to apply blending options.

Document with a 1px shadow added

Much Better!

The Pixel Bevel

It’s usually safe to stray away from using the Bevel Blending option in modern layout design, but if used carefully, it can actually be used for good. Take the document below for example.

Document with no bevel

The orange box has a soft gradient, and even a drop shadow applied to it to give it a little more “Pop”, but it still seems a bit bland.

To fix this, I’m going to go into the Blending Options for the Orange Box Layer, and Add a slight “Bevel and Emboss”.

Blending Options for the Bevel

As you can see in the options, I’ve set the size to “0px”, and have adjusted the angle to 90* (to give the effect of a light source from above).

1px Bevel Example

The Result is a box with a lot more depth in it’s appearance!

The Shadow Highlight

Here is another technique that might slip past you on first glance, but makes all the difference in a good design. It’s similar to the 2px divide in that it’s a very subtle, but also effective technique.

Not to mention it’s just as simple.

Take this document for example:

Shadow without a highlight

As you can see directly underneath the “Box Header” Black box, I have a slight Drop Shadow. It doesn’t give us a whole lot of “Pop”, but it’s a start.

We’re going to do the same thing that we did for the 2 Pixel Divide essentially.

Zoom In to about 400%-800%, and using the Pencil Tool (White Foreground) on a New Layer, draw a horizontal line at the very top of the Drop Shadow.

Shadow Highlight Pixel

Now just adjust the opacity of this line to blend nicely with the rest of the design. You should end up with a nice separator between the header and the content area (where the shadow begins).

Completed Shadow Highlight

The Vista Effect

Vista Effect Example

I’ve gone into great detail for this effect in my “Vista Window Effect Tutorial“, but I thought that it was nice enough of an effect to at least mention here.

The effect used in Windows Vista’s Aero Theme (for their “Windows” more specifically), uses a combination of different blending options, including “Bevel and Emboss“, “Outer Glow“, “Drop Shadow”, “Inner Glow“, and even “Color Overlay“.

Furthermore, the effect is really set up into 3 parts. You have the Main Window, the Inner Window, and the Extra Parts (The Exit symbol and Window Title).

Windows Vista Window Design Components

You’re welcome to explore this effect using this PSD (Vista Example) if you’d like (We’ve got an even better PSD example on our Vista Window Effect Tutorial page).