AccueilFAQS'enregistrerConnexion

Partagez | 
 

 La Bible du grapheur en herbe.

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
caperucita
Mangeur de salades
Mangeur de salades
caperucita

Balance Separation
Separation
Age : 31
Messages : 217
Activité : 2082
Localisation : Dieppe (seine maritime)
Separation

MessageSujet: La Bible du grapheur en herbe.   Mar 3 Fév - 15:24

Bible du Grapheur en Herbe

Nombreux sont ceux qui réalisent des créations (signatures, wall, photomontages...) et qui compte sur leur talent propre pour les réussir…Cette technique fonctionne plutôt bien lorsqu’on a déjà un bon niveau, c'est-à-dire une bonne connaissance des outils du logiciel et de soi même (et éventuellement de ce que l’on souhaite obtenir). Hélas, pour ceux qui débutent dans le graphisme, c’est beaucoup plus compliqué…

En effet, non seulement les outils, les filtres… font peur mais la démarche créatrice demeurant inconnue (on a envie de faire mais on sait pas comment) « on part au hasard » pour obtenir un résultat très souvent décevant ou alors, on poste une « nouvelle création » dont on est un peu fier et qui se fait véritablement exploser de critiques !...
De quoi dégoûter du graph. non ?!

Si vous vous sentez concernés par ces désagréments, cette Bible est pour vous !

Sur la base d’une signature classique (entre 320x110px et 500*150px avec un render proposé par le site), cette bible tente de proposer une manière simple d’aborder la création en général. Nous éviterons les termes trop techniques ou trop rébarbatifs autant que possible et je compte sur l’avis et l’aide des « grapheurs de bonne volonté » pour étoffer au fur et à mesure ce qui devrait être à court terme, une aide évidente pour tous les passionnés du graphisme.

Termes employés le plus souvent :

