Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.


23 757 vues

Publié le


  1. 1. Version 2Produced by ustwo™@pppustwo@gyppsyPixel PerfectPrecision™
  2. 2. Contentsustwo™ studios 2013 / PPP™Photoshop + ustwo™Photoshop: Colour ProfilesPhotoshop: Pixel PrecisionPhotoshop: TechniquesPhotoshop: OrganisationPhotoshop: ExportPhotoshop: TipsIllustratorAppendixIntroductionAcknowledgementsThe EssentialsPixel Perfect PrinciplesPixel Perfect DetailsAccessibility
  3. 3. 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.For this latest release we’ve separated the Photoshop-specific advicefrom the core principles (and expanded on them) to make thehandbook more useful across a range of disciplines; we know that thereare lots of interaction designers and developers out there who want tolearn about this area of design, so we’ve made the handbook a morerelevant resource for you. There’s also a completely revised section onAccessibility, an area we feel needed the PPP™ treatment to give youthe essentials you need to know in an easy-to-understand way.Gyppsy xx1ustwo™ studios 2013 / PPP™Introduction
  4. 4. AcknowledgementsThere’s a few people out there who I’d like to thank: first of all Shiro, forshowing me the true meaning of pixel precision all those years ago; allthe designers out there who share their knowledge, such as Teehan+Lax, Marc Edwards, Daniel Cooper, and Tobias Ahlin to name but a few;and most of all I’d like to thank ustwo™ for letting me indulge mypassions and create this handbook!2ustwo™ studios 2013 / PPP™
  5. 5. This first section covers a lot of core principles and topics that apply toall digital design and its relevant tools. For seasoned designers it can actas a refresher for things to look out for and consider, and for thosestarting out it offers a quick start guide to some of the processes andthinking that we apply to projects.3ustwo™ studios 2013 / PPP™The Essentials
  6. 6. Pixel PerfectPrinciples
  7. 7. Sharp Edges Straight edges should be on-pixel and sharp –blurred edges are a no-no!Naughty5ustwo™ studios 2013 / PPP™Nice
  8. 8. 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.6ustwo™ studios 2013 / PPP™yx xyyNaughty Nice
  9. 9. Consistency Alignment of objects across multiple screens isjust as important. Margins and placement ofcommon items such as title bars, backbuttons, and footers should be the samethroughout the interface to prevent objectsjumping around.The best way of doing this is to set yourself upa grid, which will define a structure that canbe followed throughout your screens.7ustwo™ studios 2013 / PPP™
  10. 10. Environment Environment refers not only to the platformyou’re designing for, but also how it will beoperated and the physical space that it will beused in. For example, TVs have a completelydifferent set of variables to mobile phones –they are viewed from a much greater distance,are almost always used indoors, and areoperated via remote. This in turn meansdifferent considerations for things like textsize, colours, and contrast within the interface.8ustwo™ studios 2013 / PPP™
  11. 11. Accessibility Accessibility is a broad topic, being relevant toevery one of your users – not just those withsome kind of disability. Good practice such asease of use and clarity are a given and go along way in this area, but there are also stepsyou can take to make your work moreaccessible for those with conditions such ascolour blindness and dyslexia. See theAccessibility chapter for more information.9Titleustwo™ studios 2013 / PPP™Random TextSqueezed in to FitObject Description that runs off the edge oObject Description that runs off the edge oObject Description that runs off the edge oObject Description that runs off the edge oObject Description that runs off the edge oObject Description that runs off the edge oObject Description that runs off the edge oObject Description that runs off the edge oObject Description that runs off the edge oObject Description that runs off the edge oObject Description that runs off the edge oNaughty NiceObjectDescriptionObjectDescriptionObjectDescriptionObjectDescription
  12. 12. Affordance Affordance is an object’s ability to convey itsfunction through sensory means, for exampleby being slightly raised a button suggests thatyou press it; by being the right size andposition for a hand a door handle suggeststhat you pull it.This technique can also be used in digitaldesign to hint at how objects should beinteracted with: commonly used affordancesinclude buttons which are given depth like inthe real world, and text which flows off thepage so it looks like it scrolls.10ustwo™ studios 2013 / PPP™Lorem ipsum dolor sitamet, consecteturadipisicing elit, sed doeiusmod tempor incididuntut labore et dolore magnaaliqua. Ut enim ad minimveniam, quis nostrudexercitation ullamco laborisnisi ut aliquip ex eacommodo consequat.Duis aute irure dolor inreprehenderit in voluptatevelit esse cillum dolore eu
  13. 13. Colour & Shape Some colours and shapes have becomesynonymous with certain functions andmessages within interface design. Be mindfulof these, as mixing them up can causeconfusion for the user if they’re expecting theopposite. Green and ticks are commonly usedto infer good, likewise red and crosses bad, butby jumbling the two up you create a mixedmessage. Similarly, yellow and triangles areoften associated with warnings, blue andcircles with information.11ustwo™ studios 2013 / PPP™Naughty Nice
  14. 14. Visual Hierarchy Layout, colours and typography have a hugeinfluence on how information is seen, andwhat the eye is drawn to. Think about whatyou want the user to look at on the page, andin what order, then start designing aroundthat hierarchy. Grab attention with highcontrast and large, bold type, or push itemsback with lower contrast and smaller, lightertype weights. Culture also plays a part: forexample Westerners will naturally start nearthe top of a screen as that’s the way we read.12ustwo™ studios 2013 / PPP™TitleTitleObjectDescriptionObjectDescriptionObjectDescriptionObjectDescriptionNaughty NiceObjectDescriptionObjectDescriptionObjectDescriptionObjectDescription
  15. 15. Typography Typography is an often overlooked part of thedigital experience, but since most informationis conveyed through text it’s one of the mostimportant parts of a design. The same basicprinciples as for any other medium apply – is ita comfortable size for reading withoutsquinting? Is there enough leading and are theline lengths short enough to make readingcomfortable? Don’t just accept the defaultfont settings in your design environment –treat type with the respect it deserves!13ustwo™ studios 2013 / PPP™Naughty NiceLorem ipsum dolor sit amet,consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore etdolore magna aliqua. Ut enim adminim veniam, quis nostrudexercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duisaute irure dolor in reprehenderit involuptate velit esse cillum dolore eufugiat nulla pariatur. Excepteur sintoccaecat cupidatat non proident, suntin culpa qui officia deserunt mollit animid est laborum. Lorem ipsum dolor sitamet, consectetur adipisicing elit, seddo eiusmod tempor incididunt ut laboreet dolore magna aliqua. Ut enim adminim veniam, quis nostrudexercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duisaute irure dolor in reprehenderit involuptate velit esse cillum dolore eufugiat nulla pariatur. Excepteur sintoccaecat cupidatat non proident, suntin culpa qui officia deserunt mollit animid est laborum. Lorem ipsum dolor sitLorem ipsum dolor sitamet, consecteturadipisicing elit, sed doeiusmod tempor incididuntut labore et dolore magnaaliqua. Ut enim ad minimveniam, quis nostrudexercitation ullamco laborisnisi ut aliquip ex eacommodo consequat. Duisaute irure dolor in
  16. 16. Testing This step has a close link to Environment inthat you may know a lot about the platformyou’re designing for, but nothing beats testingon actual device(s). Screen resolution andtechnology can vary dramatically compared toyour computer, not to mention switching frommouse and keyboard to other types of input.There are a wide range of live previewing toolsavailable these days that will take a designfrom your computer and place it directly onyour device, updating in real time as you applychanges. Make sure to use them!14ustwo™ studios 2013 / PPP™
  17. 17. Organisation No man is an island, and most of the timeyour files won’t be either! Good organisation isessential when sharing designs as it saves alot of time for other people. Well ordered filesand layers mean other designers can jumpstraight into your work and find their wayaround, and a logically named set of assetswill make a developer very happy.15ustwo™ studios 2013 / PPP™Rectangle.pngSquare Blue.pngSquare Green.pngSquare Orange.pngSquare Pink.pngAssetsScreen.psdDesignProject
  18. 18. Take a Break It’s very easy to get completely consumed inthe design process, but sometimes it pays totake a break – not just for health reasons, butalso the different perspective a refreshed setof eyes can bring. Go and make yourself abrew, or wander somewhere else for a fewminutes: after coming back the solution to adesign problem might be staring you right inthe face, or you might spot a flaw that hadpreviously gone unnoticed!16ustwo™ studios 2013 / PPP™
  19. 19. Pixel PerfectDetails
  20. 20. Colour Model HSB FTW! Have a go at using HSB as a colourmodel when creating a palette: once you getyour head around it you’ll see it’s a reallyefficient way to create shades of a basecolour. In the example the Hue (H) value hasbeen kept the same, then the Saturation (S)and Brightness (B) changed to create thevariations. See how much more sense thenumbers make in HSB compared to RGB?18ustwo™ studios 2013 / PPP™100%100%0%0%0°180°270° 90°BRed 228 243 242 140Green 50 194 148 31Blue 72 201 160 49Hue 352 352 352 352Saturation 78 20 39 78Brightness 89 95 95 55SH
  21. 21. ColourManagementColour Management makes a lot of sense in aprint environment, but for digital it can oftencreate more problems than it solves. The mainissue is that it’s not available throughout thedevelopment process – you can manage yourassets, but when they’re mixed withunmanaged code (specifying the sameoriginal colour) there can be a mismatch.Much better to ignore colour managementaltogether, and instead test on the device –unlike print this takes a matter of seconds andcosts nothing!19ustwo™ studios 2013 / PPP™Colour ProfileCodeYes NoNaughty Nice
  22. 22. 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.20ustwo™ studios 2013 / PPP™ÅyMax. HeightWWWWMax. Width
  23. 23. Text 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.21ustwo™ studios 2013 / PPP™SettingsEinstellungenConfigurações
  24. 24. 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!22ustwo™ studios 2013 / PPP™Align TextAlign Text Align TextAlign TextAlign Text Align TextABC123ABC123 ABC123Cap Height & Descender x-height Cap Height & x-height
  25. 25. Aligning 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.23ustwo™ studios 2013 / PPP™Align TextAlign Text Align TextAlign TextNaughty Nice
  26. 26. Borders & CornerRadiiYou’ll often want to create some kind ofborder for your components, in which casehow do you work out the outer radius whenyou’ve already set the inner (or vice-versa)?There are a few methods, the most commonbeing shown above: matching the inner andthe outer radii, scaling the original shape insize, and adding the border and original innerradius together. The latter is by far the bestmethod, resulting in consistent outlines thatdon’t thicken at the corners like the other two.24ustwo™ studios 2013 / PPP™ButtonOuter = Inner Inner Scaled Outer = Inner + Border WidthButton Button
  27. 27. If you use the preferred method, but startfrom the outer radius and work your way in bysubtracting the border width, you may end upwith inner corners that are completely square.In those situations it may be worth adding asmall radius to those corners: even though it ismathematically “incorrect” it may look betterfrom a visual perspective. In the engineeringworld this process is known as filleting, witheach individual corner called a fillet. For an in-depth article on borders and corner radii checkout this article from Radesign.25ustwo™ studios 2012 / PPP™Borders & CornerRadiiButton Button

