Liz Myers Shares Expert Techniques for Designing Mobile App Icons

@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
mobile graphics.

ﬂickr.com/photos/aboyandhisbike/
723376451/sizes/l/in/photostream/
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.

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)

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 ﬂexible at
all. (didn’t even have an alpha channel)

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.

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 ﬁrst I need to get
you in the right frame of mind.

101010
101010
101010
101010
101010
101010
As you know, we all work with both sides of our brain to varying degrees. . .

I think developing apps, writing code, analysing - these are left brain activities

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.

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?)

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)

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)

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 ]

... turns out the tree is an apple tree...

those apples will be tasty... so they need a dragon to protect them. . .

and the dragon scared Harold

. . . and this made his hand shake. . .

and shake. . .

until Harold is in over his head. But he holds onto the purple crayon

and begins to draw his way out of a JAM here [sic!]

and as you can see he has drawn a boat. . .

as a matter of fact - a sailboat.

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.

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.

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.

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.

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.

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.

BB10 ICONS
calls chat mail calls chat mail
#4F4F4F to #363636
#E3E3E3 to #D1D1D1
treatment
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.

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.

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.

nice!naughty
In order to get pixel perfect precision or sharp edges, you need to turn on a feature called
“snap to pixel”

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.

http://imageoptim.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.

technique
BB10 ICONS
In honor of BB10 - I’ve put together my top ten tips for creating great vector icons.

shapes
BB10 ICONS
2
1 450
Counting down from #10 - Differ with style guide that says circle, square, rectangle?

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 ﬁnger-friendlier)

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

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

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.

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

!
altshift
ALTSHIFT
45ᵒ
90ᵒ
SHIFT + ALT
Tip No. 5: SHIFT + ALT + DRAG are your friends. Pop quiz: Do you know what SHIFT + DRAG
does?

!
altshift
ALTSHIFT
45ᵒ
90ᵒ
SHIFT + ALT
How about ALT + DRAG? Draws or resizes out from the center.

!
altshift
ALTSHIFT
45ᵒ
90ᵒ
SHIFT + ALT
What does SHIFT + ALT + DRAG do? Draws proportionately from the centre.

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.

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.

⌘ + D
Tip 2. Let the computer do all the work

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.

demo
BB10 ICONS
Now I’d like to show you these tips and techniques in action.

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

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.

Liz Myers Shares Expert Techniques for Designing Mobile App Icons

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Liz Myers Shares Expert Techniques for Designing Mobile App Icons

Ähnlich wie Liz Myers Shares Expert Techniques for Designing Mobile App Icons (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Liz Myers Shares Expert Techniques for Designing Mobile App Icons