Strange border on shape and other layers

[John_A...@adobeforums.com]

I am working on a file. I have a background layer. I draw a shape layer, in this case a box, and when I do this layer has what almost looks like a drop shadow on two sides, ie the two edges have darker pixels than the shape color. I see the same sort of behavior on an image layer, in this case a photo, where the pixels on two edges, not the same edges, have different looking pixels. There are no effects on these layers

[Ed Hannigan]

Have you tried printing them? What do you see?

Could be your eyes, your monitor, your graphics card, cables or any number of other things.

[John_A...@adobeforums.com]

See image
<http://img390.imageshack.us/img390/6340/screenhunter01nov141527fh8.jpg>

[John_A...@adobeforums.com]

better example
<http://img125.imageshack.us/img125/9425/screenhunter02nov141534ty5.jpg>

[Phosąfour dots]

If you're creating shapes as vector-defined shape layers, make sure that the paths defining vertical or horizontal straight lines snap to the pixel grid intrinsic to every Photoshop document.

If the path runs through the center of a pixel (vectors can do that, but raster-based selections can't), Photoshop has to calculate how to antialias that area between the path and the closest line of pixels. The result will always show an "edge" made of a range of pixel colors, and will never make a dead clean hard transition.

[John_A...@adobeforums.com]

This is what I see and it appears to be "on grid"
<http://img511.imageshack.us/img511/1074/screenhunter03nov141912um9.jpg>

[John_A...@adobeforums.com]

OK, I think I am getting it. So if my document is at 72 ppi, then my grid has to be some factor of that. I changed my grid to 18 divisions per inch (72/4), put on snap to grid,, redrew a box, and it seems to be hard, clean edges all around. Does this make sense? I guess you were correct phosąfour dots

[Phosąfour dots]

72ppi or 7200ppi, it doesn't matter.

Pixels are pixels, and they are the single indivisible measuring unit for raster-based images. For most practical purposes you can't have a fraction of a pixel in raster-based image editors. (But this is debatable when you really get deep into the hard nuts & bolts of how Photoshop works. I'm going to guess that, for now, you don't need to worry about this bit of esoterica. When you need to know it, you'll understand why you need to know it, and also probably how to find info about it.)

When working in Photoshop, anything you do that is borne of a marquee selection (a/k/a commonly, "Marching Ants") or operation (painting, erasing, masking, dodging, magic wand, etc) will do their work and align to the intrinsic, built-in, pixel-based grid. It's invisible, but it's always there.

Working with vectors, and with certain so-called sub-pixel operations like blurring, sharpening and certain other functions may appear to work at fractions of pixels, but this is just the simplest way to describe for the user more complex image manipulation that is occurring in Photoshop's algorithms.

[John_A...@adobeforums.com]

And yet if I draw a rectangle (shape layer) without that grid enabled and set as I described, I get that gradated edge. I am still confused, particularly as I haven't ever noticed this before.

[Phosąfour dots]

Try the following. Observe very closely and see if you can tell what's happening.

•Create a new document at 400px × 400px; RGB, 8 bit, White background, square pixel aspect ratio. Resolution setting doesn't matter.

• Tap your "D" key to return Pshoto's defualt FG & BG colors to black & white. Tap your "F" key to toggle screen mode to "Full Screen Mode with Menu Bar."

• Make the documents rulers visible if they are not (CTRL + R). Right click on either of the rulers to drop the menu and make sure the unit of measurement is set to display values in pixels.

• Zoom in to 1600% anywhere in the middle of your document. You'll be able to see tick marks on the rulers that designate each and every row and column of pixels. THAT'S the invisible, intrinsic "grid" I'm talking about, present in every Photoshop document. Want to see Photoshop's user configurable grid? Tap the
CTRL + ' shortcut a couple times. Leave your grid visible.

• Select your rectangle Custom Shape Tool. In the Options Bar drop the Geometry Options menu on the right side of the row of shape icons. UNcheck the box next to "Snap to Pixels."

• In your document window click and drag out a small rectangle shape, without regard to where you begin and end. Notice the antialiasing that is introduced by Photoshop if your shape's diagonally opposite corners aren't started and ended in precise alignment with the ruler tick marks. Drag out guidelines as I have in this second image and you'll see what I mean.

• Select your Move Tool (V). With the Shape Layer highlighted and active in the Layers Palette, tap your keyboard's arrow keys. You will see that the shape will ONLY move in 1 pixel increments. Pay attention to the antialiasing along the straight edges of the rectangle shape. Notice how the rows of pixels on either side of the vector line don't change in color/brightness value?

• Select your Path Selection Tool (black arrow "A"). Click inside the rectangle shape to select it; you'll see all 4 corner anchor points display as tiny gray filled-in boxes. Tap your keyboard's arrow keys again. Now, notice how you can move the vector outline in increments of a fraction of a pixel. You can do this with vector-defined paths (which you have just selected). In the previous step, you were using your Move Tool; and its overriding function is to move pixels. The vector path just follows along, in 1 pixel incremental movements. Also notice when you move the vector path in these fraction-of-a-pixel increments, the rows of pixels which Photoshop generates as antialiasing will change in color/brightness. This antialiasing is recalculated for each fractional movement so that the edge of the shape appears to be positioned mid-pixel. But, because we know that the pixel is an indivisible unit of measurement for a raster-based image, this is only done to create an illusion that a shape's edge sits at mid-pixel.

I know this reply is long and wordy (I could have gone into a deeper explanation, but I'm hoping this will suffice), but there's really no way to explain it quickly. Hopefully, this exercise has given you a better understanding of what you were seeing before you started this thread, and why it happens.

The takeaway lesson is this: If you want dead accurate and hard, clean horizontal and vertical edges, make sure that the vector paths which define the shape are aligned to Photoshop's intrinsic, invisible pixel grid.

[John_A...@adobeforums.com]

Thank you. I actually appreciate the long reply. I think what you pointed out is what I had figured out already (even if I did not really understand what I was doing). In CS4 I showed my pixel grid and made sure that all objects/layers/whatever aligned to that grid and then edges were sharp. Thanks again for taking the time with this. I will have to try printing the gradated one to see if it it is at all noticeable. This particular document is for a photo web site and may not matter. We'll see. This has been a good learning experience. Now, could you explain Flash in thirty words or less? LOL

[Phosąfour dots]

At print resolution (and as the only time when a ppi attribute matters)耀ay 200-300ppi遥ou very likely won't notice if your vector path is off by a few fractions of a pixel.

For a website, you might as well snap those vectors to the intrinsic grid, because you will notice it, especially now that you know what to look for and why it occurs. Besides, it's just as easy to snap those vectors to the intrinsic grid as to NOT do it, so you might as well.