5 Pixel Popping Techniques
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!
144 Comments
thanks for you tutorial,,
Flag as inappropriatethis is new something for me,,
Very good guide and example of use of Pixel Popping Techniques, thank You.
Flag as inappropriateaaah .. i was looking for something like this .. TFS mate :)
Flag as inappropriatevist for basic training of photoshop
Flag as inappropriatehttp://training4free.co.cc/Basic%20training/Basic%20training.html
it very cool
Flag as inappropriateHi there. Looks like there is an issue with the initial url you gave : it returns 404 error
Flag as inappropriateVery interesting article for beginners like me. Thanks a lot.
Flag as inappropriatethx for good post.
Flag as inappropriateAwesome
Flag as inappropriatethese tutorials are so weak, they’re all common knowledge for designers
Flag as inappropriateSorry to hear this wasn’t useful for you ted.
Flag as inappropriateJust because you know it, Ted, doesn’t mean the world does. Everyone has to learn sometime, and there was a time when even you didn’t know how to do it.
Do you see how many people said thank you and appreciated the tutorial here?
David, sweet tute :) Thanks for sharing.
Flag as inappropriateThank you for your trick.
Flag as inappropriateThank you for your trick.
Flag as inappropriateBrilliant..this is what i am searching for all these days..love to see the second version…
Flag as inappropriateeasy to learn, very good!!! thanks!
Flag as inappropriateeasy to learn, very good!!! thanks!
Flag as inappropriategreat i never seen before.53
Flag as inappropriategreat i never seen before.46
Flag as inappropriategreat i never seen before.41
Flag as inappropriateits very nice. Great post
Flag as inappropriateanother very nice tutorial. I have been doing quite a few of these things without knowing that it was a standard practice, but I learned a couple new things as well
Flag as inappropriateHey leggit awesome article on “pixel popping” ! Great techniques to keep in mind when your stumped on a design.
Flag as inappropriateThis’s make a great job in web design trend 1009
Flag as inappropriateI have really enjoyed reading this. The 2pixel concept is a great one which as you start to look through designers of the last few years you start to see more and more and can appreciate the subtle but very effective impact it has.
I like how design is forever coming up with time saving tools and ‘effects’ like PS drop shadow for example, then doing it by had regardless because it provides more control.
Flag as inappropriateawesome and simple technique.. but effect is truly paying…
Thanks
Flag as inappropriateFascinating stuff. I have a client who would be interested in this, I’ll pass it on to them. Thanks very much for sharing.
Flag as inappropriateHey,
Great, great content! You are true representation of value on the net.
Thanks for giving us more ideas about how to spread our word.
Flag as inappropriateAwesome. So simple and very effective. Thanks.
Flag as inappropriateThis is site my favorite in recently:)
Flag as inappropriateI am a HUUUUUGE fan of tutorials. But as there are so many tutorial sites around, quality stuff seems to be disappearing.
And THIS is what I call quality….!!
Hats off to u! David!
Flag as inappropriatesimple but sooo effective! Thanx
Flag as inappropriatenice tutorial. it’s very interesting to know how you got effect as on “5″ on the top image
Flag as inappropriatei like this tutorial, simple and very effective!
Flag as inappropriateDont give away all the good stuff, took me long time to figure out on my own, use i daily at this point ;)
Flag as inappropriateVery useful technique! I wonder how do you do the 2 pixel divide on a white background? Thanks!
Flag as inappropriateI would imagine it’s something like this:
http://dl.michalkopanski.com/i/pixel-break-on-white-bg.png
Let me know what you think. Hope this helps!
Flag as inappropriateThis is actually one of the many tricks that are often overlooked by designers. As simple it may seem, you still have to have a good understanding of how colour hues can be manipulated in order to achieve the pop effect.
Flag as inappropriateHahaha nice techniques and very easy! thanks man!
Flag as inappropriaterespect. GREAT JOB!
Flag as inappropriateThese are GREAT tips; quick and easy, and very effective. Just what I was looking for.
Flag as inappropriateExcellent stuff my man! I’m definately going to use that 2px divide one – astonishingly easy and should be really quick to implement on existing images. Thanks alot!
Flag as inappropriateSo simple and useful! Thank you for sharing.
Flag as inappropriateAwesome Tutorial dude. Thanks for this post it will surely help me with my redesign.
Flag as inappropriateThese are great examples. A lot of these techniques I have been using for a while and have really jazzed up my designs.
You can really tell the difference between a print person designing a web site and a traditional web designer. I rarely see print designers give this much detail to their websites.
Flag as inappropriateI arrived here from a link on wefunction.com. Nice, subtle touches which are really easy to implement. Ideas are already forming. Thanks so much!
Flag as inappropriatevery nyce…
Flag as inappropriateNice tutorial. Tutorial9 bookmarked ;)
Flag as inappropriatepretty nice!I used to draw a white line ,But I realize use pencil could be better!
Flag as inappropriateTasteful, simple, easy to learn. Perfect tutorial!
Flag as inappropriateHEY i was looking for something like that its too good thanks for this tut dear have happy tuts :)
Flag as inappropriateDavid,
You have the coolest, yet simple tutorials on the web. This tutorial is far and beyond one of the coolest tutorials that shows how little changes can really make a website “that” much more appealing. Thanks again.
-Seth
Flag as inappropriateNice tutorial i knew about some of these techniques but on others i need practice :P
Thanks!
Flag as inappropriateThis is probably the most useful tutorial I’ve ever seen!
Flag as inappropriateI’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.
Flag as inappropriateThat was… is(!) one of the best webdesign tutorial I’ve ever read.
Flag as inappropriateReally Congrats!
and thanks for sharing :_)
Thank you very much for this useful article. I like it.
Flag as inappropriateI’m afraid you just made my pixels pop.
Flag as inappropriatei just implemented 2 of those tricks in one header… dangerous, or what??
thanks for this simple tutorial!
Flag as inappropriatenice one.
Flag as inappropriateIt just goes to show how every pixel counts, the examples shown make a huge difference.
Flag as inappropriateAwesome 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.
Flag as inappropriateexcellent :) great post…
Flag as inappropriatei just implemented 2 of those tricks in one header… dangerous, or what??
thanks for this simple tutorial!
Flag as inappropriateWow! It’s very cool! I like it!
Flag as inappropriateThese are so easy I can’t believe i’ve missed em before. thanks.
Flag as inappropriateWow, ive often wondered how some of these effects are achieved and here we have it.
Flag as inappropriateGrazi!
This is quite useful stuff for me. Thanks a lot man.
Flag as inappropriategreat stuff :)
Flag as inappropriateYou just gotta love this simple stuff! Very effective.
Nice. Thanks.
Flag as inappropriateExcellent tutorial, the two pixel divide really makes a lot of difference and its subtle. Thanks
Flag as inappropriateNice. Simple. Easy. Complete.
Great tutorial, Thank you !!
Flag as inappropriateI 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 :)
Flag as inappropriateI’ve always been a fan of the two-pixel divide myself.
Flag as inappropriateGreat article! Im going to link to it from my blog.
Flag as inappropriateI 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.
Flag as inappropriateDave,
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!
Flag as inappropriate@ 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!
Flag as inappropriateVery interesting and most informative.
Flag as inappropriateHey i love all your tutorials but i was wondering any chance maybe a tutorial on how to make them awsome clouds ?
Flag as inappropriateexcellent, good technique
Flag as inappropriateThats some great article! Do make more in the future!
Flag as inappropriateGreat work dude !!! You should also make some tutorials on how you make those wonderful thumbnails for each tutorial.
Again . Thanks a lot …!!!
Flag as inappropriateLovely!! 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.
Flag as inappropriateVery useful!
Flag as inappropriateThanks! :D
Much props!
Good article, very useful!
Flag as inappropriate@ Umang – Myriad I think…
@ Dan – Thanks mate! Hope you’ll stick around for more!
Flag as inappropriateI loved the article
Flag as inappropriateexcellent, effective techniques =] great post!!
Flag as inappropriateDude!! u should make a tut on how to make the content box shown in Shadow Highlight!! What font did you use?
Flag as inappropriateNice tips about what makes pixel pop. It’s also kind of a web 2.0 technique. Was fun reading, thanks! :) (stumbled)
Flag as inappropriateThanks 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!
Flag as inappropriateThis 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. :)
Flag as inappropriateThis is great! Can’t wait for more, my brain desires the input >.<
Flag as inappropriateAwesome! ^.^
I’ll be back for more handy tips like such!
Flag as inappropriateGreat tutorial, the shadow highlight is the best.
Flag as inappropriateive used the 2 pixel one for what seems like an age, the vista is my fave though
Flag as inappropriateGreat tutorial. Some simply yet highly useful effects that everyone can find a use for.
Flag as inappropriateNice tutorial, thanks ^^
Flag as inappropriate