Header

Partagez | 

[Astuces] Faire une maquette de design pour forum

Message Sujet: [Astuces] Faire une maquette de design pour forum   Mer 22 Oct - 11:13

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Hello Smile

Souvent, on nous demande comment réaliser une maquette graphique d'un thème pour forum. Pour ceux qui ignorent de quoi je parle, voici quelques exemples :


Nous allons donc voir ici comment réaliser ce genre de créations qui sont très utiles quand vous prenez en charge une commande graphique. Pourquoi ? Tout simplement parce qu'elle permet à votre client de voir en un coup d'oeil ce que rendra son design une fois terminé. Du coup, cela vous évite de refaire 50 fois les éléments indépendamment (et de tout redécouper ^^).

Idea Pré-requis :
  • Connaitre un minimum photoshop,
  • Avoir les éléments nécessaires pour réaliser le design (images + dimensions),
  • Savoir utiliser les dossiers/groupes de calques,
  • Savoir utiliser les repères,
  • Savoir utiliser les formes vectorielles,
  • Savoir utiliser les masques de calque,
  • Savoir utiliser les objets dynamiques,
  • Savoir utiliser l'outil tranche.


Rassurez-vous, si vous n'êtes pas à l'aise avec l'un de ces points, j'y reviendrai en vitesse.

Allons-y !

Idea Tout au long de ce tutoriel, je prendrai en exemple une commande graphique que j'ai réalisé.

On prépare le terrain


