Le graphisme

Graphisme

MEDIA QUIERY ET RWD 01 / / / MEDIA QUIERY ET RWD 02

Dessin, peinture et autres traces de la main (et de l’esprit)

Tout d’abord il s’agit d’image crée par la main de l’homme qui observe son environnement projette ses pensées et ses émotions.

Les manifestations les plus anciennes des créations de l’homme sont le dessin, le modelage, la musique.

Conservation de la mémoire par des traces : peinture rupestre, sculptures modelées en terre, en os.

Ecriture (cuneiforme) -3300 Bassin méditérrannéen, Sumériens, Babylone (pour comptabiliser le bétail, la marchandise)
Dans la Mésopotamie antique, les premiers signes d’écriture apparaissent pour répondre à des besoins pratiques : comptabiliser des têtes de bétail ou des sacs de grains.
Le plus ancien témoignage d’écriture connu date de 3 300 avant notre ère. Ce sont des tablettes sumériennes en écriture pictographique.

Hiéroglyphes (représentation par des objets, animaux, divinités…)

Naissance de la peinture Moyen age (rapport à la religion, au pouvoir dirigeant)

Renaissance (sublimation de la technique, le peintre s’efface laisse place au message divin)

Dessin, peinture, tableau, fresque, gravure, tracé, écriture, emprunte, enluminure, illustration.

Qu’est-ce que le graphisme

Définition du mot « graphisme » graphisme n.m. Caractère particulier d’une écriture individuelle ; manière d’écrire propre à quelqu’un impliquant sa sensibilité, personnalité.

Les termes graphistes, designer, graph, logos etc sont d’origine ressente, peut être nés avec la fabrication et la multiplication industrielle de l’image.
Imprimerie, affiches, monnaies, billets, livres illustrés, gravures, sérigraphie, lithographie etc… fin du 19è siècle.

Imprimerie sur tissus vers le XIè siécle en Chine c’est la Xylographie
Imprimerie et mécanisation naissance de la typographie Gutenberg 1440 (le caractère typographique en plomb ou antimoine ?)
Premier livre Français 1470 presses de la Sorbonne « Recueil des histoires de Troyes », de Raoul Le Fèvre.

Nous sommes entourés aujourd’hui d’images, de signes, d’indications visuelles de toutes sortes.
Pub, signalétique, logos, pictos, design vêtements, architecture, véhicules, ciméma, télé, objets, le graphisme est partout tous les jours.

Partout où il y a message visuel, il y a graphisme.

Le créatif

Étant entendu que le graphisme n’est ni du coloriage, ni de l’habillage, l’idée, la mise en avant du concept est le principe et le moteur d’un vrai travail graphique, et donnera tout son sens au choix visuel.

Il s’agit d’une personne qui développe et entretien une sensibilité créative.
Qui est en connexion avec ses émotions et qui traduit sa sensibilité avec des outils divers « écriture, musique, langage du corps, dessin »
Il propose une image, une musique, un objet qui provoquent du plaisir, de l’envie, de l’information, de l’émotion.

Le graphiste

Le graphiste traduit des sensations, des émotions, des concepts, des arguments, des demandes en utilisant les outils qui lui sont nécessaires à la création d’images composées.
Photos, formes, couleurs, écritures, rythme afin de traduire un message.
Le graphiste n’est pas obligatoirement un dessinateur.
Il possède le sens de l’harmonie, des couleurs, de la mise en page, des typographies.

L’illustrateur

Il dessine et n’est pas forcément graphiste.
Son rôle n’est pas de faire du coloriage ou de l’illustration redondante.
Il doit apporter une ouverture, un concept, une poétique sur le texte illustré.

Rôle et position du graphiste

Le métier de graphiste freelance ou en entreprise.
C’est un travail d’écoute et d’adaptation aux contraintes, le graphiste ne doit pas s’imposer sur le message à transmettre, il doit répondre à un objectif précis : prendre un message et le transmettre, c’est la communication.

Brief = client et sa demande

Le Zoning

Le conceptboard

Ecoute = les recommandations, l’objectif communiquer sur un produit, un service, un événement.

Contraintes = Le temps / budjet, charte graphique (logo, couleur, typographie, image ou paysage du produit, du service, de l’événement)

Position = au sein d’une entreprise ou d’un client il est positionné ainsi :

Client / budjet / charte DA (pub média, pub print, produit, service événement)

Commercial / Chef de projet / Consultant / Directeur Artistique

Graphiste / Studio production

Développeurs / intégrateurs

Dead line

Le sentiment esthétique

Il ne s’explique que de manière individuelle, rapport émotion / culture. Question de plaisir.
Pourquoi est ce qu’on est tout d’un coup sensible à une image, une forme, une composition de couleur.
Il s’agit d’une sentiment qui ne s’explique pas, comme un morceau musical, une scène de film, un motif sur un vêtement.

Il ouvre les portes de l’émotion, du plaisir, du questionnement…

La création graphique

Trois types d’orientations :

- La création sans contrainte il s’agit plutôt de la création artistique et personnelle, expérimentale, intuitive, sensorielle etc…

- La création / commande qui répond à une demande d’un client, une réponse à un besoin particulier et précis (création d’une image et d’un paysage conceptuel dans le quel on identifie le produit, le service, le besoin)

- L’adaptation qui consiste à adapter dans une charte graphique la création d’un nouvel espace, d’un nouveau produit, d’une opération marketing, d’un site internet, d’ une campagne en ligne etc…

Les outils de créations industriels

Reproduction industrielle de la création

La photo
L’imprimerie
La sérigraphie
Le cinéma
La télévision
CDROM / DVD et supports gravés
Internet
L’oeuvre devient publique et sort des institutions (musées, églises, collections et autres)

Création et informatique

Quelques dates

Années 45 ordinateur propriété de l’armée (énormes et gourmands … plusieurs tonnes)
Années 60 disques durs et souris
Années 70 internet (interconnections de réseaux militaires)
Années 80 / 85 l’arrivée de l’informatique au public, IBM, Apple, Atari, Amiga … invention du Cédérom
Années 85 / 90 guerres Compacq, Ibm, naissance du processeur Intel 16 MHz 386
Années 90 / 95 Naissance de Windows et de l’interface (fenêtre)
Années 95 Internet et explosion de la technologie en général
Année 2000 le bug dû au codage des dates et des instruction par deux chiffres 00 à 99

Le multimédia en général vers les années 90
Production moins coûteuse de fabrication que l’imprimerie et paradoxalement plus chère.
Cdroms, jeux, applications ludo-éducatives, encyclopédiques etc…
Industrie du jeu : Infogrames, Cryo, Ubi-soft, Montparnasse Multimedia, Nitendo, Sony, Playstation…
(cdrom, bornes, video, dvd, internet, intranet, extranet…)

Space invaders (1978)
Imagina (1981)
Tron (années 1982)
Explosion de la 3D qui arrive sur les écrans vers 1995
Jurassic Park (1993)
Toy Story (1995)
Internet arrive au grand public vers 1995 et explose vers 1998
Tomb Rider (1996)

Depuis prolifération des outils de production et de création bouleversent le XXè siécle
L’ordinateur est dans les foyers de la même manière que la télé, le téléphone.
Les outils de création multiplient les créations et offrent la possibilité de créer à tous
Démultiplication démentielle des créations numériques

Photoshop et le multimédia

Le print
La vidéo
Le multimédia
L’internet

Le pigment et le pixel
Le vecteur étant réservé à Illustrator, Corel …

Couleurs

RVB = Les couleurs RVB sont appelées des couleurs additives puisque l’on obtient le blanc par l’addition du rouge, du vert et du bleu

CMJ+K = En théorie, en combinant des pigments cyan (C), magenta (M) et jaune (J) purs, on obtient du noir par absorption de toute la lumière. C’est pourquoi on parle de couleurs soustractives.

