In this tutorial, I will show you 5 great ways to really make your pixels pop in layout and interface design using Photoshop. These essential techniques will really give your designs a more 3D, tangible feel to them!
I refer to these techniques as “Pixel-Poppers” because they tend to use very few extra pixels (than you would ordinarily use in a design) to make your graphics pop out a bit more. As cliche as it may sound, these different effects really do work, and many modern websites and designs use them regularly.
Let’s take a look at a few:
The 2 Pixel Divide
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:
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).
Create another new layer, and using a Foreground Color of Black, repeat this process directly above the white divider.
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.
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.
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.
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.
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”.
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).
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:
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.
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).
The Vista Effect
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).
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).
So, What Makes your Pixels “Pop”?
Hopefully this tutorial demonstrated that you don’t really need some advanced effect to make your designs stand out. Sometimes, 1 pixel can make all the difference in a layouts success. Every Pixel Counts!
Keep your designs simple, and use effects responsibly!
Also, be sure to check out our other great Photoshop Tutorials if you enjoyed this article!
Vista Window Effect Photoshop Tutorial
3D Pixel Stretch Effects
Layer Styles in Photoshop
Text Effect Quickies: Bubble Text
Nice tutorial, thanks ^^
Great tutorial. Some simply yet highly useful effects that everyone can find a use for.
ive used the 2 pixel one for what seems like an age, the vista is my fave though
Great tutorial, the shadow highlight is the best.
Awesome! ^.^
I’ll be back for more handy tips like such!
This is great! Can’t wait for more, my brain desires the input >.<
This is awesome. I can’t wait to apply this to my current projects. Thanks so much for writing such great tuts. Hope you enjoy the coffee.
Thanks Amy! You’re actually the very first person to make a donation to the Tutorial9 project, and I will definitely be enjoying a nice coffee at the local shop this evening!
Nice tips about what makes pixel pop. It’s also kind of a web 2.0 technique. Was fun reading, thanks!
(stumbled)
Dude!! u should make a tut on how to make the content box shown in Shadow Highlight!! What font did you use?
excellent, effective techniques =] great post!!
@ Umang - Myriad I think…
@ Dan - Thanks mate! Hope you’ll stick around for more!
Much props!
Good article, very useful!
Very useful!
Thanks!
Lovely!! Funny thing is that I’ve just been learning the effect of a one or two pixel line and how much of a difference it makes! Thank you for this tut. It gives me more tools in my toolbelt to work with.
Great work dude !!! You should also make some tutorials on how you make those wonderful thumbnails for each tutorial.
Again . Thanks a lot …!!!
Thats some great article! Do make more in the future!
excellent, good technique
Hey i love all your tutorials but i was wondering any chance maybe a tutorial on how to make them awsome clouds ?
Very interesting and most informative.
@ richard - It’s actually very simple, but I’ll try to write a quick tutorial sometime soon that demonstrates how I built the Tutorial9 Logo.
@ everyone else - Thanks & hope you really enjoyed the article!
Dave,
What a fantastic article! I think a lot of times people don’t look at the small things to really make things, well, as you stated, pop!
I really got my start in programming and am still rather knew to graphic design, and I think the day I started to really pay attention to the details is when it was like “wow, that does look pretty good!”.
The site is coming along great!
I have been looking for this for months and as a new designer I want to catch up with the times quickly. I am very glad you have these tutorials, specifically I have been looking for the 2pixel dividers. Thanks for the resources.
Great article! Im going to link to it from my blog.
I’ve always been a fan of the two-pixel divide myself.
I love that these techniques are so subtle and yet that make a major difference to the overall look and fell of a site. Thanks for sharing
Nice. Simple. Easy. Complete.
Great tutorial, Thank you !!
Excellent tutorial, the two pixel divide really makes a lot of difference and its subtle. Thanks
You just gotta love this simple stuff! Very effective.
Nice. Thanks.
great stuff
This is quite useful stuff for me. Thanks a lot man.
Wow, ive often wondered how some of these effects are achieved and here we have it.
Grazi!
These are so easy I can’t believe i’ve missed em before. thanks.
Wow! It’s very cool! I like it!
i just implemented 2 of those tricks in one header… dangerous, or what??
thanks for this simple tutorial!
excellent
great post…
Awesome tips there.
I’ve been using the 1px highlight for quite some time, though I didn’t know it by name. My favourite example for would be Freelance Switch.
It just goes to show how every pixel counts, the examples shown make a huge difference.
nice one.
i just implemented 2 of those tricks in one header… dangerous, or what??
thanks for this simple tutorial!
I’m afraid you just made my pixels pop.
Thank you very much for this useful article. I like it.
That was… is(!) one of the best webdesign tutorial I’ve ever read.
Really Congrats!
and thanks for sharing :_)
I’ve got to say this is one of the most practical and helpful tutorials I’ve seen for Photoshop. These are very small details, but that’s what brings your designs from just ok to great. Thanks a lot for sharing these tips.
This is probably the most useful tutorial I’ve ever seen!