art asset for iphone & ipad development. art asset for iphone & ipad development -...

25
Art Asset For iPhone & iPad development

Upload: jessica-adkins

Post on 26-Mar-2015

214 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

Art AssetFor iPhone & iPad development

Page 2: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

Art AssetFor iPhone & iPad development

- Requirement -

- Design -

- Color Theory -

- Sprite sheet -

- Icon -

Workshop : sprite sheet makingUsing Photoshop Illustrator 3dsMax

Page 3: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

~ Art Asset for iphone development ~

Art Asset - requirement

Screen Resolution

• iPhone & iPodTouch

• iPhone 4 & iPod Touch 4th

• iPad

______________________________________________________________________________________________

320x480 px

640x960 px

768x1024 px

Page 4: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

~ Art Asset for iphone development ~

Art Asset - requirement

File name

• iPhone & iPodTouch Imagename~iphone.png

• iPhone 4 & iPod Touch 4th

Imagename@2x~iphone.png• iPad

Imagename~ipad.png

______________________________________________________________________________________________

Page 5: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

~ Art Asset for iphone development ~

Art Asset - requirement

File name

The file name’s expression can not be the capital letter.

Imagename~iphone.png < RIGHT

Imagename~iphone.PNG < WRONG

______________________________________________________________________________________________

Page 6: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

~ Art Asset for iphone development ~

Art Asset - requirement

Image sizeIndividual image & Sprite sheet image

should be in the size of

512 px size limit for iPhone & iPod Touch

1024 px size limit for iPhone 4 & iPod Touch 4

1024 px size limit for iPad

______________________________________________________________________________________________

8 16 32 64 128 256 512 1024 px

Page 7: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

~ Art Asset for iphone development ~

Art Asset - requirement

File sizeNo limit for file size.

The more file size The more to download for customer.

For the same image size with different file size,

take no different in performance.

Smaller file size such as low quality JPEG is not a good idea.

24bit PNG is the best solution.

______________________________________________________________________________________________

Page 8: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

~ Art Asset for iphone development ~

DESIGNEssential Factors

______________________________________________________________________________________________

There are no controlleror joy stick. The player have to usetheir finger to touch drag and tab in order to play the game.

Page 9: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

~ Art Asset for iphone development ~

DESIGN- Layout Composition > user friendly > easy to touch

( not too complex )

The objects in the game shouldn’t be too small,

otherwise the player will not be able to touch, drag or tab it.

______________________________________________________________________________________________

Page 10: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

~ Art Asset for iphone development ~

DESIGN______________________________________________________________________________________________

Page 11: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

~ Art Asset for iphone development ~

DESIGN______________________________________________________________________________________________

Page 12: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

~ Art Asset for iphone development ~

DESIGNColor Theory

______________________________________________________________________________________________

• Monochromatic

• Warm & Cool

• Complementary

• Harmonious

• Triadic

Page 13: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

CO

LO

R P

SY

CH

OL

OG

Y

Page 14: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -
Page 15: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -
Page 16: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -
Page 17: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -
Page 18: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

~ Art Asset for iphone development ~

SPRITE SHEETWhat Why.. sprite sheet

______________________________________________________________________________________________

A pair of object image in game,that share the same size drawnneatly In one image file.

The more number of image file,more time to load the game.

Using sprite sheet reduce amount of image file, also reduce loading time.

Page 19: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

~ Art Asset for iphone development ~

SPRITE SHEET______________________________________________________________________________________________

Image in sprite sheet can be animation frame or individualstatic object.

Page 20: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

~ Art Asset for iphone development ~

SPRITE SHEETsprite sheet Formation

______________________________________________________________________________________________

Sprite sheet formation is variable,depend on image’s size and number.

Just find the best solution.

Make sure you don’t waste the space.

Page 21: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

~ Art Asset for iphone development ~

ICONIcon requirement

______________________________________________________________________________________________

There are several sizeof the icon required,which the biggest size is :

512 x 512 px

Make the one of this sizeAnd there won’t be a problemWith the smaller one.

Page 22: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

~ Art Asset for iphone development ~

ICON______________________________________________________________________________________________

No need to put the highlighton to your icon.

No need to round trim the corners.

And do not shadow the icon.

The application will place itAutomatically.

Page 23: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

ICON

<<<X

<<<

X

Page 24: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

~ Art Asset for iphone development ~

Other requirement

Marketing image

______________________________________________________________________________________________

The image size requestedto do advertising is :

300 x 250 px

Page 25: Art Asset For iPhone & iPad development. Art Asset For iPhone & iPad development - Requirement - - Design - - Color Theory - - Sprite sheet - - Icon -

THANKSPhiphat Limratanadumrong

( Nhum ) [email protected]