Connecte-toi

Se connecter

Garder en mémoire la connexion


Forums

Jours actifs 0

Pièces en banque 0

Ma bouille

Stats du forum

Aujourd'hui Total
Topics
Posts 12 messages
Membres

[Tuto] Dessin + colo d'un perso sur ordi sans tablette

[Tuto] Dessin + colo d'un perso sur ordi sans tablette

Messagede Miya » 07 Mar 2012, 12:02

[miniature]http://img15.hostingpics.net/pics/976317vign.jpg[/miniature]

Image


Bonjour tout le monde! Voici un petit tuto pour ceux qui aimeraient se lancer dans le dessin avec Illustrator et photoshop le tout sans tablette graphique! Sympa pour réaliser ses propres fanart, avatars ou bannières par exemple.

Il s'agit ici de la méthode que j'utilise, il existe bien entendu un tas de méthodes différentes. Je n'en détaille qu'une seule.

(Devenue obsolète pour moi vu que je ne l'utilise plus mais il s'agit d'un ancien tuto qui peut toujours servir, il date d'il y a environ 2 ans... J'en referai peut-être un avec Paint Tool Saï ou Photoshop quand j'aurai le temps et si ça intéresse des gens.)



I] Le croquis

Dans un premier temps, réalisez le dessin sur une feuille blanche de préférence. N'hésitez pas à recommencer plusieurs fois le même dessin pour maitriser la pose du personnage au maximum. Petit truc, retournez votre dessin afin de le voir par transparence de temps en temps, les défauts vous sauteront beaucoup plus aux yeux de cette manière. Une fois terminé, scannez-le (utilisez un crayon gris ou noir qui se voit facilement). Voilà le perso sur lequel je vais bosser:


Image






II] Illustrator

Commencez par ouvrir votre image avec Illustrator (File/Open et vous sélectionnez). Je vous conseille d'agrandir votre dessin, vous aurez ainsi une bonne qualité et vous pourrez par la suite redimensionner facilement sans avoir des pixels horribles partout ou un flou tout moche.

On va d'abord voir les différents outils que nous utiliserons sous Illustrator. La barre d'outils ressemble beaucoup à celle de photoshop, vous ne devriez pas être trop perdu en la voyant. Nous n'utiliserons ici que les 5 premiers outils, à savoir :

Image

Illustrator va nous permettre de repasser facilement notre dessin, de redimensionner sans perdre de qualité et de faire quelques retouches. Photoshop quant à lui nous servira à la mise en couleur. Je vous expliquerais au fur et à mesure comment utiliser les outils. Vous êtes prêts?



A] Préparation

Nous allons définir quelques petits trucs avant de commencer.


- Commençons par l'épaisseur de notre trait, remplissez comme ci-dessous (si la fenêtre n'est pas disponible au lancement faîtes Ctrl + F10 ou cochez Stroke dans le menu windows du logiciel).

Image

On a simplement indiqué que l'on souhaitait un trait d'épaisseur 0.75 avec des fins de trait arrondies et des jointures arrondies également. Généralement j'utilise un trait de 0.75 pour les contours, 0.5 et 0.25 pour les détails. Pour l'instant restez en 0.75, je vous direz quand changer dans le tuto.



- Passons maintenant à la couleur de trait et celle de remplissage, en bas de votre barre d'outils réglez comme ci dessous:

Image

Vous aurez ainsi un trait de couleur rouge assez visible et un remplissage transparent. Ne mettez pas de remplissage blanc, cela vous permettra de n'avoir que votre trait sur le calque et vous facilitera les choses lors de la colo.




B] Repassage

N'hésitez pas à bien zoomer et à prendre votre temps, c'est juste une question d'habitude après. Cliquez sur l'outil plume (Pen) Image. Cet outil peut être un calvaire au début, mais on s'y fait assez vite. Entraînez-vous un peu sur une page à part si vous ne maîtrisez pas du tout le principe.

Tapez simplement tuto courbes de bézier illustrator sur notre ami Google ou sur youtube pour des tutos vidéos. Une fois le principe compris, vous pouvez vous lancer.

