2

I do games for mobiles and web. I have all my artwork in Retina resolution. I use Sketch for slicing my artwork. During slicing I scale-down my artwork for not-Retina screens - and here I face a problem:

Please follow my explanation:

  1. Here I describe what I do in Sketch app:

enter image description here

  1. Here I show resulting pictures, describe my problem and ask a question:

enter image description here

So, my question is how to make edges of scaled-down sliced assets not transparent?

Is it possible to do it in Photoshop or in Sketch?

ADDED

Here is a link the the Sketch file: https://drive.google.com/file/d/0BzHPzvAPTcG2WTJLTTdHVUN4QTQ/view?usp=sharing

  • Thanks for including images! In the future, using the built in image uploader will help preserve your post (since we can't rely on external hosts to keep the images online indefinitely) – JohnB Feb 4 '15 at 13:50
  • Oh sorry, next time I will try my best to make it looks all nice! If am from stackoverflow - there people like links. Will e more visual next time! – Worker Feb 4 '15 at 15:32
  • No problem at all. We're visual people over here :) – JohnB Feb 4 '15 at 15:34
2

Edit, after looking at the attached file I added a response under the “Bitmap scaling” heading. I left the “Non-even positioning and size” portion of the answer in, because that’s still relevant and important (both things need to be correct for high quality output).

It should be possible in both Photoshop and Sketch. Without knowing exactly how the document has been constructed, it’s difficult to pinpoint the problem. But, here's my best guess:

Non-even positioning and size

If an element is 3 pixels wide and you scale it down by 50%, the resulting element will be 1.5 pixels wide. The same thing will happen with positioning — elements can end up on half pixels. The result is often blurry and/or half opaque edges, just like your example shows. It's also likely you PNGs will be 1 or 2 pixels wider and/or taller to cater for this, which probably isn't what you want.

One way to fix that is to ensure everything is on even pixel positions and is even pixel widths and heights.

Another approach is to work at 1× and scale the export up for Retina. You should get great results, and it means everything you create will snap to the 1× grid nicely. The same technique works for Photoshop as well.

Bitmap scaling

After taking a look at your example.sketch file, it’s clear what the issue is. The ipad_CUT layer is a bitmap. This means that all the elements have been merged into a single bitmap layer, so any scaling can only be done as a bitmap. Bitmap scaling leads to the results you’re seeing — blurry edges, scaling artefacts and other problems.

If you’re working in Sketch or Photoshop and you need to scale the output, it’s best to keep all the elements as vector layers.

  • All my sizes are even bot positions are not. I thought that positions have no influence... I will check it now – Worker Feb 4 '15 at 12:11
  • No it doesn't work as expected - edges are semi-transparent. – Worker Feb 4 '15 at 13:32
  • 1
    @MinimeDJ Can you please add an example file that has the issue to the original post? I'll see if I can hunt down the problem. – Marc Edwards Feb 4 '15 at 13:54
  • I added a file, please see it in main question above at the bottom. – Worker Feb 4 '15 at 15:42
  • Thank you for your reply. Is there a way to have not blurry edges with bitmap? – Worker Feb 6 '15 at 10:48

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.