Partagez | 
 

 Créer un design de A à Z

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar
En ligne

Medium

Directrice

Bons Points (BP) : 1799
MessageSujet: Créer un design de A à Z   Ven 15 Avr - 10:06

Dernière édition par Mewyn le Ven 15 Avr - 10:10, édité 1 fois
Photofiltre n'est pas vraiment pensé en terme de webdesign, construire un design pour son forum se révèle en général assez compliqué. Mais pas de panique, rien n'est impossible. Wink

Maquette ou pas maquette ?


Les maquettes, ce sont des représentations complètes de votre forum, niveau graphisme et codage. Cela vous permet de vous faire une idée de la structure et d'y adapter vos éléments. Voici par exemple la maquette du design de printemps 2016 de SoP. Smile

Si des logiciels comme Photoshop permettent de faire ça très facilement en étant assez organisé, Photofiltre manque de fonction de ce côté-là. Aussi faire une maquette dès le début de la création du design n'est pas vraiment pratique.

Néanmoins, on ne part pas au hasard sans base : faites un schéma, papier ou numérique, de la structure des catégories, pour savoir comment faire les icônes new/old/lock, par exemple, ou pour savoir comment la bannière finit sur le corps du forum (va-t-on faire une bannière de fond ? plus simple ? doit-elle faire la largeur du forum ou non ?).

Voici par exemple la structure du forum dont je vais réaliser le design :


Oui. Ça suffit amplement. Euuuuh On veut seulement avoir une idée de où l'on va, pas besoin d'entrer dans les détails. ^^

Arrow Je ne vous parlerais pas ici du pourquoi mais du comment. Pour le pourquoi, c'est avec Agnïeszka. Very Happy

Accès rapide


Le header
La barre de navigation
Les icônes de statut
Une première maquette
Le QEEL
Les hauts et bas de catégories (optionnel)
Les derniers éléments
Détailler la maquette (optionnel)
avatar
En ligne

Medium

Directrice

Bons Points (BP) : 1799
MessageSujet: Re: Créer un design de A à Z   Ven 15 Avr - 10:06

Le header


Un plan d'attaque



Maintenant que l'on sait où l'on va, il faut savoir comment ! La logique voudrait que l'on commence par le header et... c'est bien ce que nous allons faire. Euuuuh Le header est la pièce centrale du design, celle que l'on voit en premier et qui donne le ton pour le reste du forum, on lui apporte donc un soin tout particulier. Wink

Si je reprends mon schéma, j'ai besoin d'un header assez large et haut, puisqu'il doit prendre toute la largeur du forum (sans pour autant être extrêmement large car on prévoit ici un forum relativement étroit). Je vais donc partir sur 1000 pixels de large et 600 de haut.

Je commence à me faire une idée de la tête que mon header aura.

Schéma Header

J'ai utilisé ce render et les polices Philosopher et Windsong.

Passage à l'action



Travailler en grand format sur Photofiltre n'est pas l'idéal, mais on va s'en sortir. :=):

Arrow Je vous donne ici la marche à suivre pour réaliser mon header, en vous donnant quelques astuces que j'utilise, mais bien évidemment vous pouvez faire toutes sortes d'autres choses. Wink

Le fond



Commençons donc par le fond. J'ai fait quelque chose de relativement simple. Tout d'abord, un dégradé circulaire (en utilisant le plugin dégradé [en savoir +]) dans les tons de mon design, puis une simple texture papier en mode Produit.

Like a Star @ heaven Plus d'info sur les fonds

Spoiler:
 

Mais cela reste bien sombre par rapport à mon render. J'utilise alors un calque de réglages (Calque > Nouveau > Réglages) pour ajuster le tir.

Spoiler:
 

Malgré le squelette, le design sera assez "nature". Razz Je vais utiliser un autre render mais de manière détournée, en n'en utilisant qu'une partie. Je vais remplir mon image de la partie feuillue, fusionner ces renders et passer le tout en mode Maximum.

Spoiler:
 

La pose du render



Je peux maintenant reprendre mon render principal. Comme il est relativement clair et s'incruste facilement, je ne vais pas faire une incrustation poussée ici.

Like a Star @ heaven Plus d'info sur l'incrustation

Je place une première fois mon render en mode Minimum.

Spoiler:
 

Évidemment, on le voit encore peu. Je vais alors le dupliquer et changer le mode de cette copie en Maximum, à opacité 50 et y appliquer un flou gaussien à 20 pixels.

Spoiler:
 

Je reprends ma texture papier du début et je la place en mode Produit.

Spoiler:
 

Comme cette fois elle masque un peu trop le render, je le duplique une nouvelle fois et le passe au-dessus en mode Luminosité à 50% d'opacité. J'y ai aussi appliqué un léger flou gaussien pour atténuer les contours.