Dans la fenêtre Layers (F7 si elle n'est pas dispo au lancement), verrouillez votre calque contenant le scan Image. Cela évitera d'écrire dessus sans faire exprès.
Créez un nouveau calque par dessus, renommez-le (traits, line, n'importe quoi du moment que vous vous repériez facilement). C'est sur ce calque que nous allons travailler.


Vous pouvez commencer à repasser votre dessin de manière assez grossière, les traits n'ont pas besoin d'être parfaits pour le premier passage, nous retoucherons ce qui ne va pas par la suite. N'oubliez pas de sauvegarder souvent votre travail!

ImageImage

Une fois l'ensemble du dessin repassé, nous allons corriger et améliorer notre tracé. Prenez l'outil Direct Selection Tool Image. Cet outil très pratique va vous permettre de raccorder vos courbes de béziers ratées en déplaçant les points facilement, de retoucher les poignées de vos courbes pour obtenir une meilleure forme, en gros de faire les retouches nécessaires. Il est important que vous fermiez au maximum vos zones pour faciliter la colo par la suite.

Image

Vous pouvez masquer le calque du scan pour plus de facilité par moment. Une fois le dessin entièrement repassé, sélectionnez l'ensemble du dessin (Ctrl + A) et modifiez la couleur de trait pour noir.

Pour l'instant tous mes traits ont une épaisseur de 0.75, nous allons maintenant modifier en sélectionnant les traits (toujours avec Direct Selection Tool Image) et en changeant l'épaisseur dans la fenêtre Stroke que nous avions vu plus haut. Laissez les contours en 0.75 et passez les détails en 0.5 voir 0.25 pour certains.

Voilà ce que vous devriez obtenir:

Image

Les lignes présentes dans les cheveux ont été passées en 0.5 et les traits du visage en 0.25.

Sélectionnez l'ensemble du dessin (Ctrl + A), faites un clic droit et sélectionnez Transform -> Reflect -> Vertical. Vous verrez votre dessin dans le sens opposé, cela vous permettra de voir plus facilement les défaut de votre dessin. Repassez le dans le sens normal s'il n'y a pas de problèmes majeurs et corrigez s'il y en a :P Pour ma part j'ai dû décaler un peu la tête.

Image






C] Import/Export

Votre dessin est prêt à être coloré sous photoshop. Allez dans File -> Export et choisissez le format psd qui est le format photoshop. Enregistrez également votre projet une dernière fois en format ai avant de fermer Illustrator pour y revenir plus tard par exemple.

Une fois ouvert sous photoshop vous devriez avoir votre tracé avec fond transparent prêt à être coloré!

Image

A vos crayons!
Dernière édition par Miya le 07 Mar 2012, 12:07, édité 2 fois.
Image
Avatar de l’utilisateur
Miya
Matelot
 
Messages: 32
Inscription: 06 Mar 2012, 12:24

Re: [Tuto] Dessin + colo d'un perso sans tablette

Messagede Miya » 07 Mar 2012, 12:03

Suite du tuto, on passe à la colo! (Qui était une de mes premières colo donc pitié ne m'en voulez pas si c'est moche xD)

III] Photoshop

Dans cette partie je vais vous détailler trois techniques pour colorer votre personnage. Il en existe d'autres plus complexes bien entendu, mais ces trois là sont abordables pour n'importe qui et donnent un effet sympa. Je vais combiner les trois dans le même dessin mais rien ne vous empêche de choisir celle que vous préférez et de n'utiliser qu'elle.

C'est parti!

Image

Tout d'abord, nous allons préparer notre travail. Il est important de bien nommer tous vos calques et de les organiser, ça vous évitera de perdre un temps fou pour retrouver un élément.

Verrouillez votre calque line contenant votre personnage. Nous y toucherons plus tard.

Créez autant de calques que vous avez d'éléments à colorer et mettez les dans dossier portant le même nom. Pour moi ça donne:

Image

Chaque dossier contient un calque portant le même nom (dossier cheveux contient un calque vierge cheveux, yeux -> yeux etc...). Comme ça nous savons qui est dans quoi! Pratique pour retoucher/ changer de couleur...

Nous allons commencer par mettre nos premières couleurs, pour cela il va falloir sélectionner les zones à colorer ce qui est assez chiant parfois. Je vais donc vous proposer une petite astuce ;)

A] La sélection et mise en couleur

