Quality on Tap

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

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.

http://www.flickr.com/photos/aboyandhisbike/723376451/sizes/l/in/photostream/





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 flexible 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 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.

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.

https://developer.blackberry.com/design/bb10/


101010101010101010101010101010101010


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 defined 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 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.




tools

PSPNG

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.





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

LargeMedium

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

LargeMedium

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 “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.




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 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.






techniqueBB10 ICONS

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




shapesBB10 ICONS

2

1450

Counting down from #10 - Differ with style guide that says circle, square, rectangle?




shapesBB10 ICONS

You can make 80-85% of the icons you need from these basic shapesNo 9: “Don’t hurt me please”. (Josh Clark - TapWorthy, round is finger-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 fill 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-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.




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.



demoBB10 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



questionsBB10 ICONS


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.



Technology

Quality on Tap