Colorer les contours pixels

* Colorer les petits pixels *

Les pixels dans le monde de PSP sont les minis dessins que l'on utilise pour décorer les mails, faire de minis paysages, des signatures, des blinkies et naturellement décorer nos pages web. Ils servent aussi de séparateurs, de minis-cadres ....

Pour débuter, nous avons besoin de petits contours (outlines). Sur le net, vous en trouverez sous le nom de contours ou outlines. Plus tard, dans une autre leçon, nous apprendrons à créer nos propres contours.

Nous allons utiliser ce petit papillon pour la leçon.
Il est IMPORTANT se savoir qu'un outline ne se rétrécit pas ni ne s'agrandit. Ces manoeuvres feraient apparaître de pixels ( petits points pas "nets") autour de votre travail. Il faut donc le prendre tel qu'il est offert sur le net et ne pas le modifier,

* Nous nous préparons *

Sauvegarder le contour papillon dans le fichier de votre choix. L'ouvrir dans PSP. C'est un fichier PNG.
Si vous avez des contours en GIF, les ouvrir dans AS puis les Copier/Coller dans PSP.

Avant de débuter à colorer les pixels, il est important de se créer une palette de couleur. C'est une étape très importante. Afin d'avoir de l'harmonie et de la personnalité dans nos pixels, on utilise toujours la même palette. ATTENTION, on n'utilise pas la palette d'un autre artiste.

Créer sa palette

a) Ouvrez une nouvelle image de 150px de largeur. Pour la hauteur, tout dépendra du nombre de couleurs que vous utiliserez. Ma palette mesure 270px de hauteur avec 9 couleurs différentes. J'ai utilisé la grille pour me guider. *chacun des carrés mesure 30px X 30px *

b) Prenez votre pinceau avec ces paramètres :

Choisissez la première couleur en mettant la luminosité à 60. Appliquer la couleur dans le premier carré de gauche comme dans la capture ci-dessus.

Pour la couleur suivante, cliquez sur la couleur de la palette des couleurs pour ouvrir la fenêtre des Propriétés des styles et des textures et augmenter la luminosité de 40, donc à 100. Vous obtiendrez une couleur plus pâle.

Répétez l'opération, en augmentant la luminance de votre couleur de 40 à chaque fois pour obtenir vos cinq (5) couleurs.

Les couleurs utilisées sont à titre de démo seulement.
Vous ferez VOTRE palette avec un rouge, un bleu, un vert, un jaune, un rose et un marron. Dans ma palette, j'ai ajouté un gris et une palette pour la peau que je partage avec vous,

Le rose de la droite est pour colorer les joues.

* Nous commençons *

Afin de "ménager" nos yeux. il faut utiliser l'outil zoom dans PSP. Je zoome entre 800% et 1000%.

1, Ouvrir le pixel dans PSP et zoomez à au moins 800%.
2. Avec la baguette magique configurée comme ceci

sélectionnez une partie du contour

et, afin de tout sélectionner, Sélection/Modifier/Sélectionner les zones similaires avec ces paramètres.

Tous le pixels du contour seront sélectionnés.

Pour les colorer, il suffit de peindre avec une couleur plus foncée que ce que nous prévoyons pour le remplissage, avec l'outil peinture et ces paramètres.

Voilà, notre contour est coloré. Naturellement, si vous souhaitez avoir le corps du papillon et les antennes d'une autre couleur, il faudra le faire manuellement. Sur le net vous trouverez certains pixels ayant plusieurs couleurs pour faciliter l'application de différentes couleurs sur le outline.

Le remplissage

Pour l'exercice j'utiliserai la palette démo.

1. J'ai coloré le contour avec la 2e couleur à partir de la gauche.
2. Une fois le contour coloré, le désélectionner.
3. Sélectionnez l'intérieur des 4 ailes avec la baguette magique.

4. Avec le pot de peinture, versez une des couleurs plus pâles de la même teinte et gardez sélectionné. J'ai choisi la 4e teinte.

À ce stade, 2 options s'offrent à vous.
Faire les ombrages avec l'effet "Découpe" ou avec "L'Ombre portée"

En fait, l'effet découpe et l'effet ombre portée sont les mêmes à peu de choses près.
Le seul truc, c'est :
Pour l'effet découpe, il faut rendre la sélection flottante
Pour l'ombre portée, il faut inverser la sélection

Avec l'effet DÉCOUPE

1. Votre sujet étant sélectionné, rendre la sélection flottante.
2. Appliquez l'effet découpe avec ces paramètres

3. Pour la taille de l'ombre (flou) ça dépend de la taille de votre sujet. Plus il est grand, plus on augmente la taille du flou. L'idée, c'est d'obtenir quelque chose de dégradé de l'intérieur clair vers l'extérieur foncé.
Pour la couleur de l'ombre, je choisis une teinte juste un peu plus foncée que la teinte du contour. Désélectionnez.

4. À cause des petites taches dans le papillon, il y a certains endroits autour de ces taches, qui sont restés plus clairs. J'aurais pu les colorer selon les teintes avoisinantes, J'ai préféré les laisser tel quel. Ça donne un petit effet de transparence.
5. J'ai ensuite coloré le contour des petites taches et ensuite, j'ai coloré le centre d'une teinte un peu plus claire.
6. Pour le corps, faire comme pour les ailes, en colorant le contour point à point.
7. Pour mettre un peu de luminosité,, ajoutez un calque, colorez quelques pixels blancs du côté gauche et réduire l'opacité à 40 ou selon votre goût.
8. Fusionnez les calques visibles.

Le voici terminé

Vous le sauvegardez en gif selon ce tuto ou en fichier .PNG qui est maintenant reconnu par IE 7-8-9. Fichier/Exporter/Fichier PNG optimisé.

Avec l'effet OMBRE PORTÉE

Après avoir sélectionné l'intérieur des ailes du papillon il suffit d'Inverser la sélection afin d'appliquer l'ombre portée.

Cette méthode permet de bien placer nos ombres.
Il faut se souvenir que normalement, la lumière vient d'un côté donc, l'ombre sera sur le côté opposé. Il est donc important de toujours faire nos pixels avec le même jeu de lumières et d'ombres.

!. Avec notre sélection inversée, appliquez l'ombre portée. Je montre une capture, mais, les paramètres varieront selon la taille de votre sujet et l'effet désiré.

2. Cette fois, j'ai coloré les petits pixels trop clairs près des taches, avec le pinceau toujours en taille 1 afin de rendre l'ombre vraiment uniforme.
3. Pour le corps du papillon, j'ai utilisé des paramètres différents parce que le sujet est beaucoup plus petit :
H 1 V -1 50 2 et une teinte juste un peu plus foncée que le contour pour l'ombre.

4. J'ai fait la partie de luminosité de la même manière qu'au no 7 plus haut.
5. Sauvegardez en gif ou en png

Voici le résultat zoomé à 400% à gauche et la taille réelle à droite.

On peut noter l'ombre sur la droite et la luminosité sur la gauche.

J'utilise les deux méthodes selon l'effet désiré, mais, je m'assure de toujours mettre la luminosité à gauche.

Le Shading

Le shading est une autre méthode, suffisamment simple. quand elle est bien maîtrisée.
Elle consiste en trois calques qui sont supperposés selon une technique que vous trouverez chez mon amie Caro Design Le cheval.
Afin de bien apprendre cette technique, je vous conseille de faire le petit cheval avec les couleurs utilisées dans le tutoriel.

Je vous souhaite des heures de plaisir...

retour au menu tutoriels
Voir aussi maintenance et trucs pour PSP ici

*********