Logiciel de retouche d’images, de dessin, de mise en page.
Développé d’abord pour Macintosh (Adobe) porté sur PC vers les années 1990
Pas de calques, mode texte pixel, les outils de bases sont là.

Approche photoshop

Apprentissage de photoshop logiciel.

Les utilisations de photoshop
Les formats de fichiers
L’interface et ses paramètres
Palette outils
Palette propriétés d’outils
Les calques
Les masques
Les couches alpha
Les styles

RVB et CMJ+K

Plus d’infos sur le RVB
Plus d’infos sur le CMJ+K

Les boîtes d’outils et leurs fonctions associées à la boite des propriétés
Les calques et leurs propriétés (masques, couches, incrustations, styles)
Les filtres
Les scripts
Les exportations

Les palettes d’outils Photoshop et raccourcis

Raccourcis

http://www.vincentlucphoto.com/tutorial_photoshop_outils.html

http://goodpix.free.fr/decouverte_photoshop/decouverte_photoshop.html

Quelques tutoriels

http://bigbook.chez-alice.fr

http://www.i-liquid.be

http://www.graphiland.fr

http://www.babylon-design.com

http://www.klondik.net

http://www.joliespages.com

http://www.photospin.com

http://toshop.free.fr/tutos.htm

http://www.3dvf.com/index.php

http://www.fairedelor.com/

http://www.klondik.net/

http://bigbook.chez-alice.fr

Sites graphistes / Agences

A

http://anasomnia.com (Rêve illustré)

http://www.111111111111111111111111111111111111111111111111111111111111.com (Kenneth Tin-Kin Hung)

http://www.aeriform.co.uk (Sean Rodwell)

http://www.au-secours-jai-un-blog.com (Blog design)

http://www.alextrochut.com (Alex Trochut)

http://www.afterlab.com (Marius Gronvold / Torfin Sudem)

http://www.alphabazar.net (Frédéric Reynaud)

http://amanita-design.net - 1 – 2 (Agence)

http://assembler.org (Agence)

http://arthurdepins.com (Arthur Depins)

http://www.arsthanea.com (Ars Thanea)

B

http://www.blackbeltmonkey.com (Agence)

http://www.bionic-systems.com/print-packaging

http://www.blanquet.com (Stéphane Blanquet)

http://www.barcinski-jeanjean.com (Barcinski & Jeanjean Anaglyph 3D)

http://blitzagency.com (Agence)

http://www.boring3d.com (James Maidens)

http://www.banksy.co.uk(Bansky)

http://www.baba3000.com (Baptiste Jaquemet)

http://eric.de-berranger.club.fr (Eric de Berranger)

C

http://www.crazyws.fr/dev/20-canvas-html5-pour-vous-inspirer-8IK3U.html (Canvas HTML5)

http://www.compositionwithjavascript.com (Mondrian)

http://www.sebastiencannone.com (Sébastien Cannone)

http://www.mathieuchardonnet.com (Mathieu Chardonnet)

http://www.chman.com (Agence)

http://www.chickfree.com (Tony Derbomez / Aka Chick)

http://www.leschinois.com (Agence)

http://cmart.design.ru (Agence)

http://carlosulloa.com (Développeur)

http://competition.starring.se/thecompany/site (Agence)

http://www.thecmons.com (Collectif)

http://www.crashmedia.com (Agence)

D

http://www.fly-a-balloon.be(Collectif)

http://www.dearmrb.se (Agence)

http://www.designgraphik.com (Agence)

E

http://www.entropy8.com (Auriea Harvey / Michaël Samyn)

http://www.emilianoponzi.com (Illustrateur)

F

http://ffffound.com (Portail)

http://www.fly-a-balloon.be (Collectif)

http://flashface.ctapt.de (Agence)

http://www.flowersfeedthesoul.com (Agence)

http://www.formshape.com (Agence)

http://www.farfar.se/awards/epica2008/stavros (Artiste)

G

http://www.globz.com (Agence)

http://www.gmunk.com (Agence)

http://www.goodbrush.com (Craig Mullins)

http://www.grapheine.com/bombaytv (Agence)

