Mar 27 2013
Pixel Perfection
A lot of designers throw around the term pixel perfection. But what does it really mean? Googling it really didn’t help. With this article, I am going to not only attempt to define it but also give clear examples on how to achieve it. I will also share design files from which you can deconstruct and analyze.
Download .sketch files
You’ll need Sketch to open these files:
Sharpness
“Sharp” is defined as razor-edged and honed. It’s the opposite of blurry. In other words, outlines are well-defined, texts are more readable, shapes are easily distinguishable. But beware, just like in photography, there can be too much sharpness, and that gives designs an unnatural, heavy look. You can strike the perfect balance of sharpness by not stretching elements from its original size and by comparing to reality. If you look outside the screen and really pay attention to the outline of things, you’ll notice a fine crispness and natural polish. That’s your balance. Good sharpness is unmistakable. An outline is an outline, it doesn’t mistake itself as the background or a shadow.
By looking closely at this design, you’ll notice a light shadow and a white shadow. They’re clearly defined – not too dark and not too light because that how I intended them to be. That’s the level of importance that I gave them. Also, they’re not mistaken as anything else. Had I made the light shadow whiter, it could be seen a double, blurry white shadow and that would destroy the purpose of that sharpness I was aiming for.
Perfect Position & Dimension
Understanding perfection is not enough. You need to apply the right techniques within the application context. In Photoshop and Sketch, that means resizing and positioning your shapes using round numbers. Half pixels are detrimental to pixel perfection. When you place a shape composed of many sub-shapes, you will spot uneven pixels. It’s important to quickly scan with your eyes the sharpness of the outlines and make proper adjustments.
In Photoshop, that means pixel snapping vector points manually by selecting them, then Command + Shift dragging them. See how the Facebook logo is a lot sharper on the right?
In Sketch, it’s even more precise because you can simply select each sub-shape and edit round the numbers (x, y, width and height). The toggle circle is much sharper on the right.
Obsession
Pixel perfection is an obsession and a standard to which serious designers live by. It’s a learned skill that needs nurturing in a fast-paced, technology-driven industry. It is even more unobvious now that pixels are getting denser every day. Ten years ago, when 800×600 displays and pixel fonts were the standard, it was a lot clearer to spot the imperfections. Today, you almost have to use a magnifier in order to distinguish the pixels on a screen. That’s why it’s more necessary than ever to rely on tools like Sketch for pixel snapping and for rounding the numbers to be absolutely certain that your design is pixel perfect.
Go ahead and download my .sketch files and spot the half pixels. You may find some and if you do, pat yourself on the back because you now have pixel perfection in your blood.
Pixel Perfection http://t.co/H9iG9rghEA
Pixel Perfection: A lot of designers throw around the term pixel perfection. But what does it… http://t.co/fjrOMlv0X1
Another well-written and insightful post by @MengTo. (His blog looks great on mobile as well ++) http://t.co/Y36caYYS4F
Pixel Perfection by @MengTo: http://t.co/cWpp0G45JR
Pixel Perfection by @MengTo: http://t.co/nKh3ieiTIh
What’s Pixel Perfection? http://t.co/NkzCcrfMHk
Pixel Perfection » http://t.co/eLUfUqg9ix #graphic #ui #ux #design
Pixel Perfection http://t.co/hocKemiTsW
Pixel Perfection by @MengTo: http://t.co/aAFulE2LGF
I could be wrong but, I think Meng To likes Sketch… ;P
Hehe, for a tool that I use 10 hours a day, I have to love it. :)
That’s cleared my thoughts. Thanks for coinbiruttng.
have effectively promoted your blog without any…cost involved. submitting unique articles on a regular basis to article directories is one of the best ways that you can help get your blog more exposure on the web.publishing your content on article directories will give you valuable links to…
Pixel Perfection, the truth. by @MengTo: http://t.co/fYT2fMpY3K
I love reading posts like this: Pixel Perfection http://t.co/SWS5K6wm8v by @MengTo #design #ui #ux #psd
Pixel Perfection | Design Blog http://t.co/NaIr3yZ35D #weblabor
Great post, Meng. As a new designer, it is very inspiring to see somebody strive towards perfection.
Pixel Perfection by @MengTo: http://t.co/YDQbKLv3Gb
http://t.co/QaBy5sz0QG | ピクセルパーフェクトなデザインをするということ。1pxに神が宿るのであれば、サブピクセルの行方についても考える。Meng ToではSketch推しなので、Sketchのサンプルも提供。
Pixel Perfection by @MengTo: http://t.co/Qt2VjofYbi
Nice little roundup of Pixel Perfection by @MengTo: http://t.co/nVhWJk96IW
Anyone learning to use Sketch?. Heres some Sketch files to download. Here http://t.co/fqkLHoAupV and here http://t.co/6g8AvfhGop
i love these articles and wish more than anything Sketch would come out for Windows so I can have a play with it
Pixel Perfection http://t.co/QedHMiPyvP
Pixel Perfection by @MengTo: http://t.co/3ejaWEhzQ1
Pixel perfection http://t.co/6xMdogl7et
Have I mentioned how awesome iOS dev weekly is? Yes? Well, I’m doing it again: http://t.co/LHlDtNvRaG via http://t.co/6MDlwo43j1
Pixel Perfection by @MengTo: http://t.co/JHbRUDxec4
Pixel Perfection by @MengTo: http://t.co/47rOHOWQEI
Pixel Perfection by @MengTo: http://t.co/IXsL0cQmJC
Think you’re pixel perfect? are you sure? Our creative director @duncanlaud1 was discussing this earlier this week – http://t.co/W0eGvjFtTJ
Pixel Perfection by @MengTo: http://t.co/ACCSGDPmL0
Pixel Perfection http://t.co/9KrvDhFXP4 (via Instapaper)
Pixel Perfection. http://t.co/80cGZhOfbl
Pixel Perfection: http://t.co/4pIDGFxwXp
[…] my previous blog posts, I have been a strong advocate for rounding fractional numbers for Pixel Perfection results. Well, Dominik showed me this neat feature in Sketch that specifically helps you round the […]
What is Pixel Perfection? by @MengTo: http://t.co/RuYpTCgZN9
Pixel Perfection by @MengTo: http://t.co/1CCXu7dZfQ
“Pixel perfection is an obsession and a standard to which serious designers live by” #truth http://t.co/1CCXu7dZfQ
Pixel Perfection by @MengTo: http://t.co/wMNGPcsQbd
Keep up the great articles–especially write ups about Sketch–and kudos for pushing pixel perfection :)
Pixel Perfection http://t.co/5DZsBOWMkV
[…] Pixel Perfection by Meng To […]
[…] Pixel Perfection by Meng To […]
[…] Edge”, I created a shortcut in Actions called “Refine Tool” so now I can make Pixel Perfection with just a […]
[…] Pixel perfection […]
[…] Pixel Perfection by Meng To […]
[…] again: Take a look at Meng To’s article to learn more about pixel […]
[…] again: Take a look at Meng To’s article to learn more about pixel […]
[…] http://blog.mengto.com/pixel-perfection/ […]
could you tell us where the half pixels are, so if we don’t spot them we can compare? I haven’t looked much yet but the first file I’ve looked at looks great.
Could you make an article about differences between Sketch and PTS, which one is better?
Lifestyle products without compromising on functionality, quality & the design aspects.
They have a long lifespan and often come with adjustable options for dimming.
Place one bed behind the other against the wall, and create a storage partition in between.
We are a bunch of volunteers and starting a new
scheme in our community. Your website offered us with
useful info to work on. You have done an impressive job and our entire neighborhood will be thankful
to you.
..Hard coding pixel dimensions is something that I’ve been doing in Illustrator for years, and with much more precision. Someone please tell my why Sketch is superior all of a sudden?
Why doesnt sketch pixel snap by default. That’s what they advertise on their home screen. I keep finding crap in my files that are half pixels.
Thanks to my father who told me concerning this
web site, this webpage is in fact awesome.
Excellent posts. today i’m able to make smarter wire frame. Thank you for giving this excellent posting.
I like what you guys aree up too. This sort of clever work and reporting!
Keep up the excellent works guys I’ve added youu guys to blogroll.
[…] Meer over pixel perfectie vind in dit artikel. […]
nice the post..
düşük hapı sipariş
aşk fm dinleee
düşük hapı sipariş sitesi
Good post about how bring pixel perfection to designs.
Nice post.
Regards,
http://www.technobrains.net
Why doesnt sketch pixel snap by default. That’s what they advertise on their home screen. I keep finding crap in my files that are half pixels.