Le graphisme

46
G R A P H I S M E eric.lemerdy

description

Slides du cours du soir sur le graphisme donné en mars 2009 chez Valtech. Cette présentation présente la démarche que j'adopte et les outils que j'utilise pour réaliser des illustrations depuis quelques années.

Transcript of Le graphisme

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