ITP 140 Mobile App Technologies

Colors Images Icons

Look and Feel •  Establish a style •  Create or choose a color palette

–  Pick colors that complement each other –  Pick colors that are representative of your app –  These are the main colors for your app, not all of

the colors you can use in your app –  May pick colors that are different hues, but same

saturation and brightness

2

Color Palette for USC

3

Example Color Palette

4

Color Palette for PAM+ •  Incorporate St Jude Medical’s green color

and USC’s cardinal red

5

Color Wheel

6

Color Palette Resources •  ColorWheel -

http://design.geckotribe.com/colorwheel/ •  coolors - http://coolors.co •  COLOURlovers -

http://www.colourlovers.com •  ColorCombos - http://www.colorcombos.com/ •  Color Palette Generator (DeGraeve) -

http://www.degraeve.com/color-palette/ •  Color Palette Generator (Big Huge Labs) -

http://bighugelabs.com/colors.php

7

Images •  All digital images are rectangles! •  Each image has a width and height

8

Image Terminology •  Compression Methods

–  Make your image smaller for email, web, mobile, etc. –  Lossy

•  Requires data to be removed from the image to compress the file and make it smaller by trying to remove the least important data first

–  Lossless •  Opposite of lossy since no data is lost when the file is compressed

•  Resolution –  Standard for web/mobile graphics is 72 dots per inch (dpi) –  Photographs is usually 300 dpi

9

Image Terminology •  Transparency

–  Able to see through parts of an image

–  In Photoshop, you see a gray and white checkerboard

•  Interlacing –  A process where the graphic is displayed at

multiple levels of clarity, from blurry to clear –  Non-interlaced images must be fully loaded

before the browser displays them –  Interlaced graphics appear more quickly,

first fuzzy and ultimately clear

10

Bitmap Images •  The image file has to define the exact color of every

pixel in the image –  A pixel is generally thought of as the smallest single

component of a digital image –  The term "pixels" can be used in the abstract, or as a unit

of measure, in particular when using pixels as a measure of resolution •  400 pixels per inch, 640 pixels per line, or spaced 10 pixels apart

11

Vector •  Vector graphics is the use of geometrical

primitives –  Such as points, lines, curves,

and shapes or polygons •  Vector graphics are based on

vectors (also called paths), which lead through locations called control points or nodes

12

Image Formats •  GIF – Graphics Interchange Format

–  Web format for graphics and illustrations –  Bitmap image –  Has a limit of 256 distinct colors

•  Unique to each file –  Insufficient for color photographs –  Small files –  Transparency

13

Image Formats •  JPG – Joint Photographic Experts Group

–  Web format for images and photographs –  Compression method is usually lossy

compression, meaning that some visual quality is lost in the process

–  Bitmap image –  Small files –  No transparency

14

A photo of a flower compressed with successively more lossy compression ratios from left to right.

Image Formats •  PNG – Portable Network Graphics

–  Open, extensible image format with lossless compression –  Provides a patent-free replacement for GIF and can also

replace many common uses of TIFF –  Indexed-color, grayscale, and

truecolor images are supported –  Transparency

–  http://www.libpng.org/

15

Image Formats for Web & Mobile •  GIF

–  Good for sharp lines and solid colors –  Transparent background

•  JPG –  Save photographs –  No transparent backgrounds –  Not good at preserving exact colors

•  PNG –  Images with blended, transparent backgrounds –  Mobile operating systems will optimize PNG

16

Mobile •  For mobile, use PNG as much as possible

–  Avoid using interlaced PNGs •  Can still use JPG for photographs

17

Colors in Photoshop

•  RGB Mode •  CMYK Mode •  L*a*b Mode •  HSB Color

Model

18

RGB Mode •  Based on the RGB color model •  Called an additive color model

because adding all the colors together produces white which reflects all light back to the eye

•  RGB colors are created by setting red, green and blue to values between 0-255 –  When all three values are 0, black is produced. –  When all three values are 255, is

produced.

19

Color •  RGB Color Model – Red Green Blue

–  (0, 0, 0) is black –  (255, 255, 255) is –  (255, 0, 0) is red –  (0, 255, 0) is green –  (0, 0, 255) is blue –  (255, 255, 0) is yellow –  (0, 255, 255) is cyan –  (255, 0, 255) is magenta

20

CMYK Mode •  Base colors are (C), (M),

