Design

The ustwo™ Pixel Perfect Precision Handbook

By Gyppsy 26 March 2012

We’ve now updated the Pixel Perfect Precision Handbook to version 2 – visit this blog post to download and read all about it.

Good pixel practice vs bad pixel practice

Good pixel practice vs bad pixel practice

We love pixels! They’re the building blocks of all the visual design we do here at ustwo™, but are so often relegated to mere afterthought in the excitement of working with colours and styles. We induct all our designers into the school of pixels with our Pixel Perfect Precision™ (PPP™) guide.  The aim of the PPP™ document is to give pixels the care and attention they deserve, to make sure we get the simple things right before moving onto the detail.

Why is this important though? Isn’t it a waste of time to worry about every last pixel on the page? Like a lot of things in life, when something’s done right it should be invisible, but when it’s done badly it becomes an annoyance.

Users usually see your product even before they start interacting with it and as with everything, first impressions count. Blurred edges, objects that jump in position between pages, and colour mismatches are just a few things that a user will notice and become distracted by, even subconsciously. If your designs aren’t done properly it can leave them with a poor impression of the product, and potentially, of your brand. PPP™ ensures that designs are created to the highest quality, organised neatly and delivered correctly.

So where did PPP™ begin? Back in the early days of ustwo™, instead of forwarding an email describing how to set up colour profiles correctly, we created a small document detailing these instructions, and this is still the first chapter of our PPP™ guide.

The first version of the PPP™ document

The first version of the PPP™ document

Before long bits and bobs were added until the document had blossomed to over 80 pages! From all the content distinct chapters were created, such as Pixel Precision, Techniques, Organisation and Naming & Export; the Naughty & Nice theme was established to highlight the difference between OK and great practices.

The second version of the PPP™ document

The second version of the PPP™ document

For the second anniversary of the original PPP™ a redesign was decided upon to freshen up the style and to keep it more within our guidelines for documentation. Coincidentally, towards the completion of this Apple released iBooks Author—an opportunity too good to miss! Previously, PPP™ was distributed via PDF which always seemed ironic—PDF, a format more comfortable in inches and millimetres, tasked with guiding users in the dark arts of pixel craft! However up until this point, there was no better way to share this with our designers. This new iBooks format seemed perfect for delivering the PPP™: portable, interactive and able to deliver pixel perfect images, so we started working on a version instantly.

The latest, and most pixel perfect version of PPP™

The latest, and most pixel perfect version of PPP™

In addition to being able to create pixel perfect digital content, iBooks Author allows us to share PPP™. We’re distributing PPP™ right here (21mb download) as a learning resource for all levels of designer. From Junior to Creative Director we’re confident there’s a process or tip that can be picked up in there! And as employers, we’d love for some of the information here to make its way into university courses as graduating students are often strong in ideas and motivation but haven’t been taught the finer details. 

PPP™ is a constant work in progress, with new pages and sections already planned for the future; part of the excitement is that as we constantly learn we’re always thinking of new content to add to it. But it’s not supposed to be gospel either—there are many other equally valid ways to handle the methods outlined in there, which we’re always interested to find out more about. So if you’ve got any better solutions, or any other comments about it, then please get in touch!

Download the PPP™ iBook here.To view it on your iPad, drag the unzipped PPP™.ibooks file to your iTunes and sync with your iPad.

Drag PPP™.ibooks to iTunes and synchronise with your iPad to read

Drag PPP™.ibooks to iTunes and synchronise with your iPad to read

Update:  For those that live in the cloud, the .iBooks link of the file can be found here (~14mb). This link can be opened straight on your iPad. And by popular request, for those without iPads, a PDF is available here (~15mb). Note that the scripts and example files are included with the original iBook archive in the main post above.

The Future of In-Flight: Part One Branching Strategies with GIT

22 Comments

  • Mike Brainstorm

    Yeap, I am also looking for those handy crop and export scripts but I cant find any links in the document or site?

    2013-08-25 19:02:00
  • Steve Burrows

    Thank you for your hard work - a really useful guide!

    2013-05-17 11:45:00
  • Danielvlopes

    Thanks a lot, the ibook format is awesome.

    2012-08-12 16:05:00
  • Ankur

    This is just awesome. Thank you Guys.

    2012-05-03 08:15:00
  • Barry Lachapelle

    Guys this is excellent. Thank you so much. I can't believe how much of this I didn't know. Great stuff.

    2012-04-13 15:19:00
  • AG

    You tried Fireworks? - It fixes 90% of the shape layer issues you point out fixes for here. - Page and state support in documents - On click export of all pages to JPGs - copy+paste from Illustrator - Extracting logos are a 1 click operation in it - Stackable/re-orderable glows/layer effects

    2012-04-13 11:25:00
  • Matthias

    Mind.Blown.

    2012-04-13 08:26:00
  • Julian

    Awesome read, thanks so much. Any chance we can get our mitts on your export scripts?

    2012-04-12 12:18:00
  • Gyppsy

    @openid-135431:disqus  - it's a matter of convenience for us: means no colour jumps when we move the images out of Photoshop into Preview/Mail/Keynote for instance, and trying to colour manage 50+ would be a nightmare for our IT guys. But ultimately it's because we're mostly designing for mobile devices, and so we extensively test how our designs look on their screens.

    2012-04-10 10:53:00
  • Jorge

    How come you set Photoshop's working color space's RGB profile to the particular profile of each display instead of homogenizing all computers to a base standard, say, sRGB? Wouldn't that cause color jumps between all computers in your team? The way I understood color management, display profiles should never be used as a working color space in Photoshop, unless you know fot certain that all users will be looking at your media using that particular display (which 99,9% of the times will not be the case).

    2012-04-09 08:32:00
  • chrissharp

    Great work! thanks for taking the time this is super useful.

    2012-04-02 10:26:00
  • Farina

    Fantastic doc. Thanks!

    2012-03-28 09:52:00
  • André

    Great, mate! Thank you!

    2012-03-27 22:46:00
  • Daniel

    Hey, what happens with the Kindle? I never seen this format before. If you use .epub you have ebooks fully compatible.

    2012-03-27 17:26:00
  • Gyppsy

    Thanks for the comments everyone, we're going to put up a PDF and direct download link shortly :-)

    2012-03-27 12:42:00
  • Rusty

    If the file wasn't zipped, readers could install to iBooks directly from their iPads by tapping the link. Would save a few steps and syncing.

    2012-03-27 12:33:00
  • Ahmed El Gabri

    A PDF version will be great too :)

    2012-03-27 08:59:00
  • Toni

    So.. how can I read this without an iPad?

    2012-03-27 08:40:00
  • Roger Dean Oldén

    Will be interesting to read :)

    2012-03-26 18:34:00
  • Thiago

    Is there a PDF version?

    2012-03-26 16:00:00
  • Nikolay Verin

    Now I can't make some half-pixel crap, because I use Photoshop CS6 Beta and "Snap Vector Tools and Transforms to Pixel Grid" option tuned always on! But thank you for Book, it gorgeous and helpful! :)

    2012-03-26 15:41:00
  • Gabriel Himself

    Thanks for this awesome e-book... really apreciate

    2012-03-26 13:39:00

Leave a comment

Your email address will not be published. Required fields are marked