12 Replies Latest reply on Apr 6, 2015 10:25 AM by kevin.n.coleman

    Slices and Guides misalign at different zoom levels


      I’ve noticed for a while now that the display of guides and slices is off by sometimes up to a few pixels, depending on the zoom level at which they’re viewed.


      For example, this is a screenshot of a document at around 200% zoom, with a slice lined up with the corner of the graphic:

      Screen Shot 2014-12-29 at 12.09.48 PM.png


      Here is the same graphic, with the same slice, at 3200% (max zoom):

      Screen Shot 2014-12-29 at 12.09.55 PM.png


      You’ll notice that actually neither of these shows the slice lines correctly, but that at 3200% it’s close enough to be sure about which pixels will be included in the exported image.


      And yes, before anyone asks, slices are set to snap to the pixel grid, and all the graphics are snapped to/contained by the pixel grid. (even though there’s some dithering there).


      This error means that every time I draw a slice or drop a guide, I have to zoom to 3200% to make sure it’s on the correct pixel, which is a time-wasting hassle. I understand that because guides and slice lines are 1px wide, it’s impossible to actually display them between the pixels they divide, (except when zoomed to odd amounts, that is), but it would be nice if they were never more than 1px away from their actual computed location.


      I mean—these tools are for pixel-perfect measurement. It seems like they should be pixel-perfect. Yes?

        • 1. Re: Slices and Guides misalign at different zoom levels
          Brett N Adobe Employee

          I'm not entirely sure what you mean here. Are you saying that the slice lines are not lining up with the guide lines? In both cases they are but they might not seem that way because of an optical illusion based on the fact that these are light and dark lines. Here are your two screen shots blown up in Photoshop to see how things are lining up:


          Screen Shot 2014-12-29 at 3.30.22 PM.png 200% blown up to 1000%


          Screen Shot 2014-12-29 at 3.30.29 PM.png 3200% blown up to 2000%


          In both cases we can see that the slice is perfectly in line with the guide.

          • 2. Re: Slices and Guides misalign at different zoom levels
            kevin.n.coleman Level 1

            Nope—sorry for the unclear wording. This issue happens with slices just as with guides, but it’s not a misalignment between a slice and a guide—it’s that neither of them appears to consistently align to the pixel grid. In the above case, both the vertical guide and the horizontal slice line have snapped to the pixel grid, and should line up with the shown intersection. Commonly, I’ll drag a slice or guide to a pixel position that appears to be in line with an element, and I zoom way in to find that it’s 1 to 3 pixels off. This is with snap to pixel grid turned on.


            Here’s another sample that shows the difference. In the first shot (zoomed to 717%), you can see a white space under the horizontal dashed line (similar to the previous example of a pixel-width between the dotted line and the horizontal line).

            Screen Shot 2014-12-29 at 4.00.36 PM.png

            In the next shot (3200%), you can see that the lines are actually on the pixel grid and meet at the corner.

            Screen Shot 2014-12-29 at 4.00.51 PM.png

            These are mild cases (because, of course, it’s hard to get it to act up on the spot). I’ll fairly regularly see a disparity of up to 2 or 3 pixels. Sometimes it appear to be correct at lower zoom levels (300%–100% ish), and is actually off by a pixel or two at max zoom.

            • 4. Re: Slices and Guides misalign at different zoom levels
              Brett N Adobe Employee

              I think it would help if I understood what the blue dotted line was. Is that something you are drawing to help illustrate things? Is that the slice tool being used?

              • 5. Re: Slices and Guides misalign at different zoom levels
                kevin.n.coleman Level 1

                A blue solid line with a blue dotted line next to it denotes a slice. This particular slice is snapped to the pixel grid, as is the element shown below it (the red white, and dark red). Everything should intersect right at the corner, but at certain zoom levels the slice and the element don’t align.


                In the first example, the dotted line is just an extension of where the slice corner was (out of screen). The sole dotted line is drawn so you can draw other slices that line up more easily. (and maybe to define non-user slices—not sure on that).

                • 6. Re: Slices and Guides misalign at different zoom levels
                  Brett N Adobe Employee

                  I think I'm getting what you mean now. The Slice tool has a tendency to offset the line as you draw your slices. The marquee will leave the dotted line on top of horizontal lines like guides and other slices, or to the left of vertical lines. This can appear to be a few pixels when zoomed out, because of the size differences between image and screen pixels. This is just a visual thing to make it easier to see where you are drawing your slices without them becoming covered up by or merging into existing lines. Are you actually seeing that the completed slice is actually off by several pixels if you are snapping to Guides and Slices? I may see the gap while drawing, but not with the finished product.

                  • 7. Re: Slices and Guides misalign at different zoom levels
                    kevin.n.coleman Level 1

                    I’ll keep watching for precise examples, but I have definitely experienced it where I draw a guide or slice with snap turned on (at least to the pixel grid), and it appears to be on the line at 100% or 300%, and then I zoom in to 3200% and it’s off by a pixel or more.


                    It seems odd to me that a guide should ever appear in a place other than where it’s measured to be, even if that’s to aid the process of placing it. It’s a measuring tool, so it should always appear exactly where it’s measured to be.


                    Thanks for the listening ear for now, and I’ll watch for more exact examples going forward.

                    • 8. Re: Slices and Guides misalign at different zoom levels
                      kevin.n.coleman Level 1

                      Ok, so here’s another example, and how it pertains to my workflow (slowing me down).


                      1. I make changes to a design, with slices turned off while I’m working

                      2. I turn slices on so I can see where they are to adjust them to the newly-updated design

                      3. Zoomed out, I see this:

                      Screen Shot 2015-02-19 at 11.01.27 AM.png

                      4. I think, “oh, that slice must be at least a pixel off, since I’m at 47% zoom and it shows a space between the slice line and the red box in the design.” (because if zoomed out  to ~50%, each pixel on the screen represents ~2 pixels in the actual design)

                      5. I zoom in to get a nice close view of how far off the slice is, so I can adjust it to sit right on the edge of the red box

                      6. Zoomed in, I see this:

                      Screen Shot 2015-02-19 at 11.01.44 AM.png

                      7. I think, “what the hell! I just saw a line that told me my slice was ~2px off the edge of the red box. Why isn’t it off?”

                      8. I zoom back out, thinking, “well, whatever. I guess it’s correct, so I don’t need to fix it.”
                      9. I repeat steps 1–8 every time I see this problem, because evidently a zoomed out view of a slice doesn’t mean much

                      10. I cry at night because I zoomed in on 300 slices in a day just to find & fix 2 errors.


                      Does this make sense? If the zoomed-out slices could accurately reflect their positions in the document, I wouldn’t have to do this, and I’d save a lot of time.

                      • 9. Re: Slices and Guides misalign at different zoom levels
                        kevin.n.coleman Level 1

                        I just ran into the opposite also taking place, so I thought I’d post it here too.


                        I drew a slice, zoomed in to 253%, which looked like this (the slice in question is the one that surrounds “selections” on the top):

                        Screen Shot 2015-02-20 at 10.25.39 AM.png

                        Looks like it’s on the line between the red pixels and the grey pixels, right? I’m at 253% zoom, so it’s gotta be pretty accurate. Right?


                        Here’s the slice viewed at 881%:

                        Screen Shot 2015-02-20 at 10.25.50 AM.png


                        Hm. It’s off by what looks like a pixel. But then, this is at 881%. It looked correct at 253%, but added 1 pixel of error when I looked closer. That makes me think that it might lose more accuracy if I zoom in even more! In this case, I zoomed in to 3200%, and found it to still be one pixel off.


                        If I’d never zoomed in past 253%, I’d never have know this was off, though!



                        So, in short, when the slice line itself is always only one on-screen pixel thick, shouldn’t it at least always be accurate at zoom levels >=100%? This is the frustration I’ve been trying to convey. I hope this post and the last post make it really clear!

                        • 10. Re: Slices and Guides misalign at different zoom levels
                          kevin.n.coleman Level 1


                          I’ve provided several specific examples, and it appears as though support just doesn’t care.

                          Is anyone looking into this issue? Should I hope for a fix? Should I even bother to post support issues on a support forum?


                          A response would seem to be at least a minimal courtesy...

                          • 11. Re: Slices and Guides misalign at different zoom levels
                            Brett N Adobe Employee

                            Hello Kevin,


                              Sorry I haven't replied lately. I only visit the forums in my spare time and haven't had any in the past few weeks. But a colleague pointed out your post. Please note that these are user-to-user forums. They are meant for users to help each other, not as a means of contacting Adobe employees for support. We try to visit and help when we can but it is not something we can always get around to.


                              When you are looking for pixel accurate results from tools, it is important to be zoomed in close enough to see accurately. Let's take a look at how close you should be zoomed in.


                              In the case above:

                            • There is a one image pixel gap between where you want the slice to be and where it is.
                            • At 253% zoom, each image pixel is four screen pixels (a 2X2 grid).
                            • Slice lines are 2 screen pixels thick.
                            • Slice lines appear on the upper (or left for vertical) edge of the division between two pixels.

                              Thus, what you see in the upper of the two screen shots is accurate (to how the tool works). The slice lines (two screen pixels) are perfectly covering up the one image pixel (also two screen pixels) gap.

                              When the slice line is placed where you want it, at the bottom of the red area, it would overlap those pixels and we would see red pixels between the blue dots, not white.


                              This is clearly illustrated in the second image. There, since you are nearly to 900% zoom, each image pixel is now 81 screen pixels (9X9 grid). When we look at the gap, there are 7 white pixels between the bottom of the red area and the blue slice lines. This is because the two one pixel wide slice lines occupy the bottom edge of the image pixel (the top edge of the dividing line two image pixels), thus covering the final 2 of the 9 screen pixels.


                              With all of this in mind, for pixel accurate slices, I would suggest working at least at 300% zoom or greater (due to screen pixel aspect ratios, using a zoom that is not exactly a multiple of 100 can result in skewed results which increase width before height). That way there are three screen pixels per image pixel. When you draw a slice line, the two screen pixels the slice takes up would leave a visible gap of one screen pixel of the image pixel and more clearly illustrate where you had drawn your slice.


                              However, I do see how we could improve Photoshop's execution of the slice lines to make this more intuitive. For example, the Pixel Grid (visible when zoomed in close enough) is itself two screen pixels wide. But each of these two pixels are overlapping each of the neighboring image pixels. This means that the outer edge of every image pixel has a one screen pixel inner stroke. I think if slices did the same, we've have less confusion in this matter. I'll point this out to the team.

                            • 12. Re: Slices and Guides misalign at different zoom levels
                              kevin.n.coleman Level 1

                              Wow! Thank you for your help.


                              I’m sorry to have misunderstood the purpose of these forums. I was trying to reach employees as this seems to be more of a bug than a preference. Is there an official channel for reporting bugs? Thank you for taking the time to address it here.


                              Does it not seem like being zoomed to 100%, so 1 image pixel = 1 screen pixel, would be enough to make tools like this accurate? I understand that when zoomed to, say, 103% or 97% percent, the math gets nastier. However, when zoomed in closer than 100%, there should always be enough space to have the guide or slice line be “hugged” up against the pixel division it’s marking. I think that‘s where this gets confusing for me. In the recent example the zoomed-out version looks very much like it’s “hugging” the bottom of the red area, as opposed to one pixel below that.


                              I will continue to zoom in past 300% to check all my guides for the time being (no other option anyway!), but thank you for showing this issue to the team. Perhaps reading through my workflow woes will help them see the issue and formulate a modification that will help out.


                              I appreciate your time!