Pixel Perfect Precision™

More documents

Recommendations

Info

Aligning Text on Buttons ustwo studios 2013 / PPP Align Text Align Text Align Text Align Text Align Text Align Text ABC123 ABC123 ABC123 Cap Height & Descender x-height Cap Height & x-height Featured above are three ways to vertically aligning text on buttons. There are a few variables which can affect which method is the best, such as the typeface used (for example the cap height to x-height ratio can vary) or whether you’re using upper- and lowercase text or caps/numbers. The most important thing though is to make sure that once you pick a rule you use it on every button – consistency is king! 22
Aligning Text with Objects ustwo studios 2013 / PPP Try to vertically align text using the x-height, ignoring ascenders and descenders. This means that dynamic text, which could contain any combination of characters, will always look correctly aligned. Align Text Align Text Align Text Align Text Naughty Nice 23
Page 1 and 2: Pixel Perfect Precision Version 2 P
Page 3 and 4: Introduction ustwo studios 2013 / P
Page 5 and 6: The Essentials ustwo studios 2013 /
Page 7 and 8: Sharp Edges ustwo studios 2013 / PP
Page 9 and 10: Consistency ustwo studios 2013 / PP
Page 11 and 12: Accessibility ustwo studios 2013 /
Page 13 and 14: Colour & Shape ustwo studios 2013 /
Page 15 and 16: Typography ustwo studios 2013 / PPP
Page 17 and 18: Organisation ustwo studios 2013 / P
Page 19 and 20: Pixel Perfect Details
Page 21 and 22: Colour Management ustwo studios 201
Page 23: Text Length ustwo studios 2013 / PP
Page 27 and 28: Borders   & Corner Radii   Fill
Page 29 and 30: Version Control ustwo studios 2013
Page 31 and 32: Naming   Systems Example ustwo st
Page 33 and 34: Accessibility ustwo studios 2013 /
Page 35 and 36: Clarity A Title That Is Far Too Lon
Page 37 and 38: Clarity   Text to Diagrams ustwo
Page 39 and 40: Title Subtitle OS Lorem ipsum dolor
Page 41 and 42: Navigation   Content Structure us
Page 43 and 44: Navigation   Titles ustwo studios
Page 45 and 46: Navigation   Limit Scrolling to O
Page 47 and 48: Navigation   Labelling ustwo stud
Page 49 and 50: Interaction   Free Text ustwo stu
Page 51 and 52: Interaction ustwo studios 2012 / PP
Page 53 and 54:   Feedback Multi-sensory ustwo st
Page 55 and 56: Feedback   Error Proximity ustwo
Page 57 and 58: Lorem ipsum dolor sit amet, consect
Page 59 and 60: Typography   Formatting ustwo stu
Page 61 and 62: Typography   Merging Text with Gr
Page 63 and 64: Colour   Don’t Rely on Colour A
Page 65 and 66: Colour   Colour Contrast ustwo st
Page 67 and 68: Colour   ColorAdd ustwo studios 2
Page 69 and 70: Testing ustwo studios 2013 / PPP Te
Page 71 and 72: Testing   Sim Daltonism ustwo stu
Page 73 and 74: Photoshop: Colour Profiles
Page 75 and 76:
Photoshop Colour Settings ustwo stu
Page 77 and 78:
Color Faker ustwo studios 2013 / PP
Page 79 and 80:
Shape Layers ustwo studios 2013 / P
Page 81 and 82:
Shape   Layers Performance ustwo
Page 83 and 84:
Info Panel ustwo studios 2013 / PPP
Page 85 and 86:
Snap to Pixel Grid Actions ustwo st
Page 87 and 88:
Nudging ustwo studios 2013 / PPP If
Page 89 and 90:
Alignment & Spacing ustwo studios 2
Page 91 and 92:
GuideGuide ustwo studios 2013 / PPP
Page 93 and 94:
Live Previewing ustwo studios 2013
Page 95 and 96:
Some Text Object Colours ustwo stud
Page 97 and 98:
Object   Gradients Dither ustwo s
Page 99 and 100:
Scale Layer Effects ustwo studios 2
Page 101 and 102:
Layer Style vs. Vector Strokes ustw
Page 103 and 104:
Complex Vectors ustwo studios 2013
Page 105 and 106:
Blending Modes ustwo studios 2013 /
Page 107 and 108:
Text Alignment ustwo studios 2013 /
Page 109 and 110:
Convert to Paragraph Text ustwo stu
Page 111 and 112:
Leading ustwo studios 2013 / PPP Na
Page 113 and 114:
Lists ustwo studios 2013 / PPP Some
Page 115 and 116:
Photoshop: Organisation
Page 117 and 118:
Some Text Naming Layers ustwo studi
Page 119 and 120:
Search Some Text ustwo studios 2013
Page 121 and 122:
Expanded Layer Effects ustwo studio
Page 123 and 124:
Locked Layers ustwo studios 2013 /
Page 125 and 126:
Photoshop: Export
Page 127 and 128:
Export Scripts ustwo studios 2013 /
Page 129 and 130:
Reducing File Size ustwo studios 20
Page 131 and 132:
Reducing Photoshop File Sizes ustwo
Page 133 and 134:
565   Batch ustwo studios 2013 /
Page 135 and 136:
Strokes No Glow Glow ustwo studios
Page 137 and 138:
Quick Shine ustwo studios 2013 / PP
Page 139 and 140:
Extracting Logos ustwo studios 2013
Page 141 and 142:
Patterns ustwo studios 2013 / PPP A
Page 143 and 144:
Shortcuts   Paths ustwo studios 2
Page 145 and 146:
Shortcuts   Selections & Brushes
Page 147 and 148:
Shortcuts   Layers ustwo studios
Page 149 and 150:
Shortcuts   Keyboard ustwo studio
Page 151 and 152:
Illustrator
Page 153 and 154:
Illustrator Colour Settings ustwo s
Page 155 and 156:
Grids ustwo studios 2013 / PPP Like
Page 157 and 158:
Smart Guides ustwo studios 2013 / P
Page 159 and 160:
Align to Pixel Grid ustwo studios 2
Page 161 and 162:
Preview Blurring ustwo studios 2013
Page 163 and 164:
Appendix
Page 165:
ustwo studios 2013 / PPP Thanks! @p
show all

Pixel Perfect Precision™

Create successful ePaper yourself

Delete template?

Save as template?