Header

Partagez | 

Créer un design sur Gimp

Message Sujet: Créer un design sur Gimp   Mar 9 Aoû - 21:31

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Agnïeszka

Directrice
Bons Points (BP) : 1439
Voir le profil de l'utilisateur
Bonjour les sopiens !

Voyons comment créer un design complet sous forme de maquette sur Gimp.
On va commencer par préparer le terrain et ensuite préparer chaque élément du thème.

Pour rappel, une maquette est une représentation en image de votre forum à la fois dans les éléments graphiques et dans les éléments de codage. Voici un exemple de maquette.

On prépare le terrain



On trouve une petite idée


Avant de commencer votre maquette, je vous conseille de regarder ce tutoriel.
Il vous faut donc une idée, des images, une palette de couleur et, idéalement, un schéma !

Ce schéma vous permettra de voir un peu où vous allez, ça vous donnera une idée générale du codage et donc des images dont vous avez besoin.

Pour ce tutoriel, je vais prendre comme thème Le petit Poucet
J'ai choisi cette image de base.
Au niveau des couleurs, voici ma palette

Et voici mon schéma, pas besoin de détailler, le but est juste d'avoir une idée du codage.
(D'habitude je fais sur papier mais je n'avais pas de quoi prendre une photo)
Mon schéma:
 

Préparez le logiciel



Dans un premier temps, on va ouvrir un nouveau document, un graaaand document. Je vais prendre 1300 de largeur sur 2300 de hauteur.

Les groupes


Ensuite, je vais créer des groupes afin d'organiser un peu tout ça. Dans une maquette, c'est important de s'organiser à un moment où un autre, le codeur aura besoin de s'y retrouver pour récupérer les éléments.

Du coup, on va faire des groupes !
Voici les groupes que je fais :
♦ Bannière
♦ Barre navigation
♦ Index
- PA
- Catégories
.New
.Old
.Look
-QEEL
♦ Fond


Les repères


Ensuite, pour s'y retrouver en terme de taille, on va placer des repères. Pour cela, il suffit de faire Image->Guide->Nouveau guide
Et ensuite, vous pouvez entrer une valeur pour placer vos guides aux endroits qui vous conviennent.

J'en place un :
- Sur le bas de la hauteur ma bannière
- Sur le haut et de le bas de la hauteur de ma barre de navigation
- Sur le haut, le bas, la gauche et la droite de mes catégories
- Sur le haut et le bas de mon QEEL
- Sur le cadre de mon forum

Par facilité, vous pouvez utiliser la fonction "Nouveau guide depuis la sélection"
Vous encadrez toute la partie pour laquelle vous voulez ajouter des guides et ça se place automatiquement.

Après, c'est pas toujours facile de placer des guides à l'oeil ou en évaluant les tailles en pixel.
Du coup, ce que je fais souvent, perso, je prends une capture d'écran de la partie de forum dont je veux évaluer la taille et je pose mes repères par rapport à cela Smile
Voici l'état de ma maquette au départ

Accès rapide


On a tout, on peut attaquer les différents éléments, voici le plan du tutoriel.
Bonne chance dans la création de votre design !

Le header
La barre de navigation
Les icônes de statut
Une première maquette
Le QEEL
Fond, Footer et décorations
Les derniers éléments


Dernière édition par Agnïeszka le Mar 9 Aoû - 21:35, édité 1 fois
Revenir en haut Aller en bas


Message Sujet: Re: Créer un design sur Gimp   Mar 9 Aoû - 21:31

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Agnïeszka

Directrice
Bons Points (BP) : 1439
Voir le profil de l'utilisateur
Le header


Bon, maintenant qu'on a les bases, on peut enfin commencer !
Pour cette maquette, je prends un document qui doit faire toute la largeur de mon forum, je choisis de ne pas faire un forum trop large, je mets plus ou moins 1000 px (1024 exactement) de largeur pour 457 px de hauteur.

J'y place mon image de base :
Spoiler:
 

Le fond

J'ajoute à celle-ciquelques textures :
Spoiler:
 

Ensuite, je crée un nouveau calque sur lequel je mets une version fusionnée de ma création (ctrl + A / Edition-Copier visible-Coller)
J'applique sur ce calque un filtre Effets d'éclairage afin de régler la lumière de ma création. Je mets une source de lumière en haut à droite (en savoir +).
Spoiler:
 

Le texte


Je prends la police Angeline Vintage et j'écris "Le Petit Poucet" sur ma bannière.
Spoiler:
 

Sur chacun de ces mots, j'applique un dégradé (noir-> blanc en mode lumière tamisée) et une ombre portée
Spoiler:
 

J'ajoute finalement un brush en dessous de mon texte. Dans celui-ci, j'applique une partie de ma bannière.
Spoiler:
 

Le cadre


Ma bannière sera encadrée par des barres via le codage, je ne mets donc pas de cadre.

Les finitions


J'ajoute quelques lueurs en mode écran.
Spoiler:
 

Un petit filtre de netteté (Filtre - Amélioration - Renforcer la netteté) :
Spoiler:
 

Je ravive un peu les couleurs avec une courbe (Couleur - Courbe) mais je gomme partout sauf sur le texte.
Spoiler:
 

Finalement, je refais une version fusionnée de ma création sur un nouveau calque et je passe ce calque en mode Multiplier à 50%.
Et voilà, ma bannière est finie Smile
Revenir en haut Aller en bas


Message Sujet: Re: Créer un design sur Gimp   Mar 9 Aoû - 21:32

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Agnïeszka

Directrice
Bons Points (BP) : 1439
Voir le profil de l'utilisateur
La barre de navigation


Créer sa barre de navigation


Il existe plusieurs types de barre de navigation. Juste du texte en image, du code, une barre continue, des textes avec des motifs,... bref, beaucoup de possibilité.
Cependant la méthode de réalisation est toujours la même.

Lorsque l'on fait la barre de navigation, il faut prévoir plusieurs versions. Une version "invitée", une version "connectée" et une version "connectée avec un nouveau message privé".

Idea Pensez à ces trois versions lors de la création si vous ne voulez pas de coupure visible entre les boutons selon la position en ligne ou hors ligne du membre.

Je me lance


Pour cette maquette, je vais faire un texte simple.
Je commence par écrire les mots de la barre de navigation : "Forum Faq Recherche Membres Groupes Profil Messagerie Déconnecté"

A celle-ci, j'ajoute un dégradé noir-blanc en mode Lumière douce.


Je fais la même chose pour la version "nouveau message privé" où je mets en avant ,grâce à une autre couleur, le bouton indiquant le nouveau message privé.


Et la version "déconnecté" où je mets en avant cette fois le bouton pour s'inscrire.


On découpe

Ensuite, il ne vous reste plus qu'à découper. Faites attention, dans le cas d'une barre continue à bien sélectionner au pixel près pour ne pas avoir de coupure.
Pour en savoir plus sur la découpe, n'hésitez pas à regarder ce logiciel.

Mes images:
 
Revenir en haut Aller en bas


Message Sujet: Re: Créer un design sur Gimp   Mar 9 Aoû - 21:32

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Agnïeszka

Directrice
Bons Points (BP) : 1439
Voir le profil de l'utilisateur
Les icônes de statut


On fait quoi ?


Déjà, les icônes de statut sont les images qui indiquent, sur chaque forum des catégories, si le forum contient un nouveau message, pas de nouveau message ou s'il est verrouillé.

Lorsque vous créez vos icônes, n'oubliez pas qu'elles doivent bien s'accorder à votre bannière.
Pour cela, plusieurs possibilités : prendre des morceaux de votre bannière, faire des images sur le même sujet, ... Dans tous les cas, pensez à respecter votre palette de couleur et le style de vos images.

Ensuite, très important également, pensez à la lisibilité. Lorsque les membres parcourent le forum, ils doivent pouvoir reconnaître au premier coup d’œil les nouveaux messages. Il est donc important de faire ressortir ce bouton par des couleurs, des formes, des images,... plus visibles ou particulières que les autres.

Dans mon cas


Pour cette maquette, j'ai choisi de prendre des images dans le même style que celles de ma bannière. J'ai pris une image très colorée pour mon nouveau message, une image simple pour l'absence de nouveau message et finalement un symbole (le cours d'eau, frontière naturelle) pour le bouton verrouillé.

Nouveau : Old :
Lock :

Revenir en haut Aller en bas


Message Sujet: Re: Créer un design sur Gimp   Mar 9 Aoû - 21:32

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Agnïeszka

Directrice
Bons Points (BP) : 1439
Voir le profil de l'utilisateur
Une première maquette


Je reprends maintenant ma maquette de départ.

En créant cette maquette, je vais avoir un aperçu global du rendu de mon forum, de l'accord des couleurs et des images mais aussi du codage et du fonctionnement de l'ensemble codage + image.
En outre, plus votre maquette sera détaillée et plus il sera simple pour le codeur de réaliser vos envies !
La structure


Pour commencer, je place les grandes bases de ma structure. Le rectangle représentant mon forum et les deux bandes encadrant celui-ci.
Deux barres supplémentaires, une au fond du forum et la seconde en-dessous de l'espace assigné à la bannière.

Spoiler:
 

Bannière et barre de navigation


Ensuite, j'ajoute ma bannière et les trois barres de navigation. Je place les trois barres dans un groupe. Je masque deux des trois barres afin de n'en avoir qu'une seule de visible à la fois (sinon ça fait brouillon ^^)

Spoiler:
 

Catégories


On a déjà nos trois icônes de statut mais les catégories demandent beaucoup plus d'éléments ! Il faut également penser au codage général et comprendre dans celui-ci : les descriptions, le dernier message posté, les sous forums, le titre de la catégorie, les titres de forum, le nombre de sujets et de messages.

La base

Je commence par placer ma base de codage, soit la forme de mes catégories ainsi que celles de mes forums. Je fais un cadre semblable à celui du forum et une forme arrondie dans un coin pour mes forums.

Spoiler:
 

Titre de forum et titre de catégorie

Pour le titre de catégorie, j'ai pris la même police que la bannière et j'y ai appliqué un dégradé noir-blanc en mode lumière douce.

Pour les titres de forum, j'ai pris la même police que pour la barre de navigation et j'ai simplement écrit mon texte sans ajouter d'effets.
Spoiler:
 

Description, Sous forums, dernier message et nombre de sujets/messages


Pour les descriptions, j'ajoute une case qui servira de fond à celles-ci et en délimitera l'emplacement. J'ajoute ensuite du texte dans une police simple de forum : verdana regular.

Pour les sous forums, je prends la couleur des liens, soit le rouge orangé de la bannière et j'ajoute à coté de ceux-ci un petit brush rond à bord dur pour bien marquer les espaces entre eux. Le tout, toujours avec ma police simple verdana regular.

Concernant le nombre de sujets/messages ainsi que le dernier message, j'écris tout avec Verdana Regular et je mets en avant le titre du dernier sujet (je le mets en rouge orangé, la couleur des liens) ainsi que le pseudo que je mets un peu plus grand que la date.

Spoiler:
 

Images


J'ajoute les icônes de forum que je vous ai montrées plus haut. Le lock était découpé pour bien prendre la forme du forum et une partie du old se cache derrière le forum afin d'ajouter un peu de profondeur.

Finalement, je fignole avec quelques décorations. Des cailloux en bas à gauche pour rappeler le petit poucet, un buisson en bas à droite et un oiseau en haut à droite dans le même style d'image pour habiller un peu l'ensemble.

Spoiler:
 
Revenir en haut Aller en bas


Message Sujet: Re: Créer un design sur Gimp   Mar 9 Aoû - 21:32

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Agnïeszka

Directrice
Bons Points (BP) : 1439
Voir le profil de l'utilisateur
Le QEEL


Attaquons maintenant le "Qui est en ligne ?"
A nouveau, pour cet élément, nous avons besoin de plusieurs éléments. Les éléments de base d'un QEEL sont les statistiques du forum, les anniversaires, les membres en ligne, les membres connectés il y a peu et les groupes du forum.

La structure

Une fois de plus, je commence par la base de codage, grossièrement, les cases.
Je fais trois cases, deux petites sur chaque coté et une grande au milieu. J'ajoute dans celle-ci une case plus claire qui renfermera le texte.
Je reste sans surprise dans le même style que mes catégories.

Spoiler:
 

Les titres

Pour le titre "Qui est en ligne ?", je reprends encore une fois le style de ma bannière. Même police, même dégradé, même ombre portée, vous commencez à connaître.

Ensuite, pour les titres de case, "Statistiques & Groupes", "Derniers connectés", "En ligne", je reprends la couleur des titres de forum ainsi que la police et je ne mets aucun effet.

Spoiler:
 

Le texte


Dans la liste des "Derniers connectés" et des "En ligne", je prends juste ma police basique "verdana regular" et je mets quelques pseudos indicatifs. J'ai également changé la couleur de leur pseudo en fonction du groupe auquel ils appartiennent.