Placez vous sur le calque line (ou peu importe comment vous l'avez nommé). Prenez l'outil baguette magique Image et sélectionnez un des éléments à colorer.

Image

Comme vous pouvez le constater, il reste quelques pixels autour du trait noir qui ne sont pas sélectionnés et qui feront des trous dans la colo par la suite. Pour éviter cela, nous allons déborder! Comment? Allez dans le menu Select puis modify et enfin expend. Mettez comme valeur 1 (cela dépend bien entendu de l'épaisseur de votre trait, si vous avez suivit le tuto et avez à peu près le même trait que moi, le 1 passera dans 90% des cas). Ensuite validez. Vous obtenez une sélection plus large:

Image

J'aurais même pu monter à 2 je pense ici mais bon 1 suffit. Ne vous inquiétez pas si vous débordez sur les pixels noirs de votre lineart! C'est le but recherché sans pour autant traverser complètement le lineart lol

Maintenant rendez-vous sur le calque approprié, prenez une couleur et remplissez la zone avec le pot de peinture. Nous mettons ici les couleurs de base, votre lineart étant au dessus de tous les calques, le trait passera au dessus des couleurs. En cas de pixels blancs restants après votre remplissage, sélectionnez le crayon, enlevez la sélection (les pointillés de la baguette magique) et coloriez ces pixels rebels.

Image

Une fois que vous avez coloré la bonne partie sur le bon calque, verrouillez-le pour ne pas vous tromper. Faites ceci pour toutes les zones (selectionnez -> expend -> colorer -> verrouillez). Vous devriez obtenir quelque chose du genre:

Image

Pour plus de facilités je vais rendre invisible les autres zones pendant mes explications sur les colorations. Vous pouvez bien entendu les laisser visibles.



B] La coloration

1) Méthode 1

Première méthode, je me rend sur mon calque contenant la couleur de base de mon élément. Je vais sélectionner cette couleur avec la baguette magique et je vais lui appliquer un dégradé du plus foncé au plus clair en faisant attention en me fixant une source de lumière. Par exemple dans mon cas je vais me dire que le personnage est éclairé par le coin haut gauche, comme si le soleil ou une lampe s'y trouvait.

Image

En cliquant en haut dans la barre d'outil vous pouvez modifier les couleurs du dégradé, j'ai choisi un dégradé blanc vers bleu, le blanc se trouvera donc en haut à gauche de mon personnage (zone de lumière), et le bleu en bas à droite (zone d'ombre). J'applique donc ce dégradé et j'obtiens:

Image

Cette technique seule n'est pas géniale mais elle peut produire un effet sympa suivant les zones à colorer. Elle n'est quasiment jamais utilisée seule.


2) Méthode 2

Cette méthode là par contre est très souvent utilisée! Rendez-vous sur le calque à colorer, pour moi le tshirt. Ajoutez un nouveau calque juste au dessus de celui existant et appelez-le Ombres. Vous avez donc bien un calque Ombres juste au dessus du calque à colorer (tshirt dans mon cas qui contient dejà la couleur de base).

Placez-vous sur le calque Ombres puis allez dans le menu layer et sélectionnez Create clipping mask:

Image

Ce qui ajoutera une flèche à côté de votre calque Ombres orientée vers le calque tshirt (pour moi). Cela vous permettra de modifier comme bon vous semble votre calque ombre sans déborder sur les autres calques. Nous aurions pu créer ce type de calque pour la première méthode aussi.

Une fois ceci fait nous allons utiliser un vieil ami! L'outil plume! (Ouioui celui qui vous a énervé dans la première partie du tuto sur Illustrator!) Cependant nous n'allons pas l'utiliser comme sous illustrator, nous allons le configurer pour que l'on puisse sélectionner avec afin de remplir, contrairement à la première partie où nous voulions juste tracer des traits!

De plus pour faire mon emmerdeur j'ai remplacé ma couleur de base par un dégradé avec la méthode 1 :P Ca ne change heureusement rien au tuto ne vous inquiétez pas et ça vous montre qu'on peut combiner les méthodes entre elles.

Image

Réglez votre plume avec ces paramètres:

Image

