lock path/selection/guides to pixel borders

Question

I have been having a heck of a time with photoshop trying to export some layers which have transparent edges but need to line up (top, repeating-middle and bottom images for a faux rounded corner situation). They keep on ending up one pixel off... I tried setting up slices, I tried using the same selection marquee and just repositioning it downward. I tried selecting based on guides.. and every time the selection did not line up. I can fix this with CSS, but I would much rather have the images be starting at the same point, and wondering what the best way to achieve this is!

I'm pretty sure the problem must be with subpixels and how they are selected, or it could be related to the border of the image being transparent and photoshop dropping the transparent pixels when the selection is copied.

I just need to know how photo-shop handles these situations and what options I have to make a reliable workflow for getting properly sized and positioned images saved out.

Answer 1

I'll take a stab at this. I may be going over ground you've already covered, so forgive me if I'm being redundant.

Perhaps edge transparency combined with anti-aliasing at the rounded corners is biting you, because it sounds like you're copying these slices and then finding they don't line up. The end result of copying an object with transparency is that the degree of "selectedness" is proportional to the transparency, so the pasted result is proportionately less opaque than the original. The curve is asymptotic in theory, I suppose, but since we only have 8 alpha bits to play with, it's easy to lose edge pixels if you try to Ctl-Click in the layers panel to select, then copy from there. I haven't been able to get this effect to show up except by copying in this way.

Did you try cutting (Ctl-Shift-J rather than Ctl-J) to a new layer, then copying from these new layers (using Ctl-A, NOT restricting the selection to the object)? A New From Clipboard document would be an exact fit to the pixel object, not the original layer. When I sliced a feathered, rounded layer this way, I couldn't get the slices to not line up. I got the same result by selecting using a way oversized marquee, staying well away from the edge transparency.

It helps to see what you're doing if you temporarily put a white layer under the one you're working on. The transparency grid makes it very difficult.

I hope that helps.

Answer 2

Please post the image you are working with as a PNG, and also a screenshot of the problem you are seeing in your browser.

As far as I understand your description, I have never experienced this problem, and I'm convinced that, unless you are omitting a critical step in your process, what you're describing should not happen. Photoshop simply selects what is sees on the canvas. For transparent pixels, it just records a full pixel and it's level of transparency, as Alan pointed out.

It could be how you're selecting... You should either set up your slices and use the slice exporting feature to extract the images, not the marquee tool. Or if you want to use the marquee, then make sure your transparent edges are at least a few pixels, select the entire width of the layer, and use Ctrl+Shift+C (or Cmd+Shift+C on Mac) to copy the entire contents of the marquee, not just the object. Then create a new file and past the selection into it.

It could be the file you are saving as... If you are saving as a GIF, then perhaps the palette being applied to the corner images is different than what is being applied to the middle image. Or maybe the algorithm that applies the palette just produces a different result, which is not impossible since the value of one pixel depends on the values of the surrounding pixels when you dither an image as the GIF format does. I don't know if this would happen with the PNG-8 format as well, but I would think it might.

It could be your CSS... If you haven't done so already, I would set up a blank html file with just the divs you need to draw this rounded corner box. Then include a reset style sheet and the background properties needed to display the box. Nothing else.

If none of that works out, then come back and update your question.