FilletingInner = Outer - Border Width Filleted
  28. 28. Equilateral Triangles A lot of graphics applications won’t give youan equilateral triangle when you draw a three-sided polygon, instead they’ll make the widthand height the same. To quickly convert to anequilateral scale the height (with one facehorizontal) by 86.6%.26ustwo™ studios 2013 / PPP™100%86.6%100%100%Naughty Nice
  29. 29. Version Control Although there are now a multitude of versioncontrol systems available for designers to usemore often than not we still end up savingfiles manually. To make it easier to keep trackof files and revisions we use a system like thatshown above. The most recent file, Screen.psd,is kept at the top level of the working folder. Atthe start of the day, and at other key points,that file will be duplicated, placed in theArchive folder, and given a filename based onthe date (YYMMDD so it shows in the rightorder) and revision number. Tidy!27ustwo™ studios 2013 / PPP™Screen_130401_r01.psdArchiveProjectScreen.psdScreen_130402_r01.psdScreen_130402_r02.psdScreen_130402_r03.psdScreen_1.psdProjectScreen_2.psdScreen_FINAL.psdScreen_FINAL_FINAL.psdScreen_130403_r01.psdScreen_130403_r02.psdScreen_FINAL_FINAL_2.psdScreen_FINAL_FINAL_3.psdScreen_Latest_1.psdScreen_Latest_2.psdNaughty Nice
  30. 30. Naming Systems Coming up with a standard naming system foryour assets and components on a projecteases the transition from design todevelopment and will make everyone happy!Although different people and studios willhave their own individual way of doing thingsa good approach is to base your naming on ahierarchical system, which starts off with abroad identification of the component andthen progressively adds more levels of detail.So you might use a structure like this:type_location_identifier_stateThe type refers to what category thecomponent belongs to, such as:bg (background) btn (button) icn (icon)The next step is to add the screen or locationwhere this component appears:bg_help btn_home icn_global(global refers to components that appearacross multiple screens or sections)Then add the unique identifier, so buttons onthe home screen which create and deletedocuments would be called:btn_home_new btn_home_deleteThe final part is to add the state if it’sinteractive or changes at any point:btn_home_new_defaultbtn_home_new_highlightedAs an aside the system shown here useslowercase letters and underscores instead ofspaces in the names, which is our usualchoice, but another method is CamelCase,which uses no spaces and instead capitalletters to define each part of the structure:BtnHomeNewDefault BtnHomeNewSelectedThe final, and most important, point to makeis that the best way to go about all this is tospeak to the developer you’re working withand see which system they like to use, andthen adapt what you’re doing to that!28ustwo™ studios 2013 / PPP™
  31. 31. Naming Systems29ustwo™ studios 2013 / PPP™Title
  32. 32. Accessibility
  33. 33. Accessibility Accessibility isn’t about creating compromisedproducts for those with disabilities, but insteadmeans good, inclusive design made foreveryone. You don’t need to make hugesacrifices in terms of visual appeal, or spendlots of extra time and money making yourdesigns comply to standards: like pixel perfectprecision, if you make these principles part ofyour design-thinking and build them in fromthe start then you’ll find accessibility takesvery little time at all.31ustwo™ studios 2013 / PPP™“If I make my designaccessible won’t itlook rubbish?”
  34. 34. Types ofImpairmentAround 10% of the UK population have someform of disability, which is a large number ofpotential users to consider. There are fourmain types of impairment that will commonlyaffect digital projects – sight, hearing, touchand cognitive i.e. the ability to process thoseother three senses. You shouldn’t rely on justone of them to make your product or featureusable, but instead allow multiple forms ofinteraction and communication wherepossible – for example enabling text-to-speech functions for visually impaired users.32ustwo™ studios 2013 / PPP™
  35. 35. Clarity Keep your designs as clear and concise as theycan be to avoid overloading the user with toomuch content. You can do this by showinginformation which is relevant to the context ofthe user, and then use progressive disclosureto reveal more details as they require. It is alsoimportant to consider adapting your contentso that it’s suitable for mobile devices – forexample keeping image sizes small for thoseon data connections.33ustwo™ studios 2013 / PPP™NiceNaughtyA Title That Is Far TooLong For This Screen…Object Description that runs off the edge oObject Description that runs off the edge oObject Description that runs off the edge oLorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrudexercitation ullamco.TitleLorem ipsum dolor sitamet, consecteturadipisicing elit, sed doeiusmod tempor incididuntut labore et dolore magnaaliqua. Ut enim ad minimveniam, quis nostrudexercitation ullamco.Lorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrudexercitation ullamco.Lorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod temporObjectDescriptionTitleObjectDescriptionObjectDescriptionObjectDescriptionObjectDescription
  36. 36. Break up large blocks of text so they’re easierto digest and keep track of. Use somewherearound 5 lines as a maximum and you’ll notgo far wrong!Clarity34ustwo™ studios 2012 / PPP™Lorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.Ut enim ad minim veniam, quis nostrudexercitation ullamco laboris nisi ut aliquipex ea commodo consequat.Duis aute irure dolor in reprehenderit involuptate velit esse cillum dolore eu fugiatnulla pariatur. Excepteur sint occaecatcupidatat non proident, sunt in culpa quiofficia deserunt mollit anim id est laborum.
