Quality on Tap


Published on

Presentation for BlackBerry JAM Europe 2013

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

  • Be the first to like this

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

No notes for slide

Quality on Tap

  1. 1. @LizMyers @2ScoopsApp MyersDesign.com Good afternoon, I’m Liz Myers, Director of Myers Design based in London. This is JAM 399 and I’m delighted to have this opportunity to share the art of making mobile icons. Later I’ll demonstrate the icon design and production process in detail. But first I’d like to tell you just a bit about my background as well as show you the tools and techniques I use to create mobile graphics.
  2. 2. flickr.com/photos/aboyandhisbike/ 723376451/sizes/l/in/photostream/ My graphic design career began in Seattle WA about 20 years ago and one of my first contracts was making icons at Microsoft for Windows 3.1 applications.
  3. 3. @LizMyers @2ScoopsApp MyersDesign.com Back then we used - Paintbrush which had a palette of only 16 colours. If you wanted more you had to make them yourself by dithering or creating a swatch like you see on the far right hand side (it’s made of alternating two of the 16 colours - pixel by pixel. (in fact as you can see the whole image is by “pushing pixels” as we affectionately called it)
  4. 4. title bar/buttons application icons Here’s a closeup of the Program Manager icon. The user interface guidelines mandated 3D with the light coming from a 45 deg angle and you can see that we had to paint that in using white and grey highlights - the whole things was saved as a bitmap and it wasn’t flexible at all. (didn’t even have an alpha channel)
  5. 5. @LizMyers @2ScoopsApp MyersDesign.com Fast forward to today and things have improved dramatically. By using vector graphics we’ve got a lot more flexibility in terms of scaling these images without losing quality. and even more importantly in being able to colourise and apply different styling to make them fit with all the different operating sysems: BB10, iOS, and Android.
  6. 6. @LizMyers @2ScoopsApp MyersDesign.com http://myersdesign.com This is why I felt it was really important to not only make these icons for you - but teach you how to edit them and create your own. In a few moments, I’m going to share all the tools and techniques I use in order to help you edit mine and create your own. But first I need to get you in the right frame of mind.
  7. 7. 101010 101010 101010 101010 101010 101010 @LizMyers @2ScoopsApp MyersDesign.com As you know, we all work with both sides of our brain to varying degrees. . .
  8. 8. @LizMyers @2ScoopsApp MyersDesign.com I think developing apps, writing code, analysing - these are left brain activities
  9. 9. @LizMyers @2ScoopsApp MyersDesign.com and the right side is the creative one- where ideas are formed, artwork is created. This is where icon design begins. All you need to get started are really paper and pencil or even purple crayon.
  10. 10. Now to help illustrate the kind the art of sketching icons - I want to share a bit of this children’s story - Harold and the Purple Crayon (how many know this one?)
  11. 11. @LizMyers @2ScoopsApp MyersDesign.com One evening Harold decided he wanted to go for a walk in the moonlight. But there was no moon, so he drew one... [i love that - a moon in two simple strokes. (You could do the same with a half circle)
  12. 12. @LizMyers @2ScoopsApp MyersDesign.com He also need a path to walk - so he drew one of those . . . [and now that line is defined as a path -we’re getting drawn into the story)
  13. 13. @LizMyers @2ScoopsApp MyersDesign.com but the path didn’t seem to lead anywhere - so he took a shortcut through the forest - with only one tree. [clever isn’t he? already sign -posting our way thru the story, tree stands for an entire forest ]
  14. 14. @LizMyers @2ScoopsApp MyersDesign.com ... turns out the tree is an apple tree...
  15. 15. @LizMyers @2ScoopsApp MyersDesign.com those apples will be tasty... so they need a dragon to protect them. . .
  16. 16. @LizMyers @2ScoopsApp MyersDesign.com and the dragon scared Harold
  17. 17. @LizMyers @2ScoopsApp MyersDesign.com . . . and this made his hand shake. . .
  18. 18. @LizMyers @2ScoopsApp MyersDesign.com and shake. . .
  19. 19. @LizMyers @2ScoopsApp MyersDesign.com until Harold is in over his head. But he holds onto the purple crayon
  20. 20. @LizMyers @2ScoopsApp MyersDesign.com and begins to draw his way out of a JAM here [sic!]
  21. 21. @LizMyers @2ScoopsApp MyersDesign.com and as you can see he has drawn a boat. . .
  22. 22. @LizMyers @2ScoopsApp MyersDesign.com as a matter of fact - a sailboat.
  23. 23. @LizMyers @2ScoopsApp MyersDesign.com Harold sails off to the next app-venture. He’s got all the attributes of a terrific BlackBerry Developer. His sketches flow fast and freely, and it’s all a natural process for him. This is what i want you to remember - there’s no right or wrong way to make great icons [sure there’s a production process] - but more importantly this is about communication - and you need to pick up your pen or pencil or even purple crayon BEFORE you sit down to the computer. It all begins with your right-brain, your imagination and a quick sketch on paper.
  24. 24. @LizMyers @2ScoopsApp MyersDesign.com tools PS PNG AI BB10 ICONS Now let’s take a look at the tools and guides you can get to create icons like I am in Adobe Illustrator and Photoshop. I like these best, but you don’t have to use these if you have others. The techniques I’ll demonstrate here are applicable no matter what the tools.
  25. 25. https://creative.adobe.com/plans The pro tools are actually more affordable than ever: a subscription to the Creative Cloud where you have access to all the leading CS6 tools costs just 36 euros per month. that’s a pretty good deal considering the stand-alone prices of PS (524 euros) and Illustrator (449 euros) and of course you get access to further tools like Edge (animation) and Shadow plus lots more.
  26. 26. @LizMyers @2ScoopsApp MyersDesign.com https://developer.blackberry.com/design/bb10/ I also recommend you download the BB10 style guide (new today) - there’s a lot of good info in there that will help you make quality apps that are aligned with the BB10 style. Today, of course, I want to focus on just the icons.
  27. 27. @LizMyers @2ScoopsApp MyersDesign.com 57x57 81x81 43 x43 71x71 43 x43 61x61 Large Medium Small There are actually 3 icon sizes in BB10. Large is for action bar, tabs, and menus. Medium is for components, and the smallest size is used for status indicators - like in the splat marking new messages or updates, for example.
  28. 28. @LizMyers @2ScoopsApp MyersDesign.com 57x57 81x81 43 x43 71x71 43 x43 61x61 Large Medium Small Today we’re going to focus on just the large icons. And you don’t really need to worry about the dimensions here because they’re already built right into my illustrator templates.
  29. 29. @LizMyers @2ScoopsApp MyersDesign.com BB10 ICONS calls chat mail calls chat mail #4F4F4F to #363636 #E3E3E3 to #D1D1D1 treatment Treatment: the style guide recommends 2D or “flat design” with the light shining down at a 90 deg angle. (think angle of the sun at high noon). Regarding colour - there are two styles for Large icons - those that are meant for a dark theme and those that are meant for the light. Again, don’t worry about the hex values here they’re built into my templates and available in the style guide.
  30. 30. @LizMyers @2ScoopsApp MyersDesign.com BB10 ICONS colour only the smallest size status indicators have a colour system and the palette follows road signs: red is an alert, yellow is a warning, and green/blue - the cool colours are for information. Due to about 10-12% of the people being colour blind the basic icon is augmented with symbols and letters.
  31. 31. Text ustwo.co.uk/blog I’ve also found the Pixel Perfect Precision Handbook by UsTwo very helpful and I highly recommend you download it from their blog. You’ll want to read every word of this little guide - but here are two of the most important parts.
  32. 32. nice!naughty In order to get pixel perfect precision or sharp edges, you need to turn on a feature called “snap to pixel”
  33. 33. and this is found under the view menu in Photoshop (which you see here) as well as Illustrator (where it’s called snap to point). Additionally, the UsTwo guide tells you how to set up your grid. . .with a line every 10 pixels. I’m also using a Gridline every 81 pixels here to mark the outside border of the icons.
  34. 34. @LizMyers @2ScoopsApp MyersDesign.com http://imageoptim.com The other two big take-aways are the script plugins for PS which automate the process of exporting layers as PNG files - as well as this image optimisation tool. And we’ll see how those work during the demo. But we’re getting ahead of ourselves. Before we can export anything we need to draw it first.
  35. 35. @LizMyers @2ScoopsApp MyersDesign.com technique BB10 ICONS In honor of BB10 - I’ve put together my top ten tips for creating great vector icons.
  36. 36. @LizMyers @2ScoopsApp MyersDesign.com shapes BB10 ICONS 2 1 450 Counting down from #10 - Differ with style guide that says circle, square, rectangle?
  37. 37. @LizMyers @2ScoopsApp MyersDesign.com shapes BB10 ICONS You can make 80-85% of the icons you need from these basic shapes No 9: “Don’t hurt me please”. (Josh Clark - TapWorthy, round is finger-friendlier)
  38. 38. @LizMyers @2ScoopsApp MyersDesign.com Tip 8. Stick to Black and White - apply colour later. Icon design = logo design and if works in B/W - it will work just as well in colour
  39. 39. Tip 7. Less IS more - really! Just enough detail to recognise the shape. Notice here, the open box uses as much negative space as positive. this is interesting b/c the eye needs to fill in the missing bits - encourages user engagement
  40. 40. @LizMyers @2ScoopsApp MyersDesign.com Tip 6. Zoom in tight / focus the eye. Here’s i’m also “bleeding” the image off the edge - this creates dramatic interest and is also a good technique for App Icons.
  41. 41. @LizMyers @2ScoopsApp MyersDesign.com London-Titanium Paris-TitaniumAmsterdam-Titanium i BTW - this set make good app icons b/c they have a solid background shape which establishes the space on screen and protects against busy wallpapers on device. They also indicate the tap target for the user and provide contrast for the image overlay. BTW - more complex vectors like the London-Eye or Eiffel Tower can be found at istockphoto.com
  42. 42. ! altshift ALTSHIFT 45ᵒ 90ᵒ SHIFT + ALT Tip No. 5: SHIFT + ALT + DRAG are your friends. Pop quiz: Do you know what SHIFT + DRAG does?
  43. 43. ! altshift ALTSHIFT 45ᵒ 90ᵒ SHIFT + ALT How about ALT + DRAG? Draws or resizes out from the center.
  44. 44. ! altshift ALTSHIFT 45ᵒ 90ᵒ SHIFT + ALT What does SHIFT + ALT + DRAG do? Draws proportionately from the centre.
  45. 45. @LizMyers @2ScoopsApp MyersDesign.com Tip 4. Self-reflection is a beautiful thing. When using the pen tool and drawing free-form it can be difficult to achieve symmetry. So I try to focus on getting one half the image right and then reflect and join the shapes to get the look I want.
  46. 46. @LizMyers @2ScoopsApp MyersDesign.com 10 Tip 3. when in doubt - cut it out. This means two things: a) look at the power of negative space. In these examples, you can see how i’ve literally “cut the image out of a background shape and the negative space provides both striking contrast and visual interest. I’ve also left out all but the quintessential elements.
  47. 47. @LizMyers @2ScoopsApp MyersDesign.com ⌘ + D Tip 2. Let the computer do all the work
  48. 48. @LizMyers @2ScoopsApp MyersDesign.com Tip 1. Don’t forget your big purple crayon. Remember to sketch your ideas first on paper. This will allow your natural creativity to flow and your right brain to function properly. There’s something about hand-eye, pencil and paper that is simple, and clean and communicative in a way that the computer is not. So it’s really important you do this first, then sit down to the computer.
  49. 49. demo BB10 ICONS Now I’d like to show you these tips and techniques in action.
  50. 50. @LizMyers @2ScoopsApp MyersDesign.com 10. Use basic shapes 9. Keep them finger-friendly 8. Stick to black & white 7. Less IS more 6. Give me my space 5. SHIFT+ALT+Drag are your friends 4. Self-reflection is a beautiful thing 3. When in doubt, cut it out 2. Let the computer do the work 1. Remember purple crayon (first!) BB10 ICONS tips
  51. 51. questions BB10 ICONS
  52. 52. @LizMyers @2ScoopsApp MyersDesign.com thank you! JAM399 #bb10icons I hope you’ve enjoyed todays presentation and can see just how easy it is to create BB10 icons. If you need further assistance with any custom icons, please feel free to tweet your request to #bb10icons or get in touch via the contact form @ myersdesign.com. Thank you.