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 ﬁrst 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
My graphic design career began in Seattle WA about 20 years ago and one of my ﬁrst
contracts was making icons at Microsoft for Windows 3.1 applications.
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. title bar/buttons
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 ﬂexible at
all. (didn’t even have an alpha channel)
5. @LizMyers @2ScoopsApp MyersDesign.com
Fast forward to today and things have improved dramatically. By using vector graphics we’ve
got a lot more ﬂexibility 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 ﬁt with
all the different operating sysems: BB10, iOS, and Android.
6. @LizMyers @2ScoopsApp 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 ﬁrst I need to get
you in the right frame of mind.
@LizMyers @2ScoopsApp MyersDesign.com
As you know, we all work with both sides of our brain to varying degrees. . .
8. @LizMyers @2ScoopsApp MyersDesign.com
I think developing apps, writing code, analysing - these are left brain activities
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
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. @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. @LizMyers @2ScoopsApp MyersDesign.com
He also need a path to walk - so he drew one of those . . . [and now that line is deﬁned as a
path -we’re getting drawn into the story)
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. @LizMyers @2ScoopsApp MyersDesign.com
... turns out the tree is an apple tree...
15. @LizMyers @2ScoopsApp MyersDesign.com
those apples will be tasty... so they need a dragon to protect them. . .
16. @LizMyers @2ScoopsApp MyersDesign.com
and the dragon scared Harold
17. @LizMyers @2ScoopsApp MyersDesign.com
. . . and this made his hand shake. . .
18. @LizMyers @2ScoopsApp MyersDesign.com
and shake. . .
19. @LizMyers @2ScoopsApp MyersDesign.com
until Harold is in over his head. But he holds onto the purple crayon
20. @LizMyers @2ScoopsApp MyersDesign.com
and begins to draw his way out of a JAM here [sic!]
21. @LizMyers @2ScoopsApp MyersDesign.com
and as you can see he has drawn a boat. . .
22. @LizMyers @2ScoopsApp MyersDesign.com
as a matter of fact - a sailboat.
23. @LizMyers @2ScoopsApp MyersDesign.com
Harold sails off to the next app-venture. He’s got all the attributes of a terriﬁc BlackBerry
Developer. His sketches ﬂow 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. @LizMyers @2ScoopsApp MyersDesign.com
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.
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
26. @LizMyers @2ScoopsApp MyersDesign.com
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. @LizMyers @2ScoopsApp MyersDesign.com
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. @LizMyers @2ScoopsApp MyersDesign.com
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. @LizMyers @2ScoopsApp MyersDesign.com
calls chat mail calls chat mail
#4F4F4F to #363636
#E3E3E3 to #D1D1D1
Treatment: the style guide recommends 2D or “ﬂat 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. @LizMyers @2ScoopsApp MyersDesign.com
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.
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.
In order to get pixel perfect precision or sharp edges, you need to turn on a feature called
“snap to pixel”
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. @LizMyers @2ScoopsApp MyersDesign.com
The other two big take-aways are the script plugins for PS which automate the process of
exporting layers as PNG ﬁles - 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 ﬁrst.
35. @LizMyers @2ScoopsApp MyersDesign.com
In honor of BB10 - I’ve put together my top ten tips for creating great vector icons.
36. @LizMyers @2ScoopsApp MyersDesign.com
Counting down from #10 - Differ with style guide that says circle, square, rectangle?
37. @LizMyers @2ScoopsApp MyersDesign.com
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 ﬁnger-friendlier)
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. 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 ﬁll in
the missing bits - encourages user engagement
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. @LizMyers @2ScoopsApp MyersDesign.com
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
SHIFT + ALT
Tip No. 5: SHIFT + ALT + DRAG are your friends. Pop quiz: Do you know what SHIFT + DRAG
SHIFT + ALT
How about ALT + DRAG? Draws or resizes out from the center.
SHIFT + ALT
What does SHIFT + ALT + DRAG do? Draws proportionately from the centre.
45. @LizMyers @2ScoopsApp MyersDesign.com
Tip 4. Self-reﬂection 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 reﬂect and join the shapes to get the look I want.
46. @LizMyers @2ScoopsApp MyersDesign.com
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. @LizMyers @2ScoopsApp MyersDesign.com
⌘ + D
Tip 2. Let the computer do all the work
48. @LizMyers @2ScoopsApp MyersDesign.com
Tip 1. Don’t forget your big purple crayon. Remember to sketch your ideas ﬁrst on paper.
This will allow your natural creativity to ﬂow 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 ﬁrst,
then sit down to the computer.
Now I’d like to show you these tips and techniques in action.
50. @LizMyers @2ScoopsApp MyersDesign.com
10. Use basic shapes
9. Keep them ﬁnger-friendly
8. Stick to black & white
7. Less IS more
6. Give me my space
5. SHIFT+ALT+Drag are your friends
4. Self-reﬂection is a beautiful thing
3. When in doubt, cut it out
2. Let the computer do the work
1. Remember purple crayon (ﬁrst!)
52. @LizMyers @2ScoopsApp MyersDesign.com
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.