4

This is my first project working with a sketch file (given to me by a designer for me to cut up into HTML/CSS).

So far I've loved the way sketch makes exporting easy, but I'm running into some trouble here. I have a slice drawn around a couple of vector layers that form a mask over an image. I have the slice perfectly clipped to the edges of the layers, but in the preview panel (and also when I export) sketch is adding pixels around the edges.

Screenshot - note extra pixels around slice preview.

The "Trim transparent pixels" checkbox does nothing. What should I check next? Or am I doing it all wrong?

  • Are you sure your slice is tight around the shapes you want to export? Have you zoomed in to check? – Luciano Mar 19 '18 at 10:58
  • @Luciano yes I zoomed in, it's definitely in the exact right spot. – GusRuss89 Mar 20 '18 at 7:41
  • Have you tried toggling the Trim transparent pixels option? – spjpgrd Mar 20 '18 at 23:43
  • It's related to x and y position: be sure your object isn´t place on sub-pixels. – Isma Gutiérrez Oct 15 '18 at 9:25
0

Try and export first and see if it adds the pixel around it, I think it's just for show. Temporary fix is to open in Photoshop, cmd select the layer then crop the pixels.

  • It does add the pixels when I export. I have for now addressed the issue by opening the exported png in photoshop and cropping it. It's still happening with other slices though so it would be good to find a fix. – GusRuss89 Mar 20 '18 at 7:42
  • What happens if you change the dimension of the slice? – Kevin Auyeung Mar 21 '18 at 16:56
  • Also, is your sketch the latest version? I can't find anything in my copy that affects the slice tool. – Kevin Auyeung Mar 21 '18 at 17:04
  • I'm on the latest version (still the trial if that's relevant). It's possible that it's got something to do with shadows. – GusRuss89 Mar 27 '18 at 23:22
0

Your callout-bg-mask seem to have a box shadow. The slice may be a child of this layer, it still inheritates the shadow and this may cause the slice bug ; try to disable it before exporting the slice.

I tried this and have the same problem :

Parent has a shadow :

enter image description here

Parent has no shadow :

enter image description here

0

I found a work around to this: add an artboard the size of the slice, then paste your asset into the artboard. When you export, it should be the correct size.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.