How to be Pixel Perfect (Replaces Making Accessibility Accessible) - Matt Gyppsy, UsTwo


Published on

Published in: Technology, Art & Photos
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

How to be Pixel Perfect (Replaces Making Accessibility Accessible) - Matt Gyppsy, UsTwo

  1. 1. Produced by ustwo™Gyppsy (™Pixel PerfectPrecision™
  2. 2. I love pixels! They’re the building blocks of all the visual design we dohere at ustwo™, but are so often relegated to a mere afterthought inthe excitement of working with colours and styles. The aim of this PixelPerfect Precision™ handbook is to bring them back to the forefront ofour thoughts, to make sure we get the simple things right beforemoving onto the detail.Why is this important though? Isn’t it just wasting time worrying aboutevery last pixel on the page? Like a lot of things in life, whensomething’s done right it should become invisible to you, but when it’sdone badly it becomes an annoyance. Blurred edges, objects that jumpin position between pages, and colour mismatches are just a few thingsthat a user will notice and become distracted by if your designs aren’tdone properly, leaving them with a poor impression of the product.This handbook originally started with just two or three pages on how toset up colour profiles (still the first chapter), but with time I’ve addedpretty much everything I’ve learnt in the form of instructions, guidanceand tips. From junior designer to creative director there’s usuallysomething to pick up and learn in here!Gyppsy xxIntroductioniustwo™ studios 2013 / PPP™
  3. 3. Colour Profiles
  4. 4. System Settings To avoid any nasty colour jumps betweenPhotoshop and Mac OS X the colour settingsneed to be set up correctly. First thing to do ismake sure System Preferences > Displays >Color is set to the device you are currentlyusing (for laptops this is Color LCD).3ustwo™ studios 2013 / PPP™
  5. 5. Photoshop ColourSettingsNext, in Photoshop, go to Edit > ColourSettings… and change Working Spaces > RGBto the screen specified in your SystemPreferences. Also change Color ManagementPolicies > RGB to Off.4ustwo™ studios 2013 / PPP™
  6. 6. Photoshop Save forWebAdditionally, in Save for Web the Convert tosRGB option needs to be deselected, andPreview should be set to Monitor Color. Coloursshould now be consistent on your machine!5ustwo™ studios 2013 / PPP™
  7. 7. Pixel Precision
  8. 8. Naughty NiceSharp Edges Straight edges should be on-pixel and sharp -blurred edges are a no-no!7ustwo™ studios 2013 / PPP™
  9. 9. Snapping Photoshop has lots of handy tools to help getthose edges sharp. The first thing to do isenable snapping - go to View > Snap and makesure it’s on. Snapping helps with pixel precisionand also alignment (discussed later on).The Snap To submenu shows the various itemsthat Photoshop can use for snapping.8ustwo™ studios 2013 / PPP™
  10. 10. Shape LayerOptionsWe love Shape Layers here. They’re easy touse and manipulate, don’t slow downPhotoshop as much as Smart Objects, andhelp to keep file sizes down. Winner. InPhotoshop CS5 Rectangles and RoundedRectangles have a built in option to aid pixelprecision: Snap to Pixels. To access this optionclick the drop-down menu to the right of theshapes in the top tool bar. This needs to beselected for both Rectangle and RoundedRectangle individually as their options areindependent of each other.9ustwo™ studios 2013 / PPP™
  11. 11. Snap to Pixel Grid With Photoshop CS6 there is a global option tosnap vectors to pixels in the Preferences -make sure Snap Vector Tools and Transforms toPixel Grid is selected (it’s on by default). Mucheasier knowing that every Shape Layer youdraw will automatically be pixel precise!10ustwo™ studios 2013 / PPP™
  12. 12. Grids Sometimes it’s useful to have a grid on screenwhen creating a layout. The example above isusing 10px gridlines with 10 subdivisions,which makes it easy to count pixel dimensionsand stops the grid from becoming visuallyoverpowering when used.Go to Photoshop > Preferences > Guides, Grid, &Slices… to set yours up.11ustwo™ studios 2013 / PPP™
  13. 13. Nudging If you’re using Photoshop CS5 be careful whenusing the keyboard to shift points of a ShapeLayer when zoomed into a design - the nudgeamount varies according to the zoom factor.To guarantee a 1px nudge, zoom out to 100%and press the arrow key once. If zoomed in at200% and the arrow key is pressed the pointswill only move 0.5px (i.e. half the amount),creating blurred edges - not good. With CS6pixel grid snapping the points will move 1px nomatter what level the zoom is; you’ll need toswitch off the snap to move by smaller12ustwo™ studios 2013 / PPP™
  14. 14. Alignment &SpacingOnce you’ve mastered the art of gettingeverything sharp the next step in your journeytowards pixel perfection is to get thealignment and spacing right.13ustwo™ studios 2013 / PPP™

1/3Naughty Nice
  15. 15. Multiple objects on a page should all havesome sort of alignment: left, right, centred etc.Also, if there are repetitions of a similar objectacross the screen then the spacing should beconsistent between each one.The Layer > Align and Layer > Distribute menusmake it easy peasy to quickly tidy up objects.14ustwo™ studios 2012 / PPP™Alignment &SpacingXXX

  16. 16. Alignment of objects across multiple screens isjust as important. Margins and placement ofcommon items such as titles, tabs and footersshould be the same throughout the interfaceto prevent objects jumping around.The basic layouts above show a consistent useof margins and spacing. In reality a UI wouldprobably not be this simplistic (if it is thenyou’re laughing), however there should still besome form of underlying grid to define thestructure.15ustwo™ studios 2012 / PPP™Alignment &SpacingX

  17. 17. GuideGuide To help automate the creation of guidesthere’s a free Photoshop Extension availablecalled GuideGuide; once installed it can befound in the Window > Extensions menu. Byvarying the data you enter it can work outmeasurements such as column and gutterwidths, or if you’ve already sussed these outon a scrap of paper you can just input all thevalues and get your guides insertedautomatically. There are tooltips for each ofthe input box icons to let you know what eachone does.16ustwo™ studios 2013 / PPP™
  18. 18. Text Height &WidthA great way to check the maximum heightthat a block of text can be is to use the Åycharacters. If a design needs to fit a minimumnumber of characters then use a series ofcapital Ws to judge the space needed - if theyfit then anything else will too.17ustwo™ studios 2013 / PPP™ÅyMax. HeightWWWWMax. Width
  19. 19. SettingsEinstellungenConfiguraçõesText Length If you’re working on a design that will be usedwith other languages it’s also worthconsidering how long your text could be whentranslated. The example above shows whathappens with the German and Portuguesetranslations of Settings: an increase of up to75% in length.18ustwo™ studios 2013 / PPP™
  20. 20. Align TextAlign Text Align TextAlign TextAligning Text withObjectsTry to vertically align text using the x-height,ignoring ascenders and descenders. Thismeans that dynamic text, which could containany combination of characters, will alwayslook correctly aligned.19ustwo™ studios 2013 / PPP™Naughty Nice
  21. 21. Aligning Text onButtonsFeatured above are three ways to verticallyaligning text on buttons. There are a fewvariables which can affect which method isthe best, such as the typeface used (forexample the cap height to x-height ratio canvary) or whether you’re using upper- andlowercase text or caps/numbers. The mostimportant thing though is to make sure thatonce you pick a rule you use it on every button- consistency is king!20ustwo™ studios 2013 / PPP™Align TextAlign Text Align TextAlign TextAlign Text Align TextABC123ABC123 ABC123Cap Height & Descender x-height Cap Height & x-height
  22. 22. Global Light DefaultAngleThis is one of those little things thatPhotoshop will catch you out on if you’re notcareful. If you’ve set up a design with acustom Global Light direction, then drag anelement from it to a new document, it willtake on the default 120° instead. As you cansee in the images above this can mess up thedesign. To help prevent this from happeningtoo often you can change the default to amore commonly used angle like 90°. Close allfiles in Photoshop and go to the Layer > LayerStyle > Global Light… to alter the default value.21ustwo™ studios 2013 / PPP™90°120°drag to newdocument
  23. 23. Info Panel As well as using the measurement readoutwhen drawing vector shapes or using themarquee tool to get some super pixelprecision, there is also the Info Panel for extradetail. Not only does it show measurementsbut it can also display colour and opacityvalues that will allow you to quickly checkconsistency throughout a design.22ustwo™ studios 2013 / PPP™
  24. 24. Techniques
  25. 25. Shape Layers As mentioned in the previous chapter useShape Layers wherever possible. Being vector-based they’re more editable than bitmapsallowing transformation of the shape with noloss in quality, and are less resource hungrythan Smart Objects.24ustwo™ studios 2013 / PPP™Naughty Nice
  26. 26. Shape LayerBackgroundsBy using unmasked Shape Layers forbackgrounds instead of bitmaps the fill willautomatically scale if the canvas size isincreased. Nice.25ustwo™ studios 2013 / PPP™Naughty Nice
  27. 27. Transformations Another advantage of Shape Layers is thattransformations such as resize and rotaterender better than with Smart Objects - theiredges can go a little jagged when distortedfrom the original dimensions.The difference in the examples is quite subtle,but in other objects it will be more obvious.26ustwo™ studios 2013 / PPP™Naughty Nice
  28. 28. Complex Vectors For complex vectors the best solution is to useIllustrator then copy and paste into Photoshop(using Shape Layers). Outline any strokes inthe Illustrator original, otherwise they won’timport to Photoshop properly. Remember byreciting this phrase to yourself: “Don’t be ajoke, outline the stroke”. If the vector is morethan just a shape, for example a full colourWindows style icon, then it will have to bepasted as a Smart Object.27ustwo™ studios 2013 / PPP™
  29. 29. Pasting FromIllustratorOne quirk of pasting in a Shape Layer fromIllustrator is that it sometimes shifts theobject off-centre by 0.5px in either or bothaxes, resulting in blurred pixels (although withthe new CS6 pixel snapping options this seemsto be less of an issue now). Always have aquick look to see if this has happened, and if ithas shift the shape back by half a pixel to itsintended position.28ustwo™ studios 2013 / PPP™Naughty Nice
  30. 30. Layer Effects Another thing we love here are Layer Effects,so we try to create as much styling as possibleusing them. The effects are completelyeditable, can be scaled in ratio to theirunderlying shapes, and can be quickly copiedand pasted to other objects.29ustwo™ studios 2013 / PPP™
  31. 31. Concise LayerEffectsTry not to spread Layer Effects across differentlayers, it’s much better if they’re all on one ifpossible - keeps things tidy and makes iteasier to copy styles around between objects.30ustwo™ studios 2013 / PPP™Naughty Nice
  32. 32. Object Colours It’s a good idea with Shape Layers and text tochange the colour using the object’s ownsetting instead of the Color Overlay LayerEffect. The benefits of this are a) it’s quicker toupdate the colour later on as there’s no needto load up the Layer Effects window, and b) itwill make finding the object easier in theLayers palette. As an example: in which panelabove is the blue square easier to find?31ustwo™ studios 2013 / PPP™Naughty Nice
  33. 33. Object Gradients The same thing applies to gradients - use agradient fill layer instead of Layer Effects ifpossible. With Photoshop CS5 the bigadvantage over Layer Effects is that there’s aDither option, which increases the quality ofthe gradient when spread over large areas. InCS6 you can dither both.32ustwo™ studios 2013 / PPP™Naughty Nice
  34. 34. Colour Model HSB FTW! Have a go at using HSB in the ColorPicker to create a palette, once you get yourhead around it you’ll see it’s a really efficientway to create shades of a base colour. In theexample the Hue (H) value has been kept thesame, then the Saturation (S) and Brightness(B) changed to create the variations. See howmuch more sense the numbers make in HSBcompared to RGB as well?33ustwo™ studios 2013 / PPP™H 16 16 16 16S 100 50 25 50B 100 100 100 50R 255 255 255 127G 67 161 208 81B 0 127 191 64
  35. 35. Blending Modes When creating effects remember to only useblending modes on items which will later bemerged with other layers. In the example thehighlight layer will be exported as a separateasset, but when shown on its own theblending effect disappears and it becomes asolid white to black gradient.34ustwo™ studios 2013 / PPP™
  36. 36. NiceThe best solution is to recreate the effectusing a layer that is independent of what isbeneath it.35ustwo™ studios 2012 / PPP™Blending Modes
  37. 37. Replacement textThe original line of textText Alignment When adding text make things easier foryourself in the future by matching theparagraph alignment to that in the design, sotext that is supposed to look left aligned hasthis setting as well. If you then have to changethe text it will still have the correct alignment.36ustwo™ studios 2013 / PPP™The original line of textReplacement textNaughty Nice
  38. 38. Paragraphs If you’ve got a paragraph of text then use atext box instead of manually adding linebreaks as they all have to be reset when text ischanged or the typeface altered. With a textbox though the text will wrap automatically,and the paragraph can easily be resized. Yay!37ustwo™ studios 2013 / PPP™Naughty Nice
  39. 39. Convert toParagraph TextFortunately Photoshop gives you the option toconvert between freeform and boxed text, andvice versa, by selecting Type > Convert toParagraph Text or Convert to Point Text. ForPhotoshop CS5 these functions are found inthe Layer > Type > menu.38ustwo™ studios 2013 / PPP™
  40. 40. Hyphenation Most devices don’t support hyphenation soyou might as well switch it off.39ustwo™ studios 2013 / PPP™Naughty Nice
  41. 41. Leading When adding paragraphs of text Photoshopwill default to an automatic amount ofleading, which is usually a bit too tight. Makeyour text easier to read by manually changingthis amount - in the example the leading hasbeen changed from (Auto) to 18pt.40ustwo™ studios 2013 / PPP™Naughty Nice
  42. 42. Lists In some cases when creating lists, particularlythose with graphics next to them, it’s better toput all the descriptions into one single textobject and set the leading to match the itemspacing, rather than using separate layers foreach one. This makes it easier to align andspace everything correctly.41ustwo™ studios 2013 / PPP™Naughty Nice
  43. 43. Text Anti-aliasing There are a few different types of anti-aliasingin Photoshop which can be used to get thebest legibility from text - play around with thesettings to find the most suitable one.For mockups of text on a device have a lookthrough the various methods and see whichone is closest to how it appears on-screen.42ustwo™ studios 2013 / PPP™None SharpCrisp Strong Smooth
  44. 44. Touch Affordance The screens on mobile devices often have ahigher pixel resolution (PPI) than that of atypical computer display, so you need to makesure you don’t create buttons and text thatare too small to use.As a rough rule zoom out to 50% to see thesize of things in real life, if they’re too smallmake ‘em bigger!43ustwo™ studios 2013 / PPP™
  45. 45. Screen Resolution Have a look a for details onphone sizes and screen resolutions. You canthen set up your Photoshop document withthe correct PPI and reduce some of the trialand error with text and button sizes.44ustwo™ studios 2013 / PPP™
  46. 46. Accessibility
  47. 47. 
1/2Colour BlindnessProtanopiaDeuteranopiaAround 8-10% of the male population havesome form of colour blindness, so don’t forgetto consider these users when creating yourdesigns! Shown above are examples of howthe different types of colour blindness affect auser’s perception of the colour spectrum.Deuteranopia, the most common form, relatesto the green receptors in the eye and makes itharder to distinguish between reds andgreens. Similarly, protanopia has an effect onthe red receptors; since the red and greenreceptors are quite close to each other in46ustwo™ studios 2013 / PPP™Normal
  48. 48. Tritanopiaterms of what colours they perceive there issome overlap in the impacted areas of thespectrum. Tritanopia is the rarest form ofcolour blindness, and affects the bluereceptors in the eye. For more information visitWe are Colorblind.Colour Blindness47ustwo™ studios 2012 / PPP™
  49. 49. Previewing inPhotoshopTucked away in the View > Proof Setup menuare a couple of options to preview how yourdesign will look to people with the commonforms of colour blindness - this is a great wayto quickly see if there are any issues withcolours and contrast.48ustwo™ studios 2013 / PPP™
  50. 50. Sim Daltonism Sim Daltonism is a more advanced applicationfor checking colour blindness accessibilityacross every variation of the condition.Instead of being a Photoshop only tool it canbe used across the entire OS - the app isbasically a resizable floating window thatpreviews whatever is underneath the mousecursor.49ustwo™ studios 2013 / PPP™
  51. 51. Colour Contrast Always make sure that text and otherimportant information has enough contrastbetween foreground and background to stillbe legible for those with some form of colourblindness. There’s a great online checkeravailable here - just pop in the two coloursand away you go!50ustwo™ studios 2013 / PPP™Naughty Nice
  52. 52. Techniques In some cases you might not want to adjustthe colours you’ve chosen for a design, but stillwant to make sure that you don’t excludethose with colour blindness. In those casesthink about other ways you can distinguishvarious sections from each other. Above are acouple of ideas: one is to use some icons, theother is adding a pattern to the blocks. Bothhelp to separate the sections based on morethan just the colour.51ustwo™ studios 2013 / PPP™
  53. 53. Color Add What would you do if you wanted to describecolours, but didn’t want to use text labels?Turns out a great solution already exists: ColorAdd is a simple system that represents coloursusing symbols. By combining these symbols,representing the three primary colours insubtractive light, you can mix and matchtogether to create the whole spectrum - justas you would with paint or ink. It’s alsopossible to represent light and dark shades bymerging these symbols with those for whiteand black.52ustwo™ studios 2013 / PPP™Blue /CyanRed /MagentaYellow White Black
  54. 54. There’s lots more information on their site,including some great colouring pencils forcolour blind people!Color Add53ustwo™ studios 2012 / PPP™LightGreenLightOrangeLightYellowLightBlueOrchidPink KhakiGreenOrange Yellow Blue VioletRed BrownDarkGreenBrickDarkYellowDarkBluePurpleBordeauxDarkBrown
  55. 55. Organisation
  56. 56. Layers PanelOptionsIs there anything more annoying than the“copy” that Photoshop adds on to everyduplicated layer?! Remove that and someother visual clutter by going to the LayersPanel Options and switching off Use DefaultMasks on Fill Layers, Expand New Effects andAdd “copy” to Copied Layers and Groups. Everylittle helps.55ustwo™ studios 2013 / PPP™
  57. 57. Naming Layers Don’t be selfish, give your layers propernames! It makes life a lot easier for the nextperson who has to work on your files, andyou’ll look good if the file gets sent off to aclient.56ustwo™ studios 2013 / PPP™Naughty Nice
  58. 58. Ordering Layers If you really want to make your files superspecial then order the layers nicely as well. Alogical way is to follow how the objects appearin the design from left to right, top to bottom,just like reading a book (apologies if your firstlanguage goes in another direction!).57ustwo™ studios 2013 / PPP™Naughty Nice
  59. 59. Colour Coding Here’s an example of how colour coding in theLayers panel can make it easier to navigate.Right click on the show/hide control to bringup the layer colour menu.58ustwo™ studios 2013 / PPP™Red (“danger”) for oldunused elementsGrey (“neutral”) used for referenceitems that relate to the core design,in this case overlays which specifythe fonts and sizesSplash screenPreferences windowPopupsCore design remains uncolouredGreen here to highlight two variations of a designwhich hasn’t been decided yetYellow here to show that hidden layers aredifferent states of the same button
  60. 60. Expanded LayerEffectsLike a messy house guest, expanded LayerEffects can make it harder to find your wayaround. Keep them collapsed and things are alot better.59ustwo™ studios 2013 / PPP™Naughty Nice
  61. 61. Locked Layers Locking layers is a great way to preserve anobject when working on a file, but try to makesure that they’re unlocked when handing overto other designers. Digging through layer setstrying to find the rogue locked layer that’spreventing you from moving or deleting thegroup can get really frustrating!60ustwo™ studios 2013 / PPP™Naughty Nice
  62. 62. Layer Comps Layer Comps: so close, yet so far. What couldbe a great way to show multiple variations orlayouts in a file is held back by the fact thatchanging anything once they’re set screwsthem up, so you can’t really use them whilstworking on a design. Best created once yourdocument is xxxx_final_finished_finito.psd.61ustwo™ studios 2013 / PPP™
  63. 63. Illustrator
  64. 64. Introduction Illustrator: deploy when Photoshop’s vectortools just aren’t quite up to the task! We tendto use it for creating complex vectors whichcan then be styled in Photoshop - that waythey retain their scaleability but get all thevisual treats that Layer Effects allow too63ustwo™ studios 2013 / PPP™
  65. 65. Illustrator ColourSettingsIt’s worth setting up the colour profiles inIllustrator as well - for example you mightwant to add some colour to vector sketcheswhich match what you see in Photoshop.As with its sibling, go to Edit > ColourSettings…, make sure Working Spaces > RGB isset to the screen specified in your SystemPreferences and Color Management Policies >RGB is Off.64ustwo™ studios 2013 / PPP™
  66. 66. Useful Settings There are a couple of useful settings inIllustrator > Preferences. The first is to set theUnits to Pixels for General and Stroke, whichwill mean all your dimensions will match uppixel for pixel with Photoshop.Once this is done the keyboard increment canbe set to 1px, which means the cursor keyscan be used to nudge shapes and pointsaround while remaining on whole pixelmeasurements.65ustwo™ studios 2013 / PPP™
  67. 67. Grids Like Photoshop, the Illustrator grid can be setup in Illustrator > Preferences > Guides, Grid, &Slices…, again with 10px gridlines and 10subdivisions.66ustwo™ studios 2013 / PPP™
  68. 68. Snap to Grid Yup, you guessed it, stick Snap to Grid on too!Like Photoshop it’s located in the View menu.67ustwo™ studios 2013 / PPP™
  69. 69. Smart Guides Sometimes you need to push the boundariesand break out of the grid, in which case a goodalternative is to use Smart Guides for non-straight/off-grid shapes and points. In theexample above a right-angled triangle hasbeen placed below a circle; the Smart Guideshave recognised where the two overlap andlet you easily add a point where the twointersect.68ustwo™ studios 2013 / PPP™
  70. 70. Precision The Transform window is your pixel precisionbest friend. It can either be used to check awhole shape (top row), or a single point(bottom row). Also, make use of the linkoption for the W and H boxes, so when onevalue is changed the other will also adjust bythe same proportion, keeping the object inscale.69ustwo™ studios 2013 / PPP™Naughty Nice
  71. 71. Align to Pixel Grid The new super-villain of Illustrator! Make surethis option is deselected when drawing shapes- it will align objects on the artboard to theunderlying grid, which can cause unexpectedshifts in the position when strokes are addedfor example. To show the Options go to theTransform panel menu.70ustwo™ studios 2013 / PPP™
  72. 72. Pixel Preview This is another one to be wary of: when View >Pixel Preview is on it can show pixels as beingprecise when in reality they’re not.71ustwo™ studios 2013 / PPP™Pixel Preview On Pixel Preview Off
  73. 73. Preview Blurring Nothing to worry about too much here, butsometimes Illustrator will show a shape ashaving blurred edges even though thedimensions are exact in the Transformwindow. This seems to be a bug with theprogram, but thankfully the blurring won’tappear when the shape is imported intoPhotoshop.72ustwo™ studios 2013 / PPP™
  74. 74. Organisation If you tried to name every layer in anIllustrator file you’d get nothing else done, buttry to organise shapes into groups so you don’tend up with one massive artboard the size of afootball pitch - not fun to scroll around!73ustwo™ studios 2013 / PPP™
  75. 75. Naming & Export
  76. 76. Naming Elements Coming up with a standard naming system ona project eases the transition from design todevelopment. Most UIs have the same sort offeatures: title bars, buttons, icons, tabs,backgrounds etc. so it makes sense to basethe naming on these…Title Btn Icn Tab BgTo distinguish between different buttons youcould then add their location as part of thename…Btn_Left Btn_Right Btn_Menu Btn_Home…or you could base it on the width/height ofthe button if they are all the same styleperhaps…Btn_120 Btn_180 Btn_240Different states of an element can be addedto that…Btn_Home_Normal Btn_Home_PressedA similar thing also applies to icons…Icn_Message Icn_Inbox Icn_Add…which can also have their states as a suffix…Icn_Message_Normal Icn_Inbox_PressedFor non-interactive elements with only onestate there can also be some standardisationof the naming…Logo Title Footer BgBackgrounds for any section of the UI coulduse the name “bg” for instance, followed bytheir location or colour…Bg Bg_Menu Bg_List Bg_BlackThe next page shows a UI and how thesenaming conventions could be applied to it.75ustwo™ studios 2013 / PPP™
  77. 77. Naming Elements76ustwo™ studios 2013 / PPP™Tab_Share_ActiveBg_PhotoIcn_Add_StickerSticker_FrameSticker_GlassesIcn_Share
  78. 78. Asset Files Using our ustwo™ Crop & Export scripts (seenext page) we’ve tried to make the assetexport process super easy. The first thing to dois set your files up properly for them to work:put every individual object that you want toexport within its own layer group and give itan asset name; each group can contain asmany layers as you want as the scripts workon everything at the root level. Also if you layeverything out separately as shown, ratherthan stacked on top of each other, you’ll endup with a useful asset reference sheet.77ustwo™ studios 2013 / PPP™
  79. 79. Export Scripts We’ve built some awesome Photoshop scriptsthat will run through a file and export all theindividual assets as PNGs…no muss, no fuss.Just copy them from _scripts to your AdobePhotoshop CS5/Presets/Scripts folder, (re)startPhotoshop and you’re good to go! There are afew variations:ustwo™ Crop & Export [filename][layername]
This will crop to each asset and then exportthe file as [filename][layername].png, so witha file called button.psd, and layer called_normal the exported asset would be calledbutton_normal.png.ustwo™ Crop & Export [layername]
Same script as above except in this case thefilename is not added to the exported asset,only the layer name is used. For the exampleabove the exported asset would be called_normal.png.ustwo™ Crop & Export +1px [filename][layername]
In this case the exported asset will have a 1pxmargin added around each edge so that it willwork correctly in Flash. File naming works aswith the normal Crop & Export.ustwo™ Crop & Export +1px [layername]
Same as above, using the alternative namingmethod.There are also a couple of additional scriptsavailable which won’t crop the layers but willinstead stick to the dimensions of thePhotoshop file. This can be useful for thingslike screen comps where the actual contentmight change size, but you want all theexported PNGs to have the same dimensions.ustwo™ Export [filename][layername]ustwo™ Export [layername]78ustwo™ studios 2013 / PPP™
  80. 80. Save for Web Check out the differences in file size of the twodifferent PNGs here - Save As… has created afile that’s 26KB bigger than Save for Web. Wellworth using the latter then!79ustwo™ studios 2013 / PPP™
  81. 81. Reducing File Size Everyone’s happier when file sizes are keptdown, so if you have an asset that doesn’tneed transparency try converting it to an 8bitPNG. In the example above there’s no loss inquality from making the switch, but the filesize has been almost halved.80ustwo™ studios 2013 / PPP™
  82. 82. ImageOptim If you want to shave a few more KB from yourexported file sizes then give ImageOptim awhirl - simply drag and drop your files onto itswindow and watch as it works its magic. Theapp works on PNG, JPEG and GIF images bystripping out any unnecessary metadata suchas comments and colour profiles, as well asoptimising the compression used.As a side note if you’re developing for iOS thenit might not be worth using ImageOptim asthis article explains.81ustwo™ studios 2013 / PPP™
  83. 83. ReducingPhotoshop File SizesA quick way to shave some of the size fromyour PSDs is to switch off the visibility of all thelayers. Not always practical if a design requiresa certain combination to be shown, but it canbe useful if sending or uploading files and youwant to keep things small. Zipping the fileafterwards also dramatically reduces the size.82ustwo™ studios 2013 / PPP™
  84. 84. 565 Some devices don’t support all the coloursthat you can see on your computer screen,which can cause visual degradation of yourassets. To prevent this from happening convertthem to 565 images using the XimagicColorDither SP plugin. 565 refers to the colourdepth change from 24bit (8+8+8) to 16bit(5+6+5) (16.7 million to 65536 colours, acommonly supported amount on mobilescreens); to counteract the reduction incolours the filter also applies dithering, whichwill prevent banding in any gradients.83ustwo™ studios 2013 / PPP™
  85. 85. 565 Batch The best way to apply 565 dithering tomultiple files is to create a Photoshop Actionand use the File > Automate > Batch tool.Export all the assets normally using one of theCrop & Export scripts, then set up an Action toapply the filter and export using Save for Web(rather than Save and Close in the Destinationmenu which will increase the file size). Theaction shown is included in _actions/PPP™.atn;you’ll need to create a folder called export onyour Desktop for the processed files to be 
saved in.84ustwo™ studios 2013 / PPP™
  86. 86. Animation
  87. 87. Introduction If your file is going to end up being animatedthen try to optimise it as much as possibleusing some of the tips in this section - you’ll bein the animator’s good books if you do!86ustwo™ studios 2013 / PPP™
  88. 88. File Size Optimise the file size as much as possible, ascomplex files will slow down After Effects.Keep duplicates of layers to a minimum, anduse Shape Layers instead of Smart Objects.87ustwo™ studios 2013 / PPP™Naughty Nice
  89. 89. States Make sure everything’s labelled up correctlyand there’s some sort of order to it.88ustwo™ studios 2013 / PPP™Naughty Nice
  90. 90. Flatten Layers Flatten any parts of the UI that won’t needany further changes, such as backgrounds.These can then be exported as PNGs and usedin After Effects separately from the PSD file,which will speed things up.89ustwo™ studios 2013 / PPP™Naughty Nice
  91. 91. Tips
  92. 92. Strokes Strokes with a 1px thickness can look a littletoo thin on curved shapes (straight edges arefine though), so to strengthen the strokewithout making it bigger also add a Glowusing the settings shown. The difference issubtle, but it definitely helps.91ustwo™ studios 2013 / PPP™No GlowGlow
  93. 93. Fading Circles Circular fades are really useful for loadingicons and can be created easily with the StrokeLayer Effect. The trick is to set Fill Type:Gradient and use Style: Angle.92ustwo™ studios 2013 / PPP™
  94. 94. Quick Shine You can create a quick shine effect using awhite inner shadow with a low Opacity value.Be careful though as the shape of the shinewill follow that of the top edge of the layer it isapplied to, so it tends to work best withrectangular or near-rectangular objects.93ustwo™ studios 2013 / PPP™
  95. 95. Extracting Logos Sometimes it can be difficult to obtain adecent vector logo, in which case a last resortis to extract one using this process. Anotheruseful tip is to search a company’s site to seeif they have any PDF documents available fordownload: they’ll often have logos in themwhich can then be opened in Illustrator.94ustwo™ studios 2013 / PPP™Flat logo merged to a white backgroundImage > Adjustments > InvertThen Select All and CopyImage > Adjustments > DesaturateAdd a colour layer, add a layer mask, alt-clickon the mask and then Paste. This will createa mask from the black and white logo imageImage > Adjustments > LevelsUse the black point picker to selectthe main grey colourYou now have a logo on a transparentbackground
  96. 96. Star Fields Have a play around with the settings in theBrushes panel to create some different brusheffects, like a basic star field for example. Byincreasing the Size Jitter and Opacity Jitter thebrushes become more random.95ustwo™ studios 2013 / PPP™
  97. 97. Patterns Add a little something to your designs byincluding a pattern or texture. They’re easy tomake using the Pattern tool: first draw a tilethat can be repeated smoothly, drag aselection around it, then go to Edit > DefinePattern… to add it to the presets. This patterncan then be used throughout Photoshop,including the Layer Effects palette. Experimentwith Blend Modes and Opacity to alter thepattern’s look (black and white work well asthey are neutral colours and will work with anyunderlying design).96ustwo™ studios 2013 / PPP™
  98. 98. Kuler Feeling a bit uninspired when it comes tocolours and palettes? Then give Kuler a go! It’san online service where users can create andbrowse through colour palettes, but there’salso an extension for it so you don’t even needto leave Photoshop.It’s an incredibly useful tool for creating colourschemes or finding a bit of inspiration.97ustwo™ studios 2013 / PPP™
  99. 99. Shortcuts When creating a selection hold down theSpace key to move it around before letting goof the mouse button and fixing the size.Use the square bracket keys [ and ] to adjustbrush size up and down. Shift plus [ or ] willincrease the brush hardness.98ustwo™ studios 2013 / PPP™
  100. 100. Select a layer and press the forward slash / keyto lock transparency. On Shape Layers this willlock the position instead.Collapse or expand all layer sets in adocument by holding down the Command keyand clicking on one of the triangle icons.99ustwo™ studios 2012 / PPP™Shortcuts
  101. 101. Hide all other layers by holding down Alt andclicking on the visibility icon.