(Y) and black (K is used to distinguish it from B for blue)

•  Theoretically, C, M, and Y combined should produce pure black

•  Called a subtractive color model •  In reality, pure black is not produced

with this combination of inks so black is included •  White is produced when all values are set to 0% •  Used in images that will be output to a print

medium using ink

21

•  Based on the human perception of color •  Designed to be device-independent

–  Consistent color viewed on a monitor screen or printed

•  3 color components –  L (lightness component) is the brightness value and

ranges from 0 to 100 –  a component (green-red axis) ranges from +127 to -128 –  b component (blue-yellow axis) and ranges from +127 to

-128 •  Used internally by Photoshop in converting from one

color mode to another

L*a*b Mode

22

HSB Color Model •  A color model, not a color mode

–  Provides an intuitive way to mix and adjust colors •  HSB stands for Hue, Saturation, and Brightness •  A hue is a shade of color such as orange, blue,

purple •  Saturation determines the strength of the hue •  Brightness is the lightness/darkness of a color

23

What's the #?

•  The value after the # is a hexadecimal number

24

Decimal •  Our numbering system is decimal •  Dec means 10

–  Example – a decathlon has 10 events •  The unique 10 digits that make up the

decimal numbering system are: –  0, 1, 2, 3, 4, 5, 6, 7, 8, 9

•  We say that decimal is base 10

25

Example of Decimal

26

1 * 1

231

3 * 10 2 * 100

2 * 102 3 * 101 1 * 100

=

=

1 30 200 =

Binary •  Computers use magnetic memory (or

transistors) for storing information –  Smallest capacity for storage is a single magnetic

charge, either positive or negative –  Positive charge means a 1 –  Negative charge means a 0

•  The 2 digits that we use for binary are 0s & 1s •  The digits in a binary number are called bits

(short for binary digit) •  Binary is base 2

27

Binary 1000 0100 0010 0001

Exponent 23 22 21 20

Decimal 8 4 2 1

Example of Binary

1 * 2

1010

0 * 4 1 * 8

8 0 2

=

=

1 * 21 0 * 22 1 * 23 =

0 * 1

0

0 * 20

=

10 28

Binary (4 bit) to Decimal

•  With 4 bits, we get the values of 0 – 15 •  If the binary number ends with a 1, it is odd

29

Binary à Decimal

0000! 0+0+0+0! 0!

0001! 0+0+0+1! 1!

0010! 0+0+2+0! 2!

0011! 0+0+2+1! 3!

0100! 0+4+0+0! 4!

0101! 0+4+0+1! 5!

0110! 0+4+2+0! 6!

0111! 0+4+2+1! 7!

Binary à Decimal

1000! 8+0+0+0! 8!

1001! 8+0+0+1! 9!

1010! 8+0+2+0! 10!

1011! 8+0+2+1! 11!

1100! 8+4+0+0! 12!

1101! 8+4+0+1! 13!

1110! 8+4+2+1! 14!

1111! 8+4+2+0! 15!

Binary (8 bit) to Decimal

30

Binary à Decimal 00000000! 0 + 0 + 0 + 0 + 0 + 0 + 0 + 0! 0!

00001111! 0 + 0 + 0 + 0 + 8 + 4 + 2 + 1! 15!

00010000! 0 + 0 + 0 + 16 + 0 + 0 + 0 + 0! 16!

00011111! 0 + 0 + 0 + 16 + 8 + 4 + 2 + 1! 31!

00100000! 0 + 0 + 32 + 0 + 0 + 0 + 0 + 0! 32!

00111111! 0 + 0 + 32 + 16 + 8 + 4 + 2 + 1! 63!

01000000! 0 + 64 + 0 + 0 + 0 + 0 + 0 + 0! 64!

01111111! 0 + 64 + 32 + 16 + 8 + 4 + 2 + 1! 127!

10000000! 128 + 0 + 0 + 0 + 0 + 0 + 0 + 0! 128!

11111111! 128 + 64 + 32 + 16 + 8 + 4 + 2 + 1! 255!

Bits & Bytes •  With 8 bits (binary digits), we get the decimal

values of 0 – 255 •  8 bits = 1 byte •  Remember the RGB color mode

–  Each color has a value from 0 to 255 –  We use 8 bits (or 1 byte) for each color –  8 x 3 (3 colors) = 24 bits to store color

31

Decimal to Binary •  Reverse of Binary to Digital

32

