Upload
lybao
View
214
Download
0
Embed Size (px)
Citation preview
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 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
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
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
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
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
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
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 • 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
Example • A 120 x 120 pixel icon before the mask is
applied
• A 120 x 120 pixel icon after the mask is applied
45
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 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 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