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. :)
Assets.sketch
How To Design Pixel Perfect Assets http://t.co/PyWp3NZ6
Loving Sketch so far, it’s so refreshing to use after so long using Photoshop. It’s so much more efficient.
It is absolutely amazing. The new version is so fast! :D
Really? It’s still painfully slow for me :(
What computer are you using? I’m on a 2GHz i7 Macbook Air, perhaps that’s why – Photoshop and Illustrator run great though.
Hmm, that’s interesting. Are you using the latest version? Also, is it always slow or when you do certain tasks?
Yeah, I just upgraded to the latest. The slowness kinda goes in and out. I wonder if it’s the complexity of my document (not that complex really..) I’ll have to experiment.
I love it so much, but it’s endlessly frustrating :)
How To Design Pixel Perfect Assets by @MengTo: http://t.co/iGTtTAeG
How To Design Pixel Perfect Assets, http://t.co/gDH0Yjto
#design RT @angelceballos: How To Design Pixel Perfect Assets, http://t.co/M9IHXcJI
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
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.
Design pixel perfect assets (in @sketchapp) http://t.co/auNBpwRr
How To Design Pixel Perfect Assets by @MengTo: http://t.co/TIditNvR
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.
You can also use the “Scale…” feature to automate cutting the effects in half.
How to design pixel perfect assets http://t.co/m2QvrZK7 #webdesign
How To Design Pixel Perfect Assets http://t.co/8TNePqNz
Here’s a great tutorial on how to make your assets pixel perfect.
http://t.co/s1Q0NZsT http://t.co/n9bxYLVk
How To Design Pixel Perfect Assets by @MengTo: http://t.co/K0DyzVQB
How To Design Pixel Perfect Assets http://t.co/yqC2R4JE via @kippt
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
How To Design Pixel Perfect Assets http://t.co/1sakWu2o via @SidebarIO
@elihorne Your mom’s using my latest favorite app sketch) – http://t.co/WJ1uu2Dh
How To Design Pixel Perfect Assets by @MengTo: http://t.co/QgAYpUmy
How To Design Pixel Perfect Assets by @MengTo: http://t.co/tHqchOPZ
@willetling http://t.co/KT9FrjPq
How to Design Pixel Perfect Assets
http://t.co/2bt1RnOq
How To Design Pixel Perfect Assets with Sketch http://t.co/3lu8BZJX
How To Design Pixel Perfect Assets http://t.co/1xEPz3Xi
@Cabaroc @cmozzati @desbenoit @aleksfaure @ephfx http://t.co/nEU4srfJ exemple de fond noir, mais ça reste toujours lisible je trouve
How To Design Pixel Perfect Assets http://t.co/JqrOL3Ge
How To Design Pixel Perfect Assets http://t.co/phaxjrra by @mengto
How to design pixel perfect assets. http://t.co/anPh8K52 #WebDesign #Photoshop
“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
[…] 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 […]
nice tips. however i prefer photoshop than sketch.
[…] 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 […]
Thanks for this tutorial. It probed me to use Sketch – I was looking for a Photoshop alternative.
Thanks!
[…] 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 […]
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?
:)
I think he’s referring to the actual height of the button itself, not the full 68px height of the surrounding box, which includes the bottom shadow.
@sharpbites justo ese link me da la razón… explicación larga: http://t.co/vV3bG958fr
Useful tips for mobile app designers: How To Design Pixel Perfect Assets – http://t.co/2zJdqvNh3b
Thanks for pointing out sketch…
How To Design Pixel Perfect Assets | Meng To – UI/UX Designer: http://t.co/JHmlko5EDa
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.
Thanks Noel. By pair numbers, I meant 0, 2, 4, 6, etc. Numbers that can be divided by 2.
Because a pair is a “couple” of numbers such as {1,2}, {3,5}.
Even numbers are numbers that can divided by 2 and odd are the one who can’t.
Pair = Even
浴衣 販売
の新作
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
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
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?
Thanks
[…] 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 […]
@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
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.
Thanks!
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.
2017年新素材入荷!
2017年最高新時計大量入荷
特級.品質 シリアル付きも有り 付属品完備!
100%品質保証 !満足保障100%!
経営方針:現物写真、品質を重視、納期も厳守、信用第1!
広大な客を歓迎してご光臨!
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.
http://apkpipe.com/music-paradise-pro-apk/
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.
Мой ненасытный!Хочу предложить тебе интимные и ооооочень страстные встречи!О них ни одна живая душа не узнает- гарантирую!Давай просто пообщаемся для начала?На письма не отвечаю, всю переписку веду тут https://sex-time.club