New techniques to create pixel-perfect edges with Photoshop

New techniques 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!

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.

pixel77-pixel-perfect-edges-tutorial-final

Let’s begin!

STEP 1
Go to File > New… (CTRL+N) to create a document of 600 x 600 px in RGB color mode at 72 dpi.
pixel77-pixel-perfect-edges-tutorial-1
STEP 2
Hit Z and click the “Actual Pixels” button to set the Zoom at 100%.

pixel77-pixel-perfect-edges-tutorial-2
STEP 3
Set the foreground color to a dark gray (#1d1d1d) and hit ALT+Backspace to fill the “Background” layer with this color.

pixel77-pixel-perfect-edges-tutorial-3
STEP 4
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.

 

pixel77-pixel-perfect-edges-tutorial-4
STEP 5
Let’s see how the effects look like!
Select the shape layer, click the “fx” button and select “Inner Glow”. Here are the settings:

pixel77-pixel-perfect-edges-tutorial-5

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!

[download id=”282″]

 

 

7 Comments on “New techniques to create pixel-perfect edges with Photoshop

  1. 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. 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.

    • 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. 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

Leave a Reply

Your email address will not be published. Required fields are marked *