ITP 140 Mobile App Technologies Colors Images Icons
Establish a style Look and Feel 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 A photo of a flower compressed with successively more lossy compression ratios from left to right. 14
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
L*a*b Mode 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 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 231 = 200 30 1 = 2 * 100 3 * 10 1 * 1 = 2 * 10 2 3 * 10 1 1 * 10 0 26
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 Binary 1000 0100 0010 0001 Exponent 2 3 2 2 2 1 2 0 Decimal 8 4 2 1 27
Example of Binary 1010 = 1 * 2 3 = 0 * 2 2 1 * 2 1 0 * 2 0 1 * 8 0 * 4 1 * 2 0 * 1 = 8 0 2 0 = 10 28
Binary (4 bit) to Decimal 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! With 4 bits, we get the values of 0 15 If the binary number ends with a 1, it is odd 29
Binary (8 bit) to Decimal 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! 30
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
Reverse of Binary to Digital Decimal to Binary 25 10 = 16 + 8 + 0 + 0 + 1 = 2 4 + 2 3 + 0 + 0 + 2 0 = 1 1 0 0 1 2 32
Repeat Division Decimal to Binary 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) 25 10 = 1 1 0 0 1 2 LSB = Least Significant Bit MSB = Most Significant Bit Algorithm of Repeat Division 33
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 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 36
Bin (8 bit) à Hex & Dec 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! 37
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: 56 10 = 00111000 2 = 38 16 255 10 = 11111111 2 = FF 16 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 (90 0 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
The world is flat Design ios 7 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 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 53
App Icon for the App Store 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 54
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 ldpi (120 dpi) Low density screen mdpi (160 dpi) Medium density screen hdpi (240 dpi) High density screen xhdpi (320 dpi) Extra-high density screen xxhdpi (480 dpi) Extra-extra-high density screen Image Size (px) 36 x 36 48 x 48 72 x 72 96 x 96 144 x 144 Google Play 512 x 512 58
Android Screen Sizes Small screen Low density (120) Medium density (160) High density (240) 240 x 320 480 x 640 Extra high density (320) 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 59
Iconography Android Resources http://developer.android.com/design/style/ iconography.html Android Supporting Multiple Screens http://developer.android.com/guide/practices/ screens_support.html 60
Other icons/images Interface Icons 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 Safety 69
Color Palette 70