Break Up LargeBlocks of TextLorem ipsum dolor sit amet, consecteturadipisicing elit, sed do eiusmod temporincididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quisnostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duisaute irure dolor in reprehenderit involuptate velit esse cillum dolore eu fugiatnulla pariatur. Excepteur sint occaecatcupidatat non proident, sunt in culpa quiofficia deserunt mollit anim id est laborum.Naughty Nice
  37. 37. Some users, such as dyslexics, can have poororganisational skills so consider breaking downlong paragraphs of text into lists or diagrams,which help them by presenting theinformation in smaller, ordered chunks.Clarity35ustwo™ studios 2012 / PPP™1. Pink – Lorem ipsum dolor sit amet,consectetur adipiscing elit. Fuscepellentesque vehicula elit sed tincidunt.Nam bibendum tempus tellus ac interdum.2. Orange – Lorem ipsum dolor sit amet,consectetur adipiscing elit. Sed fermentumsodales orci. Class aptent taciti sociosqu adlitora torquent per conubia nostra, perinceptos himenaeos. 3. Green –Pellentesque a nibh nibh, vel dictum risus.4. Blue – Nunc congue vestibulum nibh nonsollicitudin. Donec eget metus leo.PinkOrangeGreenBlue1.2.3.4.
Text to DiagramsNaughty Nice
  38. 38. If you’re using abbreviations make sure toinclude their expansion when they firstappear. Better still try to avoid themaltogether, as remembering what they standfor can prove difficult for some users.Clarity36ustwo™ studios 2012 / PPP™
AbbreviationsPPPPPP(Pixel PerfectPrecision)Naughty Nice
  39. 39. Consistency Your designs should maintain consistencyacross a number of levels – for example theirstyling, navigation, typography, and use oflanguage. Interface elements should behavein a standard way throughout the app, andalso where possible follow any conventions orpatterns from the host operating system – thiswill mean that the user can predict how theproduct will behave based on theirexperiences with other apps. Most majordevices have guidelines for their design andinteraction patterns.37ustwo™ studios 2013 / PPP™AppAppLorem ipsum dolor sitamet, consecteturadipisicing elit, sed doeiusmod temporincididunt ut labore etdolore magna aliqua. Utenim ad minim veniam,quis nostrud exercitationOSTitleSubtitleLorem ipsum dolor sitamet, consecteturadipisicing elit, sed doeiusmod temporincididunt ut labore etdolore magna aliqua. Utenim ad minim veniam,quis nostrud exercitationObjectDescriptionObjectDescriptionObjectDescriptionObjectDescriptionObjectDescription
  40. 40. Navigation Following on from the previous point aboutconsistency, navigation should follow thesame principle as it will help the user getaround your app without feeling lost.Elements that help the user move through theapp should be positioned in the same placeacross all screens, using the same styles andlabels. This also applies to other parts of theinterface, for example if a button initiates acertain action in one part of the app then itshould also perform the same action ifactivated elsewhere.38ustwo™ studios 2013 / PPP™Title TitleSearch resultsObjectLorem ipsum dolor sitamet, consecteturadipisicing elit, sed doeiusmod tempor incididuntut labore et dolore magnaaliqua. Ut enim ad minimveniam, quis nostrudexercitation ullamco.TitleObjectDescriptionObjectDescriptionObjectDescriptionObjectDescriptionObjectDescriptionObjectDescriptionObjectDescriptionObjectDescription
  41. 41. When creating the layout for a page reallythink about why the user is there and whatthey want to find out. Based on that, structureyour content in a way that the most importantparts are the easiest to reach.Navigation39ustwo™ studios 2012 / PPP™
