: How to properly scale-down png assets 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

@Ravi4787994

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.

Vote Up Vote Down