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.


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.


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.


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


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


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.


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.


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. :)

0 tweets

61 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.


  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


  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.

  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.

  41. Starr says:

    I see a lot of interesting posts on your page.
    You have to spend a lot of time writing, i know how to save you a lot of work,
    there is a tool that creates unique, SEO friendly posts in couple of seconds, just type in google
    – laranita’s free content source

  42. Rolland says:

    I read a lot of interesting articles here.
    Probably you spend a lot of time writing, i know how to
    save you a lot of time, there is an online
    tool that creates high quality, SEO friendly posts in minutes, just search in google – k2seotips unlimited content

  43. Keano says:

    So when working in Sketch on iOS (I prefer working at 2x I should lay every asset on even numbers on the grid and sizing then? what of you set you grid to setting wise?

    Why do you make a rectangle for the slice? I don’t see that option?


  44. […] web pages in the sharpest, cleanest look possible. No compression artifacts, no anti-aliasing and zero muddiness. It’s not uncommon to work with a designer who doesn’t understand being flexible is a […]

  45. madtrigger says:

    @1x / @2x refers afaik to iPhone 5 / 5s only. What about the iPhone 6 and moreover the iPhone 6 Plus? How do you deal with Designs that were originally designed in 2208×1242 (@3x) and now have to be scaled down? Especially regarding half-pixels. I highly appreciate your answers.
    Kind regards, madtrigger

  46. mansi says:

    This was helpful but really didn’t understand the solution of 2x.

    What I understood is just exporting in 2x isn’t the solution.
    And changing the size will be a better one?
    Can you explain it more clearly. I didn’t get it.


  47. N/A says:

    Thank you for the wonderful post! Very engaging certainly. I’ve been trying to lose weight for the past few months and was unsuccessful, then one day, I found this site on youtube, HealthDietKing.com. I was quite distressed at the beginning but decided to joined the program. Just recently, I was able to lose around 10 pounds from it and I now feel much happier than before. If anyone is intending to lose weight or in the same position like me before, I suggest using HealthDietKing.

  48. 2017年新素材入荷!
    特級.品質 シリアル付きも有り 付属品完備!
    100%品質保証 !満足保障100%!

  49. apkpipe says:

    You may hear about Music paradise pro which the most excellent music app. You can use this app as your music app to get your preferred songs for totally free.

  50. proxy list says:

    Hi,I read your blogs named “How To Design Pixel Perfect Assets | Meng To – UI/UX Designer” on a regular basis.Your writing style is witty, keep up the good work! And you can look our website about proxy list.

Leave a Reply