Design du futur site internet de l'Ordre Phoenix

Salut à tous

Alors le travail que je vais vous présenter ici est purement 2D. Ca sort un peu du lot étant donné qu'ici on présente pratiquement que de la 3D, mais je pense que ça pourra en inspirer plus d'un sur les possibilités offertes par Photoshop et Illustrator. De plus, je suis très intéresser d'avoir l'avis des infographistes et designers du forum, ainsi que tous ceux qui maîtrisent Photoshop

Alors le site internet en question est un site de joueurs en ligne, principalement pour les MMORPG (jeux de rôle en ligne), et surtout Guild Wars 2 pour le moment. La principale activité du site tourne autour de son forum. L'Ordre Phoenix est en fait une sorte de confrérie de joueurs qui jouent ensemble sur ces jeux en ligne, un peu comme ici, mais dans le domaine des jeux.

Le site actuel est relativement pourri, que ce soit au niveau de la programmation comme au niveau du design... Il faut tout de même admettre qu'il n'est pas tout récent.



BREF, étant donné le peu de succès du site après des membres de l'Ordre, un membre s'est proposé pour créer un nouveau site entièrement reprogrammé pour le rendre plus lisible et convivial. De mon côté, je me suis proposé pour m'occuper de tout ce qui touche à l'infographie, au design.

Après une trèèèès longue discussion avec les membres, il a été décidé :
- qu'il fallait créer un logo
- qu'il était plus logique d'opter pour des couleurs chaudes, quelque chose de flamboyant
- qu'il faut néanmoins garder du violet quelque part car c'est la couleur officielle de l'Ordre depuis longtemps
- qu'il est préférable d'avoir un fond clair (plus agréable pour les yeux)
...
Concilier tout ça va être difficile.

Alors dans un premier temps et par facilité, le programmeur a repris un modèle de site pré-programmé sur lequel je suis sensé me baser pour y remplacer les images de fond pour le design. La couleur des typos et autres éléments vectoriels viendra par la suite.



Y a plus qu'à ...

Première étape : le logo. Voici le "logo" actuel qui sera remplacé... Je ne sais pas si on peut parler de logo.



Rien de tel que du calque, un crayon et une gomme...



Augmentation du contraste sous Photoshop, vectorisation dynamique avec Illustrator et ensuite retouchage point par point pour obtenir un résultat bien propre...



Ce logo est une base qui pourra être déclinée de mille et une façon en fonction de résultat souhaité...
J'avais notamment fait quelques essais préalables avec un autre logo trouvé sur internet :

Maintenant que j'ai ce logo, je peux m'attaquer à la bannière du site.

Pour faire simple, on doit y trouver :
- le logo bien mis en valeur
- la dénomination : Ordre Phoenix
- le slogan : Nous renaîtrons de nos cendres
- un espace vide sur lequel viendront s'implanter les différentes sections du site sous forme de bandeau menu

L'image existante étant la suivante ...



