Quick Tip: New techniques on how to create pixel-perfect edges with Photoshop

I’ve recently discovered a new way of making crystal-clear edges for shapes with only horizontal and vertical segments contour in Photoshop using only a simple style I created. Follow this tutorial and you too will learn how to use this effect for your own designs.

Trust me when I say this, you have NEVER seen this effect in ANY tutorial. Sounds unbelievable, right? Read further and see it for yourself!

The Best Deals For Digital Design Assets - InkyDeals.com. Learn More>>

Difficulty: Intermediate
Completion time: 2 min
Tools: Adobe Photoshop CS3

First, let’s see a difference between the average shape you used to have and the effect applied.

Let’s begin!

Go to File > New… (CTRL+N) to create a document of 600 x 600 px in RGB color mode at 72 dpi.

Hit Z and click the “Actual Pixels” button to set the Zoom at 100%.

Set the foreground color to a dark gray (#1d1d1d) and hit ALT+Backspace to fill the “Background” layer with this color.

Grab the Rectangle Tool (U), set its color to a bright orange (#ff6000) and draw a rectangle. On your first try, you’ll most likely see a perfect edge, created by the contrast between background and the bright orange.

But this will only be ok for shape you’ve originally drawn. Once you’ve rescaled it or even rotated it, it will look blurry and will go out of the  “pixel-perfect” boundaries. The same thing happens to some rectangle sizes, even from the start.


Let’s see how the effects look like!
Select the shape layer, click the “fx” button and select “Inner Glow”. Here are the settings:

Tips & Tricks
If you change the background color, go to the Inner Glow setting and change that color, as well.

If you want to save a shape as an image (a button, for example), save it as a .PNG. to preserve its quality. A .jpg file will remove the small transparency created by the Inner Glow and will appear as a thin, white line.

I believe you’d want to try this yourself, so here’s a dummy .PSD file to practice on!

  pixel77-pixel-perfect-edges-tutorial-practice-file.zip (7.9 KiB, 555 hits)



(Visited 1,672 time, 1 visit today)

7 Comments Quick Tip: New techniques on how to create pixel-perfect edges with Photoshop

  1. James Irwin Jun 26, 2012 at 21:06

    This is a pretty interesting method of going about this. I assumed you’d be doing a “Select–> Modify–> Contract” and then Shift+Ctrl+I to invert the selection and delete the edges… Pretty cool, though. This is my first time commenting on your site, but I’ve had it bookmarked in my “Learning” folder for quite some time. Thanks for all the freebies and tutorials. You’re an inspiration.

  2. Alicia Aug 16, 2012 at 07:25

    this tutorial was made far more complicated than needed for simple .psd steps.
    there were a number of mistakes and it is far from inspiring.

    1. Doink Aug 20, 2012 at 18:03

      The tutorial is meant to solve a general issue with the vector shapes in photoshop, with relatively simple steps, easily understood by web designers. It is a workaround and it can be scaled down or up, as needed. Sharpen Edges does not work on shapes, you have to rasterize it first.

  3. Omed Ikurd Nov 25, 2012 at 08:27


  4. Jin Lee Feb 21, 2013 at 08:52

    웹디자인할때 좋은 방법이네요 -> (nice way to create the design) : ) Good~.

  5. emberngromO Sep 10, 2013 at 17:59

    The treatment plan in order to keep infertility treatments, it would be vigilant to first confirm with your units of Na-glucuronate-N-acetyl glucosamine. Have any risk of trauma or surgery This medication increases movement through and anxiety, and many are blood contact that help the disc heal from the.
    Viagra cialis package

    1. AndersonAndrew Apr 14, 2018 at 05:17

      The fuck…


Leave A Comment

Your email address will not be published.