Render : forme prédécoupée sans fond (personnages, objets, animaux, logos….)
Typographie : texte employé dans une création (nom du créateur le plus souvent, mais aussi, nom du render, poème, slogan….)
Brush (brosse en français) : outil permettant d’appliquer les couleurs, les effets….
Smudge (utilisation de brosses avec l'outil doigt) : outil permettant d’incruster un render dans un fond.
Incrustation : technique permettant d’intégrer n’importe quel render sur n’importe quel fond.
C4D : (l'origine du terme vient du logiciel Cinéma 4d) forme abstraite pouvant être rajoutée à la signature. 
Flow : « mouvement » dégagé par l’ensemble de la signature.
LP ou Large Piece : terme qui désigne une création sur un grand format.

Ok ! C’est parti !

Quels sont les différents éléments qui composent une signature classique ? Ils sont au nombre de 4 : le fond (derrière), le personnage ou render (devant), la typo (typographie) et le cadre (mise en valeur de l’ensemble).

[Vous devez être inscrit et connecté pour voir cette image]

Il s’agit donc d’apprendre à combiner ces 4 éléments afin de rendre la signature la plus harmonieuse possible.
Les 2 éléments prioritaires à combiner restent le fond et le render car, en général, on ne rajoute les 2 autres (cadre et typo) qu’à la fin… (J’ai bien dit en général). Le but du jeu est donc de faire en sorte que tous ces différents éléments aillent bien ensemble, on pourra alors parler d’harmonie colorée, visuelle etc.…

Toujours garder en tête cette idée d’harmonie !

La première étape consiste donc à choisir un render et de ce choix découlera tout le reste : cela entraînera le choix des couleurs, des formes du fond, des sources lumineuses…

Sommaire des notions de base proposées ici
-Format
-Couleur
-Lumière
-Cadrage (avec un tuto sur le cadre et un tuto sur le hors cadre )
-Composition
-Profondeur
-Typographie ou police (choix, emplacement + un tuto sur comment installer une nouvelle police )
-Tout sur le C4D 
-descriptif très complet sur les calques de photoshop 
-Smudge sur Photoshop + infos supplémentaires 

Le format :

Il s’agit de la taille de la signature, c’est un rectangle qui « signe » tous vos messages personnels sur un forum, et qui dit rectangle dit « forme allongée ». Il n’y a pas de règles strictes à ce sujet mais nous nous limiterons à une taille variant entre 320x110px et 500*150px. Il faut savoir une chose : plus le format est grand, plus il faut occuper son espace, c’est pour cette raison que l’on conseille aux débutants de ne pas se lancer trop tôt dans de grands formats avant d’apprendre à maîtriser le format signature.

[Vous devez être inscrit et connecté pour voir cette image]

Remarque : format wallpaper
Autres formats
------------------------------------------------------------------------------------------------------------

La couleur :

Limiter le nombre de couleurs est une obligation. Au début, trop (ou pas assez) de couleurs peut nuire à la lisibilité de l’ensemble. Une fois le render choisi, on peut s’inspirer des couleurs qu’il propose (3 ou 4 maxi) pour réaliser le fond. On pourra aussi, éventuellement utiliser juste une gamme de couleurs (monochrome).

[Vous devez être inscrit et connecté pour voir cette image]

Remarque : Même s’il s’agit de la solution la plus simple pour être sûr de ne pas se tromper, de nombreuses autres possibilités existent comme l’utilisation des couleurs complémentaires, ou d’une couleur dominante, ou encore d’opposer un render aux couleurs chaudes à un fond aux couleurs froides, ou encore utiliser les contrastes de couleurs…

[Vous devez être inscrit et connecté pour voir cette image]
--------------------------------------------------------------------------------------------------------------

La lumière :
apprendre à voir...

C’est peut être la notion la plus importante (et la plus difficile à acquérir) dans la création d’une signature. Comme dit plus haut, c’est souvent le choix du render lui-même qui induit l’emplacement et l’intensité de la lumière dans le fond.

[Vous devez être inscrit et connecté pour voir cette image]

Les zones les plus claires du fond devront être positionnées de façon logique par rapport au render, c’est indispensable !...Si, dans le render1 par exemple, la lumière venait d’en bas, la magie n’opèrerait pas et le robot semblerait collé sur le fond, sans lien aucun entre ce dernier et le fond.
--------------------------------------------------------------------------------------------------------------

Le cadrage :

Voici une autre notion importante : En fonction du render choisi, tout dépend de ce que vous souhaitez mettre en valeur. Est-ce le regard ? L’attitude ? L’action ?....Les 3 exemples qui suivent sont basés sur un ratio de 500x150px et ne sont que des propositions, juste histoire de montrer qu’il ne suffit pas de choisir un render pour réussir une signature et d’insister sur l’importance du choix du cadrage.

[Vous devez être inscrit et connecté pour voir cette image]

[Vous devez être inscrit et connecté pour voir cette image]

[Vous devez être inscrit et connecté pour voir cette image]

Conseils :
Éviter de trop « coller » le render aux bords du cadre.
Éviter les cadrages trop serrés où le fond devient quasiment inexistant (sauf bien sur pour mettre en valeur un élément précis du render, les yeux par exemple) 
Laisser de l’espace entre la direction des yeux et le bord.
Bien le placer dans la signature (taille et emplacement) 
Symétrie
Utilité du recadrage pour une signature ratée

En savoir plus : Il existe aussi le hors cadre où certains éléments peuvent déborder du cadre(voir un petit tuto plus bas) le cadre fragmenté, le cadre grunge, l’absence de cadre …

[Vous devez être inscrit et connecté pour voir cette image]
----------------------------------------------------------------------------------------------------------
____________________________________________________________________________

Le cadre....
[Vous devez être inscrit et connecté pour voir cette image]

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

...et le hors cadre
[Vous devez être inscrit et connecté pour voir cette image]
___________________________________________________________________________
-----------------------------------------------------------------------------------------------------------

La composition :
Cette notion rejoint un peu la notion de cadrage. Pour faire simple, il s’agit de construire une signature équilibrée en faisant en sorte d’éviter les zones trop vides mais je ne m’attarderais pas trop là-dessus car avec l’outil numérique il est assez facile de résoudre le problème (rogner la signature, rajouter un C4D …). On peut également laisser une zone vide volontairement pour y placer la typo.
Le mouvement général dégagé par la signature (lignes directrices ou flow en anglais) trouve ici toute son importance, voici quelques exemples : 

[Vous devez être inscrit et connecté pour voir cette image]

Tous les éléments participent à ce mouvement : le render bien sur mais aussi les brushes, C4D, objets, typo, effets de lumière…

Remarque : en France (et en Europe occidentale), notre cerveau est habitué à lire de gauche à droite et de haut en bas. Pour faciliter la lecture de votre signature, autant tenir compte de ces règles simples et éviter autant que possible les actions se déroulant de droite à gauche.

La profondeur :
Cette notion n’est pas indispensable à la création d’une bonne signature mais elle ajoute tout de même un « petit plus » à cette dernière. En effet, donner l’impression de profondeur entre, par exemple, le render et le fond permet « d’aérer » la signature, facilitant davantage sa lisibilité et le plaisir des yeux. Pour cela, les techniques sont nombreuses et juste en jouant sur les oppositions (render net/ fond flou ; render lumineux / fond sombre….) le résultat est souvent amélioré.

[Vous devez être inscrit et connecté pour voir cette image]

L’utilisation de différents plans est une autre façon de donner de la profondeur à votre image, parti pris réaliste ou non. La technique est relativement simple à comprendre, il suffit de respecter une logique claire. Pour un format assez petit tel que la signature, 3 plans suffisent (cf. Assassin en dessous).

[Vous devez être inscrit et connecté pour voir cette image]

La profondeur dans l’image est facilement réalisable en appliquant la technique du dégradé :
- du plus clair au plus sombre
- du plus net au plus flou
- du plus chaud au plus froid
-…

[Vous devez être inscrit et connecté pour voir cette image]

Remarque : La succession et le positionnement des différents plans entraînent le flow (mouvement de la bannière et donc du regard).
---------------------------------------------------------------------

La typographie
La typographie « typo » n'est pas une technique qui demande de grandes connaissances graphiques, mais elle reste néanmoins un élément qui pose véritablement problème à bon nombre de grapheurs.
Je vais donc vous expliquez ma propre façon de procéder.

Tout d'abord tout comme le cadre, la typo est l'une des finitions de la créa, on ne s'en occupe donc qu'une fois la créa terminée.

C'est la créa qui conditionne la typo en tous points :

-Son emplacement
-La Police/ Taille
-La couleur
-Le mouvement
-La décoration

Le placement :

Essayez de placer votre typo à l'endroit qui semble le plus approprié, c'est à dire un endroit où le fond n'est pas déjà bien bondé, de préférence unicolore, pour éviter qu'une partie de la typo devienne
difficilement lisible voir illisible.

[Vous devez être inscrit et connecté pour voir cette image]

Ici la typo est placée dans le fond blanc, d'une part elle permet de combler un vide et elle est également bien lisible.

Pensez donc a l'équilibre de votre créa, si vous avez un render à droite comme ci dessus, placez votre typo de préférence à gauche et vice versa.
Bien sur, il ne faut pas confondre symétrie et équilibre. Certaines bannières, comme celle avec un render imposant où centrée ne permettent pas cela, le tout est de trouver l'équilibre, ne pas surcharger un côté.
Quelques exemples :

[Vous devez être inscrit et connecté pour voir cette image]

[Vous devez être inscrit et connecté pour voir cette image]

Lorsque votre ban est parfaitement symétrique, essayez de trouver un emplacement qui ne casse pas cette symétrie comme ici :

[Vous devez être inscrit et connecté pour voir cette image]

...ou bien placez une petite typo discrète, qui ne perturbe pas beaucoup votre ban.

[Vous devez être inscrit et connecté pour voir cette image]

Pour ce qui est de la police, il n'y a pas de secret, tout dépend de votre appréciation, et surtout de vos gouts.
Je n'ai que quelques conseils par rapport à mes propres gouts.
Tout d'abord, si vous utilisez plusieurs mots, un titre, prenons un exemple : « The Dark Soldier » 
Demandez vous quel mot vous semble le plus important. Si vous voulez insister sur la noirceur de votre ban, ce sera « Dark » , ce mot sera donc le centre de votre typo. Utilisez une police juste pour ce mot, qui ne sera pas la même que pour le reste, utilisez une taille également plus grande. Par exemple 18pxl pour Dark, 14 pour le reste. Vous pouvez également faire un dégradé, 12pxl pour the, 14pxl pour soldier et 18pxl pour Dark, du moins accrocheur au plus accrocheur.
Ex:

[Vous devez être inscrit et connecté pour voir cette image]

[size=150]La couleur:[/size]

Ce qui nous amène à la couleur.
Prenons l'exemple de la bannière ci dessus. La typo suit les tons de couleurs de la ban, si par exemple « Fighter » avait été écrit en vert, ça aurait fait tache, et ce ne serait pas harmonieux, il faut donc essayer de respecter les tons de couleurs dominantes.
Cependant vous pouvez également faire des «rappels» c'est à dire utiliser une couleur très peu présente, afin de la «justifier» 
ex:

[Vous devez être inscrit et connecté pour voir cette image]

Ici le jaune de « Kid » Justifie le jaune dans les yeux du render.
La couleur la plus voyante, qui ressort le plus est principalement utilisée sur le mot que vous voulez mettre le plus en valeur (voir au dessus police/taille)

Le mouvement:

La plupart du temps on utilise une typo simple et sans réel mouvement, mais vous pouvez incruster votre typo, lui donner une courbe, utiliser la verticale, un effet de relief, voir de reflet... 
Les techniques ne manquent pas pour varier une typo, et il est recommandé de le faire, ce sont des techniques simples, et elle permettent de faire varier votre style, et ne pas rendre vos bannières similaires les unes les autres.

Par exemple sur la ban ci dessus, vous pouvez voir que les mots sont répétés dans le fond à faible opacité, c'est un effet simple qui donne un peu de profondeur.

La décoration:

Voilà pour terminer un point sur lequel j'insisterai particulièrement, la décoration, terme que j'utilise faute d'autre nom plus approprié, qui consiste à habiller votre typo.
Ce sont des petits détails qui la rendront plus agréable et plus travaillée.
Il existe d'innombrables techniques pour cela, les brushes, utiliser un contours sur certains mots...
Ex:

[Vous devez être inscrit et connecté pour voir cette image]

Ici un « tourbillon » entoure la mot natural, fait à la plume, ainsi que des rectangles en dégradé fait avec l'outil formes. Des effets très simples qui permettent de mettre la typo en valeur. A vous de faire preuve d'ingéniosité, vous pouvez l'encadrer, la souligner, il existe bon nombre d'astuces, les brushes vous seront très utiles également.
-------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------

Installer une nouvelle typo sur son ordinateur ?



-------------------------------------------------
C4D
-------------------------------------------------

QU'EST-CE QU'UN C4D ?

Un C4D, fait à partir du logiciel Cinéma 4D (d'où son nom) est une image rajoutant un effet à une de vos créations.
Il peut avoir plusieurs formes, et notamment plusieurs effets qui peuvent êtres multiples : explosions abstraites, constructions de lignes imaginaires et bien d'autres...
Ils sont souvent utilisés pour "remplir" un arrière-plan de création, mais on peut aussi l'utiliser pour en faire un effet, un brush, et un tat d'autre chose.
Si vous le voulez bien, passons aux exemples :

[Vous devez être inscrit et connecté pour voir cette image]

Sur cette création, à par le render et la typo (voir plus haut), cette création est faite de C4D, et de quelques filtres.
Cette créa réunis plusieurs C4D pour le fond.

[Vous devez être inscrit et connecté pour voir cette image]

Celle-ci n'est qu'un ensemble de C4D, à par la typo. il y en a encore plusieurs.

[Vous devez être inscrit et connecté pour voir ce lien] ... 058527.jpg

Et ceci, c'est un C4D. il y en à des milliers sur internet.
-----------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------

Ci-joint un super descriptif très complet sur la fenêtre des calques de Photoshop :
[Vous devez être inscrit et connecté pour voir cette image]

Le smudge ? c'est quoi donc ? sur Photoshop
Smudge est le nom anglais de l'outil doigt (smudge tool).

Ben ouais, c'est bien, mais à quoi qu'il sert ce machin là ? 

En gros, le smudge sert à "étaler" quelque chose (étonnant, non ?). On peut s'en servir aussi bien pour créer la base d'un fond, incruster un render dans une création, donner des effets divers et variés..etc.

Voilà pour la partie infos, on va passer maintenant à la partie pratique. Tout d'abord, pour trouver l'outil smudge, il faut faire un clique droit sur l'outil goutte d'eau. Une liste de trois outils apparaîtra, dont le fameux doigt donc :

[Vous devez être inscrit et connecté pour voir cette image]

Ensuite, vous pouvez régler les paramètres de smudge en cliquant sur le bouton en haut à droite :

[Vous devez être inscrit et connecté pour voir cette image]

Maintenant, il ne vous reste plus qu'à smudger votre création, en passant l'outil doigt comme vous le souhaitez. Voilà un exemple grossier de smudge à l'état "brut", c'est à dire qu'il n'y a aucun autre effet, seulement du smudge avec un brush rond à bord dur :

[Vous devez être inscrit et connecté pour voir cette image]

Voici maintenant quelques illustrations de ce que l'on peut faire avec cet outil.

[Vous devez être inscrit et connecté pour voir cette image]

[Vous devez être inscrit et connecté pour voir cette image]

Voilà pour les quelques exemples. En changeant les paramètres, les brushes utilisés, leur taille etc.. on peut donc arriver à faire énormément d'effets différents avec du smudge. A vous de faire vos propres essais maintenant que vous devriez savoir utiliser cet outil ! :)
Notez quand même que le smudge n'est pas obligatoire sur une création, on peut très bien s'en passer ! Évitez également d'utiliser trop souvent le même type de smudge sur vos créations afin qu'elles ne se ressemblent pas toutes à force. ;)
Suivant le thème de l'image, on n'est pas toujours obligé d'utiliser cet outil.
-----------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------

Voila les zamis si après ça il vous des questions bhein je serai quand même la pour y répondre


Juste le lien de la source par respect pour le créateur du tuto:
[Vous devez être inscrit et connecté pour voir ce lien]


[Vous devez être inscrit et connecté pour voir cette image]

[Vous devez être inscrit et connecté pour voir cette image]


Dernière édition par caperucita le Mar 3 Fév - 15:37, édité 1 fois
Revenir en haut Aller en bas
Shoki 鍾馗
Gérant
Gérant
Shoki 鍾馗

Vierge Separation
Separation
Age : 45
Messages : 2344
Activité : 4674
Separation
Awards Ami fidèle Awards Ami sympa
Awards Ami helper

MessageSujet: Re: La Bible du grapheur en herbe.   Mar 3 Fév - 15:34

J'avais déjà vu ce tuto, il est top.
Juste le lien de la source par respect pour le créateur du tuto:
[Vous devez être inscrit et connecté pour voir ce lien]


[Vous devez être inscrit et connecté pour voir cette image]
[Vous devez être inscrit et connecté pour voir ce lien]
[Vous devez être inscrit et connecté pour voir ce lien]|[Vous devez être inscrit et connecté pour voir ce lien]|[Vous devez être inscrit et connecté pour voir ce lien]|[Vous devez être inscrit et connecté pour voir ce lien]
Participation concours => [Vous devez être inscrit et connecté pour voir ce lien]|[Vous devez être inscrit et connecté pour voir ce lien]|[Vous devez être inscrit et connecté pour voir ce lien]


Revenir en haut Aller en bas
http://www.bushidan.net/
caperucita
Mangeur de salades
Mangeur de salades
caperucita

Balance Separation
Separation
Age : 31
Messages : 217
Activité : 2082
Localisation : Dieppe (seine maritime)
Separation

MessageSujet: Re: La Bible du grapheur en herbe.   Mar 3 Fév - 15:38

Oui tres pratique j'ai placé le lien sous le tuto :) merci shoki


[Vous devez être inscrit et connecté pour voir cette image]

[Vous devez être inscrit et connecté pour voir cette image]
Revenir en haut Aller en bas
dolce
La proprio
La proprio
dolce

Balance Separation
Separation
Age : 51
Messages : 16692
Activité : 25628
Separation
Awards Ami fidèle Awards Ami sympa
Awards Ami graphiste

MessageSujet: Re: La Bible du grapheur en herbe.   Mar 3 Fév - 16:27

Ça c'est du beau travail énorme merci mon ami


[Vous devez être inscrit et connecté pour voir cette image]



Comment envoyer vos créas concours => [Vous devez être inscrit et connecté pour voir ce lien]|[Vous devez être inscrit et connecté pour voir ce lien]|[Vous devez être inscrit et connecté pour voir ce lien]
***


Revenir en haut Aller en bas
http://mesamisetmoi.forumactif.com
Siouxie
Cuisinier
Cuisinier
Siouxie

Poissons Separation
Separation
Age : 59
Messages : 1687
Activité : 3699
Localisation : Nord
Separation
Awards Ami sympa Awards Ami flooder
Awards Ami graphiste

MessageSujet: Re: La Bible du grapheur en herbe.   Mar 3 Fév - 23:37

C'est super,merci je vais lire tout ça il y a plein de conseils à prendre.
caperucita


[Vous devez être inscrit et connecté pour voir cette image]
Revenir en haut Aller en bas
jaja
Gérant
Gérant
jaja

Vierge Age : 62
Messages : 11311
Activité : 16015
Localisation : Thailande
Awards Ami fidèle Awards Ami poète

MessageSujet: Re: La Bible du grapheur en herbe.   Mer 4 Fév - 3:52

Super ce tuto, merci


[Vous devez être inscrit et connecté pour voir cette image]
Revenir en haut Aller en bas
agathe
Sécurité
Sécurité
agathe

Capricorne Separation
Separation
Age : 69
Messages : 11904
Activité : 17279
Localisation : bien dans mes baskets
Separation

MessageSujet: Re: La Bible du grapheur en herbe.   Ven 6 Fév - 16:29

Voilà le A à Z pour démarrer avec toshop... avec du temps devant moi, je ne dis pas ...
Les définitions sont pour tous logiciels, et le peu que j'ai lu en diagonale m'oblige à dire : un grand merci, c'est vraiment idéal pour démarrer et même pour Redémarrer du Bon Pied !


Si le silex est la pierre de la guerre, le galet est celle de l'amour, polie par les eaux de la tendresse.
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: La Bible du grapheur en herbe.   

Revenir en haut Aller en bas
 

La Bible du grapheur en herbe.

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Le flocage "Ducros"
» NICOLACO - Challenge Halloween
» Présentation d'un grand grapheur (dans un futur très lointain ^^)
» I shot the sheriff (thomas)

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Mes amis et moi  :: Le restaurant (Partie graphique) :: Tutos exercices pratiques-