JeuWeb - Crée ton jeu par navigateur
[Tutorial PS] Un design Heroic-Fantasy - 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 : [Tutorial PS] Un design Heroic-Fantasy (/showthread.php?tid=3881)

Pages : 1 2

[Tutorial PS] Un design Heroic-Fantasy - Globe - 10-04-2009

Bonjour à tous, je vous présente un tutoriel assez peu clair que j'ai réalisé pour créer un design. Il est encore incomplet j'ajouterais la suite quand j'aurais le courage Smile

1 - La bannière

Cet élément du design est l'un des plus important, qu'il soit discret ou tape à l'œil ce sera de toute façon la première chose qui définira l'ambiance de votre site. Ainsi selon le style de votre jeu vous allez choisir une série de couleurs qui risque de définir la totalité de votre site.

Nous partons sur un design d'Heroic-Fantasy donc bien naturellement le design comportera des couleurs sobres et qui traduisent le coté médiéval de votre jeu. Interrogeons nous d'abord sur ce qui fait que ces couleurs conviennent particulièrement à ce type de jeu.Le monde médiéval est en effet celui qu'on rencontre le plus souvent dans les jeux de rôles donc naturellement lors de la création d'un design nous nous basons sur notre éxpérience de ces dit jeux. Mais qu'est ce qui à motivé les premiers créateurs à représenter l'ambiance médiévale de cette manière ?
C'est le rapport à la matière pour commencer, en effet on retrouve des tons marrons, beiges et parfois gris. Il est plus rare de voir le thème du feu qui dans l'esprit des rôlistes est un peu trop représentatif du chaos. Dans l'imaginaire collectif on associe le Moyen-Âge à la pierre et au bois, ce qui explique les couleurs, donc l'ambiance générale sera axée sur le style d'une taverne, de l'intérieur de bois précieux des châteaux pour les couleurs marrons, le beige représenterais plutôt le parchemin, les lettres scellées... Et le gris la pierre des châteaux, cathédrales ou encore des cryptes. Ceci étant dit j'arrête de vous ennuyer avec de la théorie et passons à la pratique.

Je commence sur un document de 1024x768 pixels. Selon ma volonté je crée une bannière plus ou moins grande, ici 210px. Ensuite posons nous la question de la largeur, deux solutions soit vous laissez de la place pour un cadre, soit vous prenez toutes la largeur. Ici je laisse pas mal d'espace sur les bords pour laisser flotter mon design dans la page car ça me plaît assez. Pour mieux gérer l'espace je vous conseille de taper ctrl+R pour afficher la règle de photoshop.

[Image: 01.gif]

Ensuite choisissons un jeu de couleurs pour créer des effets sympathiques. J'aime assez associer une couleur foncée et la même en beaucoup plus claire pour créer des jeux de lumière, donc ici j'utilise : #7A1E00 et #C1775F, photoshop nous permet de séléctionner deux couleurs à la fois et c'est assez important pour utiliser les filtres donc vérifiez bien d'etre dans cette situation : [Image: couleurs.gif]

A ce moment là j'aime partir un peu au hasard et voir ce que ça donne, mais je commence souvent par mettre un filtre de nuage. Donc séléctionnez la zone de votre bannière et

allez dans Filter > Render > Clouds ce qui donnera :

[Image: 02.gif]

Un effet simple mais esthétique, ensuite pour accentuer les effets de lumières je vais prendre deux autres couleurs ici je vais garder le marron foncé et changer le clair en jaune (#F3EB1E). Puis je vais créer un nouveau calque (shift + ctrl + N), utiliser la même zone de séléction et répéter l'effet de nuages (ctrl+F). Ce nouveau calque recouvre le précédent mais nous allons changer celà grâce au mode de fondu dans le panneau de calques :

[Image: layers.gif]

Ceci va éclaircir notre bannière et lui donner plus de profondeur

[Image: 03.gif]

Ensuite je vais fondre ces deux calques ensembles en séléctionnant celui du dessus et en appuyant sur ctrl+E

Maintenant explorons un autre effet basé sur celui des nuages. Je vais réutiliser le marron du début et le jaune pour créer un nouveau calque de nuages.

Mais cette fois je vais ajouter du bruit (Filters > Noise > Noise) en gaussien à 7% :

[Image: noise.gif]

Puis je vais rajouter un flou dynamique (Motion blur) Filters > Blur > Motion blur avec un angle de 45° et 80 pixels de déplacements, ceci donne un effet de vent. Cependant notre calque flou recouvre le premier donc nous allons changer l'option de fondu du calque : plusieurs possibilités, (Color dodge nous donnera une couleur plus claire, un genre de coté sacré, difference va changer la couleur vers le vert nous donner un effet plus mystérieux et les autres options vont soit favoriser les couleurs claires soit les couleurs foncées, je vais utiliser Difference ici.
[Image: difference.gif]

Donc là nous avons un bon début pour notre bannière. Je reviendrais sur les détails plus tard, cette étape nous permettait simplement de décider de l'ambiance que nous voulions donner.


2 - Le cadre et le fond

Comme j'ai laissé de la place pour un cadre, et même pour un fond derrière celui-ci ni trop large ni trop petit je peux choisir une couleur de fond très sombre ou très claire vu la taille de l'espace elle n'agressera pas les yeux et permettra même de faire ressortir le design, partir sur un vert sombre et mystique je vais mettre du noir en fond. Je vais créer un calque de fond noir que je placerais tout en bas de la liste de calque pour qu'il soit au dernier plan.

Maintenant le cadre. Plusieurs styles possibles mais le quantité de formes de bases est relativement limité donc je vais créer quelque chose de simple pour que vous saisissiez bien. Je vais simplement faire deux bordures le long de ma bannière d'approximativement 15 pixels. Faites une sélection de votre calque de bannière (ctrl+ clic sur le calque) et dans un nouveau calque (shift+ctrl+n). Pour créer la bordure Edit > Stroke > 15pixels et une couleur (ici #AB4716) je défini la bordure comme étant à l'extérieur de la sélection (outside) et j'applique : et je prolonge les lignes des bords vers le bas du calque avec l'outil de sélection rectangulaire et le seau de peinture. Ça donne ça :

[Image: 04.gif]

Et ajoutons même une petite barre horizontale de plus pour délimiter un menu horizontal.

Bon c'est bien sympa mais elle est moche notre bordure donc donnons lui un air un peu plus en relief. En séléctionnant le calque du cadre faites Layer > Layer Style > Bevel and Emboss.

Cet effet permet de donner du relief, donc nous allons mettre une profondeur de 91% pour que celà ne ressorte pas trop, et augmenter la taille de l'effet pour qu'il soit plus discret, disons à 21px. Puis j'utilise une texture plus ou moins profonde pour la rendre moins artificielle, moins unie. Voilà une bordure un peu plus agréable, vous pouvez également ajouter des contours pour mieux définir les bords(option stroke dans Layer Style).

[Image: bevel.gif]

Bon j'ai donné beaucoup de détails jusque là mais je vais être plus bref car je suis fainéant Smile

3 - Le menu et le contenu

Ici je vais jouer sur des cadres pour rester dans le domaine du débutant. Pour faciliter la chose je vais d'abord créer un groupe de calque appellé contenu+menu. Dedans je vais rajouter un grand cadre qui englobera toute la partie inférieure du site et je vais lui donner une couleur vert foncée pour aller avec la bannière (#3E3D19). Foncé mais pas trop parce qu'on veux pouvoir mettre un texte ni trop clair ni trop foncé pour qu'il soit agréable à lire. Dans ce cadre je vais découper deux espaces, un pour le menu et un pour le contenu grâce à l'outil de séléction rectangulaire. Et grâce aux effets de calques je vais mettre un contour à ces espaces.

[Image: 05.gif]

Maintenant je vais créer d'autres cadres à l'intérieur de ceux ci sur un autre calque, bizarrement plus y'a de cadres plus c'est joli, ça doit donner un air complexe je comprend pas encore trop pourquoi Tongue
A ces nouveaux cadres je donne également des bordures et un effet de dégradé (Layer > Layer Style > Gradient Overlay) ça fait toujours joli Smile
Ici j'ai laissé des espaces entre les cadres pour ajouter de nouvelles bordures :

[Image: 06.gif]

Je vais donc créer un nouveau calque au dessus de celui de la couleur de fond noire et créer un rectangle d'une couleur vert foncé sur la zone de contenu

[Image: 07.gif]

Et maintenant je vais jouer avec le style de ce calque pour lui donner justement un peu de style. Et voilà donc on j'en suis :

[Image: 08.gif]


M.A.J. 11/05

Ajoutons maintenant quelques détails à nos fenêtres, en effet en design ça plait pas mal de rajouter des trucs qui semblent inutiles mais renforce l'impression qui ressors :

[Image: 09.gif]

Ici un simple cadre avec un effet de dégradé du vert foncé au noir, j'ai utilisé l'effet de style Bevel and Emboss et simplement augmenté la taille de l'effet pour rendre le dégradé un peu moins linéaire. Ensuite j'ai créé un autre calque de la meme taille et en conservant la même séléction j'ai peint à l'arrache avec le pinceau. Une astuce dans photoshop c'est de télécharger des pinceaux (brushes), il en existe des milliers et de nombreux gratuits en jouant un peu avec on peut obtenir des effets très intéressants.

J'ai remarqué une erreur que j'avais déjà faite et que je vous conseille de prendre en compte, observez le rendu de votre travail sur plusieurs écrans, je suis actuellement sur le PC d'un ami et le design apparait bien plus clair qu'il ne l'était sur mon vieux CRT 15 pouces Big Grin En plus du réglage de la carte graphique qui est différent.

Ce genre de détails peut être inséré partout, et un conseil bien que beaucoup critiquerons, inspirez vous des designs que vous avez vu, pas du design en lui même mais de la manière d'agencer les détails. Un motif, un dégradé... Vous n'avez pas remarquez que beaucoup de designs utilisaient des rayures diagonales transparentes par dessus leurs dégradés, leurs images... Ce sont des petites choses qu'un designeur remarque et reproduit. Donc plus une astuce qu'une véritable mise à jour du tuto mais voilà, je continuerais plus tard.

A suivre...

RE: [Tutorial PS] Un design Heroic-Fantasy - Thedeejay - 13-04-2009

super tuto! vivement la suite!

RE: [Tutorial PS] Un design Heroic-Fantasy - LoganG - 13-04-2009

Très intéressant! Wink
Pressé de voir comment tu intègres les éléments d'un site dedans.

Continue!
LoganG

RE: [Tutorial PS] Un design Heroic-Fantasy - Nodark - 17-04-2009

Merci de ta contribution j'aime beaucoup et vivement la suite Wink

RE: [Tutorial PS] Un design Heroic-Fantasy - Roworll - 19-04-2009

Y'aurait pas le même genre de tuto pour the Gimp ?
Photoshop est franchement trop cher pour moi.

RE: [Tutorial PS] Un design Heroic-Fantasy - Globe - 19-04-2009

Je suis désolé je manque de temps pour compléter le tuto pour le moment, ce sera pour bientôt... Sinon Roworll je pourrais essayer d'apprendre à manier The Gimp pour te pondre un tuto mais je ne suis pas convaincu d'y parvenir son fonctionnement m'est encore étranger, cependant si je trouve du temps pour m'entraîner ça devrait pouvoir se faire, à voir. Je pourrais aussi pondre un truc pour paint ce ptit logiciel basique permet de faire des trucs plutôt jolis avec un peu de patience.

RE: [Tutorial PS] Un design Heroic-Fantasy - LoganG - 21-04-2009

Tant qu'à faire, pourquoi pas pour Paint.NET? Gratuit et simple d'utilisation ^^

Bonne continuation Wink

RE: [Tutorial PS] Un design Heroic-Fantasy - Prirawien - 08-05-2009

J'adore, j'attend la suite avec impatience !

RE: [Tutorial PS] Un design Heroic-Fantasy - noxo. - 08-05-2009

L'idée est pas mal mais pour un accro à toshop comme moi, je trouve qu'il y a un peux beaucoup de défauts ^^

Je m'explique ^^

Les bordures vertes qui sont pas partout de la même taille dans le même cadre me perturbent trop ^^

Et bon quelques details mais on s'en fiche xD

en tout cas GG Smile

RE: [Tutorial PS] Un design Heroic-Fantasy - Globe - 09-05-2009

(08-05-2009, 09:26 PM)noxo. a écrit : L'idée est pas mal mais pour un accro à toshop comme moi, je trouve qu'il y a un peux beaucoup de défauts ^^

Bah fais toi plaisir si t'as le courage de faire un design à fond en prenant un screen toutes les 15 secondes. C'est plus un guide qu'une modèle de design comme tu le comprend si tu le lis l'interet n'est pas dans le design mais dans la technique...