Quel que soit le forum sur lequel vous allez devoir travailler, vous allez toujours partir d'élements communs :
-> un fichier psd de dimensions 1200*1200 (tout en sachant qu'on pourra être amené à modifier la hauteur si besoin)
-> 6 dossiers "de base" dans votre psd :
* fond
* header
* nav
* index qui contient 3 dossiers : catégorie, qeel, en-tête
* forum qui contient 3 dossiers : sous forums, sujets, autres
* dans un message qui contient 3 dossiers : message1, message2, autres

Commençons par ça.

-> On crée un document avec un fond transparent de dimensions 1200*1200
-> On crée des dossiers/groupes de calque (ils sont vides pour le moment)

Nous en sommes là :
Spoiler:
 

Ensuite, avant de réellement nous lancer dans la conception de la maquette, il faut continuer à préparer le terrain. En général, on utilise ce principe pour des commandes graphiques. Il est de plus en plus fréquent à l'heure actuelle que les forums aient des templates modifiés. Il faut donc adapter notre maquette à ceux-ci.

Dans mon cas, voici l'index du forum : clic.

-> le forum fait 900px de large (par forum j'entends le bloc qui contient les messages, sous forum, etc.). On va donc placer 2 repères :
* un à 150px
* un à 1050px
Idea Pour cela, on va faire Affichage >> nouveau repère >> vertical : 150px puis la même chose avec un repère vertical de 1050px.
Vous avez normalement 2 barres bleu ciel qui apparaissent.
Spoiler:
 

-> Ensuite, il faut une bannière de 330px de haut. On va donc ajouter un repère horizontal cette fois à 330px du haut.
Idea Pour cela, on va faire Affichage >> nouveau repère >> horizontal : 330px
Spoiler:
 

Idea Si besoin, vous pouvez changer la couleur et le style de trait des repères (pour mieux les faire ressortir de votre création par exemple). Pour cela, allez dans Edition >> préférences >> Repères, grilles et tranches.

-> Maintenant, on va reproduire les catégories de l'index dans le dossier "index >> Catégorie"
* On va commencer par créer une forme vectorielle rectangulaire (peu importe la couleur, on la modifiera comme il le faut en l'adaptant à notre design).
Spoiler:
 
* On ajoute les onglets :
~~ n'hésitez pas à les mettre dans un nouveau dossier
~~ utilisez la forme vectorielle aux bords arrondis
Spoiler:
 

On a donc notre base de prête, on va pouvoir commencer à bosser.

Le fond


Dans ma commande exemple, le fond était libre. On va donc, pour le moment, mettre une couleur de fond uni. On adaptera ensuite en fonction de la bann' et du reste du design. Pour cela, on va se placer sur le calque 1 (celui qui a été créé au départ et qui est transparent)
Spoiler:
 
et on va ajouter un calque de remplissage en cliquant sur cet icone et en choisissant "couleur unie".
Spoiler:
 

A vous de choisir la couleur que vous voulez mettre Smile Voilà pour moi.
Spoiler:
 

Le header


On attaque maintenant la bannière. Ici, 2 solutions :

soit le membre vous a donné une taille fixe. Dans ce cas, il va falloir la respecter. Pour cela, on va prendre l'outil "forme vectorielle", tracer un rectangle et le redimensionner.
Par exemple, supposons que le membre veut une bannière de 750px de large sur 300px de haut.
Spoiler:
 
On va ensuite centrer horizontalement ce bloc, et le descendre un peu. Pour cela, je vous invite à lire [ce tutoriel] Wink
Spoiler:
 
Nous allons ensuite sélectionner cette forme (en faisant un ctrl + clic dans la fenêtre des calques), nous placer sur le dossier "header" et appliquer un masque de calque (en cliquant sur cet icone ).
Idea Les masques de calque, qu'est-ce que c'est ?
Et nous allons masquer ce calque (qui ne sert en fait que de patron pour les dimensions à respecter).
Spoiler:
 
Tout ce que nous allons mettre dans ce dossier "header" ne dépassera pas la dimension donnée Smile
Spoiler:
 

soit le membre vous a dit que cela devait faire toute la largeur. Dans ce cas, pas de contrainte, si ce n'est une hauteur pas trop trop grande Wink

Dans tous les cas, l'étape suivante est la même : je créé ma bannière dans ce dossier.
Spoiler:
 

Exclamation Je sais ce que vous vous dites : "Hey mais attend ! Tu devais pas respecter une hauteur de 330px ? C'pas pour ça qu'on avait mis un repère ??". Excellente remarque !
Cependant, si vous regardez bien ce que j'ai proposé, avec une hauteur de 330px, je n'aurais que la ville et mon texte "Obscuria" serait trop grand par rapport à la hauteur du header. J'ai donc triché un peu en agrandissant le header. L'avantage des maquettes, c'est que vous donnez un aperçu global de votre création. De ce fait, même si certains points de la commande ne sont pas respectés, cela peut passer car le membre voit le rendu final Smile

La barre de nav


Ici, c'est le même principe que précédemment :
Soit on vous a donné des tailles fixes, dans ce cas, masque de calque sur le dossier "nav" pour que les dimensions soient respectées.

Soit vous êtes libre, dans ce cas, lâchez-vous ^^

Quoi qu'il en soit, comme pour la bannière, on va faire toute la création de la barre de nav' dans le dossier "nav".
Ici, vous avez 2 choix : soit tout mettre sur le même calque de texte, soit faire bouton par bouton. Quoi qu'il en soit, nous verrons à la fin comment faire pour tout découper rapidement Smile

Voilà donc pour moi :
Spoiler:
 

Idea N'hésitez pas à descendre le groupe "catégorie" si comme moi, il était trop proche de la barre de nav.

L'index


On va maintenant attaquer la page d'index. On a déjà un peu commencé en faisant le bloc "de base" et les onglets, on va donc poursuivre.

Les catégories


Tout d'abord, il va falloir faire en sorte que notre maquette ressemble trait pour trait au forum.

Si on reprend mon exemple, j'ai ça pour les catégories :
Spoiler:
 

Donc en gros, je vais devoir :
-> laisser un espace pour le nom de la catégorie (ça sera une image qu'il faudra designer) : ici, je vais mettre une forme vectorielle de la taille fournie dans la commande, c'est à dire 164px de large sur 64px.
Spoiler:
 
-> laisser un espace pour les boutons de l'index (old, new, verrouillé) : même remarque que précédement, j'utilise une forme vectorielle de la taille adéquate pour avoir le gabarit du bouton (dimensions : 75*75)
Spoiler:
 
-> une image + le rendu au survol
Spoiler:
 
-> le titre du forum + les sous forum : ici, on va le faire une fois :
Spoiler:
 
ensuite, on va cliquer sur nos 2 calques de textes dans la fenêtre des calques et faire "clic droit >> convertir en objet dynamique". On va ensuite dupliquer cet objet 2 fois et les placer comme il faut.
Spoiler:
 
Ce qui est cool avec les objets dynamiques c'est que si vous en modifiez un, cela se modifiera partout en même temps. Pour le modifier, il vous suffit de double cliquer sur sur votre calque.
-> le bloc "dernier message" : même principe que précédemment : on en fait un
Spoiler:
 
on sélectionne tous les calques de ce bloc, on convertit en objet dynamique, on duplique 2 fois et on place comme il faut.
Spoiler:
 

Et finalement, on ajuste la taille de l'image (Image >> taille de la zone de travail)
Spoiler:
 
et le cadre "catégorie"
Spoiler:
 

Tout est prêt, on va pouvoir passer à l'étape "création".

Idea Ici, on s'est vraiment contenté de copier/coller ce qui existe déjà Smile
Idea N'hésitez pas à faire du ménage dans votre psd en créant des dossiers et sous-dossiers Smile


On va maintenant poursuivre avec les boutons des catégories sur l'index. Ici, c'est simple :
-> dans le dossier "forum1", on va créer un dossier "old" dans lequel on va designer notre bouton "old"
-> dans le dossier "forum2", on va créer un dossier "new" dans lequel on va designer notre bouton "new"
-> dans le dossier "forum3", on va créer un dossier "lock" dans lequel on va designer notre bouton "lock"

Moi je reste sur un truc simple : un texte simple dans lequel j'intègre en masque d'écrétage ma bann.

Spoiler:
 

Ensuite, on va commencer à adapter nos couleurs au design. Par couleurs, j'entends : la catégorie + les textes, et on va commencer à bosser le fond aussi.

Spoiler:
 

Ça commence à prendre forme ^^

On va maintenant nous occuper de la mise en page du titre des catégories.
Spoiler:
 

Cette partie est terminée ! On attaque la suite de l'index ^^

Le QEEL


On va, à présent, faire le QEEL. Pour cela, on va commencer par faire la même chose que précédemment, c'est à dire du "copié/collé" de la structure et du texte.

Idea Placez bien le tout dans le dossier QEEL Wink

Spoiler:
 

Ensuite, il ne nous reste plus qu'à adapter le QEEL à notre maquette, donc régler les détails de couleurs et faire les images qui manquent Smile
Spoiler:
 

Idea Dans la commande utilisée en exemple, je n'ai pas eu à faire l'en-tête. Mais il faut savoir que, dans le cas où l'on vous demandait de le faire, il faudrait penser à l'ajouter à votre maquette (voir par exemple les maquettes de SoP fournies en exemple Wink ).

Hop ! L'index est terminé Smile
Spoiler:
 

Dans un forum


On va continuer avec l'intérieur d'une catégorie, par exemple :
Spoiler:
 

Première étape : refaire, comme nous l'avions fait sur l'index : un copier/coller de la structure.
Spoiler:
 

Idea cette fois, on va masquer le dossier "index" et faire toute cette partie dans le dossier "forum".

Ici, j'ai gagné du temps et reprenant certains élements de l'index.

On n'oublie pas également de préparer la place pour les boutons à réaliser, en reprenant les infos de la commande, à savoir :
Citation :
New ; Old ; Lock ; A ou annonce ; A ou Annonce d'une couleur différente pour montrer qu'il y a du neuf ; PI, P ou Post-it ; PI, P ou Post-it d'une couleur différente pour montrer qu'il y a du neuf. En... 65*65 environ.

Nouveau ; Répondre ; Verrouillé en 150*50

Il ne me reste plus qu'à les styliser et faire 2 - 3 réglages et on a notre maquette à présenter "dans un forum".

Spoiler:
 

Dans un message


On va à présent attaquer avec la dernière étape "graphique" : les messages !

On va donc masquer le dossier "forum" et on va travailler dans le dossier "dans un message".

Et comme d'hab, on va reproduire à l'identique ce que l'on a sur le forum de base (sauf si la personne nous demande de changer la structure), et on adapte les couleurs à notre thème. Voilà pour moi :

Spoiler:
 

On a donc nos 3 maquettes. La prochaine étape = le découpage ^^

Idea J'ai passé le message 1 en objet dynamique et je l'ai dupliqué pour le message 2. De cette façon, je peux modifier rapidement les couleurs/taille de typo,... pour les 2 messages Smile

Au final


Au final, ce sont 3 maquettes que vous allez rendre :


Si le membre qui vous a passé la commande valide vos créas, dans ce cas, il faut attaquer la phase découpage. C'est parti !

Le découpage


Alors c'est parti pour la découpe ! Ici, vous allez voir, ça va finalement aller assez vite ^^

Tout d'abord, on va enregistrer notre maquette sous un autre nom : en lui ajoutant "découpe" par exemple. De cette façon, on va pouvoir découper tranquillement, tout en gardant la maquette entièrement modifiable de coté ^^

Ensuite, on va commencer par récupérer notre header. Pour cela, on va se placer sur le dossier "header" dans la fenêtre des calques, puis, on va faire "clic droit >> convertir en objet dynamique" On va ensuite double cliquer sur cet objet, on va le recadrer avec l'outil "recadrage" et on enregistre pour le web (Fichier >> enregistrer pour le web et les périphériques)
Spoiler:
 

J'ai donc mon header clic.

-----

Etape suivante : Le fond. On retourne sur notre "maquette-decoupe". On va sélectionner tous les calques "fond" et on va convertir le tout en "objet dynamique" une fois de plus. On ouvre l'objet.
Ici, mon fond est un fond qui doit se répéter. Du coup, je vais découper une partie de celui-ci : pour cela, je prends l'outil de sélection rectangulaire, je choisis dans les options "taille fixe : 200px de large du 200px de haut"
Spoiler:
 
Je place mon rectangle sur mon image
Spoiler:
 
Puis je fais : Image >> Recadrer
Et finalement, j'enregiste pour le web.
Idea Comme c'est le fond, on va l'enregistrer en .jpg pour alléger le chargement de la page Smile
Spoiler:
 

Voilà mon fond : clic.

-----

Etape plus délicate, la barre de nav'. Le début reste le même : on prend le dossier qu'on convertit en objet dynamique, on va dedans. On va ensuite s'aider de [ce tuto] (méthode 2) pour découper l'image.

Voilà ma barre de nav avant découpage :
Spoiler:
 
Après découpage :
Spoiler:
 

-----

On poursuit avec le reste de l'index.

On va convertir nos dossiers "lock", "new" et "no new" de l'index en objet dynamique. On va ensuite double-cliquer sur chacun d'eux et les enregistrer pour le web.
Idea Il se peut que l'image soit parfois trop grande... Dans ce cas, il va falloir la recadrer comme il faut. Pour cela, on va créer un calque de forme rectangulaire de la taille souhaitée (dans mon cas : 70px de large sur 56px de haut), que l'on va placer sur notre bouton.
Spoiler:
 
On va ensuite sélectionner ce calque en faisant un "CRL + Clic" sur la fenêtre des calques, puis on va faire Image >> Recadrer. Notre image a à présent la bonne dimension. Il nous suffit de supprimer le calque de forme rectangulaire et de sauvegarder.

Nous avons les boutons de l'index Smile
Spoiler:
 

On garde le même principe pour découper le qeel. Moi je n'ai qu'un texte. Je vais donc passer celui-ci en objet dynamique, double cliquer dessus et l'enregistrer.
Spoiler:
 

Sur l'index, il nous reste les titres de catégorie à sauvegarder. Je pense que vous avez saisi comment faire : objet dynamique > double clic > recadrage si besoin > sauvegarder pour le web.
Spoiler:
 

L'index est terminé Smile

-----

Pour tout le reste de la maquette, le principe est le même.

Idea Concernant les boutons "citer, éditer, supp, i" et les boutons de profil, vous pouvez utiliser la même méthode que pour découper la barre de nav'. Gains de temps garanti Wink

Voilà toutes les dernières images pour mon thème :
Spoiler:
 

Finalement, ça fait gagner un temps fou une maquette non ? Smile Pour les couleurs, il suffit ensuite de récupérer celles que vous avez mises sur votre création et de les reporter dans ta CSS Smile



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, Miettes,  accepte qu'un directeur reposte le tutoriel "Faire une maquette de design de forum" tel que je l'ai rédigé.

Revenir en haut Aller en bas
[Astuces] Faire une maquette de design pour forum
Page 1 sur 1
 Sujets similaires
-
» Comment faire une séparation pour forum ?
» Problèmes pour le design du forum
» Faire apparaitre TeamSpeak 3 sur son forum
» Design-Style, Forum de graphisme
» Recherche un graphiste pour forum Xooit
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Arts plastiques :: Photoshop+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens