PIXEL

PERFECT
PRECISION
Version 3
Produced by ustwo
@pppustwo
@gyppsy
CONTENT
Intro 1 Photoshop & ustwo 110

Thanks 2 Colour Profiles 111

The Core 3 Pixel Precision 116

Pixel Perfect Principles 4 Techniques 135

Pixel Perfect Details 19 Organisation 156

Accessibility 34 Export 168

Design & Development 86 Tips 178

Illustrator 198

Appendix 210

Pixel Perfect Precision Contents

INTRO
The Pixel Perfect Precision Handbook is now four years old. Over
that time we’ve shifted the focus away from pure pixels and started
to cover more about how we work as well — the new chapter on
Design and Development is a perfect example of this. Even though
our portfolio is incredibly diverse, from mobile banking apps to
physics-defying puzzle games, we always apply the same design
principles that we talk about in the following pages. Enjoy!

Product photo: Monument Valley

Pixel Perfect Precision 1

THANKS
There’s a few people out there who deserve a shout out. First of all
Shiro, for showing me the true meaning of pixel precision all those
years ago. All the designers out there sharing their knowledge on a
daily basis — you’ve been a great source of both inspiration and
information. Most of all I’d like to thank all my friends at ustwo for
their immense support in creating this handbook!

Product photo: Rando

Pixel Perfect Precision 2

THE
CORE
This first section covers core principles and topics that apply to
digital design and its relevant tools. Applicable to both seasoned
professionals and newcomers to the field, it offers a quick start
guide to some of the processes and thinking that we apply to our
projects here at ustwo.

Pixel Perfect Precision 3

PIXEL
PERFECT
PRINCIPLES
Users Your primary consideration should always be
your users. Guide design decisions by finding
completely flat, cutting edge interface guided
by grids and typography may work for a
out what they want to do, and then structure younger audience, but perhaps some friendlier
your product so they can carry out that task as skeuomorphic touches would be more
quickly as possible. Always bear in mind what appropriate for older users who aren’t quite so
is suitable for them as well; for example, a tech-savvy.

Pixel Perfect Precision 5

Environment Environment refers not only to the platform
you’re designing for, but also how it will be
almost always used indoors, and operated via
remote. This in turn means different
operated and the physical space that it will be considerations for things like text size, colours,
used in. For example, TVs have a completely and contrast within the interface.
different set of variables to mobile phones —
they are viewed from a much greater distance,

Pixel Perfect Precision 6

 Random Text
Squeezed in to Fit Title
Object Description that runs off the edge o
Object
Object Description that runs off the edge o
Description
Object Description that runs off the edge o

Object Description that runs off the edge o

Object
Object Description that runs off the edge o Description
Object Description that runs off the edge o

Object Description that runs off the edge o Object

Object Description that runs off the edge o
Description

Object Description that runs off the edge o

Object
Object Description that runs off the edge o
Description
Object Description that runs off the edge o

Naughty Nice

Accessibility Accessibility is relevant to every one of your

users — not just those with some kind of
colour blindness and dyslexia. See the
Accessibility chapter for more information.
disability. Good practice such as ease of use
and clarity are a given, but there are also
steps you can take to make your work more
accessible for those with conditions such as

Pixel Perfect Precision 7

 Longer Title Title

A Really Long Title Object

The same here too Description

A Object
B Description

Medium Length Object

? Still fits well Description

Einen wirklich la… Object

Das gleiche auch… Description

Naughty Nice

Worst Case This principle has some ties to accessibility:

make sure your product doesn’t break in real
blocks of text, translations, missing or highly
varied images etc. You can still show off the

Scenarios situations with real users. We’re all tempted to

put in artwork and text that looks beautiful
pretty version, but have some of these options
available in your files to check now and then.
and impresses clients, but it’s also necessary
to check that your design works with longer

Pixel Perfect Precision 8

 Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor
incididunt ut labore et dolore
magna aliqua. Ut enim ad
minim veniam, quis nostrud
exercitation ulamco laboris
nisi ut aliquip ex ea commodo
consequat. Duis aute irure
dolor in reprehenderit in
voluptate velit esse cillum
dolore eu fugiat nulla pariatur.
Excepteur sint occaecat
cupidatat non proident, sunt
in culpa qui officia deserunt

Affordance Affordance is an object’s ability to convey its

function through sensory means, for example
digital design to lead users into interacting
with objects. Commonly used affordances
a button suggests that you press it by being include buttons which are given depth to
slightly raised; a door handle suggests that emulate the real world, and text which flows
you pull it by being the right size and position off the page to show that it scrolls.
for a hand. This technique can also be used in

Pixel Perfect Precision 9

 Initialisation Welcome

Requirements Hey Matt!

We have detected that this is Since this is the first time

the first time you have used you’ve used the app we’re
the application. Before you going to ask a few questions
start you must answer a to set things up for you,
series of questions to make should only take a couple of
sure that everything is set up minutes. Press the Continue
correctly and works. button to get started!

Begin Continue

Naughty Nice

Copy What you say in your design is just as

important as how it looks. Good copy can not
emotional connection that results in a better
experience with your product.
only make an app easier to understand, but
also gives it personality through the tone of
voice used. Speaking to people like human
beings, rather than machines, creates an

Pixel Perfect Precision 10

 ! !
i i

Naughty Nice

Colour and Shape Certain colours and shapes have become

synonymous with specific meanings in digital
but jumbling the two up creates a mixed
message. Similarly, yellow and triangles are
design. Be mindful of these norms, as mixing often associated with warnings, blue and
them up can cause confusion for the user. circles with information.
Green and ticks are commonly used to
indicate good, likewise red and crosses bad,

Pixel Perfect Precision 11

 Title Title

Object Object
Description Description

Object Object
Description Description

Object Object
Description Description

Object Object
Description Description

Naughty Nice

Visual Hierarchy Layout, colours and typography have a huge

influence on what the eye is drawn to, and
contrast and large, bold type, or push items
back with lower contrast and smaller, lighter
consequently how information is consumed. type. Culture also plays a part: for example
Think about what you want the user to look at Westerners will naturally start near the top left
on the page and in what order, then design of a screen as that’s the way we read.
around that hierarchy. Grab attention with high

Pixel Perfect Precision 12

 Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
consectetur adipisicing elit,
exercitation ulamco laboris nisi ut aliquip ex sed do eiusmod tempor
ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
incididunt ut labore et dolore
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt
magna aliqua. Ut enim ad
mollit anim id est laborum. Lorem ipsum
dolor sit amet, consectetur adipisicing elit, minim veniam, quis nostrud
sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim exercitation ulamco laboris
veniam, quis nostrud exercitation ulamco
laboris nisi ut aliquip ex ea commodo nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum consequat. Duis aute irure
dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt dolor in reprehenderit in
in culpa qui officia deserunt mollit anim id
est laborum. Lorem ipsum dolor sit amet, voluptate velit esse cillum
consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore. dolore eu fugiat nulla pariatur.

Naughty Nice

Typography Typography is often overlooked in digital

products, but since most information is
squinting? Is there enough leading and are the
line lengths short enough to make reading
conveyed through text it should be high on comfortable? Don’t just accept the default
your list of priorities. Apply the same basic font settings in your design environment —
principles as for other mediums: is it a treat type with the respect it deserves!
comfortable size for reading without

Pixel Perfect Precision 13

 Title Title

Object Object
Description Description

Object Object
Description Description

Object Object
Description Description

Object Object
Description Description

Enter Exit

Motion With the ever-increasing power of hardware

it’s now possible to make your designs not
features; for example, if you wanted to draw
attention to a new button you could make it
only look good, but also move elegantly. periodically bounce to catch a user’s eye.
Subtle animations can enhance interfaces,
giving them character and increasing their
intuitiveness by hinting to functions and

Pixel Perfect Precision 14

Testing Nothing beats testing designs on their
intended device. Screen resolution and
these days that will take a design from your
computer and place it directly on your device,
technology can vary dramatically compared to updating in real time as you apply changes.
your computer, as well as other variables like Make sure to use them!
viewing angles and input methods. There are a
wide range of live previewing tools available

Pixel Perfect Precision 15

 Movie.avi

Sketch Movie Demo

Object Watch me! Press me!

Description I’m going to move I actually work

Object Static Inactive

Description I don’t move I don’t do anything

Object Static Inactive

Description I don’t move I don’t do anything

Object Static Inactive

Description I don’t move I don’t do anything

Prototyping Closely linked to testing is prototyping, which

is a quick way to try out ideas and designs
development environment. Pick whichever
suits the feature you want to test; the basic
without investing time and effort into polished structure of a screen can easily be tested on
versions. There are many forms this can take, paper, whereas an animated transition may
from simple drawings on paper, right up to require something mocked up as a video or
building limited apps in the platform’s native even coded.

Pixel Perfect Precision 16

 Project

Design

Screen.psd

Assets

Rectangle.png

Square Blue.png

Square Green.png

Square Orange.png

Square Pink.png

Organisation No man is an island, and most of the time your

files won’t be either! Good organisation is
logically named set of assets will make
developers very happy.
essential as it saves a lot of time for other
people on the project; well ordered files and
layers mean other designers can jump straight
into your work and find their way around, and a

Pixel Perfect Precision 17

Take a Break It’s very easy to get completely consumed in
the design process, but sometimes it pays to
After coming back the solution to a design
problem might be staring you right in the face,
take a break — not just for health reasons, but or you might spot a flaw that had previously
also the different perspective a refreshed set gone unnoticed!
of eyes can bring. Go and make a brew, or
wander somewhere else for a few minutes.

Pixel Perfect Precision 18

PIXEL
PERFECT
DETAILS
 Naughty Nice

Sharp Edges Straight edges should be on-pixel and sharp

— blurred edges are a no-no!

Pixel Perfect Precision 20

 y

x x

Naughty Nice

Alignment and Once you’ve mastered the art of getting

everything sharp, the next step in your journey

Spacing towards pixel perfection is making sure the

alignment and spacing are right.

Pixel Perfect Precision 21

Consistency Alignment of objects across multiple screens
is just as important. Margins and placement of
to set up a grid, which will define a structure
that can be followed throughout your screens.
common items such as title bars, back
buttons, and footers should be the same
throughout the interface to prevent objects
jumping around. The best way of doing this is

Pixel Perfect Precision 22

 0°
H

300° 60°

Hue 352 352 352 352

Saturation 95 22 45 95

240° 120° Brightness 90 98 95 45

Red 230 249 242 116

180°
S
Green 12 194 133 6
0% 100%
Blue 41 201 148 20
B

0% 100%

Colour Model HSB FTW! Have a go at using HSB as a colour

model when creating a palette — once it
Brightness (B) adjusted to create the
variations. See how much more sense the
clicks you’ll see it’s a really efficient way to numbers make in HSB compared to RGB?
create different shades of a base colour. In the
example above the Hue (H) value has been
kept the same, then the Saturation (S) and

Pixel Perfect Precision 23

 Colour Profile Yes No

Code

Naughty Nice

Colour Colour management makes a lot of sense in

print environments, but for digital often
they’re mixed with unmanaged code
(specifying the same original colours) there

Management creates more problems than it solves. The

main issue is a lack of availability throughout
can be a mismatch. It’s much better to ignore
this procedure altogether, and instead test on
the development process — you can manage the device — unlike print this takes a matter of
colours when creating assets, but when seconds and costs nothing!

Pixel Perfect Precision 24

 Åy WWW
Max. Height Max. Width

Text Height and These two tips are handy for creating designs
based on dynamic text, such as translations or
limit with a series of capital Ws — if they fit
then any other phrase will too.

Width user-generated content. To find a line of text’s

maximum possible height use the Åy combo;
similarly, if a text box needs to accommodate
a minimum number of characters then fill that

Pixel Perfect Precision 25

 Settings
Einstellungen
Configurações
Text Length If you’re working on a product that will be used
internationally then consider how long the text
content could be in other languages. The
example above shows what happens with the
German and Portuguese translations of
Settings — an increase of up to 75% in length.

Pixel Perfect Precision 26

 Align Text Align Text Align Text

Align Text Align Text Align Text

ABC123 ABC123 ABC123

Cap Height and Descender x-height Cap Height and x-height

Aligning Text on Shown above are three ways to vertically align

text on buttons. Which method is best
mixture of all three. Make sure that once you
pick a rule you stick to it throughout the

Buttons depends on a few variables, such as the

choice of typeface (for example the cap height
interface — consistency is king!

to x-height ratio can vary) and whether you’re

using uppercase, lowercase, numbers, or a

Pixel Perfect Precision 27

 Align Text Align Text

Align Text Align Text

Naughty Nice

Aligning Text with Try to vertically centre text to an object using

the x-height, rather than the cap height, as it
The exception to this rule is text fixed to all
caps or numbers — these can be aligned by

Objects gives a better optical alignment. In the

Naughty example above you can see that the
cap height as they won’t feature descenders.

main visual weight of the typeface, located in

the x-height area, sits lower than the square.

Pixel Perfect Precision 28

 Active

Selected

Disabled

Object States Remember that interactive elements will likely

need some extra states in addition to the
them as an afterthought — that way you can
make sure their styling fits in with the rest of
default one you provide in a mockup. These the design and works on an interaction level.
can vary depending on the platform and input
method, but in any case try mocking them up
while creating your design rather than leaving

Pixel Perfect Precision 29

 Button Button Button

Outer = Inner Inner Scaled Outer = Inner + Border Width

Borders and Interface components often need some kind of

border, the straight edges are easy enough to
inner and the outer radii, scaling the original
shape in size, and adding the border and

Corner Radii do, but what’s the best way to work out the
outer corner radii based on the inner? There
original inner radius together. The latter is by
far the best method, resulting in consistent
are a few methods available, the most outlines that don’t thicken at the corners like
common being shown above — matching the the other two.

Pixel Perfect Precision 30

 Button Button

Inner = Outer − Border Width Filleted

Borders and If you use the preferred method from the

previous page, but reverse the process by
mathematically “incorrect” it may look better
from a visual perspective. In the engineering

Corner Radii starting from the outer radii, you could end up
with corners on the inner shape that are
world this process is known as filleting, with
each individual corner called a fillet. Check out

Filleting completely square. In these situations Ra Design’s in-depth article on borders and
consider adding a small radius back in, though corner radii to learn more about this subject.

Pixel Perfect Precision 31

 100%
86.6%

100% 100%

Naughty Nice

Equilateral Some graphics applications draw triangle

shapes that aren’t equilateral by default, but

Triangles instead use the same measurements for both

x and y dimensions. To quickly convert to an
equilateral scale the height (with the shortest
edge at the bottom) by 86.6%.

Pixel Perfect Precision 32

 Project Project

Screen_1.psd Archive

Screen_2.psd Screen_140401_r01.psd

Screen_FINAL.psd Screen_140402_r01.psd

Screen_FINAL_FINAL.psd Screen_140402_r02.psd

Screen_FINAL_FINAL_2.psd Screen_140402_r03.psd

Screen_FINAL_FINAL_3.psd Screen_140403_r01.psd

Screen_Latest_1.psd Screen_140403_r02.psd

Screen_Latest_2.psd Screen.psd

Naughty Nice

Version Control Although there are now a multitude of version

control applications available for designers,
most recent file, Screen.psd, is kept at the top
level of the working folder. At the start of the
more often than not we still end up managing day and other key moments, that file will be
files and revisions ourselves. Doing this duplicated, placed in the Archive folder, and
manually is more time consuming, but using a given a filename based on the date (YYMMDD
system like the one shown above will help. The works best) and revision number. Tidy!

Pixel Perfect Precision 33

ACCESSIBILITY
 “ If I make my design
accessible, won’t it
look rubbish?

Accessibility Accessibility doesn’t mean compromise for

those with disabilities, but instead good,
pixel perfect precision, if these principles are
built into your design process from the start,
inclusive design for everyone. There’s no need then you’ll find that making your product
for huge sacrifices in terms of visual appeal, or accessible takes very little time at all.
dramatic amounts of extra time and money to
make everything comply to standards. Like

Pixel Perfect Precision 35

Types of Around 10% of the UK population have some
form of disability, which is a significant
three senses. Don’t rely on one sense alone to
make your product or feature usable, but

Impairment number of potential users. There are four main

types of impairment that will commonly affect
instead allow multiple forms of interaction and
communication where possible — for example
digital projects: sight, hearing, touch and enabling text-to-speech functions for visually
cognitive i.e. the ability to process those other impaired users.

Pixel Perfect Precision 36

 A Title That Is Far Too
Long for This Screen… Title Title
Object Description that runs off the edge o
Object Object
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor Description Description
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ulamco laboris. Object Lorem ipsum dolor sit
Object Description that runs off the edge o
Description amet, consectetur
adipisicing elit, sed do
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor Object eiusmod tempor incididunt
incididunt ut labore et dolore magna aliqua.
Description ut labore et dolore magna
Ut enim ad minim veniam, quis nostrud
exercitation ulamco laboris. aliqua. Ut enim ad minim
Object Description that runs off the edge o Object veniam, quis nostrud
Description exercitation ulamco laboris.
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor

Naughty Nice

Clarity Keep designs as clear and concise as possible

to avoid overloading the user with too much
needed. It’s also important to make your
content suitable for mobile devices — for
content. You can do this by showing example keeping image sizes small for those
information which is relevant to the context of on data connections.
the user, and then utilising progressive
disclosure to reveal more details as they are

Pixel Perfect Precision 37

 OS App App

Title Object Object

Subtitle Description Description

Lorem ipsum dolor sit Object Lorem ipsum dolor sit

amet, consectetur Description amet, consectetur
adipisicing elit, sed do adipisicing elit, sed do
eiusmod tempor incididunt Object eiusmod tempor incididunt
ut labore et dolore magna Description ut labore et dolore magna
aliqua. Ut enim ad minim aliqua. Ut enim ad minim
veniam, quis nostrud Object veniam, quis nostrud
exercitation ulamco laboris. Description exercitation ulamco laboris.

Consistency Your designs should maintain consistency

across a number of levels, including style,
from the host operating system — this means
that users can predict how the product will
navigation, typography, and use of language. behave, based on past experiences with the
Interface elements should act in a standard platform. Most major devices have guidelines
way whenever they appear, and where for their design and interaction patterns — so
possible follow any conventions or patterns check those out.

Pixel Perfect Precision 38

 Title Title Title

Object Object Object

Description Description
Search results

Object Lorem ipsum dolor sit Object

Description amet, consectetur Description
adipisicing elit, sed do
Object eiusmod tempor incididunt Object
Description ut labore et dolore magna Description
aliqua. Ut enim ad minim
Object veniam, quis nostrud Object
Description exercitation ulamco laboris. Description

Navigation As mentioned on the previous page,

navigation should behave consistently as it
other parts of the interface, for example, if a
button performs a certain action in one part of
will help users move around your app without the app, then it should do the same when
feeling lost. Position navigational elements in activated elsewhere.
the same places across all screens, with the
same styles and labels. This also applies to

Pixel Perfect Precision 39

 Title Title

Lorem ipsum dolor sit Some really useful

amet, consectetur i information here!
adipisicing elit, sed do
eiusmod tempor incididunt Lorem ipsum dolor sit
ut labore et dolore magna amet, consectetur
aliqua. Ut enim ad minim adipisicing elit, sed do
veniam, quis nostrud eiusmod tempor incididunt
exercitation ulamco laboris ut labore et dolore magna
nisi ut aliquip ex ea aliqua. Ut enim ad minim
commodo consequat. veniam, quis nostrud
exercitation ulamco laboris.
Some really useful
i information here!

Naughty Nice

Navigation When creating the layout for a page, really

think about why the user is there and what

Content Structure they’re looking for. Based on that, structure

your content in such a way that the most
important parts are the easiest to reach.

Pixel Perfect Precision 40

 Hi! …then this …and finally Hi!
Hit the link at
the bottom
link… this one here.
i Hit the link at
the bottom
i
for the info… for the info…
What you Much easier
Info Info Info were after! Info to get to!

Naughty Nice

Navigation Although cramming everything on to one

screen isn’t a great idea, be mindful that by

Minimise Steps introducing too many steps you can create

hassle for your users. Try to make all
information accessible within four pages —
any more can cause frustration.

Pixel Perfect Precision 41

 Title
Object
Description
Object
Description

Object
Description Object
Description

Object
Object
Description
Description

Object Object
Description Description

Naughty Nice

Navigation Clearly title pages so that users know where

they are, as well as the context of the

Titles information presented to them.

Pixel Perfect Precision 42

 Title Title

Object Object
Description Description

Lorem ipsum dolor sit Lorem ipsum dolor sit

amet, consectetur amet, consectetur
adipisicing elit, sed do adipisicing elit, sed do
eiusmod tempor incididunt eiusmod tempor incididunt
ut labore et dolore magna ut labore et dolore magna
aliqua. Ut enim ad minim aliqua. Ut enim ad minim
veniam, quis nostrud. veniam, quis nostrud
exercitation ulamco laboris
nisi ut aliquip ex ea
commodo consequat. Duis
aute irure dolor in.

Naughty Nice

Navigation Keep your content to an appropriate page size

and try to introduce breaks where it makes
pages too long though, as no one likes to
endlessly flick up!

Appropriate Page sense. Scrolling through a page is much easier

than linking between them, it also reduces the

Sizes amount of page requests which will be

beneficial to mobile users. Don’t make the

Pixel Perfect Precision 43

 Title Title

Object Object
Description Description

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit

consectetur adipisicing elit, sed do amet, consectetur
eiusmod tempor incididunt ut labore adipisicing elit, sed do
et dolore magna aliqua. Ut enim ad eiusmod tempor incididunt
minim veniam, quis nostrud ut labore et dolore magna
exercitation ulamco laboris nisi ut aliqua. Ut enim ad minim
aliquip ex ea commodo. consequat. veniam, quis nostrud
Duis aute irure dolor in reprehenderit exercitation ulamco laboris
in voluptate velit esse cillum dolore eu nisi ut aliquip ex ea
fugiat nulla pariatur. Excepteur sint commodo consequat. Duis
occaecat cupidatat non proident sunt. aute irure dolor in.

Naughty Nice

Navigation Make sure your content only scrolls in one

direction — it’s easier both physically and

Limit Scrolling to mentally for users, as they won’t have to pan

around trying to keep track of what they have

One Direction and haven’t seen.

Pixel Perfect Precision 44

 Pink 1. Pink
Orange 2. Orange
Green 3. Green
Blue 4. Blue

Naughty Nice

Navigation If you’ve got more than three or four points in a

list, consider using numbers instead of bullets

Numbered Lists as these provide some structure, which aids

navigation through the content.

Pixel Perfect Precision 45

 Action Action

“ “
This is a button Go to next screen
that initiates Action.
By pressing it you will
proceed to the next
screen of the app.

Naughty Nice

Navigation Creating labels for text-to-speech functions is

an art form in itself. Make descriptions clear,

Labelling so that users know what’s going on, but also

concise so they don’t have to spend ages
listening to them.

Pixel Perfect Precision 46

 Name

Gyppsy Gyppsy

Enter email address Email

Enter here

“ “
Gyppsy. Enter email Name Gyppsy. Email
address. Enter here.

Naughty Nice

Navigation Place labels above input fields rather then in

them, as once there’s an entry in the latter, a

Labels Above screen reader won’t make as much sense to

the user — it will only output the value

Input Fields entered, not the field name.

Pixel Perfect Precision 47

 7mm2

Naughty Nice

Interaction When creating designs for touch-based

devices, always consider how easy they are to
leave at least a 2mm gap between items so
they don’t get pressed accidentally. If you’ve

Touch Targets operate using fingers and thumbs. We usually

base our designs on a minimum touch area of
got components that will be primarily thumb-
operated, then make those wider, as the
7mm2, which is the rough size of the contact average width of an adult thumb is 25mm.
area between a finger and screen, and then

Pixel Perfect Precision 48

 Action Action

Naughty Nice

Interaction Buttons are the commonly accepted method

of initiating actions in applications, so opting

Buttons and for hyperlinks instead will confuse the user.

Hyperlinks
Pixel Perfect Precision 49
 This is not This is not
a link a link

Naughty Nice

Interaction And talking of hyperlinks, don’t underline text

that isn’t a link, as again this can cause

Buttons and confusion. Users may think something is

wrong when they tap it and nothing happens.

Hyperlinks
Pixel Perfect Precision 50
 Delete Files Delete Files

File 1 File 1

File 2 Deleting
File 2 these files will
permanently remove
them. Are you sure you
File 3 File 3
want to do that?
To delete the items tick the
File 4
box below and press Delete Yes No

I want to delete them File 5

Delete Delete

Error Prevention It’s well worth trying to minimise errors that

can occur while using your product. One of the
using warnings and confirmations as methods
to prevent errors; and providing fail-safes

Design best ways to do that is through design. There

are various techniques available, such as
should anything go wrong. Also, try to make
users think about what they’re doing in
placing useful elements at the fore and important situations, rather than allowing
isolating or hiding those that can be risky; them to cruise through on autopilot.

Pixel Perfect Precision 51

 Name Name

Gyppsy Gyppsy

Telephone Telephone

01234 56789 01234 56789 !

Invalid number

Submit Submit

Naughty Nice

Error Prevention It’s sometimes difficult to input data on mobile

devices due to their small size, so giving users

Checked Data an indication that what they’re entering is

correct can be really useful.

Pixel Perfect Precision 52

 Colour

Select colour

Colour Pink

Enter colour Orange

Green

Blue

Naughty Nice

Error Prevention Where possible provide default values rather

than free text entry, as it will reduce the

Free Text chance of input errors.

Pixel Perfect Precision 53

 Select Items Review

Item 1 You’ve chosen these items:

Item 1
Item 2 Item 2
Item 3
Item 3 Item 4
Item 5
Item 4 Press Confirm Purchase to
buy them, or use the back
Item 5 button to change.

Buy Confirm Purchase

Error Prevention When users are entering data as part of a

process, give them an opportunity to review it

Review, Confirm, before submitting, as well as the option to go

back and correct if necessary.

and Correct
Pixel Perfect Precision 54
 Delete Files Trash

File 1 File 3

File 2 File 4

File 3

File 4

File 5

Delete Restore

Error Prevention If your app allows people to carry out

hazardous procedures, such as deleting their
which allows users to step back in time to a
previous revision.

Reversible content, then provide some way of undoing

that process if needed. This might be in the

Submissions form of a trash folder that only gets emptied

once a week, or some kind of version control

Pixel Perfect Precision 55

 Do you wish to Do you wish to
cancel this order? cancel this order?

OK Cancel Yes No

Naughty Nice

Copy It’s not just how your type looks but what it
says that’s equally, if not more important.
would you select Cancel to cancel the order, or
does it cancel the cancel?
Unclear labelling or instructions confuse
users, so spend time thinking about what
you’re trying to communicate and if it’s being
done effectively. In this Naughty example

Pixel Perfect Precision 56

 Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud Ut enim ad minim veniam, quis nostrud
exercitation ulamco laboris nisi ut aliquip exercitation ulamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure ex ea commodo consequat.
dolor in reprehenderit in voluptate velit
Duis aute irure dolor in reprehenderit in
esse cillum dolore eu fugiat nulla pariatur.
voluptate velit esse cillum dolore eu fugiat
Excepteur sint occaecat cupidatat non
nulla pariatur. Excepteur sint occaecat
proident, sunt in culpa qui officia deserunt
cupidatat non proident, sunt in culpa qui
mollit anim id est laborum.
officia deserunt mollit anim id est laborum.

Naughty Nice

Copy Break up large blocks of text so they’re easier

to digest and keep track of. Use around 5 lines

Break Up Large as a maximum and you’ll not go far wrong.

Blocks of Text
Pixel Perfect Precision 57
 1. Pink — Lorem ipsum dolor sit amet,
1. Pink
consectetur adipiscing elit. Fusce
pellentesque vehicula elit sed tincidunt.
Nam bibendum tempus tellus ac interdum.
2. Orange — Lorem ipsum dolor sit amet, 2. Orange
consectetur adipiscing elit. Sed fermentum
sodales orci. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per
3. Green
inceptos himenaeos. 3. Green —
Pellentesque a nibh nibh, vel dictum risus.
4. Blue — Nunc congue vestibulum nibh
non sollicitudin. Donec eget metus leo. 4. Blue

Naughty Nice

Copy Some users, such as dyslexics, can have poor

organisational skills, so consider breaking

Text to Diagrams down long paragraphs of text into lists or

diagrams, which help them by showing the
information in smaller, ordered chunks.

Pixel Perfect Precision 58

 PPP
PPP (Pixel Perfect
Precision)

Naughty Nice

Copy If you’re using abbreviations make sure to

include their expansion on first use. Better still

Abbreviations try to avoid them altogether, as remembering

what they stand for can prove difficult for
some users.

Pixel Perfect Precision 59

 Pixel Perfect
Precision
Click here
Handbook
(25MB)

Naughty Nice

Copy “Click here” works well enough as a link, right?

Wrong! Not only does it contain zero
describe its destination, as well as make
sense in isolation. Users will often scan a page

Link Text information on where the link leads to, but

also most touchscreen users won’t even have
and pick out links which might lead them to
the content they’re after. Also include any
a mouse to “click” with. Since it’s a form of other relevant details that might be useful,
navigation, the text should instead clearly such as the download size if it points to a file.

Pixel Perfect Precision 60

 Loading

Naughty Nice

Feedback Give users some feedback when they're

performing tasks so they feel reassured.
situations could be in the form of spinners and
messages that notify users of what's
There's nothing more annoying than happening, or pressed states and sounds to
wondering if an app's frozen when it pauses to reinforce that they’ve initiated an action.
process a request, or pressing buttons that
don't seem to do anything. Feedback in these

Pixel Perfect Precision 61

 ! !

!
Alert

Naughty Nice

Feedback Provide feedback in multiple forms where

possible. For example, relying solely on sound

Multi-sensory for an alert would mean that deaf users, or

those located in noisy environments, wouldn’t
be aware that something has happened which
requires their attention.

Pixel Perfect Precision 62

 Error code 04 type 11
An error has occurred in
the bus_1234 Library. Something went wrong!
This problem has caused But don’t worry, press
a crash in the dynamic Return to go back to the
states of the system. previous screen.
Please contact your sys
admin on the IT floor. Return

OK

Naughty Nice

Feedback If something goes wrong let the user know

what’s happened in an understandable way,

Error Messages and provide them with the option to navigate

back to somewhere useful.

Pixel Perfect Precision 63

 ! You work at ustwo
Name Name

Gyppsy Gyppsy

Company Company

usthree usthree !
You work at ustwo

Naughty Nice

Feedback When designing forms, place error messages

next to the relevant field rather than far away,

Error Proximity as this will help users identify the problem

more quickly.

Pixel Perfect Precision 64

 Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce pellentesque vehicula elit adipiscing elit. Fusce pellentesque vehicula
sed tincidunt. Nam bibendum tempus tellus ac
interdum. Lorem ipsum dolor sit amet, consectetur elit sed tincidunt. Nam bibendum tempus
adipiscing elit. Sed fermentum sodales orci. Class
aptent taciti sociosqu ad litora torquent per tellus ac interdum. Lorem ipsum dolor sit
conubia nostra, per inceptos himenaeos.
Pellentesque a nibh nibh, vel dictum risus. Nunc amet, consectetur adipiscing elit. Sed
congue vestibulum nibh non sollicitudin. Donec
eget metus leo, eleifend tempus enim. Lorem fermentum sodales orci.
ipsum dolor sit amet, consectetur adipiscing elit.
Fusce pellentesque vehicula elit sed tincidunt.
Nam bibendum tempus tellus ac interdum. Lorem Class aptent taciti sociosqu ad litora
ipsum dolor sit amet, consectetur adipiscing elit.
Sed fermentum sodales orci. Class aptent taciti
torquent per conubia nostra, per inceptos
sociosqu ad litora torquent per conubia nostra, per himenaeos. Pellentesque a nibh nibh, vel
inceptos himenaeos. Pellentesque a nibh nibh, vel
dictum risus. Nunc congue vestibulum nibh non dictum risus. Nunc congue vestibulum nibh
sollicitudin. Donec eget metus leo, eleifend
tempus enim. non sollicitudin. Donec eget metus leo.

Naughty Nice

Typography As mentioned in Pixel Perfect Principles, good

typography is vital in digital design, and has a
keeping text light and legible you’ll help these
users navigate easily from one line to the next.
great effect on your product’s accessibility.
The basics of good line length and leading are
just as relevant for this medium, especially for
those with visual or cognitive impairments. By

Pixel Perfect Precision 65

 Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce pellentesque vehicula
elit sed tincidunt. Nam bibendum tempus
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
pellentesque vehicula elit sed tincidunt. Nam bibendum tempus tellus ac interdum. Lorem ipsum dolor sit
tellus ac interdum. Lorem ipsum dolor sit amet, consectetur amet, consectetur adipiscing elit. Sed
adipiscing elit. Sed fermentum sodales orci.
fermentum sodales orci.
Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Pellentesque a nibh nibh, vel Class aptent taciti sociosqu ad litora
dictum risus. Nunc congue vestibulum nibh non sollicitudin.
torquent per conubia nostra, per inceptos
Donec eget metus leo.
himenaeos. Pellentesque a nibh nibh, vel
dictum risus. Nunc congue vestibulum nibh
non sollicitudin. Donec eget metus leo.