Spoiler:
 

L'ajout de détails



Pour ajouter un peu de lumière, je vais utiliser un C4D que je vais placer en mode Superposition.

Spoiler:
 

Le tout est un peu pâle et terne. Je vais utiliser un pinceau à bords doux, large, et faire une forme violette assez floue (n'hésitez pas à utiliser un flou gaussien par-dessus pour bien masquer les coups de pinceau), que je met en mode Différence. Exclamation J'utilise un violet ici à l'opposé du vert voulu, la couleur doit être adaptée à votre design.

Spoiler:
 

Le travail du texte



Un texte sur Photofiltre se travaille rarement directement sur la création en cours. Je crée donc un nouveau document où je mets la première partie de celui-ci, toujours en noir sur blanc. Pour ne pas avoir un espace blanc inutile, fusionnez les deux calques et faites Image > Recadrage automatique.

Dupliquez ensuite cette image et collez le motif que vous voulez utiliser pour votre texte. J'ai ici réutilisé mon render à feuille. Razz Fusionnez le tout et copiez-le. Retournez sur votre texte et allez dans Édition > Collage spécial > Assembler le collage > Gauche (le texte doit se retrouver à droite).

Spoiler:
 

Pour l'appliquer sur notre header, il ne nous reste qu'à copier cette assemblage et faire Édition > Collage spécial > Image et masque associés. J'ai ici ajouté une ombre portée au calque (double-clic sur la vignette du calque).

Spoiler:
 

Pour la deuxième partie du texte, je souhaite utiliser une partie de mon fond comme motif. Pour cela, je duplique mon header et fusionne tous les calques (Maj + Entrée), il ne me reste plus qu'à utiliser la même méthode.

Spoiler:
 

Évidemment on ne le voit pas énormément. Je retape mon texte directement sur mon header et le passe en mode Produit. J'ai également ajouté une ombre portée en guise de lueur.

Spoiler:
 

Pour styliser un peu plus mon texte, je vais utiliser une branche de mon render à feuilles. Je vais donc découper la partie qui m'intéresse.

Like a Star @ heaven Plus d'info sur la découpe

Spoiler:
 

Je vais ensuite la placer comme je le souhaite. Pour faire pivoter un calque, clic droit > Transformation manuelle > Angle. Pour le redimensionner, Paramétrages manuel ou Redimensionner le calque (manuellement). J'utilise ensuite le pinceau pour incruster le tout à mon texte.

Spoiler:
 

Les finitions



Pour ajouter un peu de lumière à tout ça, je crée quelques lueurs au pinceau doux (avec un flou gaussien en plus si nécessaire) que je passe en mode Superposition.

Spoiler:
 

Mon texte et par conséquent mon côté gauche est plus coloré et saturé que l'autre. Je vais ici dupliquer mon header et fusionner tous les calques de cette copie. J'augmente la saturation et colle le résultat sur mon header original. Il ne me reste qu'à effacer ce que je ne veux pas.

Spoiler:
 

Je vais maintenant ajouter un peu de relief et de contraste à mon header. Pour ça, je crée un nouveau calque que je remplis de gris. Je le passe en mode Incrustation et utilise un pinceau noir et blanc pour assombrir les zones d'ombre et relever les reflets. Pour masquer les coups de pinceau, j'applique un flou gaussien. N'hésitez pas à effacer les zones qui ne vous conviennent pas.

Spoiler:
 

Si nécessaire, je diminue l'opacité du calque.

Spoiler:
 

Je duplique et fusionne le tout une dernière fois. Sur cette copie, j'utilise le plugin dégradé en mode Suivi des gris.

Spoiler:
 

Je colle le résultat sur mon header en mode Maximum à opacité 50.

Spoiler:
 

Pour finir, j'utilise un calque de réglage.

Spoiler:
 

Le cadre



Maintenant que j'ai le tout, je peux créer ma forme et finir cette partie du design !

Like a Star @ heaven Plus d'information sur les formes spéciales

header
avatar
En ligne

Medium

Directrice

Bons Points (BP) : 1799
MessageSujet: Re: Créer un design de A à Z   Ven 15 Avr - 10:07

La barre de navigation



En théorie



Les barres de navigation peuvent prendre plusieurs formes : un simple texte (dans ce cas-là on ne fait généralement pas d'image), des images-boutons séparées, ou une barre reliée. Dans tous les cas, une chose importante : la continuité. Il faut toujours faire attention que les boutons s'enchainent correctement.

On doit donc d'abord identifier les cas possibles, de manière générale, invité et connecté. Sur la plupart des forums, les barres de navigation contiennent ces boutons-là :

Invité (= non connecté) : Accueil - FAQ - Recherche - Membres - Groupes - Inscription - Connexion (certains forums cachent néanmoins les pages membres et groupes, à vous de vous adapter)
Connecté : Accueil - FAQ - Recherche - Membres - Groupes - Profil - Messagerie - Déconnexion

Il faut donc prendre en compte que le bouton "Groupes" devra être rattaché autant à "Inscription" qu'à "Profil". Smile

En pratique



De mon côté, je commence par faire l'une des deux versions, sans pour l'instant me préoccuper d'adapter les boutons. A noter aussi que sur mon schéma, la barre de navigation est inclinée. Dans ce cas-là, on commence par la faire horizontale. Ensuite, c'est à voir avec votre codeur/vous-même si vous utilisez le CSS pour l'incliner ou si vous la tournez directement dans le logiciel. Wink

Ici, je me suis contentée d'un texte sans effet doublé de quelques lignes aux couleurs de mon header.

Spoiler:
 

Pour faire la deuxième version, je prends garde à ne pas déplacer mon texte, pour ne pas que les lignes soient décalées (on ne veut pas ce genre de résultat Euuuuh)

Spoiler:
 

Enfin, pour le découpage également on fait attention à chaque pixel pour ne pas en doubler ou en oublier certains.

Spoiler:
 
avatar
En ligne

Medium

Directrice

Bons Points (BP) : 1799
MessageSujet: Re: Créer un design de A à Z   Ven 15 Avr - 10:07

Les icônes de statut



Késsécé



Par "icônes de statut", ou tout simplement "icônes", on entend les images nouveaux/pas de nouveaux messages/verrouillé des forums et des sujets. Pour l'instant, on ne va se concentrer que sur celles de l'index.

Il y a deux choses auxquelles penser lorsque l'on crée nos icônes :
- la lisibilité ; on doit pouvoir différencier facilement les forums où il y a des nouveaux messages de ceux où il n'y en a pas.
- la forme ; selon la structure que vous aurez choisi, vos icônes pourront prendre différentes formes.

Exemples:
 

De notre côté



Pour mon design, je vais choisir la simplicité car le codage "penché" donne déjà une impression de chargé. Je vais donc simplement reprendre des morceaux du fond de mon header pour mes icônes :
Old old New new Lock lock
La différence de tons permet d'identifier rapidement le message.
avatar
En ligne

Medium

Directrice

Bons Points (BP) : 1799
MessageSujet: Re: Créer un design de A à Z   Ven 15 Avr - 10:07

Une première maquette



Hé oui, parce que maintenant que l'on a les trois éléments "principaux", ceux que l'on voit en premier lorsque l'on arrive sur un forum, il est important de se rendre compte si le tout, une fois assemblé, reste harmonieux. Alors on remonte ses manches et on y va !

Voyez grand ! En terme de largeur, je choisis toujours au moins minimum 1300 pixels (ici, mon header en fait 1000, donc ça me permet d'avoir de la marge sur les bords pour aussi visualiser le fond). En hauteur, vous pouvez commencer à 1500 et agrandir la zone de travail par la suite si nécessaire.

Commençons par le cadre. Si je suis mon schéma, mon header et tout le forum sont encadrés par une bordure assez épaisse.

Spoiler:
 

N'hésitez pas à renommer vos calques pour plus de clarté. ^^

On continue avec la mise en place de la barre de navigation.

Spoiler:
 

Puis on finit avec la structure des catégories. J'anticipe même avec le Qui est en ligne pour savoir quelle forme il prendra.

Spoiler:
 

Ne vous encombrez pas avec les textes, ils ne feraient que rendre ça plus brouillon que ça ne l'est déjà, nous n'avons pas besoin d'entrer dans le détail. Razz

maquette
avatar
En ligne

Medium

Directrice

Bons Points (BP) : 1799
MessageSujet: Re: Créer un design de A à Z   Ven 15 Avr - 10:07

Le QEEL



Q... quoi ?



Le Qui est en ligne (mais c'est bien long alors on dit QEEL) prend, depuis que la mode est à la personnalisation des templates, de nombreuses, nombreuses formes. Donc je ne vais pas tout citer ici. Razz Il faudra donc, dans tous les cas, vous adaptez à la structure prévue pour le forum.

Et concrètement ?



Dans mon cas, j'ai déjà esquissé la forme de mon QEEL dans ma maquette. Je commence donc par isoler cette partie-là :

Spoiler:
 

Je veux en fait que mon image prenne la forme du haut en finisse en dégradé. Je vais donc devoir jouer avec les masques et les fondus pour créer ça, en réutilisant le fond de mon header.

Like a Star @ heaven Plus d'info sur les fondus

Spoiler:
 

Il ne me reste plus qu'à ajouter mon texte :

Spoiler:
 

Puis à découper et enlever les éléments de la maquette :

Spoiler:
 

En parlant de maquette, n'hésitez pas à le tester !

Spoiler:
 
avatar
En ligne

Medium

Directrice

Bons Points (BP) : 1799
MessageSujet: Re: Créer un design de A à Z   Ven 15 Avr - 10:08

Optionnel : les hauts/bas et titres de catégories



Dans mon exemple, les catégories ont une forme particulière en haut, qui ne peut pas se reproduire en simple codage. Il faudra donc une image pour cet effet. Ici je peux imaginer plusieurs versions : garder tel quel, une simple couleur de fond et le titre écrit simplement dessus ; mettre une image de fond, la même pour toutes les catégories, de la même façon que mon QEEL et le titre soit une image avec, toujours, le même style que le QEEL, soit un texte simple ; ou même un fond différent pour chaque catégorie avec le titre intégré dessus.

Encore une fois, c'est à vous de voir comment vous adapter à votre structure. Smile

Spoiler:
 
avatar
En ligne

Medium

Directrice

Bons Points (BP) : 1799
MessageSujet: Re: Créer un design de A à Z   Ven 15 Avr - 10:08

Les derniers éléments



Vous pensiez que c'était fini ? :rire: Plein de petits éléments nécessitent encore un peu de travail : nous ne nous sommes occupés que de l'index. ^^

Faisons le tour. Lorsque l'on est dans un forum, face à la liste des sujets, on a besoin :
- des icônes de statut pour les sujets, c'est-à-dire nouveaux/pas de nouveau message/verrouillé mais aussi note/annonce/annonce globale, chacun ayant deux versions : nouveaux et pas de nouveau message.
- un bouton Nouveau sujet

Et une fois que l'on entre dans un sujet :
- toujours ce bouton Nouveau sujet, mais aussi Répondre au sujet et sa version verrouillée
- les boutons d'édition, citation et modération (suppression, IP, rapports...)
- des boutons pour le profil de l'utilisateur —qui dépendent de ce que l'administrateur a choisi d'afficher—, en règle générale, Profil, MP, Email, Site, En ligne.

Les icônes de statut, le retour



Nous voilà donc repartis pour ces icônes ! Souvent, elles ne sont que des versions miniatures de celles de l'index, avec une variante pour les messages spéciaux (notes et annonces), mais n'hésitez pas également à en créer de nouvelles. Razz

Ici aussi, la forme pourra dépendre de la structure de la liste des sujets, mais on reste en général sur un format relativement petit, entre 30 et 60 pixels de large comme de haut.

Je vais pour ma part me contenter de reprendre mes icônes de l'index :

Old New new Lock lock

Messages spéciaux : Old ms New ms new

Les petits boutons



Pour finir ! Hé oui, enfin. :=): Pour tous les boutons qui entourent les messages, un simple texte fait généralement l'affaire : ils sont partout, ils ne doivent pas attirer plus le regard que le contenu du message ; contentez-vous de simple. Razz

boutons
avatar
En ligne

Medium

Directrice

Bons Points (BP) : 1799
MessageSujet: Re: Créer un design de A à Z   Ven 15 Avr - 10:09

Optionnel : détailler la maquette



Si vous en avez le courage, vous pouvez vous lancer dans le détail de la maquette ! Texte, couleur des liens,... De nombreuses informations peuvent s'y trouver, et plus elle est précise, plus il sera facile pour la personne en charge de la coder (si ce n'est pas vous), de se repérer et d'avoir un résultat le plus proche de vos attentes. Smile

Pour cela, je vous conseille d'avoir deux versions .pfi de votre maquette : la première avec les images "détachées", comme ce que l'on a fait précédemment ; la deuxième avec en calque fond la première maquette aplatie et les calques utilisés pour le texte. Vous pouvez ainsi modifier l'une ou l'autre plus aisément qu'en ayant des calques images mélangés aux calques textes.

maquette

Si vous avez encore plus de courage, vous pouvez même faire une version pour la liste des sujets et pour l'affichage des messages !

Conclusion



Et nous y sommes ! Maintenant filez ça à votre codeur et reposez-vous. Euuuuh

J'espère que ce tutoriel vous aura aidé à identifier les étapes de la création d'un design avec Photofiltre, et n'hésitez pas à toquer à la porte de la salle de profs si vous avez un besoin d'un coup de main. Wink



Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
Je soussigné(e), Mewyn, accepte qu'un directeur reposte tous mes tutoriels tel que je les ai rédigés.
___________________


Les forums des SoPiens
GraphX*Style


 

Créer un design de A à Z

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» La SHOUTBOX d'Help-in-Design.
» Help in Design #Livejournal
» Nouveau Design !
» quel est le meilleur design pour mes Loop??
» [TERMINE] Design Noël

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Arts plastiques :: Photofiltre-
Sauter vers:  
Espace Admin du site

©2008-2016 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants