JeuWeb - Crée ton jeu par navigateur
Le graphisme - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Art, graphisme, audio (https://jeuweb.org/forumdisplay.php?fid=50)
+--- Sujet : Le graphisme (/showthread.php?tid=2387)



Le graphisme - Antyoz - 09-02-2008

Le graphisme est une discipline qui consiste à créer, choisir et à utiliser des éléments graphiques (Web design, dessins/illustrations, caractères typographiques, pictogrammes, puces...) pour élaborer son jeu.

Les differents termes Graphiques sont :

Web design :

Le web design désigne la conception de l'interface web : l'architecture interactionnelle, l'organisation des pages, l'arborescence et la navigation d'un site web. Il s’agit d’une phase essentielle dans la conception d'un site. La conception d'un design web tient compte des contraintes spécifiques du support Internet en termes d'ergonomie, d'utilisabilité et d’accessibilité.

"En générale", Il y a 3 genres de pages :

Le splashscreen : est la page d'accueil avant l'index il se compose bien souvent d'une illustration avec le titre et le slogan du jeu et un lien pour entrer dans le site ( vers la page accueil du site).

Une page web dans son architecture, se compose en 3 grandes parties :

"En générale" Le header : C'est la partie haute ou gauche du web design faite d'une illustration ou d'un photo avec le titre et le slogan.

"En générale" Le centre page est composée de 2 ou 3 parties.

1- la ou les zones des menus (gauche ou droite, ou gauche et droite si il y en a 2 ou directement sous le head).
2- la zone centrale pour le texte.

Et pour finir le Footer (pied de page) Il est principalement utilisé pour rajouter les copyrights la résolution du design le webdesigner (l'auteur du design) et ou le codeur.

Dans cet ex, on peut voir une illustration avec des pictogrammes, et 2 versions du meme design avec, pour l'un un seul menu a gauche et l'autre 2 zones pour les menus (droite et gauche).

[Image: edgeofdarnessaw.jpg]

Un sous genre consiste a faire des GUI (Graphical user interface) L'interface jouable du jeu avec ses tableaux, informations sur l'etat d'avancement, du scores.... du joueur.


Le Web design, dans son ensemble pour les jeux peut se résumer en style afin de definir une ambiance.

Voici quelques genres et sous genres :

Pour le genre science fiction, les sous genres sont :


Anticipation : Vision du futur...

Hard Science : Prospective scientifique.

Cyberpunk : Futur à tendance apocalyptique et ultra technologique.

Voyages Imaginaires : Les débuts de la SF, comme celle de Jules Verne par ex.

Space Opera : Des empires galactiques, des planètes, des vaisseaux spaciaux en masse...

Uchronie : Et si le passé ne s'était passé comme ça ?

Steampunk : Une SF au XIXème siècle victorien.


Pour la fantasy, les sous genres sont :


Heroic Fantasy : Histoire de héros solitaire.

Dark Fantasy : Le Mal prend le dessus sur le Bien.

Medieval Fantasy : Des chevaliers, des magiciens... à tres forte tendance arthurienne.

High Fantasy : Des elfes, des gnomes et autres gobelins.

Science Fantasy : Une Fantasy proche du space opéra.

Urban Fantasy : Fantasy dans le monde contemporain.

Romantic Fantasy : Les héros sont des héroïnes, guerrières ou magiciennes.


Illustrations :

Une illustration est une représentation graphique ou picturale servant à décrire ou accompagner par l'image un récit, une quête, une histoire ou un backgound, ou à appuyer un texte informatif (scientifique...).

Ex d'illustrations en n&b ( sépia dans ce cas) :

[Image: megapolisaw.jpg]

Ex d'illustration en couleur :

[Image: sep1.jpg]


La typographie :

La typographie est la police d'ecriture (fonte), que l'on va utiliser dans la page web. Titre, sous titre, texte, Menu etc...

Pictogrammes, puces...

Un pictogramme est une représentation graphique schématique, un dessin figuratif stylisé fonctionnant comme un signe d'une langue écrite.

Dans cet ex les pictogrammes servent pour identifier les equipes sous forme de blasons.

[Image: blasons.jpg]


Avatars, signs, bannieres, logos, boutons, userbars...

Les avatars, signs, bannieres.. sont les principaux éléments graphiques de communication et de visuel publicitaire pour un site (hors pub adsens google....) Ils servent de visuel dans les pages liens, partenaires... ou pour des echanges entre les concepteurs d'un site.

"En générale" la norme en terme de dimension :

Web design : 800x600 ou 1024x780 (la hauteur importe peu car les designs sont bien souvent extensible en hauteur et dans certain cas extensible en largeur)
Logo : 88x30 ou 31
bouton : 120x60
Banniere H : 468x60
Banniere V : 120x240
Userbar : 350x19
Mini userbar : 175x19

Chacun des éléments est symbolique ou dans un style tres bien défini, et signifiant dans la conception du projet, selon les axes définis éventuellement avec d'autres intervenants (game designer, scénariste, chef de projet) du domaine de la communication, dans le but de promouvoir, informer, instruire ou plonger le visiteur dans le monde ainsi cree (impact graphique).

Le pixel art :

Le pixel art qui se traduit simplement par l'art du pixel, désigne la réalisation d'une composition numérique (ou image numérique) pixel par pixel, en utilisant un nombre limité de couleurs.

Mise a jour à suivre....