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!
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.
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.
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, 107 hits)