Creating Graphics For Mobile Devices

Creating Graphics For
Mobile Devices

SCREEN SIZE &
RESOLUTION
Facts
Each mobile device has a different size & resolution
The difference can be observed even between
different models from same manufacturer
(except iPhone)

SCREEN SIZE &
RESOLUTION
Small
Screen
Size
Large
Screen
Size

SCREEN SIZE &
RESOLUTION

SCREEN SIZE &
RESOLUTION
Tip
Create multiple graphics of different sizes and
resolutions for different devices

FLEXIBLE
DESIGN
Facts
Except for Blackberry most other smart phones have
G-sensor
G-sensor understands the orientation of the phone
and displays information accordingly – in landscape
or portrait - depending upon how the handset is held

FLEXIBLE
DESIGN
Horizontal or
Landscape
Orientation
Vertical or
Portrait
Orientation

FLEXIBLE
DESIGN
Tips
Apply the fundamentals of fluid layout
Use background images in application in tiled or
stretched mode
Design separate images for each model to
fit the screen (for Blackberry apps)

COLORS
Facts
Amongst the smart phones, HTC & Blackberry
support 65K colors
iPhone & Nokia support 16M colors

COLORS
65K color
Image
(16 bit)
16M color
Image
(24 bit)

COLORS
Tip
In Adobe Photoshop, correct colors by setting
‘Proof Setup’ under ‘View’ Menu to
‘Macintosh RBG’ on Windows PC while creating
graphics for iPhone

IMAGE
FORMATS
Facts
.gif format has either opaque or fully transparent
pixels
.pnghas up to 254 levels of partial transparent
pixels
.png allows you to take full advantage of alpha
transparency

IMAGE
FORMATS
.png
image
.gif
image

IMAGE
FORMATS
Tip
Make .png your preferred format (as against
.gif) as it has greater color depth and is fully
lossless with variable transparency

ANIMATIONS,
AUDIO & VIDEO
Facts
Most smart phones don’t support Flash (currently)

ANIMATIONS,
AUDIO & VIDEO

ANIMATIONS,
AUDIO & VIDEO
Tips
Call images in a sequence through programming
Create animations in Flash and convert that to
video formats that the smart phones support

Upside Learning Solutions Pvt. Ltd.
www.upsidelearning.com
E-mail: info@upsidelearning.com
Follow us on:

http://paper.li	208
https://learnzone.henleycol.ac.uk	17
http://www.slideshare.net	8
http://translate.googleusercontent.com	1
http://a0.twimg.com	1
http://192.168.1.24:82	1

Creating Graphics For Mobile Devices

by Upside Learning on Mar 31, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 236

Statistics

Creating Graphics For Mobile Devices — Presentation Transcript