... il faut donc que je crée une image ayant la même résolution avec la position des menus au mêmes endroits, tout en tenant compte de la position et la largeur des colonnes qui ne peuvent visiblement pas être réadaptés (codage trop complexe m'a-t-on dit).

C'est parti pour le travail sur Photoshop.

Un phénix, logiquement, ça brûle. En suivant ce tuto (merci encore Yanosh), le résultat est ± convainquant.



Maintenant, il faut ajouter le texte. J'ai retenu 2 typos :
- Northwood High
- Fire of Ysgard



Un peu plat... J'ai ensuite ajouté cette image de braises en deux exemplaires en avant-plan avec les mode de fusion "obscurcir" et "incrustation" en opacité 27 et 64 %.





Il ne reste plus qu'à rendre ça un peu plus luisant... un effet "ombre portée" sur les typos avec les réglages suivants :



Et on obtient ceci.



Pour renaître de ces cendres ... il faut des cendres, ou plutôt des braises. En faisant quelques recherches sur Google images, j'ai sélectionné une série d'images avec des braises qui m'ont servi de base pour mon assemblage qui constituera mon lit de braises. Homothéties, rotations, déformations, application de masques de fusion, ajustement de teintes et saturations, ... je vous passe les détails. Le tout en mode de fusion "éclaircir" pour masquer le fond noir de chaque image.



Des braises, ça fume. On peut trouver de magnifiques photos de fumées sur CGtextures. Assemblage de 3 photos avec masques de fusion, opacité 30%, mode de fusion "superposition".

Maintenant il faut ajouter un fond à cette bannière, ça peut pas juste rester noir. En fouillant sur Google image avec les mots clé "Guild Wars 2", j'ai retrouvé quelques images du jeu qui peuvent servir de base. Masque de fusion, réglage luminosité / contraste / teinte / saturation / opacité...

Finalement, les membres ont opté pour la 3ème proposition, mais il fallait introduire du violet quelque part (couleur officielle de l'Ordre). J'ai donc dupliqué le fond, adapté la teinte, appliqué un masque de fusion sur le duplicata pour laisser apparaître les météores dans leur couleur originale.



Maintenant, il faut étendre la bannière pour les écrans larges... Un assemblage de plusieurs photos (avec masques de fusion, bidouillage de la luminosité, teinte, saturation et modes de fusion variés, ... vous connaissez la chanson) fera l'affaire.

La bannière est provisoirement terminée. J'attaque le corps du site prochainement

N'hésitez pas à faire vos commentaires, ça pourrait m'être très utile pour améliorer ma technique ou encore explorer d'autres possibilités. A force d'avoir la tête dedans, je pourrais louper certains détails importants !

Salut Farkas,

Très sympa de nous présenter tout ça !    
J'aurais sélectionné la même bannière. Je n'ai pas grand chose à ajouter, juste bravo  

+1
j'aime beaucoup le final et le travail autour de la bannière   

Farkas tu joue a GW2?
PS: vraiment bien tes images, tu parles de 2D mais y'a un sentiment d'animation,, très jolie à regarder

CROWS-ZERO a écrit:Farkas tu joue a GW2?

Oui quand j'ai le temps ... en général c'est entre 21h et 03h. Farkas.1942 sur Fort Ranik, si ça intéresse qqn

Hello Farkas,
Très joli tout ça   

Ça donne envie de s'inscrire sur ce forum ... pour quoi faire me diras-tu?     :icon_wink: 

Bon ... je m'attaque au corps du site en lui-même.

Préparation du canevas et des divisions pour chaque partie...



Petite composition en noir avec des brush fumée et tache de peinture pour mieux intégrer la bannière :



Application d'une texture de fond et d'un cadre avec autre texture + effet filtre rougeoyant :



Application aléatoire de 2 brush "fissure" avec opacités variables + fondu noir sur les extrémités :

Pour les côtés latéraux ... retour au bon vieux crayons sur du calque pour y intégrer le logo sous forme de motif répétitif.



... et re-vectorisation avec Illustrator.



Intégration du motif avec effet de biseautage et opacité réduite + incrustation de couleur.



Incrustation de parties d'images pour simuler le sommet en ruines :
Images de base :





Mise en relief (ombre artificielle) du cadre et application d'une corniche en pierre + motif périphérique avec biseautage et opacité réduite :

Bon ... là je sèche un peu. Il y a encore deux choses à prévoir :
- les boutons du menu principal horizontal
- les couleurs des cadres et polices du contenu

Idéalement, ça devrait être écrit en foncé sur fond clair, mais j'ai quelques soucis de compatibilité esthétique avec le fond du site.

Voici ce que j'ai pour le moment, mais j'en suis pas vraiment satisfait...



Qu'en pensez-vous ?

du beau boulot, j'aime bien l'ambiance de ton image de fond et le travail de matiere/ relief... ça fait que je ne suis pas vraiment convaincu de l'effet des motifs sur les cotés, peut etre trop lisses, en tout cas ils manque un peu de matiere... un effet tissu? parchemin? ecorce? pierre?....je ne sais pas
bravo en tout cas, tes nuits sont bien remplies... 

c'est les vacances aux sports d'hiver qui t'ont inspiré ?  ca tranche avec la neige !!!!
sinon super taf , bravo j'aime beaucoup

Rien à redire, je suis sous le charme.
Pour l'implantation des cellules forum, sur certain hébergeur il est possible de mettre le fond transparent. Juste laissé le cadre des cellules, histoire de garder la structure.
Ton texte se retrouvera directement sur le backround que tu a très bien réalisé.   

Merci à vous pour les compliments.

Jack, ça fait un bien fou, l'air de la montagne ! Par contre, en ce qui concerne mon inspiration, en général c'est pendant la nuit qu'elle est à son summum, ça ne se commande pas   

Merci Yanosh pour la remarque au sujet des latéraux, suis d'accord avec toi, je vais retoucher ça prochainement.

Pour les cellules du forum, je pense aussi que je vais partir sur un cadre légèrement transparent et épuré dans un premier temps. J'ai déjà envoyé les fichiers background au programmeur pour qu'il mette ça en musique. Je vous ferai une capture d'écran une fois qu'il l'aura fait.

Bon ... le programmeur se fait attendre. Donc je poursuis le design du fond.

J'ai ajouté des boutons pour le menu principal (horizontal) et appliqué une texture légère sur les latéraux.

  
Vraiment attrayant comme design!!!!

Super intéressant, je ne savais pas trop comment tout cela était monté, et du coup au final tu as une image et comment ça se passe pour activer ton texte? (je suis curieux jusqu'au bout).
Super bien les pierres en tout cas et le fond aussi évidemment. (juste un doute sur la teinte du rouge/argile.

chalex02 a écrit:Super intéressant, je ne savais pas trop comment tout cela était monté, et du coup au final tu as une image et comment ça se passe pour activer ton texte? (je suis curieux jusqu'au bout).

Heu ... j'ai pas compris la question

chalex02 a écrit:Super bien les pierres en tout cas et le fond aussi évidemment. (juste un doute sur la teinte du rouge/argile.

Oui j'y avais également réfléchi un peu mais que suggèrerais-tu comme teinte à la place du rouge/argile ?

J'aurai eu tendance à mettre plus dans les beige/sable/terre cuite blanche histoire de rendre moins agressive la lecture et fatigué l'oeil.
https://i.servimg.com/u/f56/18/27/45/17/sans_t10.jpg

OK je vais faire quelques tests pour voir ce que ça donne.

merci Chalex c'est le genre de critique que j'apprécie bcp

@ Farkas au plaisir, bien que les goûts et les couleurs mais une neutralité c'est toujours bon.