Naughty Nice

Typography The minimum font size you should be using is

12pt, with a good reading size around 16pt

Font Size (1em). Make text too small and users will be
straining to see what it says, especially on
lower density screens which aren’t that sharp.

Pixel Perfect Precision 66

 Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce pellentesque vehicula
elit sed tincidunt. Nam bibendum tempus
tellus ac interdum. Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque vehicula elit sed tincidunt. Nam
bibendum tempus tellus ac interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum amet, consectetur adipiscing elit. Sed
sodales orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Pellentesque a nibh nibh, vel dictum risus. Nunc congue vestibulum nibh non sollicitudin. Donec eget metus fermentum sodales orci.
leo, eleifend tempus enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque
vehicula elit sed tincidunt. Nam bibendum tempus tellus ac interdum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed fermentum sodales orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, Class aptent taciti sociosqu ad litora
per inceptos himenaeos. Pellentesque a nibh nibh, vel dictum risus. Nunc congue vestibulum nibh non
sollicitudin. Donec eget metus leo, eleifend tempus enim. torquent per conubia nostra, per inceptos
himenaeos. Pellentesque a nibh nibh, vel
dictum risus. Nunc congue vestibulum nibh
non sollicitudin. Donec eget metus leo.

Naughty Nice

Typography Keep line lengths below 80 characters wide. If

any longer a user will find it difficult to gauge
discussed in Robert Bringhurst’s The
Elements of Typographic Style).

Line Length where the start and end points of each line
are, making text harder to read. A good range
to aim for is 45–75 characters, with the
optimum length being 66 including spaces (as

Pixel Perfect Precision 67

 Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce pellentesque vehicula
Lorem ipsum dolor sit amet, consectetur
elit sed tincidunt. Nam bibendum tempus
adipiscing elit. Fusce pellentesque vehicula
elit sed tincidunt. Nam bibendum tempus tellus ac interdum. Lorem ipsum dolor sit
tellus ac interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
amet, consectetur adipiscing elit. Sed
fermentum sodales orci. fermentum sodales orci.
Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos Class aptent taciti sociosqu ad litora
himenaeos. Pellentesque a nibh nibh, vel torquent per conubia nostra, per inceptos
dictum risus. Nunc congue vestibulum nibh
himenaeos. Pellentesque a nibh nibh, vel
non sollicitudin. Donec eget metus leo.
dictum risus. Nunc congue vestibulum nibh
non sollicitudin. Donec eget metus leo.

Naughty Nice

Typography Giving lines of text enough space allows the

eye to clearly see each one, which helps with
line spacing, the break between paragraphs is
also made obvious.

Spacing the flow of reading. The recommended line

spacing (otherwise known as leading) is 1.5
times the type size — similarly, by then
making the paragraph spacing 1.5 times the

Pixel Perfect Precision 68

 Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce pellentesque vehicula adipiscing elit. Fusce pellentesque vehicula adipiscing elit. Fusce pellentesque vehicula
elit sed tincidunt. Nam bibendum tempus elit sed tincidunt. Nam bibendum tempus elit sed tincidunt. Nam bibendum tempus
tellus ac interdum. Lorem ipsum dolor sit tellus ac interdum. Lorem ipsum dolor sit tellus ac interdum. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Sed amet, consectetur adipiscing elit. Sed amet, consectetur adipiscing elit. Sed
fermentum sodales orci. fermentum sodales orci. fermentum sodales orci.

Class aptent taciti sociosqu ad litora Class aptent taciti sociosqu ad litora Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos torquent per conubia nostra, per inceptos torquent per conubia nostra, per inceptos
himenaeos. Pellentesque a nibh nibh, vel himenaeos. Pellentesque a nibh nibh, vel himenaeos. Pellentesque a nibh nibh, vel
dictum risus. Nunc congue vestibulum nibh dictum risus. Nunc congue vestibulum nibh dictum risus. Nunc congue vestibulum nibh
non sollicitudin. Donec eget metus leo. non sollicitudin. Donec eget metus leo. non sollicitudin. Donec eget metus leo.

Naughty Nice

Typography Multiple lines of text should always be left-

aligned, as the inconsistent spaces in justified

Alignment and centred text can be a problem for users

with learning difficulties. Justification also
creates distracting white rivers running
through the paragraphs.

Pixel Perfect Precision 69

 Example
Example Example
Example Example
EXAMPLE

Naughty Nice

Typography Keep text formatting as simple as possible to

gain the best legibility for your users. Serif
whole sentences or paragraphs also makes
text more difficult to read AND LOOKS LIKE

Formatting type is harder to read for visually impaired or

dyslexic users, as its styling can obscure the
YOU’RE SHOUTING!

shape of the letters — likewise, italics and

underlines add visual noise. Capitalisation of

Pixel Perfect Precision 70

 Example
Example

Naughty Nice

Typography Lastly, avoid moving or blinking text, as

visually impaired and dyslexic users can find

Formatting this very distracting. Also worth noting that

these effects can trigger epileptic seizures.

Pixel Perfect Precision 71

 Exa… Example 1
Exa… Example 2
Exa… Example 3

Naughty Nice

Typography Truncate text only where necessary, as it hides

useful content.

Truncation

Pixel Perfect Precision 72

 Example
Example +

Naughty Nice

Typography Wherever possible, try not to merge text with

graphics and instead implement at a code
both of which aren’t possible when embedded
into a graphic.

Merging Text with level. This separation means words can be

recognized by text-to-speech functions and

Graphics read out loud, or have their size and colour

changed according to the user’s preference —

Pixel Perfect Precision 73

 Information i Information

Naughty Nice

Colour Try to give users visual aids such as icons and

colours to help them identify important
useful for those with cognitive impairments.
Make sure it’s used consistently though!

Visual Aids content on a page. Colour coding is also a

handy way to identify different types of
content — something which can be especially

Pixel Perfect Precision 74

 Passed
Failed

Naughty Nice

Colour However, don’t rely on colour alone to convey

a message, always include a secondary
Also bear in mind that approximately 8% of
males have some form of colour blindness,

Don’t Rely on method as well. Some mobile devices suffer

from poor colour contrast, or are used in less
affecting their ability to distinguish between
certain hues — they would have difficulty

Colour Alone than ideal lighting situations, both of which telling the difference between the two
can reduce the impact and visibility of colours. Naughty shapes based on colour alone.

Pixel Perfect Precision 75

 Naughty Nice

Colour If you’re using colour to present information,

such as the bars in a graph, then introduce a

Alternatives secondary method to distinguish between

them. In this case patterns have been applied
to the orange and blue areas.

Pixel Perfect Precision 76

 Example Example

Naughty Nice

Colour Good contrast between text and background

colours is the best way to make sure that
make sure there’s still enough contrast in real-
world situations.

Colour Contrast important information is still visible for users

with some form of colour blindness or visual
impairment. Also check designs on an actual
device in non-ideal lighting conditions, to

Pixel Perfect Precision 77

 AA

Foreground AA (Large)
Background AAA

AAA (Large)

Colour There are numerous tools out there for testing

colour contrast. A couple of great options are
standards. AAA is better, needing a lot more
contrast, but too much could have a negative

Colour Contrast Colour Contrast Analyser and Jonathan

Snook’s web-based checker — in either case
impact on your designs. The tests also
differentiate between body sized copy and

Checkers just pop in the two colours and away you go! “Large” text, which is 18pt+ (or bold and larger
As a minimum you should aim to pass AA than 14pt).

Pixel Perfect Precision 78

 Red / Blue /
Yellow White Black
Magenta Cyan

Colour If you had to describe colours without using

text labels, what would you do? Turns out a
subtractive light, you can create the whole
spectrum — just as you would with paint or

ColorADD great solution already exists, ColorADD is a

simple system that represents colours using
ink. It’s also possible to make light and dark
shades of those colours, by merging them with
symbols. By combining these symbols, which the symbols for black and white.
stand for the three primary colours in

Pixel Perfect Precision 79

 Light Light Light Light
Pink Orchid Khaki
Orange Yellow Green Blue

Red Orange Yellow Green Blue Violet Brown

Dark Dark Dark Dark

Bordeaux Brick Purple
Yellow Green Blue Brown

Colour There’s lots more information on the ColorADD

site, including some great colouring pencils

ColorADD for colour blind people.

Pixel Perfect Precision 80

 Title

Object
Description

Object
Description

Object
Description

Object
Description

Flashing Users with photosensitive seizure disorders,

such as epilepsy, can have episodes triggered
than three times a second. For more detailed
information have a read of WCAG’s (Web
by flashing at certain frequencies that lasts Content Accessibility Guidelines) page on the
longer than a short period of time. The basic “Three Flashes or Below Threshold”.
recommendation is that there shouldn’t be
anything on the screen which flashes more

Pixel Perfect Precision 81

 Title Title

ling ticker. Scrolling ticker. Scr ker. Scrolling ticker. Scrolli

Lorem ipsum dolor sit Lorem ipsum dolor sit

amet, consectetur amet, consectetur
adipisicing elit, sed do adipisicing elit, sed do

Naughty Nice

Movement Movement may be problematic for some

people, such as those with learning disabilities
elements to stay static, so they have a chance
to take everything in. If you really need to
or attention disorders, as it can be very include moving content in your product, then
distracting and breaks their concentration prevent it from starting automatically and
from information elsewhere on the page. provide the option to pause or stop, should
Others who can’t read quickly will also want users choose to press the play button.

Pixel Perfect Precision 82

 Text to
speech Text to
speech

Testing Another piece of general good practice that

can be applied to accessibility! Remember to
how well they’re working. Speaking of real
things, the best tests are with people that
test your app’s accessibility features such as regularly use these features.
black and white, zoomed view, and text-to-
speech. Try them out on real devices, rather
than simulators, as you’ll get a better feel for

Pixel Perfect Precision 83

 Title

Object
Description

Object
Description

Object
Description

Object
Description

Testing Tucked away in the View > Proof Setup menu

are preview options for the most common

Colour Blindness forms of colour blindness — this is a great

way to quickly check if there might be contrast

Preview in Adobe issues with your chosen palette.

Pixel Perfect Precision 84

 Title
Title
Object
Description Object
Description

Object
Description Object
Description

Object
Description Object
Description

Object
Description Object
Description

Testing Sim Daltonism is a more advanced application

for checking colour blindness accessibility,
resizable floating window that filters
whatever’s underneath the mouse cursor.

Sim Daltonism featuring previews for most forms of the

condition. Rather than being a Photoshop only
tool, it works across the entire OS, providing a

Pixel Perfect Precision 85

DESIGN
DESIGN AND
AND
DEVELOPMENT
DEVELOPMENT
Design and Design is only one part of releasing a product,
equally important is its development. There
often produces unsatisfactory results. It’s
much better to work on a problem together as

Development used to be a distinct barrier between the two

disciplines, with designs being finished then
a team, which is the main focus of this
chapter. Also highlighted are ways to make the
sent off to be built by developers — classic transition from design to development more
waterfall. But that kind of disjointed process efficient, saving time and hassle for everyone.

Pixel Perfect Precision 87

Essentials This first point is an essential part of working
together. Rather than receiving a product build
necessary come to a compromise — removing
a lot of tension in the process. As a certain

Communication that doesn’t look like it was intended, or

designs that will be far too difficult to
advertising campaign used to say: “It’s good
to talk.”
implement, good communication will allow you
to explain your decisions, discuss them and if

Pixel Perfect Precision 88

Essentials Rather than staying in silos and sticking to
your disciplines, try working together a little
have valuable input on what’s technically
possible. In the long run, this means everyone

Collaboration more. If you’re having a design meeting to

generate ideas, then get the developers on
on the team feels more invested in the project
— which results in a better end product.
your project involved as well. Not only will this
add a different perspective, but they’ll also

Pixel Perfect Precision 89

 i i

Essentials By working together more closely, you’ll start

to learn about each other’s disciplines, and in
learning is more autonomy in decision-
making. You won’t need to keep asking

Learning particular, any pain points you might have. By

knowing these, you can both take steps to
whether your thinking is sound. Instead you’ll
know enough about what’s possible, or why
reduce them, which will make the project far something should be a certain way, to make
more enjoyable. An additional benefit of the choice yourself.

Pixel Perfect Precision 90

 Button Button

Essentials A frequent sticking point between designers

and developers is the difference between the
your designs matched to the pixel, ask
yourself whether that time could be better

Be Realistic original mockups and the finished app. The

previous points about teamwork can help get
spent improving the app or fixing bugs. It’s no
good having a beautiful product which is
the two closer together, but there should be difficult to use or keeps crashing.
some realism as well. Instead of trying to get

Pixel Perfect Precision 91

 640 × 960 326ppi

Preparation Before starting any design work find out as

much as you can about the app’s intended
limitations around interaction or animation
frame rates. The development environment

Specifications platform. Screen size is an obvious starting

point, as well as the pixel density, but also
might also have restrictions in terms of
available fonts or rendering effects, so check
track down its bit depth (how many colours those out too.
the screen can actually display) and any

Pixel Perfect Precision 92

Preparation Part of the specification discovery process is
learning what you need to deliver to the
colours and effects? Do assets need to be 9-
sliced so they’re scalable in the product?

Deliverables developers, so they can build the product.

What format do they need the files in: PNGs,
Getting hold of this information now means
you can design around any requirements from
PSDs, vectors? If the designs will be rendered the start.
in code, what limitations are there in terms of

Pixel Perfect Precision 93

 Version

Object
Description

Object
Release
Description

Object
Description

Object
Description

Review and Iterate

Preparation In addition to figuring out what you need to

deliver, sit down with the developer(s) and
and how are you going to manage sending
files back and forth? What’s the best way to

Workflow discuss how you’re going to work together.

Will the project be waterfall or agile? How
track changes and requests? It’s also
important at this stage to schedule in regular
often will there be builds of the app to look at? review sessions, so you can both sit down and
What resources do you need from each other, discuss the project’s progress.

Pixel Perfect Precision 94

 PPP–09 Work on translated version

PPP–08 Supply fonts

PPP–07 Create a test build and send to Gyppsy

PPP–06 Squares need to be left aligned

PPP–05 What colour is the text?

PPP–04 Create search results page

PPP–03 Down state for play button needed

PPP–02 Fix bug in playback controls

PPP–01 Supply green square asset

Preparation An essential part of the workflow is setting up

some sort of tracking system. Developers will
any bugs they spot too!). Trying to do this over
email is messy, so use something more

Tracking want somewhere to request additional or

missing assets, as well as log bugs, and
suitable for the task. This can be something as
simple as a shared to-do list, right up to full-
designers will want to note down any visual blown project management software.
changes that they’d like updated (along with

Pixel Perfect Precision 95

 Button Button

Naughty Nice

Design As part of the project preparations you should

have found out any visual limitations, so try to
are usually OK, but more advanced effects
might not be possible. If in doubt, have a chat

Appropriate stick to those when creating your designs. Use

typefaces that are available on the device, and
with the developer to see what you can and
can’t do.

Styling keep to styling that can be recreated faithfully.

Simple gradients, drop shadows, and strokes

Pixel Perfect Precision 96

 Title My Favourites

Track I Love Pixels!

Artist The Pixel Perfecti…

Track Line Me Up
Artist The Pixel Perfecti…

Track Pixel Monkey

Artist Tony & Dones

Track Lean & Agile

Artist The ustwo Band

Naughty Nice

Design To maintain the team’s collective sanity, try to

use realistic content in your designs. It’s
case scenarios occur, such as too many words
or a missing image — you can bet your life

Realistic Content incredibly annoying when you have to go back

and redo everything because there wasn’t
they’ll crop up when the app is out in the wild.

enough room left for an average amount of

text. Also consider what happens when worst

Pixel Perfect Precision 97

 Layers Layers

Design T Title

Background Title

Square Blue

Square Green

Square Orange

Square Pink

Rectangles

Background

Naughty Nice

Design Design is rarely a one-step process, so keep

your files editable — that way you can quickly
created, or because they want to export
assets themselves.

Keep Everything make changes and updates. It’s also very

useful as sometimes developers will want the

Editable source files to see how a design’s been

Pixel Perfect Precision 98

 Active

Button Selected

Disabled

Naughty Nice

Design Remember to design and deliver the different

states for objects and export them all at the

Object States same size, so they’re aligned and pixel perfect.

Pixel Perfect Precision 99

 Accent Colour
#15d0d4
Title Text Active
Px Grotesk Light 36pt #15d0d4

Secondary Colour
Subtitle Text Selected

Divider Line 2px #999999

#757575
Px Grotesk Light 36pt #757575

Body Text Colour

#333333
Body Text
Px Grotesk Light 14pt #333333
Disabled

Design Style guides are a really handy resource to

have on a project, since you can gather all the
as the master document for all the project
assets and styles, you'll no longer need to go

Style Guide various assets and styling in one place, see if

everything looks consistent and then send off
through every single screen mockup making
tiresome changes. Whatever's in this bible is
to the developer as a reference guide. Also, if correct and variations elsewhere can be
this file is kept up to date and you both use it ignored. It's liberating.

Pixel Perfect Precision 100

 .square_pink {
Title background-color: #ed0082;
position: absolute;
Object left: 32px;
Description top: 128px;
width: 96px;
height: 96px;
Object
}
Description
.rectangle {
background-color: #e8e8e8;
Object position: absolute;
Description left: 32px;
top: 128px;
width: 96px;
Object
height: 96px;
Description
}

Design One way of making sure that everything looks

and works how you want it to, is designing in
on your way to making simple interactive
prototypes in HTML — designs really start to

Design in Code code. You could write this from scratch, but it
might be quicker to create a mockup as usual,
come to life once you can play around with
them on a device.
then export the layers and styles directly to
CSS. Once that code’s generated you’re well

Pixel Perfect Precision 101

 Colour Profile Yes No

Code

Naughty Nice

Design As mentioned in other chapters, avoid using

colour profiles as they can cause mismatches

Colour Profiles between assets and code.

Pixel Perfect Precision 102

 = Deadline

Naughty Nice

Delivery Try to deliver work on time, not only does it

create bad feeling when people miss
change in schedule. Chances are it won’t be a
problem and they can work on something else

Timing deadlines, but you could also become a

bottleneck in the project. If something’s taking
in the meantime.

longer than expected, then speak to the team

in advance so everyone can adapt to the

Pixel Perfect Precision 103

 Project Project

Rectangle.png Design

Square.png Screen.psd

Square copy.png Assets

Square copy 2.png Rectangle.png

Square copy 3.png Square Blue.png

Untitled.psd Square Green.png

Square Orange.png

Square Pink.png

Delivery Keeping your project files organised will make

the transition from designer to developer (and
example Photoshop layers) as other people
might want to work on them.

Organisation back again) far more efficient. Name and

structure everything logically and consistently,
using a system that you both understand. This
also applies to the content within files (for

Pixel Perfect Precision 104

Delivery The naming system you use plays a large part
in setting up a good organisational structure.
Then add the unique identifier, as an example,
buttons on the home screen which create and

Naming Systems At the start of the project speak to the

developer about the best way to name files, as
delete documents would be called:

they often have a preferred method and then btn_home_new btn_home_delete

adapt it over time if needed. A good approach
is to base your naming on a hierarchical Finally, if the component has multiple states
system, which starts off with a broad then add them to the end:
identification of the component and then
progressively adds more information. So you btn_home_new_default
might end up with a structure like this: btn_home_new_highlighted

type_location_identifier_state As an aside, the system shown here uses

lowercase letters and underscores instead of
The type refers to the category the component spaces in the names, which is our usual
belongs to, such as: choice. Another method is CamelCase, which
uses no spaces and instead capital letters to
bg (background) btn (button) define each part of the structure:
icn (icon) img (image)
BtnHomeNewDefault
The next step is to add the screen or location BtnHomeNewSelected
where this component appears (global means
it’s used across multiple sections):

bg_help btn_home icn_global

Pixel Perfect Precision 105

Delivery
Naming Systems

icn_global_signal_full icn_global_battery_full
btn_global_menu_default Title btn_global_search_default

Object
btn_home_play_pink_default bg_home_description
Description

Object
btn_home_play_orange_default
Description

Object
btn_home_play_green_default
Description

Object
btn_home_play_blue_default
Description

Pixel Perfect Precision 106

 Naughty Nice

Delivery When exporting assets keep them in

uncompressed formats like PNG, as

Don’t Compress development environments will often apply

their own compression anyway.

Assets
Pixel Perfect Precision 107
 Title Title
Movie.avi
Title Object Object
Description
Search results

Object
Description
Object
Description Movie
Object
Object Object
Description Description Description Watch me!
I’m going to move
Object Object
Description Description
Object Static
Description I don’t move

Title Static
Object Object
I don’t move
Description Description

Lorem ipsum dolor sit Static

amet, consectetur I don’t move
adipisicing elit, sed do
Object eiusmod tempor incididunt
ut labore et dolore magna
Description aliqua. Ut enim ad minim
veniam, quis nostrud
exercitation ulamco laboris
nisi ut aliquip ex ea.

Delivery When sending designs over to developers, try

to include as much useful information as
incredibly useful. As are movie clips showing
the desired speed and style of motion.

Specifications possible. Lengthy documents listing all the

measurements on each screen will probably
be ignored, but flows and prototypes that
demonstrate how an app works can be

Pixel Perfect Precision 108

 Assets
Object States
Style Guide
Flows
Check Again

Delivery Before sending off a delivery to the developer,

check through to see if you’ve included

Check! And Then everything they need and then check again
just to make sure!

Check Again!
Pixel Perfect Precision 109
PHOTO
SHOP &
USTWO
Now that we’ve covered a lot of design principles, let’s dive into
some specifics. Photoshop is our day-to-day tool here at ustwo,
and across the industry as a whole, so knowing how to use it
properly is pretty essential. The following sections show you some
of the methods and techniques we use…

Pixel Perfect Precision 110

Photoshop

COLOUR
PROFILES
System Settings To avoid any nasty colour jumps between
Photoshop and Mac OS X, your colour settings
need to be set up correctly. The first thing to
do is make sure System Preferences >
Displays > Color is set to the device you are
currently using — in this case Color LCD.

Pixel Perfect Precision 112

Photoshop Colour Next, in Photoshop, go to Edit > Color
Settings… and change Working Spaces > RGB

Settings to Monitor RGB – Display. Also change Color

Management Policies > RGB to Off.

Pixel Perfect Precision 113

Photoshop Save Additionally, in Save for Web the Convert to
sRGB option needs to be deselected, and

for Web Preview should be set to Monitor Color. Your

colours should now be consistent.

Pixel Perfect Precision 114

Color Faker Although following the previous advice will
give you the correct set up for day-to-day
handles profiles. For an in-depth explanation
read this article on OS X Color Meters and
tasks in Adobe products, you may need to take Color Space Conversion, but the long and
an additional step if you’re having trouble with short of it, is that you should download Color
colour values in Apple software like Xcode or Faker and switch it on!
Keynote. This is down to the way that OS X

Pixel Perfect Precision 115

Photoshop

PIXEL
PRECISION
 Naughty Nice

Shape Layers We love Shape Layers here — our workflow is

almost entirely based on them. Being vectors,
they’re completely editable, allow scaling and
transformation of the shape with no loss in
quality, and are less resource hungry than
Smart Objects or bitmaps. Winner.

Pixel Perfect Precision 117

 Naughty Nice

Shape Layers Also, try to use vectors for other parts of your
design where you might instinctively use a
added advantage that the fill will
automatically scale if the canvas size is

Other Vectors bitmap, for example layer masks, as this will

further increase the versatility and speed of
increased. Nice.

the file. Another related tip is to use unmasked

Shape Layers for backgrounds, which have the

Pixel Perfect Precision 118

 Naughty Nice

Shape Layers As an illustration of the performance hit that

bitmaps create, take a look at the two values
version takes up around five times the amount
at 3.47MB! On larger files you can save

Performance highlighted above. These are document size

readouts for the layers featured on the
yourself hundreds of Megabytes of memory.

previous page. The vector design only uses

113.9KB of memory, but the all-bitmap

Pixel Perfect Precision 119

Live Shape Photoshop CC has an awesome new addition
to the Properties panel: Live Shape Properties.
or change one or all of the corner radii? Just
select the shape and adjust the values. Also,

Properties Any new Shape Layer now has a set of

measurements that can be adjusted after it’s
unlike in previous versions of Photoshop, when
you hit transform and resize a shape, the
been created, which is great for getting pixel corner radii are now preserved rather than
perfect dimensions and positions. Need to add being distorted. Time saved = loads.

Pixel Perfect Precision 120

Corner Editor If you’re using a version of Photoshop prior to
CC, then there is still a way to edit corner radii
you can even have different sizes for each
corner, just like in CC. There’s also the option
after you’ve drawn a shape: Corner Editor. to use different styles, so you’re not just
With it installed, you can select a Shape Layer, limited to rounded corners.
bring up the window above from File > Scripts
> Corner Editor, and change the radii value —

Pixel Perfect Precision 121

Layer Effects Another thing we love here are Layer Effects,
so we try to create as much styling as possible
with them. The effects are completely editable,
scalable in ratio to their underlying shapes,
and can be copied and pasted to other layers.

Pixel Perfect Precision 122

Linked Smart Linked Smart Objects work in a similar way to
regular Smart Objects, except that they
updates to these source files propagating to
every design that references them — very

Objects reference external files for their content. This

opens up the potential for a team of designers
powerful. Setting up a Linked Smart Object is
dead simple — just choose Place Linked…
to use the same common library of interface from the File menu and select the object you’d
components across an entire project, with any like to import.

Pixel Perfect Precision 123

 W : 160 px
H : 160 px

Some Text

Info Panel Fire up the Info Panel when the cursor readout
just isn’t enough. Not only does it show
detailed measurements, but it can also be set
to display colour and opacity values amongst
other things, allowing you to quickly check
consistency throughout a design.

Pixel Perfect Precision 124

Snap to Pixel Grid With Photoshop CS6 and above there’s a
global option to snap vectors to pixels in the
every Shape Layer you draw will automatically
be pixel precise.
Preferences — just make sure Snap Vector
Tools and Transforms to Pixel Grid is selected
(it’s on by default). Much easier knowing that

Pixel Perfect Precision 125

Snap to Pixel Grid There may be times when you’d like to alter
Shape Layers on a sub-pixel level, in which
Function Key shortcut to it, hit Record, and
then go in to the preferences and switch Snap

Shortcuts case you won’t want pixel snapping activated.

If you often find you want to toggle the feature
Vector Tools and Transforms to Pixel Grid on.
Afterwards follow the same steps for off. No
on and off like this, then why not automate the need to hit the Preferences any more.
process? Simply create a new Action, assign a

Pixel Perfect Precision 126

Shape Layer In Photoshop CS5 Rectangles and Rounded
Rectangles have a built in option to aid pixel
Rounded Rectangle, as their options are
independent of each other.

Options precision: Snap to Pixels. To access this option

click the drop-down menu to the right of the
shapes in the top tool bar. This needs to be
individually selected for both Rectangle and

Pixel Perfect Precision 127

Nudging If you’re zoomed into a design in Photoshop
CS5 be careful when using the keyboard to
in at 200% the points will only move 0.5px (i.e.
half the amount), creating blurred edges —
shift points of a Shape Layer — the nudge not good. With CS6 pixel grid snapping the
amount varies according to the zoom factor. points move 1px no matter what the zoom
To guarantee a 1px movement, zoom out to level. You’ll need to switch off the snap to
100% and press the arrow key once. If zoomed move by smaller increments though.

Pixel Perfect Precision 128

Snapping Photoshop has lots of handy tools to help with
pixel precision. One of the first things you
which really helps with alignment. The Snap To
submenu allows you to alter the various items
should do when setting up the program is that Photoshop can use for snapping.
enable snapping — go to View > Snap and
make sure it’s active. Now your objects will
snap to other items and guides on the canvas,

Pixel Perfect Precision 129

Align and As with most graphics applications,
Photoshop has and abundance of align and

Distribute distribute options — find them in the Layer >

Align and Layer > Distribute menus.

Pixel Perfect Precision 130

Grids Sometimes it’s useful to have a grid on screen
when laying out a design. The example above
to Photoshop > Preferences > Guides, Grid, &
Slices… to set yours up.
is using 10px gridlines with 10 subdivisions,
making it easy to count pixel dimensions
without the grid becoming overpowering. Go

Pixel Perfect Precision 131

 Some Text

GuideGuide To help automate guide creation, there’s a free

Photoshop Extension available called
widths, or if you’ve already sussed these out
on a scrap of paper, you can just input all the
GuideGuide. Once installed it can be found in values and get your guides inserted
the Window > Extensions menu. By varying automatically. There are tooltips for each of
the data you enter it can work out the input box icons to let you know what they
measurements such as column and gutter all do.

Pixel Perfect Precision 132

 90°

drag to new
document

120°

Global Light This is one of those little things that can catch
you out if you’re not careful. Objects that have
close all your open files and go to Layer >
Layer Style > Global Light… to alter the default

Default Angle a custom Global Light setting will take on the

default value of 120° if they’re copied into new
angle to something more commonly used —
90° works well for us.
documents, which can really mess designs up.
To help prevent this from happening too often

Pixel Perfect Precision 133

 Some Text Some Text

Live Previewing Test, test, test again, and then test some
more! One of the best things you can do is
saving out files and then copying them across
to a phone. A couple worth checking out are
look at your designs on the device(s) they’re Skala Preview for iOS (and now Android) and
intended for. There’s lots of software out there Android Design Preview for… well you can
which will give a live preview straight out of guess that one!
Photoshop, so there’s no need to faff around

Pixel Perfect Precision 134

Photoshop

TECHNIQUES
 Some Text

Naughty Nice

Object Colours With Shape Layers and text it’s a good idea to
change the colour using the object’s own
object easier to find in the Layers panel. As an
example, how quickly can you locate the blue
setting, instead of the Color Overlay Layer square in each of the examples above?
Effect. The benefits of this are a) there’s no
need to load up the Layer Style window if you
want to change the colour, and b) it makes the

Pixel Perfect Precision 136

 Some Text

Naughty Nice

Object Gradients Same thing with gradients — use a gradient

fill layer instead of a Layer Effect if possible.

Pixel Perfect Precision 137

Object Gradients Whichever gradient method you choose, make
sure the Dither option is selected. This will

Dither help smooth out the colour transition and

prevent any banding. With Photoshop CS5 you
can only apply a dither to a gradient layer, but
in CS6 and above it’s possible for both.

Pixel Perfect Precision 138

 Naughty Nice

Concise Layer Try not to spread the Layer Effects for an

object across multiple layers. It’s much better

Styles if they’re all together, as it keeps things tidy

and makes it easier to copy and paste styles.

Pixel Perfect Precision 139

 Scale Layer by 200%

Scale Effects by 200%

Scale Layer Although you can choose the Scale Styles

option when you resize an entire document
but you can use the Scale Effects… option to
change them as well — although you’ll need

Effects through Image Size… there are times when

you want to scale individual layers and their
to know the percentage increase/decrease of
the original shape to get the two to match.
effects. When you resize one of these objects, This option can be found by right-clicking the
the styling doesn’t automatically adjust with it, fx icon on the layer in question.

Pixel Perfect Precision 140

Layer Effect At first glance it may seem that the only way to
create a stroke with Layer Effects is the Stroke
outlines. The Stroke will always appear on top,
followed by Inner Shadow and Inner Glow on

Strokes option, but in fact there are multiple ways to

add them to a shape. If you use the Inner/
the inside, likewise Outer Glow and Drop
Shadow on the outside. Downsides? At thicker
Outer Glows and Shadows, and set their widths they can blur, and the Choke can cause
Choke to 100%, you can also get solid roughness on rounded edges.

Pixel Perfect Precision 141

 Naughty Nice

Layer Effect vs. If you want top quality outlines, and have
Photoshop CS6 or above, then add a vector
bevelled edges, as well as dashed outlines.
They can also be scaled to half pixels, which is

Vector Strokes stroke directly to your Shape Layer rather than

as a Layer Effect. Not only are they better
really useful if you’re designing for iOS, as you
can set a non-Retina stroke to 0.5px which will
quality (more noticeable at thicker widths), but then scale up to 1px when the size is doubled
you have the option to use rounded, square, or to Retina.

Pixel Perfect Precision 142

Complex Vectors If you want to draw complex vectors, it’s often
easier to use Illustrator than copy and paste
yourself: “Don’t be a joke, outline the stroke”. If
the vector is more than just a shape, for
the outline into Photoshop as a Shape Layer. example a multi-colour desktop icon, then it
Make sure you outline any strokes in the will have to be pasted as a Smart Object.
Illustrator original, otherwise they won’t import
properly. Remember by reciting this phrase to

Pixel Perfect Precision 143

 Naughty Nice

Pasting From One quirk of pasting Shape Layers from

Illustrator is that it can sometimes shift the
Always check to see if this has happened, and
if it has, shift the shape back by half a pixel to

Illustrator object off-centre by half a pixel in either or

both axes, resulting in blurred edges —
its intended position.

although with CS6 onwards and pixel