2510 = 16 + 8 + 0 + 0 + 1 = 24 + 23 + 0 + 0 + 20

= 1 1 0 0 12

Decimal to Binary •  Repeat Division

33

Algorithm of Repeat Division

25 / 2 = 12 + remainder of 1 (LSB) 12 / 2 = 6 + remainder of 0 6 / 2 = 3 + remainder of 0 3 / 2 = 1 + remainder of 1 1 / 2 = 0 + remainder of 1 (MSB) 2510 = 1 1 0 0 12

LSB = Least Significant Bit MSB = Most Significant Bit

Geek Joke

34

Hexadecimal •  We often represent computer data in

hexadecimal •  hex = 6 and dec = 10 •  hexadecimal = 6 + 10 = 16 •  It is base 16 •  The unique 16 digits are:

–  0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f –  0 – 9 and a – f (or A – F)

•  Every 4 bits is a single hex digit –  Since 4 bits can represent numbers from 0 to 15

35

Bin (4 bit) à Dec & Hex

36

Binary B à D Decimal Hex 0000 0+0+0+0 0 0 1010 8+0+2+0 10 A 1011 8+0+2+1 11 B 1100 8+4+0+0 12 C 1101 8+4+0+1 13 D 1110 8+4+2+0 14 E 1111 8+4+2+1 15 F

Bin (8 bit) à Hex & Dec

37

Binary B à H Hex B à D Dec 0001 0000! 0+0+0+1 0+0+0+0! 10! 0+ 0+ 0+16+0+0+0+0! 16!

0001 1111! 0+0+0+1 8+4+2+1! 1F! 0+ 0+ 0+16+8+4+2+1! 31!

0010 0000! 0+0+2+0 0+0+0+0! 20! 0+ 0+32+ 0+0+0+0+0! 32!

0011 1111! 0+0+2+1 8+4+2+1! 3F! 0+ 0+32+16+8+4+2+1! 63!

0100 0000! 0+4+0+0 0+0+0+0! 40! 0+64+ 0+ 0+0+0+0+0! 64!

0101 1010! 0+4+0+1 8+0+2+0! 5A! 0+64+ 0+16+8+0+2+0! 90!

0111 1111! 0+4+2+1 8+8+2+1! 7F! 0+64+32+16+8+4+2+1! 127!

1000 0000! 8+0+0+0 0+0+0+0! 80! 128+ 0+ 0+ 0+0+0+0+0! 128!

1100 0010! 8+4+0+0 0+0+2+0! C2! 128+64+ 0+ 0+0+0+2+0! 194!

1111 1111! 8+4+2+1 8+4+2+1! FF! 128+64+32+16+8+4+2+1! 255!

Bits, Bytes & Hex •  Combine 8 bits, and we have a byte

–  4 bits is a single hex digit •  Examples: 0000 binary = 0 hex, 1111 binary = F hex

–  8 bits = 2 hex digits

–  Easy to represent a byte in hexadecimal •  Examples:

–  5610 = 001110002 = 3816

–  25510 = 111111112 = FF16

38

Computer Graphics •  Traditionally, computers use a combination of 3 colors (red,

green, blue) to represent the color of every pixel on the screen –  Every pixel has an intensity equal to one byte for every color

•  called the RGB color

–  Pixel = smallest unit for representing an image on a computer •  “dots on the screen”

–  Smallest intensity for a color in a pixel is 0000 0000 (8 bits) –  Largest intensity for a color in a pixel is 1111 1111 (8 bits)

•  Black = #000000 #FFFFFF

•  Everything with colors on a computer can be done with math! –  To “lighten” a color, simply add to the intensity, to “darken” simply

decrease the intensity

39

Tips for Icons and Images •  For the best results, enlist the help of a professional graphic

designer •  Use universal imagery that people will easily recognize •  Embrace simplicity •  Use color and shadow judiciously to help the icon tell its story •  In general, avoid using “greek” text or wavy lines to suggest text •  In general, create an idealized version of the subject rather than

using a photo •  iOS

–  Avoid using iOS interface elements in your artwork –  Don’t use replicas of Apple hardware products in your artwork –  Don’t reuse iOS app icons in your interface

•  Use transparency only when it makes sense

40

App Icon Examples

41

Screen Shots

42

App Icon •  No text •  No app name •  No extra symbols •  No drop shadow •  No shine or gloss •  Contrasting background •  Fill the entire area •  Main character head close-up