Pour le "Statistiques et Groupes", je procède en trois parties. J'écris tout avec la police verdana regular. Je commence par les statistiques et je trace ensuite une ligne grâce à l'outil chemin (je trace ma ligne et je sélectionne ensuite "Tracer le chemin" et dans la fenêtre, je choisis 1px.
Finalement, j'ajoute les noms de groupe ainsi que les couleurs associées à ceux-ci.

Spoiler:
 

Quelques décorations


J'ajoute sur chaque cadre quelques cailloux à nouveau pour rappeler le petit poucet.

Je mets ensuite derrière les cadres de QEEL le personnage de l'ogre parlant au petit poucet.
Et voilà la fin du QEEL :
Spoiler:
 
Revenir en haut Aller en bas


Message Sujet: Re: Créer un design sur Gimp   Mar 9 Aoû - 21:33

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Agnïeszka

Directrice
Bons Points (BP) : 1439
Voir le profil de l'utilisateur
Fond, décorations et footer


On a fini le gros de la maquette, il ne nous reste plus qu'à fignoler.

Fond

Pour le fond, je remplis un premier calque d'une couleur simple (mon rouge orangé). Ensuite, sur un second calque, toujours avec l'outil remplissage, je remplis cette fois avec un motif. Je passe le calque du motif en mode lumière douce à 10% d'opacité.

Spoiler:
 

Décorations

J'ajoute quelques détails à ma maquette. Des cailloux sur le coté de la bannière, toujours pour rappeler le petit poucet. Ensuite, quelques plantes devant et derrière le centre du forum.

Spoiler:
 

Footer

Dernière partie de notre maquette ! J'ai pris une autre image dans le même style que ma bannière et j'ai placé l'élément dans le bas du forum.
Ainsi, mon objectif est atteint, je raconte, en accéléré bien sûr, l'histoire du petit poucet via le design.
En haut, j'ai le petit poucet dans la forêt. Au milieu, différents éléments qu'il croise dans la forêt, rivière, plante ainsi que le passage dans la caisse de l'ogre. Dans le QEEL, j'ai la discussion de l'ogre et du petit poucet et, finalement, dans le footer, le petit poucet qui l'emporte et vole les bottes de 7 lieues.

Voilà le résultat final :
Spoiler:
 
Revenir en haut Aller en bas


Message Sujet: Re: Créer un design sur Gimp   Mar 9 Aoû - 21:33

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Agnïeszka

Directrice
Bons Points (BP) : 1439
Voir le profil de l'utilisateur
Les derniers éléments


J'ai dit que c'était la maquette finale ? Ah bah j'ai menti
En effet, nous n'avons ici que l'index du forum. Il nous manque donc quelques éléments : les icônes des sujets, les images "Nouveau-Répondre-Verrouillé", les petits boutons dans les messages "Citer-Editer,..."

Evidemment, idéalement, il faut également faire une maquette pour la liste de sujets et les messages.

Icônes des sujets


Pour les icônes, je reprends l'icône nouveau message de mes catégorie et le "old" de mes catégorie. Je fais de même pour le lock sauf que je garde uniquement le caillou de la rivière. Je me contente de réduire la taille mais je garde les mêmes effets.

Ensuite, pour les post-it et annonce, je prends deux éléments, un buisson et le couteau du footer. Je fais deux versions. Lorsqu'il n'y a pas de nouveau message, je mets les images en grisé tandis que pour les nouveaux messages, je mets en couleur et j'ajoute un point d'exclamation dans la police de la barre de navigation avec un effet de dégradé et d'ombre portée.



Nouveau-Répondre-Verrouillé


Pour ces boutons, j'utilise la police de la bannière. Je prends ma couleur rouge pour le "Nouveau" et "Répondre" et une autre couleur pour "Verrouillé" afin qu'il ressorte.

J'y applique un dégradé noir-blanc en mode lumière douce ainsi qu'une ombre portée.


Petits boutons


Pour les boutons "Citer-Editer...", je me contente de la police de la barre de navigation en orange sans ajouter d'effets.





Conclusion

Si vous avez du courage, vous pouvez réaliser tous ces éléments dans le cadre d'une maquette de la liste des sujets et une maquette des messages.

Vous avez dans tous les cas terminé votre maquette, vous pouvez souffler un peu, c'est un travail de longue haleine pas vrai ?

En tout cas, si vous avez des questions, des soucis dans la création de votre design, n'hésitez pas à venir nous demander un petit coup de main. On vous aidera et vous guidera dans la réalisation 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), Agnïeszka, accepte qu'un directeur reposte tous mes tutoriels tel que je les ai rédigés.



Revenir en haut Aller en bas


Message Sujet: Re: Créer un design sur Gimp   

Mes clubs

Contenu sponsorisé

Revenir en haut Aller en bas
Créer un design sur Gimp
Page 1 sur 1
 Sujets similaires
-
» La SHOUTBOX d'Help-in-Design.
» Help in Design #Livejournal
» Nouveau Design !
» Problème d'affichage du design
» Aide pour "Design" de mon forum
Réponse rapide

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

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