snapping this seems to be less of an issue.

Pixel Perfect Precision 144

 Naughty

Blending Modes When creating effects remember to only use

blending modes on items which will later be
the blending effect disappears and it becomes
a white to black gradient.
merged with other layers. In the example
above the Highlight layer will be exported as a
separate asset, but when shown on its own,

Pixel Perfect Precision 145

 Nice

Blending Modes The best solution is to recreate the effect

using a layer that’s independent of what’s
underneath it.

Pixel Perfect Precision 146

 The original line of text The original line of text

Replacement text Replacement text

Naughty Nice

Text Alignment When adding text, make things easier in the

future by matching the paragraph alignment
to that in the design — if the text is then
changed, it will still look correct.

Pixel Perfect Precision 147

 Naughty Nice

Paragraphs If you’ve got a paragraph of text, then place it

in a container (Paragraph Text) rather than
though, the text will automatically wrap,
making the paragraph easier to update.
manually adding line breaks (Point Text). These
will often have to be reset if the copy or
typeface is changed. With a proper container

Pixel Perfect Precision 148

Convert to Fortunately, Photoshop allows you to convert
Point Text to Paragraph Text, and vice versa,
Photoshop CS5 these are found in the Layer >
Type > menu.

Paragraph Text by selecting Type > Convert to Paragraph Text

/ Convert to Point Text, or right-clicking the
layer and choosing the same option. In

Pixel Perfect Precision 149

 Naughty Nice

Hyphenation Most devices don’t support hyphenation, so

for accuracy leave it out of your designs.

Pixel Perfect Precision 150

 Naughty Nice

Leading Photoshop’s default leading is just a bit too

tight for comfort, so make your text easier to
read by spacing it out a little bit. See how
much better the Nice example above is after
increasing from the (Auto) setting to 20pt.

Pixel Perfect Precision 151

 None Sharp

Crisp Strong Smooth

Text Anti-aliasing There are a few different types of text anti-

aliasing in Photoshop, so try them out to see
option which is the closest match to the
intended screen’s anti-aliasing.
which gives you the most suitable legibility
and rendering — Crisp seems to be a good
all-rounder. Similarly, if you’re mocking up text
that will be generated elsewhere, then find the

Pixel Perfect Precision 152

 Mac LCD Mac

Text Anti-aliasing Photoshop CC also includes anti-aliasing

options that replicate the operating system’s
RGB. For a little extra detail on these new
rendering options, have a look at Realmac

System sub-pixel rendering, giving you a good idea of

how text will look in a browser for instance. It’s
Software’s Working with Type in Photoshop
blog post.
worth noting though that unlike browsers, the
sub-pixels in Photoshop are greyscale, not

Pixel Perfect Precision 153

 Some Text

Some Text

Some Text

Some Text

Naughty Nice

Lists When creating lists, especially those with

graphics next to them, you might find it easier
content perfectly aligned and distributed, but
it’ll be quicker to update in the future.
to place all the descriptions in a single text
block and set the leading to the spacing
you’re after, rather than have each line as a
separate layer. Not only will it keep the

Pixel Perfect Precision 154

 Some Text

Some Text

Quick Preview Mobile phone screens often have a higher

pixel resolution (PPI) than those on computers,
out until your document roughly matches the
measurements of the phone screen — if
meaning the physical dimensions of your anything looks too small make it bigger!
designs will be smaller on the former than the
latter. As a quick check to see if text and
interactive elements are a useable size, zoom

Pixel Perfect Precision 155

Photoshop

ORGANISATION
Layers Panel By default, Photoshop will add “copy” to the
end of every duplicated layer’s name — very
Add “copy” to Copied Layers and Groups.
Every little helps.

Options annoying. To switch this feature off, and also

remove some other visual clutter, go to the
Layers Panel Options and untick Use Default
Masks on Fill Layers, Expand New Effects, and

Pixel Perfect Precision 157

 Some Text

Naughty Nice

Naming Layers Don’t be selfish, give your layers proper

names. Not only does it make life easier for the
created so you don’t need to rush and do
them all at deadline time.
next person who has to work with your files,
but clients will think you’re amazing if you
send off something that’s really well
organised. Pro tip: name your layers as they’re

Pixel Perfect Precision 158

 Before After

Group Layer If you’d like to do some batch renaming then

download this Group Layer Renaming script

Renaming by Kamil Khadeyev. It does exactly what it

says on the tin, letting you add text or
completely rename layers, as well as attach
sequential numbers using the %n variable.

Pixel Perfect Precision 159

 Some Text

Naughty Nice

Ordering Layers To make your files super special, be sure to

order your layers logically in addition to
book (apologies if your first language goes in
another direction).
naming them. A good method is following
where the elements appear in the design from
left to right, top to bottom, just like reading a

Pixel Perfect Precision 160

 Some Text

by Name by Kind

Search Coupling good organisation and the search

features available in Photoshop will give you
content — perfect for situations like updating
multiple buttons with a new style. There’s lots
an incredibly powerful way of working with of other search types available, including Kind,
your designs. For example, by naming layers Effect, and [Layer] Colour, so have a play and
consistently with prefixes such as “btn”, “icn” see what other filtering systems you can come
etc. you can quickly filter them by their up with.

Pixel Perfect Precision 161

Grey (“neutral”) used for
reference items like
wireframes or screenshots Red (“danger”) for old,
unused elements
Popup window

The green labels highlight

different states of the
same button

Core design doesn’t

have colour labels

Colour Coding Here’s an example of colour coding layers so

they’re easier to navigate. Try to leave the core
design untouched though so the panel doesn’t
end up looking like a bag of Smarties. Right
click on a layer to choose a colour label.

Pixel Perfect Precision 162

 Naughty Nice

Expanded Layer Like a messy house guest, expanded Effects

can make it harder to find the things you’re

Effects actually after. Keep them collapsed and life

will be better for everyone.

Pixel Perfect Precision 163

 Naughty Nice

Delete All Empty Try not to leave empty layers or groups

scattered throughout your files, as they add

Layers unnecessary clutter. There’s a handy script

located in the File > Scripts menu called
Delete All Empty Layers which does it exactly
what you think it will.

Pixel Perfect Precision 164

 Before After

Remove Unused If you’re experimenting with a design you can

often end up with lots of unused effects

FX floating around. You’d normally have to delete

them one by one, but with the Remove
Unused FX extension installed, they can all be
gone at the click of a button.

Pixel Perfect Precision 165

 Naughty Nice

Locked Layers Locks are a great way to protect an object

while you’re working, but make sure they’re
switched off before handing the file over to
other designers. A locked layer hidden deep
within a file is a pain when it prevents you from
moving or deleting a group.

Pixel Perfect Precision 166

 Some Text Some Text Some Text

Some Text Some Text Some Text

Layer Comps Layer Comps are a really useful way to store

multiple variations of a design within one file.
and even modify the position of an object.
Remember to save your changes to a comp by
At a basic level they allow different layer hitting the update button.
visibilities to show and hide content in
different configurations, but there’s also the
option to toggle individual Effects on and off,

Pixel Perfect Precision 167

Photoshop

EXPORT
Generator Generator is one of the best new features in
Photoshop CC, allowing you to export layers or
when any changes are made to the source file
— woohoo! There are also various parameters
groups by simply adding a file extension to available that can scale and/or adjust image
their name. Once activated from the File > quality, as well as output multiple versions of
Generate menu it will run through and create a the same asset. Check out this Generate
folder of assets, automatically updating them image assets from layers page for more info.

Pixel Perfect Precision 169

Export Scripts There’s still a way to automate asset export if
you’re not using Photoshop CC. Instead use
as its own layer or group, and give it an asset
name. It doesn’t matter how many layers a
our ustwo Crop & Export scripts (see next group contains, as the scripts only work at the
page for details). The first thing you need to do root level. Also, by laying out the components
is set up your files so they work properly, put separately, as shown above, you’ll end up with
every individual object that you want to export a useful reference sheet.

Pixel Perfect Precision 170

Export Scripts Now that your file’s sorted, use one of our
scripts to export all the individual assets as
ustwo Crop & Export +1px [layername]
Same as the previous script, just using the
PNGs… no muss, no fuss. Just copy them from alternative naming method.
Scripts in the PPP Extras to your Adobe
Photoshop CSx/Presets/Scripts folder, There are also a couple of additional scripts
(re)start Photoshop and you’re good to go. which won’t crop the layers but will instead
Once installed they can be accessed from the stick to the dimensions of the Photoshop file.
File > Scripts menu. This can be useful for things like screen
comps, where the actual content might
ustwo Crop & Export [filename][layername] change size, but you want all the exported
This will crop to each asset and then export PNGs to have the same dimensions.
the file as [filename][layername].png, meaning
a layer called _normal from button.psd would ustwo Export [filename][layername]
end up as button_normal.png.
ustwo Export [layername]
ustwo Crop & Export [layername]
Same script as above except it doesn’t add
the filename, so the layer from the previous
example would export as _normal.png.

ustwo Crop & Export +1px [filename]

[layername]
In this case the asset will have a 1px margin
added to each edge so that it’ll display
correctly in Flash. File naming works as with
the normal Crop & Export.

Pixel Perfect Precision 171

Save for Web Check out the difference in file size for the two
different PNGs here. Save As… has created a
file that’s 32KB bigger than Save for Web.
Worth using the latter then.

Pixel Perfect Precision 172

Reducing File Size If you’re exporting an asset that doesn’t need
transparency, try converting it to an 8bit PNG.
In the example above there’s no loss in quality
from making the switch, but the file size has
been more than halved.

Pixel Perfect Precision 173

ImageOptim ImageOptim can shave even more Kilobytes
from your assets. Simply drag and drop your
and colour profiles, as well as optimising the
compression used. Worth noting though, that
files on to the main window and watch as it if you’re developing for iOS, then it might not
does its thing. The app works on PNG, JPEG, be worth using ImageOptim, as this article on
and GIF images by stripping out any PNG compression and iOS apps explains.
unnecessary metadata, such as comments

Pixel Perfect Precision 174

Reducing A quick way to knock some of the size from
your PSDs is to hide all the layers. Not always
compression as PSDs can shrink down to less
than 10% of their original size.

Photoshop File practical if a design requires a certain visible

combination to make sense, but it can be

Sizes useful if you’re sending files and want them as

small as possible. Even better, use ZIP

Pixel Perfect Precision 175

565 Some devices can’t display as many colours
as your computer screen, which may cause
plugin. This reduces the bit depth from 24 bit
to 16 bit (a commonly supported amount on
visual degradation of your assets — often older mobile screens) and applies dithering to
most noticeable in gradients and transitions. counteract the reduction in colours. The 565
To prevent this from happening convert them name comes from the 5+6+5 bits per channel
to 565 images using the Ximagic ColorDither of a 16 bit RGB image.

Pixel Perfect Precision 176

565 Running the 565 filter on a group of files is
pretty laborious if you do them all individually,
option than Save and Close in the Destination
menu, which increases the file size), and

Batch so automate the process using Actions and

the Batch tool. Output all the assets as usual,
closes the file without saving. Afterwards,
simply run the Action in the Batch tool with the
then record an Action that applies the filter, settings as above. All the filtered files will be
exports the result using Save for Web (a better exported to the original Save for Web folder.

Pixel Perfect Precision 177

Photoshop

TIPS
 No Glow

Glow

Strokes Occasionally 1px strokes can look a little too

thin and wispy on curved edges. To strengthen
them without increasing their thickness add a
Glow using the settings above. The difference
is subtle, but it definitely helps.

Pixel Perfect Precision 179

Fading Circles Circular fades are really easy to make with the
Stroke Effect. The trick is to use Fill Type:
Gradient and Style: Angle.

Pixel Perfect Precision 180

Quick Shine If you want to quickly add a shine to an object,
try using the Inner Shadow Effect with a low
opacity white. Be careful though, as its shape
will be based on the top edge of the parent
layer, meaning any non-straight sections will
be replicated in the shine.

Pixel Perfect Precision 181

Add Noise with It’s possible to add a simple noise texture to
an object using the Inner Glow Effect. Set the

Inner Glow Source to Center and Size to 0, then vary the

amount using the Noise setting.

Pixel Perfect Precision 182

 Grab a flat bitmap logo on a white Image > Adjustments > Invert then Select
background from somewhere All and Copy

Create a new Solid Color layer, add a Layer

Mask, Option + click on it and then Paste —
Image > Adjustments > Desaturate
this masks the layer using the black and
white logo you copied in the previous step

Image > Adjustments > Levels and

Ta-da! You now have a logo on a
use the black point eyedropper to
transparent background
select the main grey colour

Extracting Logos Sometimes it can be difficult to obtain a

decent copy of a logo, in which case try using
open these up in Illustrator and grab any
vector logos they might contain.
this process as a last resort. Another useful tip
is to search a company’s site to see if they
have any PDFs available for download. You can

Pixel Perfect Precision 183

Star Fields Play around with the settings in the Brushes
panel to create some different effects, for
example a basic star field. By increasing the
Size Jitter and Opacity Jitter the brushes
become more random.

Pixel Perfect Precision 184

Patterns Add a little something to your designs by
including a pattern or texture. They’re simple
pattern can then be used throughout the app,
including the Layer Style panel. Don’t just add
enough to make in Photoshop: first, draw a tile it on top of everything else as a solid layer
that seamlessly repeats, then drag a selection either. Experiment with Blend Modes and
around it, and finally go to Edit > Define Opacity to change how the pattern interacts
Pattern… to save it as a preset. The new with the underlying design.

Pixel Perfect Precision 185

Kuler Feeling a bit uninspired when it comes to
colours and palettes? Then give Kuler a go.
This handy Photoshop extension allows you to
browse through and interact with user-
generated colour schemes, as well as create
your own. Beautiful!

Pixel Perfect Precision 186

Character Viewer Mac OS X includes a couple of helpful type
tools, found in the menu bar option that
known glyphs in a typeface. To use it, make
sure you’ve got a text box active in Photoshop
appears after activating Show Keyboard & (or any other app) and double-click the
Character Viewers in menu bar in System character you want to insert. If nothing
Preferences > Keyboard. The first in the pair, appears it means the typeface you’ve got
Character Viewer, will help you find lesser selected, doesn’t have that option available.

Pixel Perfect Precision 187

Keyboard Viewer Character Viewer’s little brother is Keyboard
Viewer, a simpler app that shows you all the
other options available. It’s a great way of
learning how to type accents and symbols
letters and symbols available from the directly from the keyboard.
keyboard. Clicking on a key with a text box
active, inserts that character; hold down
modifiers like Shift and Option to see all the

Pixel Perfect Precision 188

Shortcuts There are loads of shortcuts available for the
path tools to speed up their operation.
down Shift; alternatively − (minus) or Option
will subtract from the shape. Once drawn, add

Paths Combine the paths of two existing Shape

Layers by selecting them and hitting
and subtract the new path from the original by
selecting it and pressing – (minus) or + (plus).
Command + E. After drawing a path, add
another to it by pressing + (plus) or holding

Pixel Perfect Precision 189

 Some Text

Shortcuts If you’re editing a path with the Direct

Selection Tool and don’t want to accidentally
Command + Shift + H will hide the current
selection, useful for previewing the shape

Paths select other Shape Layers in the document,

then tap Q to enter Quick Mask Mode, which
without the path obscuring the edges.

isolates the one you’re currently working on.

Pixel Perfect Precision 190

 Some Text Some Text

Shortcuts Photoshop CC includes updates to the way the

Direct Selection tool interacts with paths,
one shape at once. Double-clicking on a path
will isolate it, with another double-click exiting

Paths making them easier to edit. With Select: All

Layers chosen in the Options bar you can now
that mode.

click and drag to select multiple points over

multiple layers, allowing changes to more than

Pixel Perfect Precision 191

Shortcuts When creating a selection, hold down the
Space key to move its original point around.
Use the square bracket keys, [ and ], to adjust
the brush size up and down. Shift + [ or ] will

Selections and increase or decrease the brush hardness.

Brushes
Pixel Perfect Precision 192
Shortcuts Select a layer and press the forward slash /
key to lock its transparency. On Shape Layers,
Collapse or expand all layer sets in a
document by holding down the Command key

Layers this will lock the position instead. and clicking on one of the accordion icons.

Pixel Perfect Precision 193

Shortcuts To hide all but one layer, hold down Option
and click its visibility icon.
To show or hide layers in a row, click, hold
down, and drag the cursor across all the

Layers relevant visibility icons.

Pixel Perfect Precision 194

Shortcuts Cycle screen modes (F)
Switch between normal, fullscreen with task
Move selection outline (Shift + Arrow keys)
Moves selection outline by 10px.

Keyboard bar, and full screen with black background.

Move selection (Command + Arrow keys)
Hand tool (Space) Moves selected layer or area by 1px.
Temporarily selects the hand tool while held
down, use to pan around an image. Move selection
(Command + Shift + Arrow keys)
Cycle open documents (Command + `) Moves selected layer or area by 10px.
Acts like Command + Tab in the OS,
navigating between open documents. Select all layers (Command + Option + A)
Selects all layers in the Layers panel.
Canvas background (Space + F)
Cycles through canvas colours. Load layer as selection
(Command + click layer thumbnail)
Switch colours (X) Load layer transparency as a selection.
Flips the foreground and background colours.
Enable/disable layer mask
Default colours (D) (Shift + click layer mask)
Resets foreground and background colours to Switch layer mask on and off.
black and white.
View mask (Option + click layer mask)
Move selection outline (Arrow keys) Show the layer mask as a separate image,
Moves selection outline by 1px. which can be edited like a channel.

Pixel Perfect Precision 195

Shortcuts Load mask as selection
(Command + click mask)

Keyboard Loads up the mask as a selection.

Invert selection (Command + Shift + I)

Inverts the selection, so previously selected
areas become deselected and vice versa.

Deselect (Command + D)
Removes current selection.

Reselect (Command + Shift + D)

Reloads the last selection.

Copy layer (Command + J)

Duplicate the currently selected layer.

Change layer opacity (1–0 keys)

Adjust the layer’s opacity in 10% increments.

Cycle blending modes

(Shift + + (plus) or − (minus))
Cycle through layer blending modes.

Pixel Perfect Precision 196

Keyboard Become a Photoshop lean machine by
creating custom keyboard shortcuts with the
interface design tasks. Another really neat
thing to do is remove the Command + Q

Shortcuts and Edit > Keyboard Shortcuts… dialog. The

window above shows a couple of new ones
shortcut to prevent yourself from accidentally
quitting Photoshop.

Menus assigned to Align > Vertical Centers and Align

> Horizontal Centers, which are common

Pixel Perfect Precision 197

ILLUSTRATOR
Introduction Illustrator: deploy when Photoshop’s vector
tools just aren’t quite up to the task. We tend
to use it for creating complex shapes which
are then styled in Photoshop. That way they
retain their versatility but have access to a
wider range of effects.

Pixel Perfect Precision 199

Illustrator Colour It’s worth setting up Illustrator’s colour profiles
properly as well. For example, you might want
RGB – Display and Color Management
Policies > RGB is Off.

Settings to add some colour to vector sketches which

match a design in Photoshop. As with its
sibling, go to Edit > Color Settings…, make
sure Working Spaces > RGB is set to Monitor

Pixel Perfect Precision 200

Preferences There’s a couple of changes you can make in
Illustrator’s Preferences to improve its pixel
to the Units section and set General and
Stroke to Pixels, which means all your
precision. The first, is setting the keyboard dimensions will now be pixel-based. Since
increments to 1px so the cursor keys will digital type is often still measured in Points —
nudge shapes and points around by whole that setting remains untouched.
pixel measurements. Once this is done, switch

Pixel Perfect Precision 201

Grids As with Photoshop, you might find it useful to
set up a grid based on 10px gridlines with 10
subdivisions. These settings can be found in
Preferences > Guides & Grid.

Pixel Perfect Precision 202

Snap to Grid Yup, you guessed it, switch Snap to Grid on
here too! Just like Photoshop’s version, it’s
located in the View menu.

Pixel Perfect Precision 203

Smart Guides Sometimes you need to rebel and break out of
the pixel grid. On these occasions, Smart
underneath it as shown, switching on Smart
Guides, and then selecting the circle — the
Guides provide a handy alternative form of Pen tool can snap to the precise location
snapping. In the example above an extra where the two shapes intersect and add an
anchor point is needed at the 45° position on anchor point there.
the circle. By placing a right-angled triangle

Pixel Perfect Precision 204

 Naughty Nice

Precision The Transform window is a pixel precisionist’s

best friend. With it you can check if a whole
dimension will adjust the other by the same
factor, keeping the object in proportion.
shape (top row), or a single point (bottom row)
are perfectly sized and/or positioned. Also, by
using the link option for the W and H boxes,
any transformation you make to one

Pixel Perfect Precision 205

Align to Pixel Grid The new super-villain of Illustrator! Make sure
Align New Objects to Pixel Grid is switched off
these settings). When active this feature
aligns objects to the underlying pixel grid,
in the Transform panel menu, and for any which sounds perfect until you realise it can
existing shapes Align to Pixel Grid is unexpectedly start shifting objects around
unchecked when they’re selected (choose when strokes are added.
Show Options in the panel menu to display

Pixel Perfect Precision 206

 Pixel Preview On Pixel Preview Off

Pixel Preview This is another feature to be wary of. When

View > Pixel Preview is active, shapes which
may not be pixel precise can be displayed as if
they are.

Pixel Perfect Precision 207

Preview Blurring Nothing to worry about too much here, but
sometimes Illustrator will render a shape with
blurring doesn’t appear when the shape is
imported into Photoshop.
blurred edges even though the dimensions are
on pixel in the Transform window. This seems
to be a bug with the program. Thankfully the

Pixel Perfect Precision 208

Organisation It’s not really worth naming every layer in
Illustrator if you’re just using it to draw shapes,
but at least try to organise everything into
groups rather than spreading it all out over an
area the size of a football pitch!

Pixel Perfect Precision 209

APPENDIX
PPPatterns The PPP Extras include a simple pattern library
for you to play with, available as Photoshop
presets (Patterns/PPPattern.pat) or pre-
applied Effects (Patterns/PPPattern.psd).

Pixel Perfect Precision 211