Sign In  |  Join Now Become a member to add links and start earning points!

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:

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),, and 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).

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!


  1. Add point Subtract point
    Topandesign (3 Points) November 19, 2010 at 6:39 am

    thanks for you tutorial,,
    this is new something for me,,

    Flag as inappropriate
  2. Add point Subtract point
    Edi @web (3 Points) November 7, 2010 at 6:35 am

    Very good guide and example of use of Pixel Popping Techniques, thank You.

    Flag as inappropriate
  3. Add point Subtract point

    aaah .. i was looking for something like this .. TFS mate :)

    Flag as inappropriate
  4. Add point Subtract point
    โหลดเพลง mp3 ฟรี (1 Point) October 1, 2010 at 3:36 am

    it very cool

    Flag as inappropriate
  5. Add point Subtract point
    Pressure Cooker Cookbook (1 Point) September 15, 2010 at 2:50 pm

    Hi there. Looks like there is an issue with the initial url you gave : it returns 404 error

    Flag as inappropriate
  6. Add point Subtract point
    Mariyana (2 Points) September 11, 2010 at 12:49 am

    Very interesting article for beginners like me. Thanks a lot.

    Flag as inappropriate
  7. Add point Subtract point
    ted (-2 Points) July 15, 2010 at 8:01 pm

    these tutorials are so weak, they’re all common knowledge for designers

    Flag as inappropriate
  8. Add point Subtract point
    โหลดเพลง mp3 (1 Point) June 9, 2010 at 5:12 am

    Thank you for your trick.

    Flag as inappropriate
  9. Add point Subtract point
    โหลดเพลง (1 Point) March 29, 2010 at 11:28 am

    Thank you for your trick.

    Flag as inappropriate
  10. Add point Subtract point
    shaheel (2 Points) March 19, 2010 at 8:54 am

    Brilliant..this is what i am searching for all these to see the second version…

    Flag as inappropriate
  11. Add point Subtract point

    easy to learn, very good!!! thanks!

    Flag as inappropriate
  12. Add point Subtract point

    easy to learn, very good!!! thanks!

    Flag as inappropriate
  13. Add point Subtract point
    โหลดเพลงmp3ฟรี (1 Point) February 3, 2010 at 1:05 am

    great i never seen before.53

    Flag as inappropriate
  14. Add point Subtract point
    เพลงใหม่ล่าสุด (1 Point) February 1, 2010 at 11:08 pm

    great i never seen before.46

    Flag as inappropriate
  15. Add point Subtract point
    ฟังเพลงออนไลน์ (1 Point) January 30, 2010 at 8:18 am

    its very nice. Great post

    Flag as inappropriate
  16. Add point Subtract point
    drewbeta (1 Point) January 22, 2010 at 11:36 am

    another 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 inappropriate
  17. Add point Subtract point
    Eric Pantoja (1 Point) January 15, 2010 at 12:15 pm

    Hey leggit awesome article on “pixel popping” ! Great techniques to keep in mind when your stumped on a design.

    Flag as inappropriate
  18. Add point Subtract point
    viettel adsl (1 Point) December 22, 2009 at 8:12 am

    This’s make a great job in web design trend 1009

    Flag as inappropriate
  19. Add point Subtract point
    Avangelist (1 Point) December 13, 2009 at 1:12 pm

    I 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 inappropriate
  20. Add point Subtract point
    Quick Link Now (1 Point) November 14, 2009 at 6:29 am

    awesome and simple technique.. but effect is truly paying…


    Flag as inappropriate
  21. Add point Subtract point
    rotonics (1 Point) October 15, 2009 at 6:50 am

    Fascinating 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 inappropriate
  22. Add point Subtract point


    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 inappropriate
  23. Add point Subtract point
    Pablo Lara H (1 Point) September 24, 2009 at 7:40 pm

    Awesome. So simple and very effective. Thanks.

    Flag as inappropriate
  24. Add point Subtract point
    öğrenme nesneleri (1 Point) August 30, 2009 at 11:42 am

    This is site my favorite in recently:)

    Flag as inappropriate
  25. Add point Subtract point
    Qurratul Yeen (1 Point) August 9, 2009 at 3:19 am

    I 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 inappropriate
  26. Add point Subtract point

    simple but sooo effective! Thanx

    Flag as inappropriate
  27. Add point Subtract point

    nice tutorial. it’s very interesting to know how you got effect as on “5″ on the top image

    Flag as inappropriate
  28. Add point Subtract point
    thumbsup (1 Point) June 10, 2009 at 11:04 pm

    i like this tutorial, simple and very effective!

    Flag as inappropriate
  29. Add point Subtract point
    Daniel (1 Point) May 29, 2009 at 4:41 pm

    Dont give away all the good stuff, took me long time to figure out on my own, use i daily at this point ;)

    Flag as inappropriate
  30. Add point Subtract point
    chhuang (1 Point) May 23, 2009 at 4:48 pm

    Very useful technique! I wonder how do you do the 2 pixel divide on a white background? Thanks!

    Flag as inappropriate
  31. Add point Subtract point
    huwaw69 (1 Point) May 8, 2009 at 2:45 am

    Hahaha nice techniques and very easy! thanks man!

    Flag as inappropriate
  32. Add point Subtract point
    Mike (1 Point) May 1, 2009 at 11:15 am

    These are GREAT tips; quick and easy, and very effective. Just what I was looking for.

    Flag as inappropriate
  33. Add point Subtract point
    Robert K (1 Point) April 30, 2009 at 3:53 am

    Excellent 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 inappropriate
  34. Add point Subtract point
    Nícia (1 Point) April 29, 2009 at 11:09 am

    So simple and useful! Thank you for sharing.

    Flag as inappropriate
  35. Add point Subtract point
    Michael Cerdeiros (1 Point) April 28, 2009 at 9:33 pm

    Awesome Tutorial dude. Thanks for this post it will surely help me with my redesign.

    Flag as inappropriate
  36. Add point Subtract point
    greenville web design (1 Point) April 28, 2009 at 12:06 pm

    These 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 inappropriate
  37. Add point Subtract point
    Inkburrow (1 Point) April 21, 2009 at 3:16 pm

    I arrived here from a link on Nice, subtle touches which are really easy to implement. Ideas are already forming. Thanks so much!

    Flag as inappropriate
  38. Add point Subtract point
    kiziel (1 Point) April 14, 2009 at 2:16 pm

    Nice tutorial. Tutorial9 bookmarked ;)

    Flag as inappropriate
  39. Add point Subtract point

    pretty nice!I used to draw a white line ,But I realize use pencil could be better!

    Flag as inappropriate
  40. Add point Subtract point
    Graphic Designer (1 Point) March 23, 2009 at 2:45 pm

    Tasteful, simple, easy to learn. Perfect tutorial!

    Flag as inappropriate
  41. Add point Subtract point
    anjum nawab (1 Point) March 1, 2009 at 11:53 am

    HEY i was looking for something like that its too good thanks for this tut dear have happy tuts :)

    Flag as inappropriate
  42. Add point Subtract point
    Seth Duncan (1 Point) February 10, 2009 at 5:47 am


    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.


    Flag as inappropriate
  43. Add point Subtract point

    Nice tutorial i knew about some of these techniques but on others i need practice :P


    Flag as inappropriate
  44. Add point Subtract point

    This is probably the most useful tutorial I’ve ever seen!

    Flag as inappropriate
  45. Add point Subtract point

    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.

    Flag as inappropriate
  46. Add point Subtract point

    That was… is(!) one of the best webdesign tutorial I’ve ever read.
    Really Congrats!
    and thanks for sharing :_)

    Flag as inappropriate
  47. Add point Subtract point
    wspinaczka (1 Point) September 13, 2008 at 8:07 am

    Thank you very much for this useful article. I like it.

    Flag as inappropriate
  48. Add point Subtract point
    Tariq Taybi (1 Point) September 1, 2008 at 2:58 pm

    I’m afraid you just made my pixels pop.

    Flag as inappropriate
  49. Add point Subtract point

    i just implemented 2 of those tricks in one header… dangerous, or what??

    thanks for this simple tutorial!

    Flag as inappropriate
  50. Add point Subtract point
    Chris Spooner (1 Point) July 21, 2008 at 7:43 am

    It just goes to show how every pixel counts, the examples shown make a huge difference.

    Flag as inappropriate
  51. Add point Subtract point
    Sumesh (1 Point) July 21, 2008 at 6:45 am

    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.

    Flag as inappropriate
  52. Add point Subtract point
    Yucel Eroglu (1 Point) July 19, 2008 at 4:11 pm

    excellent :) great post…

    Flag as inappropriate
  53. Add point Subtract point
    heather (1 Point) July 19, 2008 at 2:49 pm

    i just implemented 2 of those tricks in one header… dangerous, or what??

    thanks for this simple tutorial!

    Flag as inappropriate
  54. Add point Subtract point
    Ukrnet (1 Point) July 17, 2008 at 5:51 am

    Wow! It’s very cool! I like it!

    Flag as inappropriate
  55. Add point Subtract point
    real estate graphic design (1 Point) July 15, 2008 at 12:35 pm

    These are so easy I can’t believe i’ve missed em before. thanks.

    Flag as inappropriate
  56. Add point Subtract point
    Dan Collins (1 Point) July 14, 2008 at 7:34 am

    Wow, ive often wondered how some of these effects are achieved and here we have it.

    Flag as inappropriate
  57. Add point Subtract point
    United Voices (1 Point) July 13, 2008 at 11:35 pm

    This is quite useful stuff for me. Thanks a lot man.

    Flag as inappropriate
  58. Add point Subtract point
    Fritsie (1 Point) July 9, 2008 at 6:24 am

    You just gotta love this simple stuff! Very effective.

    Nice. Thanks.

    Flag as inappropriate
  59. Add point Subtract point
    Colin Miller – Freelance web designer (1 Point) July 9, 2008 at 3:30 am

    Excellent tutorial, the two pixel divide really makes a lot of difference and its subtle. Thanks

    Flag as inappropriate
  60. Add point Subtract point
    Stefano (1 Point) July 8, 2008 at 9:57 am

    Nice. Simple. Easy. Complete.

    Great tutorial, Thank you !!

    Flag as inappropriate
  61. Add point Subtract point
    Felicity (1 Point) July 8, 2008 at 6:52 am

    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 :)

    Flag as inappropriate
  62. Add point Subtract point

    I’ve always been a fan of the two-pixel divide myself.

    Flag as inappropriate
  63. Add point Subtract point
    Niki Brown (1 Point) July 5, 2008 at 12:27 pm

    Great article! Im going to link to it from my blog.

    Flag as inappropriate
  64. Add point Subtract point
    Adrian Rodriguez (1 Point) July 5, 2008 at 9:07 am

    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.

    Flag as inappropriate
  65. Add point Subtract point
    Patrick Sweeney (1 Point) May 28, 2008 at 1:05 am

    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
  66. Add point Subtract point

    @ 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 inappropriate
  67. Add point Subtract point
    Rocketbunny (1 Point) May 20, 2008 at 9:50 am

    Very interesting and most informative.

    Flag as inappropriate
  68. Add point Subtract point
    richard (1 Point) May 19, 2008 at 9:39 am

    Hey i love all your tutorials but i was wondering any chance maybe a tutorial on how to make them awsome clouds ?

    Flag as inappropriate
  69. Add point Subtract point
    seo dubai (1 Point) May 18, 2008 at 4:48 am

    excellent, good technique

    Flag as inappropriate
  70. Add point Subtract point
    David Anderson (1 Point) May 18, 2008 at 3:56 am

    Thats some great article! Do make more in the future!

    Flag as inappropriate
  71. Add point Subtract point
    Binesh (1 Point) May 17, 2008 at 6:59 am

    Great work dude !!! You should also make some tutorials on how you make those wonderful thumbnails for each tutorial.

    Again . Thanks a lot …!!!

    Flag as inappropriate
  72. Add point Subtract point
    Bonimi (1 Point) May 15, 2008 at 8:36 pm

    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.

    Flag as inappropriate
  73. Add point Subtract point
    DarkWolf (1 Point) May 13, 2008 at 4:22 pm

    Very useful!
    Thanks! :D

    Flag as inappropriate
  74. Add point Subtract point
    Reece (1 Point) May 13, 2008 at 12:01 am

    Much props!

    Good article, very useful!

    Flag as inappropriate
  75. Add point Subtract point

    @ Umang – Myriad I think…

    @ Dan – Thanks mate! Hope you’ll stick around for more!

    Flag as inappropriate
  76. Add point Subtract point
    Dan (0 Points) May 3, 2008 at 9:46 pm

    excellent, effective techniques =] great post!!

    Flag as inappropriate
  77. Add point Subtract point
    Umang (0 Points) April 25, 2008 at 11:30 pm

    Dude!! u should make a tut on how to make the content box shown in Shadow Highlight!! What font did you use?

    Flag as inappropriate
  78. Add point Subtract point
    Simon (0 Points) April 18, 2008 at 12:25 pm

    Nice tips about what makes pixel pop. It’s also kind of a web 2.0 technique. Was fun reading, thanks! :) (stumbled)

    Flag as inappropriate
  79. Add point Subtract point

    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!

    Flag as inappropriate
  80. Add point Subtract point

    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. :)

    Flag as inappropriate
  81. Add point Subtract point
    Niakori (0 Points) February 3, 2008 at 6:21 am

    This is great! Can’t wait for more, my brain desires the input >.<

    Flag as inappropriate
  82. Add point Subtract point
    Glyn Simpson (0 Points) January 5, 2008 at 4:21 am

    Awesome! ^.^

    I’ll be back for more handy tips like such!

    Flag as inappropriate
  83. Add point Subtract point
    Chris Free (0 Points) January 2, 2008 at 9:04 am

    Great tutorial, the shadow highlight is the best.

    Flag as inappropriate
  84. Add point Subtract point
    CrossFire (0 Points) January 1, 2008 at 4:33 pm

    ive used the 2 pixel one for what seems like an age, the vista is my fave though

    Flag as inappropriate
  85. Add point Subtract point
    Steve Mathis (0 Points) January 1, 2008 at 4:24 pm

    Great tutorial. Some simply yet highly useful effects that everyone can find a use for.

    Flag as inappropriate