43

iOS App Icon •  Square images (900 corners) •  Do not round the edges •  No transparency

44

Example •  A 120 x 120 pixel icon before the mask is

applied

•  A 120 x 120 pixel icon after the mask is applied

45

iOS 6

46

iOS 7

47

iOS 7

48

iOS 6 vs iOS 7

49

iOS 7 vs iOS 6

50

Design – iOS 7 •  The world is flat •  Previous iOS versions gave importance to

visual skeuomorphism •  Skeuomorphism refers to a design principle

in which design cues are taken from the physical world

•  The emphasis for iOS 7 is placed on physical skeuomorphism for animations

iOS 8

52

iOS App Icon

53

Device Image Size (px) Resolution

iPhone 6 Plus 180 x 180 @3x

iPhone 6 and iPhone 5 120 x 120 @2x

iPhone 4s 120 x 120 @2x

iPad and iPad mini 152 x 152 @2x

iPad 2 and iPad mini 76 x 76 @1x

•  Required for all apps

App Icon for the App Store

54

Device Image Size (px)

iPhone 6 Plus 1024 x 1024

iPhone 6 and iPhone 5 1024 x 1024

iPhone 4s 1024 x 1024

iPad and iPad mini 1024 x 1024

iPad 2 and iPad mini 1024 x 1024

•  Required for all apps

iOS Resources •  http://www.apple.com/ios/design/ •  https://developer.apple.com/library/mac/

documentation/userexperience/conceptual/applehiguidelines/IconsImages/IconsImages.html

•  http://www.engadget.com/2013/09/18/ios7-app-update-roundup/

55

iOS Resources •  Apple’s Image Creation Guidelines

–  https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html

•  App Icons on iPad and iPhone –  https://developer.apple.com/library/ios/qa/qa1686/

_index.html •  Custom Icon and Image Creation Guidelines

–  https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html

56

Android App Icons

•  Can use transparency

•  No inner transparency

57

Android Icons Screen Density Image Size (px)

ldpi (120 dpi) Low density screen 36 x 36

mdpi (160 dpi) Medium density screen 48 x 48

hdpi (240 dpi) High density screen 72 x 72

xhdpi (320 dpi) Extra-high density screen 96 x 96

xxhdpi (480 dpi) Extra-extra-high density screen

144 x 144

Google Play 512 x 512

58

Android Screen Sizes

59

Low density

(120)

Medium density

(160)

High density

(240)

Extra high density (320)

Small screen 240 x 320 480 x 640

Normal screen 240 x 400;

240 x 432 320 x 480 480 x 800; 480 x 854; 600 x 1024

640 x 960

Large screen 480 x 800;

480 x 854

480 x 800; 480 x 854; 600 x 1024

Extra Large screen

1024 x 600 1280 x 800; 1024 x 768; 1280 x 768

1536 x 1152; 1920 x 1152; 1920 x 1200

2048 x 1536; 2560 x 1536; 2560 x 1600

Android Resources •  Iconography

–  http://developer.android.com/design/style/iconography.html

•  Android – Supporting Multiple Screens –  http://developer.android.com/guide/practices/

screens_support.html

60

Interface Icons •  Other icons/images

–  Pixeden – http://www.pixeden.com –  Glyphish – http://glyphish.com –  Helveticons – http://helveticons.ch –  Pictos – http://pictos.cc –  Android –

http://android.appstorm.net/roundups/design/gorgeous-icon-sets-for-android/

61

Create Images •  Use an image tool such as Adobe Illustrator

or Photoshop •  Largest size you need is 1024 x 1024 •  For resolution, enter 72 ppi •  Save as PNG, non-interlaced •  Save different versions for the different sizes

62

Photoshop •  Photoshop creates a psd file •  You cannot display a psd file on a mobile

device •  Have to save as an image format

–  Preferably png –  Use the File à Save for Web… option –  In the Save for Web window, select the PNG-24

option for the Preset (top of the window)

63

Brands •  Famous brands and their color palettes

–  http://brandcolors.net •  Twitter: #55acee •  Facebook: #3b5998 •  Android: #a4c639 •  Google: #4285f4, #db4437, #f4b400,

#0f9d58, #e7e6dd

64

Example of Icon & Colors

65

Buzz

66

WhetherWear

67

Packed

68

App Icons

Feed Me

69

Safety

Color Palette

70