To show or hide layers in a row click, holddown and drag the cursor across all therelevant visibility icons.100ustwo™ studios 2012 / PPP™Shortcuts
  102. 102. F (Cycle screen modes)
Switch between normal, fullscreen with taskbar and full screen with black background.Space bar (Hand tool)
Temporarily selects the hand tool while helddown, use to pan around an image.Command + ` (Cycle open documents)
Acts like Alt + Tab in the OS, changing betweenopen documents.Space + F (Canvas background)
Cycles through canvas colours.X (Switch colours)
Flips the foreground and background colours.D (Default colours)
Resets foreground and background colours toblack and white.Arrow keys (Move selection outline)
Moves selection outline by 1px.Shift + Arrow keys (Move selection outline)
Moves selection outline by 10px.Command + Arrow keys (Move selection)
Moves selected layer or area by 1px.Command + Shift + Arrow keys (Moveselection)
Moves selected layer or area by 10px.Command + Option + A (Select all layers)
Selects all layers in the layers palette.Command + Click layer thumbnail (Load layeras selection)
Load layer transparency as a selectionShift + Click mask (Enable/disable layer mask)
Switch layer mask on and off.Alt + Click mask (View mask)
Show the layer mask as a separate imagewhich can be edited like a channel.101ustwo™ studios 2013 / PPP™Shortcuts
  103. 103. Command + Click mask (Load mask asselection)
Loads up the mask as a selection.Command + Shift + I (Invert selection)
Reverse the current selection so previouslyselected areas become deselected and viceversa.Command + D (Deselect)
Removes current selection.Command + Shift + D (Reselect)
Reloads the last selection.Command + J (Copy layer)
Duplicate the currently selected layer.1 - 0 (Change layer opacity)
Adjust the selected layer opacity in 10%increments.Shift + [+/-] (Cycle blending modes)
Cycle through layer blending modes.102ustwo™ studios 2013 / PPP™Shortcuts
  104. 104. Keyboard Shortcutsand MenusBecome a Photoshop lean machine bycreating custom keyboard shortcuts using theEdit > Keyboard Shortcuts… dialog. In thisexample a couple have been created for AlignVertical and Horizontal Centres.Another really useful thing to do is remove theCommand+Q shortcut to prevent anyaccidental quits of Photoshop.103ustwo™ studios 2013 / PPP™
  105. 105. Appendix
  106. 106. SSStyles™ There is a library of Super Slick Styles™ to useas inspiration in _styles/SSStyles™.psdTHESE SHOULDN’T BE COPIED DIRECTLY ASTHEY’RE BASED ON OTHER DESIGNS!105ustwo™ studios 2013 / PPP™
  107. 107. PPPatterns™ There’s also a library of patterns available touse in _patterns/PPPattern™.pat and alsoready applied as Layer Effects in _patterns/PPPattern™.psd106ustwo™ studios 2013 / PPP™
  108. 108. cviiustwo™ studios 2013 / PPP™thank you!