Content StructureSome really usefulinformation here!TitleLorem ipsum dolor sitamet, consecteturadipisicing elit, sed doeiusmod tempor incididuntut labore et dolore magnaaliqua. Ut enim ad minimveniam, quis nostrudexercitation ullamco.laboris nisi ut aliquip ex eacommodo consequat.TitleSome really usefulinformation here!Lorem ipsum dolor sitamet, consecteturadipisicing elit, sed doeiusmod tempor incididuntut labore et dolore magnaaliqua. Ut enim ad minimveniam, quis nostrudexercitation ullamco.Naughty Nice
  42. 42. Although care must be taken not to cram toomuch on to one screen, also be mindful thatby introducing too many steps you also createhassle for your users. Try to make allinformation accessible within four pages: anymore can cause frustration.Navigation40ustwo™ studios 2012 / PPP™Naughty Nice
Minimise StepsHi!Hit the link atthe bottomfor the info……then thislink……and finallythis one here.What youwere after!Info Info InfoMuch easierto get to!Hi!Hit the link atthe bottomfor the info…Info
  43. 43. Clearly title pages so that the user knowswhere they are, and the context of theinformation presented to them.Navigation41ustwo™ studios 2012 / PPP™
TitlesTitleNaughty NiceObjectDescriptionObjectDescriptionObjectDescriptionObjectDescriptionObjectDescriptionObjectDescriptionObjectDescriptionObjectDescription
  44. 44. Keep your content to an appropriate page sizeand try to introduce breaks where it makessense. Scrolling through a page is much easierthan linking between them and also reducesthe amount of page requests, which will bebeneficial to mobile users. Don’t make thepages too long though as no one likes toendlessly flick down!Navigation42ustwo™ studios 2012 / PPP™
Appropriate PageSizesTitleLorem ipsum dolor sitamet, consecteturadipisicing elit, sed doeiusmod tempor incididuntut labore et dolore magnaaliqua. Ut enim ad minimveniam, quis nostrudexercitation ullamco laborisnisi ut aliquip ex eacommodo consequat. Duisaute irure dolor inreprehenderit in voluptateTitleLorem ipsum dolor sitamet, consecteturadipisicing elit, sed doeiusmod tempor incididuntut labore et dolore magnaaliqua. Ut enim ad minimveniam, quis nostrudNaughty NiceObjectDescriptionObjectDescription
  45. 45. Make sure your content only needs to bescrolled in one direction – it’s much easier forthe user both physically and mentally, as theywon’t need to pan around trying to keep trackof what they have and haven’t seen.Navigation43ustwo™ studios 2012 / PPP™
Limit Scrolling toOne DirectionTitleLorem ipsum dolor sitamet, consecteturadipisicing elit, sed doeiusmod tempor incididuntut labore et dolore magnaaliqua. Ut enim ad minimveniam, quis nostrudexercitation ullamco laborisnisi ut aliquip ex eacommodo consequat. Duisaute irure dolor inTitleLorem ipsum dolor sit amet,consectetur adipisicing elit, sed doeiusmod tempor incididunt ut laboreet dolore magna aliqua. Ut enim adminim veniam, quis nostrudexercitation ullamco laboris nisi utaliquip ex ea commodo. consequat.Duis aute irure dolor in reprehenderitin voluptate velit esse cillum dolore eufugiat nulla pariatur. Excepteur sintoccaecat cupidatat non proident, suntNaughty NiceObjectDescriptionObjectDescription
  46. 46. If you’ve got more than three or four points ina list consider using numbers instead ofbullets – these provide some structure whichaids navigation through the content.• Pink• Orange• Green• BlueNavigation44ustwo™ studios 2012 / PPP™1. Pink2. Orange3. Green4. Blue
Numbered ListsNaughty Nice
  47. 47. Labelling objects in an interface for use withtext to speech functions is an art form in itself!Labels need to be clear so that users knowwhat’s going on, but also concise so that theydon’t take too long to listen to.Navigation45ustwo™ studios 2012 / PPP™ActionAction“This is a button thatinitiates Action. Bypressing it you willproceed to the nextscreen of the app.”“Go to next screen”
LabellingNaughty Nice
  48. 48. Interaction When designing for touch-based devices it’simportant to consider how easy it is to operateusing fingers and thumbs. We usually base ourdesigns on a minimum touch area of 7mm2,which is the rough size of the contact areabetween a finger and screen, and then leaveat least a 2mm gap between items so theydon’t get accidentally pressed. If you’ve gotcomponents that are intended to be primarilythumb operated then it’s a good idea to makethose wider, as the average width of an adultthumb is 25mm.46ustwo™ studios 2013 / PPP™7mm2
Touch TargetsNaughty Nice
  49. 49. When requesting user input provide defaultvalues rather than just free text entry as it willreduce the chance of input errors.Interaction47ustwo™ studios 2012 / PPP™Select Colour
Free TextEnter ColourPinkOrangeGreenBlueNaughty Nice
  50. 50. Buttons are the commonly used method ofinitiating actions in applications, so if you optfor hyperlinks instead you’ll confuse the user.Interaction48ustwo™ studios 2012 / PPP™
Buttons andHyperlinksActionActionNaughty Nice
  51. 51. And talking of hyperlinks don’t underline textthat isn’t a link as again this will causeconfusion – users may think something iswrong when they tap and nothing happens.Interaction49ustwo™ studios 2012 / PPP™This is nota linkThis is nota linkNaughty Nice
  52. 52. Feedback You should always let the user know what’sgoing on when they’re in your app. If theyperform an action that needs some processingor uploading time then show a spinner ratherthan simply freeze the screen so they know ithasn’t crashed. Similarly, if an error occursnotify them rather than revert back to aprevious screen.50ustwo™ studios 2013 / PPP™LoadingNaughty Nice
  53. 53. Provide feedback in multiple forms wherepossible. For example, relying solely on soundfor an alert would mean that deaf users, orthose located in noisy environments, wouldn’tbe aware that something has happened whichrequires their attention.
