Download - Le graphisme

Transcript
Page 1: Le graphisme

GRAPHISME

eric.lemerdy

Page 2: Le graphisme

utiliser

images

debelles

aide à fairepasserle message

Page 3: Le graphisme

et comment faire

quand on a ni le temps

en la matière

ni forcément le talent

?

Page 4: Le graphisme

1inspiration

Page 5: Le graphisme

parce que nousne sommes graphistes...pas

Page 6: Le graphisme

openclipart.orgsite communautaire de dessins svg

PD (public domain)

taxonomieà composer à l'infini

qualité (très) inégale

Page 7: Le graphisme
Page 8: Le graphisme

dafont.comhébergement de polices de caractère

parfois, une police adaptéesuffit à faire un beau design

Page 9: Le graphisme
Page 10: Le graphisme

colourlovers.comcouleurs harmonieuses, patterns

parce que le goût,ça ne s'invente pas

Page 11: Le graphisme
Page 12: Le graphisme

tutoriaux video inkscape

screencasters.heathenx.org

très didactique

format vidéo

Page 13: Le graphisme
Page 14: Le graphisme

stock.xchng

requiert uneinscription

banque de photos

bonne qualité

Page 15: Le graphisme
Page 16: Le graphisme

flickr.compartage de photos

résolution haute

/creativecommons

quantité

Page 17: Le graphisme
Page 18: Le graphisme

attention,des banalités sur le graphisme arrivent...

Page 19: Le graphisme

matriciel

vectoriel

Page 20: Le graphisme

matriciel

vectoriel

Page 21: Le graphisme

matriciel

vectoriel

Page 22: Le graphisme

matriciel

vectoriel

bmppng

gifjpg

swfsvg

Page 23: Le graphisme

vectoriel,

ma préférencepersonnelleest pour le

Page 24: Le graphisme

vectoriel,

Page 25: Le graphisme

vectoriel !

Page 26: Le graphisme

SVG

un standard ouvert

calarector

raphics

du W3C

1999,

un peu d'histoire...

XML,

Page 27: Le graphisme

une carrière sur mobile(Motorolla, Ericson)

un format du webencore peu supporté

par les navigateurs...

natif pour certains

par plugin sinon

Page 28: Le graphisme

démarrons Inkscape !

Page 29: Le graphisme

2vectorisation

Page 30: Le graphisme

essai avec

le badge CITCON

Page 31: Le graphisme

demo...

Page 32: Le graphisme

la vectorisationfonctionne commebase de travailà retoucher

la vectorisation manuelleest toujours possible

Page 33: Le graphisme

avec une photo,on peut obtenir

une décompositiondes couleurs

l'effet Marilyn

Page 34: Le graphisme

3manipulationde formes

Page 35: Le graphisme

proportionsrotations

combinaisons

chemins

Page 36: Le graphisme

demo...

Page 37: Le graphisme

4coloriage

Page 38: Le graphisme

dégradésstyle web 2.0

glossy

Page 39: Le graphisme

demo...

Page 40: Le graphisme

5à vous !

Page 41: Le graphisme

badgeCITCON

re-design du ...

Page 42: Le graphisme

http://openclipart.org/media/files/jturner/9502

http://openclipart.org/media/files/AJ/10637 http://www.sxc.hu/photo/462883

http://openclipart.org/media/people/nicubunu/banana

http://www.flickr.com/photos/kunel/2478762780/

http://www.root2art.co.uk/svg_logo/index.html

http://en.wikipedia.org/wiki/File:Firefox-logo.svg

http://my.opera.com/melnichuck/blog/2007/08/29/opera-vector-logo-eps

http://www.apple.com/support/safari/

Page 43: Le graphisme

http://openclipart.org/media/people/nicubunu/banana

http://www.sxc.hu/photo/478188http://blogs.msdn.com/ie/archive/2005/08/12/451099.aspx

http://citconf.com/badges/http://www.flickr.com/photos/chelmsfordpubliclibrary/2210233

http://fr.wikipedia.org/wiki/Fichier:Monroe.svg

Page 44: Le graphisme

back-up

Page 45: Le graphisme

animation SVGavec ecmascript

pas de toolkit génériquepas d'atelier pour animer

il y a le potentiel"flash killer"

Page 46: Le graphisme

Gimp

les layers...

capture d'écran

transparence

utiliser le bon format