J'ai pris une couleur bleu plus foncée vu que je vais faire des ombres. Donc toujours sur votre calque Ombres, faites un essai comme sur l'image en dessous, faites un cercle avec l'outil plume (pen tool) et n'oubliez pas de le fermer. Sélectionnez bien une zone de tshirt à colorer et une zone externe puis faites un clic droit et choisissez Make selection et validez (laissez la valeur à 0).


Prenez ensuite le pot de peinture et colorez la zone, la peinture se mettra seulement à l'endroit du tshirt et ne débordera pas, pratique!

Image

Si lorsque vous colorez la zone c'est le reste du document qui se met en couleur et pas votre zone faites ctrl + shift + I pour inverser la sélection juste après avoir fait make selection. Bien sûr il s'agissait d'un exemple, voilà ma zone d'ombre:

Image

J'ai également ajouté une deuxième zone d'ombre sur un nouveau calque, et une zone de lumière à gauche :P Cette façon de faire les ombres est très utilisée dans les mangas/animes ou on utilise peu de couleurs différentes, par exemple:

Image

Note: Certaines fois, vous aurez peut-être des zones qui demanderont des sélections droites (une ombre en pic ou en rectangle par exemple), utilisez alors l'outil lasso polygonale à la place de la plume, vous gagnerez du temps.


3) Méthode 3

Enfin la troisième et plus dure méthode. Il s'agit tout simplement de créer un calque (ombre par exemple) et de peindre! L'intérêt? Vous pouvez ainsi mélanger les couleurs et gagner en réalisme. Je ne détaille pas cette méthode car il faut un certain moment pour s'habituer à dessiner à la souris et énormément de patience. Sachez simplement qu'en persévérant vous pouvez faire de super fanart même à la souris. Il faut juste être patient avec cette méthode.

Vous pouvez voir sur mon dessin un bout de cette méthode, j'ai juste mis un ou deux coups de pinceau pour faire les ombres du visage et les yeux, voilà mon rendu final avec les 3 méthodes, et comme je vous ai dit au début, inutile de toutes les utiliser comme ici, ça peut rendre bizarre, je l'ai fait juste pour monter les trois dans le même tuto.


Image


Dernière chose, colorier le lineart! J'allais oublier lol Vous avez la possibilité de colorer votre ligne de contour. Généralement on se contente de la mettre de la couleur de l'élément mais en plus foncé voir plus clair. Pour réaliser cela, faites un clipping mask (vous savez comment maintenant) sur votre lineart et avec un pinceau coloriez les zones du lineart. Perso j'utilise un nouveau calque par couleur.

Et dernière dernière chose, pour changer facilement vos couleurs une fois votre perso terminé, placez vous sur le calque dont vous voulez modifier la couleur puis allez dans le menu Image puis ajustement et enfin Hue/Saturation et modifiez comme bon vous semble:

Image

Voilou j'espère que ça vous a plu! Laissez un comm' si c'est le cas (ou pas)! A bientôt!

Voici une colo un peu plus récente en utilisant une méthode semblable:

Image
Image
Avatar de l’utilisateur
Miya
Matelot
 
Messages: 32
Inscription: 06 Mar 2012, 12:24

Re: [Tuto] Dessin + colo d'un perso sur ordi sans tablette

Messagede Aurelia » 07 Mar 2012, 12:15

Ooh super Tuto :D ! Et bien présenté en plus !
Juste excellent, bravo !
Avatar de l’utilisateur
Aurelia
Guerrier Divin
 
Messages: 3181
Inscription: 12 Oct 2011, 19:44

Re: [Tuto] Dessin + colo d'un perso sur ordi sans tablette

Messagede guigui » 07 Mar 2012, 13:55

Salut, super tuto et très bien expliqué. Dommage que Photoshop et Illustrator soient si cher :cry:
Image

Contenu caché
Avatar de l’utilisateur
guigui
Alchimiste D’Etat
 
Messages: 818
Inscription: 17 Déc 2011, 12:41
Localisation: Sous la neige :)

Re: [Tuto] Dessin + colo d'un perso sur ordi sans tablette

Messagede Amarok » 07 Mar 2012, 13:55

Super tuto =D
« En vérité, le chemin importe peu, la volonté d'arriver suffit à tout. »
Image

Et voici ma galerie =D http://www.dessinermanga.com/galerie_id0-9020.html
Avatar de l’utilisateur
Amarok
Contractant illégal
 
Messages: 183
Inscription: 27 Fév 2012, 18:06
Localisation: Draguignan

Re: [Tuto] Dessin + colo d'un perso sur ordi sans tablette

Messagede Sadae » 07 Mar 2012, 15:23

Ton tutoriel est excellent, je te dis chapeau ! :D
Image

Image

Un défilé de cosplayeurs qui sortent... de la Police Box ?

Contenu caché
Avatar de l’utilisateur
Sadae
Resp. staff Tutos
Modératrice
 
Messages: 5889
Inscription: 08 Oct 2010, 22:10

Re: [Tuto] Dessin + colo d'un perso sur ordi sans tablette

Messagede Miya » 07 Mar 2012, 15:30

Content que ça plaise et si ça peut servir c'est encore mieux! Merci à vous! J'en ferai d'autres à l'occasion.
Image
Avatar de l’utilisateur
Miya
Matelot
 
Messages: 32
Inscription: 06 Mar 2012, 12:24

Re: [Tuto] Dessin + colo d'un perso sur ordi sans tablette

Messagede ibtilol » 07 Mar 2012, 18:54

Exellent tuto!

Je te félicite mais le problème c'est que photoshop et illustrator sont trop cher, j'ai juste une question peux t'on dessiner dur l'ordi sans photoshop ni illustrator :!: :?: :)
Avatar de l’utilisateur
ibtilol
Nouveau !
 
Messages: 16
Inscription: 06 Mar 2012, 18:30

Re: [Tuto] Dessin + colo d'un perso sur ordi sans tablette

Messagede ginL » 07 Mar 2012, 19:08

Bien!

Ce qui marche bien sur photoshop pour la colorisation (plutôt que l’outil baguette magique qui sélectionne : très très grossièrement des vides ou des plages de couleurs)
C'est de passer son pinceau en mode 'obscurcir' => cette fonction part du principe que ta couleur de remplissage sera toujours plus claire que le noir de ton line et donc ne fera que foncer ce qui ne l'est pas :) = à tester pour bien comprendre.

Sinon tu peux encore coloriser sur un calque en dessous de tes calques de lines, faire de nouvelles sélections bien correctes avec l’outil plume de photoshop... plus long mais carrément plus propre quand tu ne veux pas dépasser d'une case => comme tu l'as fais d'ailleurs x)
Mon site : *clique clique*
Ma page FB : like it! Tweeter : Abonne-toi?
Tumblr : GinL-Illustration Pinterest : dGinL Youtube : Chaine dessin Behance : Gallery
Flickr : suis-moi @.@
Image
Avatar de l’utilisateur
ginL
Contractant illégal
 
Messages: 267
Inscription: 28 Fév 2012, 16:29
Localisation: Aubagne

Re: [Tuto] Dessin + colo d'un perso sur ordi sans tablette

Messagede Miya » 07 Mar 2012, 23:18

J'suis d'accord avec toi, il y a un tas de techniques pour sélectionner et mettre en couleur, on va dire que j'en ai présenté une vraiment basique qui répondait à l'époque où j'ai fait ce tuto à la réflexion que j'entendais trop souvent à savoir : "Je peux pas le mettre en couleur sur ordi, j'ai pas de tablette! C'est normal que toi tu y arrives". Cette phrase m'a toujours énervé lol Avec de la volonté, on peut toujours y arriver en dessin.

Je préfère les courbes de bézier ou carrément repasser/repeindre tout entièrement pour faire des mélanges etc que d'utiliser la baguette magique, mais il faut reconnaître que faire un clic pour sélectionner, un clic pour le mettre en peinture avec le pot de peinture et ajouter des claques en clipping mask c'est une solution de facilité avec une souris pour beaucoup de personnes. Après si on aime le travail bien fait, il faut chercher d'autres moyens de mettre en couleur. Mais au moins, plus d'excuses pour ceux qui n'ont pas de tablette :p
Image
Avatar de l’utilisateur
Miya
Matelot
 
Messages: 32
Inscription: 06 Mar 2012, 12:24

Suivante

Retourner vers Techniques numériques

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

/////////////