Feb 8 2013

How To Design Pixel Perfect Assets

Assuming that you design your Mobile app in 2x, I know it’s tempting to use automatic tools such as Slicy to create your 1x assets. But it’ll be far from perfect, since you’ll end up with half-pixels and that means blurry outlines. You don’t want blurry pixels.

Assets

Giving that extra care shows your passion as a designer. Yes, it does take more effort but as a reward, you will sleep better knowing that the 1x users will also enjoy your design. “Make the back of the fence look as beautiful as the front. Even though others won’t see it, you will know it’s there, and that will make you more proud of your design.” – Steve Jobs

This is a technique I’ve picked up on Sketch, but I’m sure the same principle can be applied to Photoshop as well.

The Key Is To Design Using Pair Numbers

1) Select your asset and make sure all the dimensions and positioning are on pair numbers. Why? Because when you divide those numbers by 2, you get a nice round number. That will ensure that when you resize that asset, it’ll be pixel perfect. The border-radius of your rounded button should be half the height of the button. In this case, it’s 26px.

assets-1

2) Create a surrounding box that serve as your future slice. Also make sure that the numbers are in pair. Create a folder for that those layers.

assets-2

3) Duplicate, lock the ratio (lock icon between Width and Height) and set the width to half the original width.

assets-3

4) Adjust the border-radius, drop-shadows, inner shadows to half the pixels, unless it’s 1px.

assets-4

5) Select the 1x button folder and Go to File / Add Slices for Selection. This will create a nice slice that will be easily exported.

assets-5

6) Hide the Mask layer and the Bg layer and Export. You can use Sketch’s super useful feature that allow you to drag and drop the asset’s thumbnail to anywhere you want it.

assets-6

Arguably, Slicy does a pretty good job at resizing to 1x automatically but is it good enough? Doing it manually (using a PNG and resizing it to half the dimensions) is even worse. These results should make designers cry.

What about 2x?

In Sketch, there is a 2x export feature that allows you to take any asset and do a pixel perfect rendering of it in 2x. While the pixels will be perfect, they will be doubled and that might not be the effect that you want. The simple solution to that is to duplicate and resize to 2x the width while locking the ratio.

Download the Sketch File

Here is the original Sketch file so you can play around with it. :) Assets.sketch

0 tweets