http://www.grapheine.com/branding/charte-graphique-office-de-tourisme-de-paris (Identité graphique)

http://green.colorize.net (Marcus Wallinder)

http://www.guraphic.com (Agence)

H

http://www.hellovon.com (Hellovon)

http://www.hethe.com (Illustrateur)

http://ml.hoogerbrugge.com (Graphislte flash)

http://www.hejz.com (Peter Jawowoski)

I

http://www.immersive.fr/blog/nouvelles-fonctionnalites-interactives.php (Agence immersion 3D)

http://ilovedust.com (Collectif)

http://www.in-colour.net (Agence)

http://www.indelebil.fr (Agence)

J

http://www.jonathanyuen.com (Johnatan Yuen)

http://www.julienmoya.com (Julien Moya Freelance D.A.)

http://www.jesuissuper.fr (Christophe Blanc : scénario et image et Jean François Olive r: son)

http://www.joshuadavis.com

K

http://www.kiibook.com (Jean Luc Lamarque)

L

http://www.lessrain.com (Agence)

http://lab.andre-michelle.com/tonematrix (Interactive pixels / sons)

http://lab.mathieu-badimon.com (Mathieu Badimon)

http://www.levitated.net

http://www.leyoweb.fr

http://www.lillustrefabrique.net

http://www.lipsticker.net

http://www.love-machine.org

M

http://www.macacolandia.com.br (Illustrateur / Roughman)

http://www.maedastudio.com (John Maeda)

http://www.markbehm.com (Mark Behm)

http://www.mediaboom.com (Agence)

http://www.moccu.com (Agence)

http://www.monet2010.com/fr#/voyage (Visite virtuelle des toiles de Claude Monet)

http://www.mrwong.de (Designer)

http://www.mono-no-aware.org/index1280.htm (Sakamoto’s petition)

N

http://www.neave.com (Paul Neave)

O

http://www.once-upon-a-forest.com (Joshua Davis)

http://www.ora-ito.com (Designer)

P

http://www.pixelis.fr (Agence)

http://www.pierrick-martinez.com (Pierrick Martinez)

http://www.pianographique.com (Jean Luc Lamarque)

http://www.praystation.com (Joshua Davis)

PIXEL

Q

http://www.quasimondo.com (Développeur)

R

http://rma.mtv.ru

S

http://www.rsub.com

http://www.sagmeister.com (Agence)

http://www.sensisoft.com (Agence)

http://www.siscottdesign.com (Illustrateur)

http://www.sixteenpages.net (Auriea Harvey / Michaël Samyn)

http://snowflakes.barkleyus.com

http://sodaplay.com

http://www.thestuntman.la

T

http://www.tinkin.com (Kenneth Tin-Kin Hung)

http://www.tomato.co.uk (Agence)

http://www.travischarestgallery.com (Illustrateur)

http://www.tyrsa.fr/ (graphiqte typographe)

U

http://w3.upm-kymmene.com

http://www.urbansilo.com (Agence)

http://www.ultranoir.com (Agence)

V

http://www.vectorpark.com (Patrick Smith Illustrateur / développeur)

http://www.volumeone.com (Agence)

W

http://www.wddg.com (Agence)

http://www.webagent007.com (Agence)

http://www.webcollection.se/telenor/bodycommunications (Agence)

Y

http://www.yamago.net (Agence flash games)

http://www.yenz.com

http://www.yugop.com (Agence)

Z

http://zoomquilt.org (Collectif)

http://www.zengarden.com

http://www.zewall.com

http://zeitguised.wordpress.com (Design 3D)

La création se banalise ?

Logiciels tableurs, gestion de textes, mise en page
Les jeux
Logiciels images
Logiciels de son
Lociciels de montage vidéo
Applications de toutes sortes ouvrent les portes de la création à tous. Et la création n’est plus l’apanage de l’ »artiste »

Le graphisme

Graphisme

Raccourcis

Quelques tutoriels

Sites graphistes / Agences

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

Y

Z

Sites marques / Experimental

Portails

Blogs