Multi-sensoryFeedback51ustwo™ studios 2012 / PPP™AlertNaughty Nice
  54. 54. If something goes wrong then let the userknow what’s happened in an understandableway, and then provide them with the option tonavigate back to somewhere useful.Feedback52ustwo™ studios 2012 / PPP™
Error MessagesReturnSomething went wrong!But don’t worry, pressReturn to go back to theprevious screen.Error code 04 type 11An error has occurred inthe bus_1234 Library.This problem has causeda crash in the dynamicstates of the system.Please contact your sysadmin on the IT floor.OKNaughty Nice
  55. 55. When designing forms place the errormessages next to the relevant field ratherthan separately – this will help the useridentify the error much more easily.Feedback53ustwo™ studios 2012 / PPP™
Error ProximityusthreeLondonGyppsyYou work for ustwousthreeLondonGyppsyYou work for ustwoNaughty Nice
  56. 56. Typography As mentioned in Pixel Perfect Principles goodtypography is vital in digital design, and has agreat effect on your product’s accessibility.The basics of good line length and leading arealways important, especially when consideringusers with visual or cognitive impairments – bykeeping text light and legible you’ll help theseusers navigate easily from one line to the next.54ustwo™ studios 2013 / PPP™Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesquevehicula elit sed tincidunt. Nam bibendum tempus tellus ac interdum. Loremipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum sodales orci.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptoshimenaeos. Pellentesque a nibh nibh, vel dictum risus. Nunc congue vestibulumnibh non sollicitudin. Donec eget metus leo, eleifend tempus enim. Lorem ipsumdolor sit amet, consectetur adipiscing elit. Fusce pellentesque vehicula elit sedtincidunt. Nam bibendum tempus tellus ac interdum. Lorem ipsum dolor sit amet,consectetur adipiscing elit. Sed fermentum sodales orci. Class aptent tacitisociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Pellentesque a nibh nibh, vel dictum risus. Nunc congue vestibulum nibh nonsollicitudin. Donec eget metus leo, eleifend tempus enim.Lorem ipsum dolor sit amet, consecteturadipiscing elit. Fusce pellentesque vehiculaelit sed tincidunt. Nam bibendum tempustellus ac interdum. Lorem ipsum dolor sitamet, consectetur adipiscing elit. Sedfermentum sodales orci.Class aptent taciti sociosqu ad litoratorquent per conubia nostra, per inceptoshimenaeos. Pellentesque a nibh nibh, veldictum risus. Nunc congue vestibulum nibhnon sollicitudin. Donec eget metus leo.Naughty Nice
  57. 57. Multiple lines of text should always be left-aligned, as the inconsistent spaces in justifiedand centred text can be a problem for userswith learning difficulties. Justification can alsocreate distracting white rivers running throughthe paragraphs.Typography55ustwo™ studios 2012 / PPP™Lorem ipsum dolor sit amet, consecteturadipiscing elit. Fusce pellentesque vehiculaelit sed tincidunt. Nam bibendum tempustellus ac interdum. Lorem ipsum dolor sitamet, consectetur adipiscing elit. Sedfermentum sodales orci.Class aptent taciti sociosqu ad litoratorquent per conubia nostra, per inceptoshimenaeos. Pellentesque a nibh nibh, veldictum risus. Nunc congue vestibulum nibhnon sollicitudin. Donec eget metus leo.
AlignmentLorem ipsum dolor sit amet, consecteturadipiscing elit. Fusce pellentesque vehiculaelit sed tincidunt. Nam bibendum tempustellus ac interdum. Lorem ipsum dolor sitamet, consectetur adipiscing elit. Sedfermentum sodales orci.Class aptent taciti sociosqu ad litoratorquent per conubia nostra, per inceptoshimenaeos. Pellentesque a nibh nibh, veldictum risus. Nunc congue vestibulum nibhnon sollicitudin. Donec eget metus leo.Lorem ipsum dolor sit amet, consecteturadipiscing elit. Fusce pellentesque vehiculaelit sed tincidunt. Nam bibendum tempustellus ac interdum. Lorem ipsum dolor sitamet, consectetur adipiscing elit. Sedfermentum sodales orci.Class aptent taciti sociosqu ad litoratorquent per conubia nostra, per inceptoshimenaeos. Pellentesque a nibh nibh, veldictum risus. Nunc congue vestibulum nibhnon sollicitudin. Donec eget metus leo.Naughty Nice
  58. 58. Keep text formatting as simple as possible soit’s legible for your users. Serif type is harder toread for visually impaired or dyslexic users asit’s styling can obscure the shape of theletters; similarly italics and underlines addvisual noise. Capitalisation of whole sentencesor paragraphs also makes text more difficultto read AND LOOKS LIKE YOU’RE SHOUTING!Typography56ustwo™ studios 2012 / PPP™ExampleExampleExampleEXAMPLEExampleExample
FormattingNaughty Nice
  59. 59. Lastly, avoid moving or blinking text as visuallyimpaired and dyslexics users can find this verydistracting, and also there are epilepsy issuesto consider with blinking/flashing.Typography57ustwo™ studios 2012 / PPP™ExampleExampleExample
FormattingNaughty Nice
  60. 60. Truncate text only where necessary, as it hidesuseful content.Typography58ustwo™ studios 2012 / PPP™
TruncationExa…Exa…Exa…Example 1Example 2Example 3Naughty Nice
  61. 61. Wherever possible try to keep text separatefrom graphics, and instead implement it at acode level. This will allow any text-to-speechfunctions on the user’s device to pick it up andread it out loud, and also lets the user increasethe size of the text or adjust the colour to theirpreference, which won’t be possible with afixed graphic.Typography59ustwo™ studios 2012 / PPP™
Merging Text withGraphicsExample+ExampleNaughty Nice
  62. 62. Colour Using icons and colours as visual aids can helpusers identify important content on the page,or can be used to colour code types of contentor areas in your app, which can be especiallyuseful to those with cognitive impairments.Make sure that it is used consistently though!60ustwo™ studios 2013 / PPP™
Visual AidsInformationInformationNaughty Nice
  63. 63. However, don’t rely on colour alone tocommunicate information. Mobile devices canhave poor colour contrast and are sometimesused in less than ideal lighting situations,which may mean that colours aren’t visible tousers. It is also worth noting that around 8%of males have some form of colour blindness,again having an impact on how well colourswill work.Colour61ustwo™ studios 2012 / PPP™PassedFailed
Don’t Rely onColour AloneNaughty Nice
  64. 64. If you’re using colour to present information,such as the bars in a graph, then try tointroduce a secondary method ofdistinguishing between them; in this casepatterns have been introduced to the orangeand blue areas.Colour62ustwo™ studios 2012 / PPP™
AlternativesNaughty Nice
  65. 65. Always make sure that text and otherimportant information has enough contrastbetween foreground and background colours,so it’s still legible for those with some form ofcolour blindness or other visual impairment.Colour63ustwo™ studios 2012 / PPP™Example
Colour ContrastExampleNaughty Nice
  66. 66. There are numerous tools out there which canbe used to test your colour contrast. One ofthe most useful is Colour Contrast Analyserwhich can be found here. There’s also a greatonline checker available here – just pop in thetwo colours and away you go! As a minimumyou should aim to pass AA standards; AAA isbetter but needs a lot of contrast, too much ofwhich could have a negative impact on yourdesigns. The tests also differentiate betweenbody sized copy and “Large” text which is 18ptand above (or bold and larger than 14pt).Colour64ustwo™ studios 2012 / PPP™
Colour ContrastCheckersAAAA (Large)ForegroundBackground AAAAAA (Large)
  67. 67. 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.Colour65ustwo™ studios 2012 / PPP™Blue /CyanRed /MagentaYellow White Black
  68. 68. There’s lots more information on their site,including some great colouring pencils forcolour blind people!Colour66ustwo™ studios 2012 / PPP™LightGreenLightOrangeLightYellowLightBluePink KhakiGreenOrange Yellow Blue VioletRed BrownDarkGreenBrickDarkYellowDarkBluePurpleBordeauxDarkBrown
  69. 69. Testing Another piece of good practice that applies toaccessibility as well! Once you’ve created yourproduct, test out how well it works withvarious accessibility features such as black &white, zoomed view, and text-to-speech.These features can often be tested in appsimulators, but of course the real thing is evenbetter. Speaking of real things, the best way(as always) is to test with people that usethese features!67ustwo™ studios 2013 / PPP™Text tospeechText tospeech
  70. 70. Tucked 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.Testing68ustwo™ studios 2012 / PPP™
Colour BlindnessPreview in AdobeTitleObjectDescriptionObjectDescriptionObjectDescriptionObjectDescription
  71. 71. Sim Daltonism is a more advanced applicationfor checking colour blindness accessibility, andcan test many variations of the condition.Rather than being a Photoshop only tool itworks across the entire OS, providing aresizable floating window that previewswhatever is underneath the mouse cursor.Testing69ustwo™ studios 2012 / PPP™
Sim DaltonismTitleObjectDescriptionObjectDescriptionObjectDescriptionObjectDescriptionTitleObjectDescriptionObjectDescriptionObjectDescriptionObjectDescription
  72. 72. So now that we’ve covered a lot of design principles let’s dive right intosome specifics. Although there’s been a lot of noise made aboutalternatives to Photoshop, including budget apps and designing in code,it’s still our day-to-day tool here at ustwo™ (and across the industry asa whole), so knowing how to use it well is vital. The following sectionsshow you some of the processes and techniques that we use here…70ustwo™ studios 2013 / PPP™Photoshop + ustwo™
  73. 73. Photoshop:Colour Profiles
  74. 74. 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).72ustwo™ studios 2013 / PPP™
  75. 75. Photoshop ColourSettingsNext, in Photoshop, go to Edit > Color Settings…and change Working Spaces > RGB to thescreen specified in your System Preferences.Also change Color Management Policies > RGBto Off.73ustwo™ studios 2013 / PPP™
  76. 76. Photoshop Save forWebAdditionally, in Save for Web the Convert tosRGB option needs to be deselected, andPreview should be set to Monitor Color. Yourcolours should now be consistent!74ustwo™ studios 2013 / PPP™
  77. 77. Color Faker Although following the previous steps shouldset you up for most day to day tasks, there’sone last piece of advice to give concerningprofiles: if you’re having trouble with colourvalues in Apple software such as Xcode orKeynote then it will probably be down to theway that OS X handles profiles. For an in-depthexplanation read this article; the long andshort of it is that you should download ColorFaker and switch it on!75ustwo™ studios 2013 / PPP™
  78. 78. Photoshop:Pixel Precision
  79. 79. Shape Layers We love Shape Layers here – our workflow isalmost entirely based on them. Being vectorsthey’re completely editable, allowing scalingand transformation of the shape with no lossin quality, and are less resource hungry thanSmart Objects or bitmaps. Winner.77ustwo™ studios 2013 / PPP™Naughty Nice
  80. 80. Also, try to use vectors for other parts of yourdesign where you might automatically use abitmap, for example layer masks, as this willfurther increase the versatility and speed ofthe file. Another related tip is to use unmaskedShape Layers for backgrounds, which have theadded advantage that the fill willautomatically scale if the canvas size isincreased. Nice.78ustwo™ studios 2012 / PPP™Shape Layers
Other VectorsNaughty Nice
  81. 81. As an illustration of the performance hit thatbitmaps create take a look at the two valueshighlighted above. These are document sizereadouts for the layers featured on theprevious page: the vector design only uses260Kb of memory, but the all-bitmap versiontakes up around five times the amount at1.27Mb! By using vectors for everythingpossible on a large file you can save yourselfhundreds of megs of memory.79ustwo™ studios 2012 / PPP™Shape Layers