50 Responses to “How To Design Pixel Perfect Assets”

  1. How To Design Pixel Perfect Assets http://t.co/PyWp3NZ6

  2. Rich Holt says:

    Loving Sketch so far, it’s so refreshing to use after so long using Photoshop. It’s so much more efficient.

  3. How To Design Pixel Perfect Assets by @MengTo: http://t.co/iGTtTAeG

  4. How To Design Pixel Perfect Assets, http://t.co/gDH0Yjto

  5. #design RT @angelceballos: How To Design Pixel Perfect Assets, http://t.co/M9IHXcJI

  6. @poopuu says:

    This blog post got it all wrong. Using tools like Slicy does not generate blurry sub pixels, a sloppy designer does.

    http://t.co/gwHmVV2n

  7. Nathan says:

    I think I may have found the issue. I’ve been running the Sketch full-screen on my 27″ display. I tried using it on my MacBook Air’s built-in display and it’s much faster.

    I read an article on their support forum which explained that there were known performance issues on Retina displays because there are “so many pixels”. I imagine the same issue is at play between my 27″ and 11″ displays.

  8. @Rude says:

    Design pixel perfect assets (in @sketchapp) http://t.co/auNBpwRr

  9. How To Design Pixel Perfect Assets by @MengTo: http://t.co/TIditNvR

  10. Julian says:

    I just started using Sketch on a 15″ Retina Macbook Pro and it’s been running perfectly. Really enjoying it so far, feels like the missing link between designing in photoshop and in browser.

  11. Henry says:

    You can also use the “Scale…” feature to automate cutting the effects in half.

  12. @danielhaim says:

    How to design pixel perfect assets http://t.co/m2QvrZK7 #webdesign

  13. @Uxswitch says:

    How To Design Pixel Perfect Assets http://t.co/8TNePqNz

  14. Here’s a great tutorial on how to make your assets pixel perfect.

    http://t.co/s1Q0NZsT http://t.co/n9bxYLVk

  15. @nabilsharif says:

    How To Design Pixel Perfect Assets by @MengTo: http://t.co/K0DyzVQB

  16. How To Design Pixel Perfect Assets http://t.co/yqC2R4JE via @kippt

  17. I’ve been using Sketch for the last month, a breath of fresh air from using photoshop for nearly 16 years.

    I have the same problem with performance on my MB retina, apparently they are working on a fix

  18. @workbymark says:

    How To Design Pixel Perfect Assets http://t.co/1sakWu2o via @SidebarIO

  19. @YourMomBot says:

    @elihorne Your mom’s using my latest favorite app sketch) – http://t.co/WJ1uu2Dh

  20. @moramedia says:

    How To Design Pixel Perfect Assets by @MengTo: http://t.co/QgAYpUmy

  21. How To Design Pixel Perfect Assets by @MengTo: http://t.co/tHqchOPZ

  22. @xiaoape says:

    How to Design Pixel Perfect Assets

    http://t.co/2bt1RnOq

  23. How To Design Pixel Perfect Assets with Sketch http://t.co/3lu8BZJX

  24. How To Design Pixel Perfect Assets http://t.co/1xEPz3Xi

  25. @Cabaroc @cmozzati @desbenoit @aleksfaure @ephfx http://t.co/nEU4srfJ exemple de fond noir, mais ça reste toujours lisible je trouve

  26. @yamini says:

    How To Design Pixel Perfect Assets http://t.co/JqrOL3Ge

  27. @Many_Angles says:

    How To Design Pixel Perfect Assets http://t.co/phaxjrra by @mengto

  28. @ayub says:

    How to design pixel perfect assets. http://t.co/anPh8K52 #WebDesign #Photoshop

  29. “Make the back of the fence look as beautiful as the front. Even though others won’t see it, you will! http://t.co/WTSmazuq

  30. [...] have been a number of recent tutorials about this topic, be it generally about making pixel perfect assets, ones to account for retina displays as well as usual ones, or 16px ones for the likes of [...]

  31. max says:

    nice tips. however i prefer photoshop than sketch.

  32. [...] you read my article on How To Design Pixel Perfect Assets, you’ll notice that it doesn’t matter if the borders or drop shadows are one pixel [...]

  33. Thanks for this tutorial. It probed me to use Sketch – I was looking for a Photoshop alternative.
    Thanks!

  34. [...] first found out about it after reading a blog post by Meng To on How To Design Pixel Perfect Assets in which Meng refers to Sketch a few times and explains that it’s great while designing for [...]

  35. Benjamin says:

    Nice article, I use the same techniques too. Though we use Photoshop and have just given Sketch a trial-run.

    A small correction I noticed:

    “The border-radius of your rounded button should be half the height of the button. In this case, it’s 26px.”

    In the illustration below the height says 68px so shouldn’t it be 34px?

    :)

  36. @amuino says:

    @sharpbites justo ese link me da la razón… explicación larga: http://t.co/vV3bG958fr

  37. Useful tips for mobile app designers: How To Design Pixel Perfect Assets – http://t.co/2zJdqvNh3b

  38. Duraiamuthan says:

    Thanks for pointing out sketch…

  39. How To Design Pixel Perfect Assets | Meng To – UI/UX Designer: http://t.co/JHmlko5EDa

  40. Noel says:

    Hi, first off I’d like to say your blog has been a great resource (am still a student and just starting out my UX career) and I must say I’m learning a lot from it. Many thanks for sharing your knowledge! You’ve also convinced me to make the switch to Sketch.

    Anyway, not sure if this would be a pretty stupid question, but what exactly do you mean by using “pair numbers”? An answer would be greatly appreciated.

Leave a Reply