PerformanceNaughty Nice
  82. 82. 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.80ustwo™ studios 2013 / PPP™
  83. 83. 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.81ustwo™ studios 2013 / PPP™Some TextWH::80 px80 px
  84. 84. 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!82ustwo™ studios 2013 / PPP™
  85. 85. Snap to Pixel GridActionsThere may be times when you’d like to alterShape Layers on a sub-pixel level, in whichcase you won’t want them to snap to the pixelgrid. If you find you want to toggle thesnapping on and off like this quite often thenwhy not automate it? Simply set create a newAction, assign a Function Key shortcut to it,and then record yourself going in to thepreferences and switching the Snap VectorTools and Transforms to Pixel Grid option on;then record another Action for off. No need tohit the preferences any more!83ustwo™ studios 2013 / PPP™
  86. 86. Shape LayerOptionsIn Photoshop 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.84ustwo™ studios 2013 / PPP™
  87. 87. Nudging If you’ve got 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% though the points will only move 0.5px(i.e. half the amount), creating blurred edges –not good. With CS6 pixel grid snapping thepoints will move 1px no matter what level thezoom is; you’ll need to switch off the snap tomove by smaller increments though.85ustwo™ studios 2013 / PPP™
  88. 88. Snapping Photoshop has lots of handy tools to help withpixel precision. One of the first things to dowhen setting up the program is to enablesnapping – go to View > Snap and make sureit’s on. Now your objects will snap to otheritems and guides on the canvas, which reallyhelps with alignment. The Snap To submenushows the various items that Photoshop canuse for snapping.86ustwo™ studios 2013 / PPP™
  89. 89. Alignment &SpacingAs with most graphics applications Photoshophas align and distribute tools – find them inthe Layer > Align and Layer > Distribute menus.87ustwo™ studios 2013 / PPP™
  90. 90. 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.88ustwo™ studios 2013 / PPP™
  91. 91. 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.89ustwo™ studios 2013 / PPP™Some Text
  92. 92. 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 and then go to Layer > Layer Style > GlobalLight… to alter the default value.90ustwo™ studios 2013 / PPP™90°120°drag to newdocument
  93. 93. Live Previewing Test, test, test again, and then test somemore! One of the best things you can do foryour designs is look at it on the device(s) it’sgoing to end up on. There’s lots of softwareout there now which will live preview straightout of Photoshop, so no need to save out filesand copy them across to the phone or anyfaffing like that. A couple worth checking outare Skala Preview for iOS (and now Android)and Android Design Preview for, you guessedit, Android.91ustwo™ studios 2013 / PPP™Some Text Some Text
  94. 94. Photoshop:Techniques
  95. 95. 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 Layer Style.The benefits of this are a) it’s quicker toupdate the colour later on as there’s no needto load up the Layer Style 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?93ustwo™ studios 2013 / PPP™Naughty NiceSome Text
  96. 96. Object Gradients The same applies to gradients – use a gradientfill layer instead of a Layer Style if possible.94ustwo™ studios 2013 / PPP™Some TextNaughty Nice
  97. 97. Whichever gradient method you use makesure the Dither option is selected. This will helpsmooth out the colour transition and preventbanding of the colours. With Photoshop CS5you can only apply a dither to a gradient layer,but in CS6 you can use it on both.95ustwo™ studios 2012 / PPP™Object Gradients
  98. 98. Concise Layer Styles Try not to spread Layer Styles 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.96ustwo™ studios 2013 / PPP™Naughty Nice
  99. 99. Scale Layer Effects Although you can choose the Scale Stylesoption when you resize an entire documentthrough Image Size… there are times whenyou want to scale individual objects and theirLayer Effects. When you resize one of theseobjects the styling doesn’t automatically scalewith it, but you can use the Scale Effects…option to change them as well – althoughyou’ll need to know the percentage increase/decrease of the original shape to get the twoto match. You can find this option by right-clicking the fx icon on the relevant layer.97ustwo™ studios 2013 / PPP™Scale Effects by 200%Scale Layer by 200%
  100. 100. Layer Style Strokes At first glance it may seem that the only wayto create a stroke with Layer Styles is theStroke option, but in fact there are multipleways to add them to a single shape. If you usethe Inner/Outer Glows and Shadows, and settheir Choke to 100%, you can also get solidoutlines. The Stroke will always appear on top,followed by Inner Shadow and Inner Glow onthe inside, and Outer Glow and Drop Shadowon the outside. Downsides? At thicker widthsthey can blur, and the Choke can cause rough-looking rounded edges.98ustwo™ studios 2013 / PPP™
  101. 101. Layer Style vs.Vector StrokesIf you want the absolute best quality strokes,and you’re using Photoshop CS6, then add avector stroke directly to your Shape Layerrather than as a Layer Style. Not only are theybetter quality (more noticeable at thickerwidths), but you have the option to userounded, square, or bevelled edges, as well asdashed outlines. Another useful feature is thatthey can be scaled to half pixels, so if you’redesigning for iOS you can set a non-Retinastroke to 0.5px which will then scale up to 1pxwhen the size is doubled for Retina.99ustwo™ studios 2013 / PPP™Naughty Nice
  102. 102. Corner Editor One feature that Photoshop could really dowith is being able to edit a corner radius afteryou’ve drawn a Shape Layer. Fortunatelythere’s a script out there that solves thisproblem: Corner Editor. With it installed youcan select a Shape Layer, bring up the windowabove from File > Scripts > Corner Editor, andchange the radii value – you can even havedifferent sizes for each corner. There’s also theoption to use different styles, so you’re notjust limited to rounded corners.100ustwo™ studios 2013 / PPP™
  103. 103. 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.101ustwo™ studios 2013 / PPP™
  104. 104. 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.102ustwo™ studios 2013 / PPP™Naughty Nice
  105. 105. 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.103ustwo™ studios 2013 / PPP™Naughty
  106. 106. The best solution is to recreate the effectusing a layer that is independent of what isbeneath it.104ustwo™ studios 2012 / PPP™Blending ModesNice
  107. 107. Text 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.105ustwo™ studios 2013 / PPP™The original line of textReplacement textThe original line of textReplacement textNaughty Nice
  108. 108. 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!106ustwo™ studios 2013 / PPP™Naughty Nice
  109. 109. 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, or rightclicking on the layer and selecting the sameoptions. For Photoshop CS5 these functionsare found in the Layer > Type > menu.107ustwo™ studios 2013 / PPP™
  110. 110. Hyphenation Most devices don’t support hyphenation soyou might as well switch it off.108ustwo™ studios 2013 / PPP™Naughty Nice
  111. 111. 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 20pt.109ustwo™ studios 2013 / PPP™Naughty Nice
  112. 112. 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.110ustwo™ studios 2013 / PPP™None SharpCrisp Strong Smooth
  113. 113. 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.111ustwo™ studios 2013 / PPP™Some TextSome TextSome TextSome TextNaughty Nice
  114. 114. Quick Preview 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.Depending on the density of the screen youmay have to zoom out to 50% or even 33% tosee the size of things in real life, and if they’retoo small make ‘em bigger!112ustwo™ studios 2013 / PPP™Some TextSome Text
  115. 115. Photoshop:Organisation
  116. 116. 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.114ustwo™ studios 2013 / PPP™
  117. 117. 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 designs, andyou’ll look amazing if the file gets sent off to aclient. A good technique is to give each layer aname as they’re created, which is much easierthan trying to do them all at once later on.115ustwo™ studios 2013 / PPP™Some TextNaughty Nice
  118. 118. 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!).116ustwo™ studios 2013 / PPP™Some TextNaughty Nice
  119. 119. Search Photoshop CS6 now has a search featurewithin the Layers panel, which coupled withgood organisation can make layer navigationa breeze. Using consistent naming across theboard will allow you to search for layers basedon their name, or you can filter by kind –useful if you want to see all your text forexample. There’s lots of other methods inthere including Effect and [Layer] Colour, sohave a play and see what systems you cancome up with to filter and work on your layers.117ustwo™ studios 2013 / PPP™by Name by KindSome Text
  120. 120. 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.118ustwo™ studios 2013 / PPP™Grey (“neutral”) used forreference items, for examplewireframes or screenshotsCore design doesn’tuse colour labelsGreen here to show differentstates of the same buttonRed (“danger”) for old,unused elementsPopup window
  121. 121. Expanded LayerEffectsLike a messy house guest, expanded LayerEffects can make it harder to find your wayaround. Keep them collapsed and things are alot better.119ustwo™ studios 2013 / PPP™Naughty Nice
  122. 122. Delete All EmptyLayersTry not to leave empty layers or layer groupsscattered throughout your files as they addunnecessary clutter. There’s a handy scriptlocated in the File > Scripts menu called DeleteAll Empty Layers, which does exactly what itsays on the tin!120ustwo™ studios 2013 / PPP™Naughty Nice
  123. 123. 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!121ustwo™ studios 2013 / PPP™Naughty Nice
  124. 124. 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.122ustwo™ studios 2013 / PPP™Some Text Some Text Some TextSome Text Some Text Some Text
  125. 125. Photoshop:Export
  126. 126. 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.124ustwo™ studios 2013 / PPP™
  127. 127. 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 CSx/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]125ustwo™ studios 2013 / PPP™
  128. 128. 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!126ustwo™ studios 2013 / PPP™
  129. 129. 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.127ustwo™ studios 2013 / PPP™
  130. 130. 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 sidenote if you’re developing for iOS then it mightnow be worth using ImageOptim as thisarticle explains.128ustwo™ studios 2013 / PPP™
  131. 131. 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.129ustwo™ studios 2013 / PPP™
  132. 132. 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.130ustwo™ studios 2013 / PPP™
  133. 133. 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 besaved in.565131ustwo™ studios 2013 / PPP™
  134. 134. Photoshop:Tips
  135. 135. 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.133ustwo™ studios 2013 / PPP™No GlowGlow
  136. 136. Fading Circles Circular fades are really useful for loadingicons and can be created easily with the StrokeLayer Style. The trick is to set Fill Type: Gradientand use Style: Angle.134ustwo™ studios 2013 / PPP™
  137. 137. 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.135ustwo™ studios 2013 / PPP™
  138. 138. Add Noise withInner GlowYou can quickly add a simple noise texture toan object using the Inner Glow Layer Style. Setthe Source to Center, Size to 0, then vary theamount using the Noise setting.136ustwo™ studios 2013 / PPP™
  139. 139. 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.137ustwo™ 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
  140. 140. 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.138ustwo™ studios 2013 / PPP™
  141. 141. 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 Style panel. 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).139ustwo™ studios 2013 / PPP™
  142. 142. 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.140ustwo™ studios 2013 / PPP™
  143. 143. Shortcuts There are loads of shortcuts for the path toolsto make working with them quicker. If you’vegot two existing Shape Layers you cancombine the paths using Command + E. Afterdrawing a path you can add another to it bypressing + or by holding down Shift;alternatively - or Alt will subtract from theshape. Once you’ve drawn the second pathyou can then quickly subtract and add it fromthe other by selecting it and pressing - or +.141ustwo™ studios 2013 / PPP™
  144. 144. If you’re editing a path with the DirectSelection Tool and you don’t want toaccidentally select other Shape Layers in thedocument then tap Q to enter Quick MaskMode, which will isolate the one you’recurrently working on.Command + Shift + H will hide the current pathyou’ve got selected - useful if you want topreview the shape without the path obscuringthe edges.142ustwo™ studios 2012 / PPP™ShortcutsSome Text
  145. 145. 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.143ustwo™ studios 2012 / PPP™Shortcuts
Selections &Brushes
  146. 146. 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.144ustwo™ studios 2012 / PPP™Shortcuts
  147. 147. 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.145ustwo™ studios 2012 / PPP™Shortcuts
  148. 148. 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.146ustwo™ studios 2013 / PPP™Shortcuts
  149. 149. 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.147ustwo™ studios 2013 / PPP™Shortcuts
  150. 150. 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.148ustwo™ studios 2013 / PPP™
  151. 151. Illustrator
  152. 152. 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 too.150ustwo™ studios 2013 / PPP™
  153. 153. 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.151ustwo™ studios 2013 / PPP™
  154. 154. 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.152ustwo™ studios 2013 / PPP™
  155. 155. Grids Like Photoshop, the Illustrator grid can be setup in Illustrator > Preferences > Guides, Grid, &Slices…, again with useful 10px gridlines and10 subdivisions.153ustwo™ studios 2013 / PPP™
  156. 156. Snap to Grid Yup, you guessed it, stick Snap to Grid on too!Like Photoshop it’s located in the View menu.154ustwo™ studios 2013 / PPP™
  157. 157. 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.155ustwo™ studios 2013 / PPP™
  158. 158. 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.156ustwo™ studios 2013 / PPP™Naughty Nice
  159. 159. 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.157ustwo™ studios 2013 / PPP™
  160. 160. 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.158ustwo™ studios 2013 / PPP™Pixel Preview On Pixel Preview Off
  161. 161. 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.159ustwo™ studios 2013 / PPP™
  162. 162. 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!160ustwo™ studios 2013 / PPP™
  163. 163. Appendix
  164. 164. PPPatterns™ There’s a library of patterns available to use inPatterns/PPPattern™.pat and also readyapplied as Layer Effects in Patterns/PPPattern™.psd162ustwo™ studios 2013 / PPP™
  165. 165. 163ustwo™ studios 2013 / PPP™@pppustwo@gyppsyThanks!