Trouver des effets de rollover originaux à appliquer sur les boutons lorsqu’on s’occupe d’un webdesign n’est pas toujours chose facile.
Je trouve personnellement que l’effet utilisé dans Firefox est particulièrement réussi. Bien sûr, il ne conviendra pas à tout les types de webdesign, mais avec quelques modifications, il pourra sûrement vous être très utile un jour.
Voyons donc comment reproduire cet effet sous Photoshop en y ajoutant quelques modifications.

Étape 1 : créer les bases du bouton

Cette étape dépendra partiellement de votre webdesign, et du rendu final que vous souhaitez. Ici, vous devrez simplement dessiner sous Photoshop votre bouton tel que vous le souhaitez. Dans notre exemple, nous partirons du principe que le bouton sera un texte « Acheter ce produit » sur un fond de dégradé gris.

Il est conseillé pour ce tutoriel que le fond de votre bouton soit un dégradé !

Voici comment créer les bases du bouton utilisé dans notre exemple :
Créez un nouveau document Photoshop de 320px par 100px. Notre bouton ne fera que 50px de hauteur, mais nous anticipons l’étape d’intégration html/css lors de laquelle il sera plus efficace d’avoir les 2 états de notre boutons (état normal et état de survol) sur une seule image.

Création d'un nouveau document Photoshop

Nous allons dès maintenant placer un repère au milieu de notre document pour séparer les 2 zones des 2 différents états du bouton. Si cela n’est pas déjà fait, affichez les règles de Photoshop (ctrl-r ou pomme-r ou « affichage > règles »). Une fois les règles affichées, cliquez sur la règle horizontale, et faites glisser votre souris au centre de votre document, à 50px. Un repère doit maintenant apparaître au centre de votre document.

Placement des repères sur notre document Photoshop

Utilisez l’outil « rectangle de sélection » de Photoshop (touche « m ») pour sélectionner toute la zone qui se situe au dessus de notre repère. Remplissez cette zone de la couleur de votre bouton (dans notre exemple : #514c48). Double cliquez sur le calque pour ouvrir la fenêtre de style. Cliquez sur « Incrustation en dégradé », choisissez « incrustation » comme mode de fusion du dégradé, définissez une opacité de 65%, et sélectionnez un simple dégradé allant du noir au blanc.

Les bases de notre bouton

Toujours dans la fenêtre de style de calque, on va ensuite ajouter un contour à notre bouton. Pour cela, sélectionnez l’onglet « contour », choisissez une taille de 1px, une position intérieure, et cette couleur : #918d89. Cliquez maintenant sur « Ok » pour confirmer tous vos réglages.

Il faut maintenant dupliquer le calque du bouton (ctrl-j ou pomme-j). Sélectionnez ce nouveau calque, et choisissez une opacité du fond de 0% (attention de bien modifier l’opacité du fond et pas l’opacité générale du calque !).

Passage de l'opacité du fond du calque à zéro

En ne passant que l’opacité du fond à 0%, on va pouvoir continuer à afficher les styles que nous appliquerons à notre calque sans que le fond soit pour autant affiché. Ouvrez justement la fenêtre du style du calque. Les paramètres que nous avons précédemment appliqué sont conservés. Rendez-vous dans l’onglet de réglage « Incrustation en dégradé » et changez le mode de fusion de l’effet en « Incrustation ». Vous pouvez également supprimer l’effet de contour appliqué à ce calque.

Le changement du mode de fusion du dégradé du second calque

Sélectionnez maintenant l’outil texte ( »t »). Tapez le texte de votre bouton sur un nouveau calque. Choisissez une couleur de texte de #c3c0be. Essayez de bien centrer votre texte dans le calque du bouton grâce aux repères, et tachez de laisser beaucoup de vide autour du texte. On va également ajouter une petite ombre portée à notre texte grâce aux styles de calque (couleur noire en mode produit, opacité de 88%, distance 0, grossi 0, taille 2).

Le texte de notre bouton

Voilà, nous venons de créer notre bouton tel qu’il sera affiché au repos, sans survol. Nous allons maintenant entrer dans le coeur du sujet en ajoutant un effet de rollover sympa.

Étape 2 : l’effet au survol

La première chose à faire est de grouper tous les calques qui composent notre bouton : le fond, le dégradé, et le texte. Nommez ce groupe « bouton repos » par exemple. Dupliquez le groupe (clic droit sur le groupe dans la fenêtre des calques et « Dupliquer le groupe »). Nommez ce nouveau groupe « bouton survol ».
Nous allons maintenant pouvoir utiliser la moitié inférieure de notre document (la zone sous le repère que nous avions placé) pour créer le visuel au survol. Déplacez précisément le groupe « bouton survol » pour qu’il remplisse parfaitement la moitié inférieure du document.

Les 2 groupes de calques identiques avant l'application de l'effet

Nous allons commencer l’effet de rollover en modifiant légèrement la couleur de notre texte. Assurez vous de bien être dans le groupe « bouton survol » et modifiez le calque du texte « Acheter ce produit » pour lui donner la couleur #c3c0be.
Créez maintenant un nouveau calque sous le calque de texte. Utilisez l’outil « Rectangle arrondi » de Photoshop ( »u » ou alors « shift-u » jusqu’à sélectionner le bon outil). Dans la barre de réglages de l’outil du haut, choisissez « Pixels de remplissage » et un rayon de 10px. Utilisez n’importe quelle couleur de 1er plan (de préférence une qui se démarquera du fond pour vous faciliter la tâche) et tracez un rectangle qui entoure totalement le texte du bouton.

Le rectangle arrondi sous le texte

Double cliquez désormais sur le calque du rectangle arrondi pour ouvrir la fenêtre de style de calque. Dans l’onglet « Options de fusion personnalisées », mettez une opacité de fond à 0%.

On commence par passer l'opacité de fond du calque à 0%

Ajoutez une « Ombre interne » de couleur noir, d’une opacité de 75%, et à une distance nulle.

On ajoute une ombre interne à notre calque

On ajoute maintenant une « Incrustation en dégradé » : choisissez un mode de fusion « Incrustation », une opacité de 65%, et un dégradé allant du blanc au noir en inversé.

Le dégradé que l'on ajoute à notre rectangle est le même que celui du fond en inversé

Les bases de notre effet commencent à se dessiner… mais le dégradé n’est pas assez prononcé. On va donc dupliquer le calque du rectangle arrondi et masquer l’effet d’ombre interne. Notre dégradé est désormais plus intense.

Le dégradé est désormais plus intense

Le fond de notre effet semble en place, il ne nous reste plus qu’à y ajouter un contour réaliste !

Dupliquez à son tour le calque rectangle que vous venez de créer. Double cliquez sur ce nouveau calque pour ouvrir la fenêtre des styles de calque et décochez tous les effets. rendez-vous dans l’onglet « Contour », et ajoutez un contour de taille égale à 1, de la couleur la plus claire de notre dégradé (ici #6d6660). Validez, créez un nouveau calque et placez le sous le calque de contour clair. Sélectionnez de nouveau le calque de contour clair, et écrasez le sur le calque vide que vous venez de créer (ctrl-e ou pomme-e). Le contour entoure pour l’instant la totalité de notre rectangle mais ce n’est pas tout à fait ce que nous voulons. On va donc créer un masque sur notre calque de contour.

Assurez vous que le calque du contour soit bien sélectionné. Ajoutez un masque vectoriel (en bas de la fenêtre de calques ou « Calque > Masque vectoriel > Tout apparaître »). Sélectionnez le masque vectoriel qui vient d’être crée, et ajoutez un dégradé linéaire qui va du noir au transparent en partant du haut de notre rectangle et en s’arrêtant au bas de ce rectangle de manière à ne laissez apparaître que la partie inférieure de notre contour.

Notre contour clair recouvre seulement la partie inférieure du rectangle

Pour finir, il faut répéter l’étape de création du contour clair, mais en choisissant cette fois une couleur de contour sombre, et un dégradé pour le masque du contour inversé par rapport à celui que nous venons de réaliser.

Voici le résultat final de notre effet de rollover

Notre bouton avec ces 2 états (normal en haut et survolé en bas) est prêt, il n’attend plus qu’à être intégré !

Les tutos sur les effets de textes sur photoshop foisonnent sur le net… alors graphuccino s’y met aussi !
Voici un petit tuto pour réaliser simplement un effet argenté sur un texte. Pour ce tuto, je vais prendre pour exemple le travail que j’ai effectué sur le logo du bijoutier « Corpus Christi » à l’occasion de la sortie de son site Internet.

Le résultat final de notre tuto sur l'effet de texte argenté

1 ) Le choix de la police de caractère

Cette étape n’est pas si anodine que ça. La police de caractère que vous choisirez va beaucoup influençer le rendu final… tout est question de goûts néanmoins, je vous conseille des polices épaisses pour ce genre d’effets. Cela semble logique, mais des polices grasses permettront de faire figurer les effets plus simplement. Vous devez également choisir une couleur noire pour votre texte. Dans notre exemple, la police choisie correspond parfaitement.

La police de caractère que nous avons choisi

2 ) Ajouter le dégradé de couleur sous photoshop

Double-cliquez sur le calque de votre texte. La fenêtre des styles de calques de photoshop s’ouvre. Pour commençer, on va ajouter une légère ombre portée à notre texte. Cela n’est pas obligatoire mais ajoutera facilement et rapidement du réalisme à notre texte (cette méthode d’ombre portée est basique, vous pouvez bien sûr utiliser des méthodes plus complexes que je ne détaillerai pas dans ce post dont ce n’est pas l’objet). Pour cela rendez-vous dans l’onglet « ombre portée » et faites vos réglages selon le rendu recherché. Ces réglages dépendront beaucoup de votre composition et ne sont pas fondamentaux à notre tuto… je vous conseille juste de ne pas abuser de ce genre d’ombres portées essayez toujours d’être soit réaliste, soit léger.

Passons au plus intéressant, et ajoutons de la couleur !

Toujours dans la fenêtre « style de calque » de photoshop, rendez-vous dans l’onglet « Incrustation en dégradé ». Assurez-vous d’abord que les réglages de base correspondent bien à ceux de l’image ci-dessous ( mode de fusion sur normal, angle sur 90, et échelle sur 100 notamment) :

Les réglages de base de l'incrustation en dégradé sous photoshop

Cliquez maintenant sur les couleurs du dégradé. Une nouvelle fenêtre s’ouvre dans laquelle nous allons pouvoir choisir les couleurs qui composeront notre dégradé, ainsi que leur placement. Pour modifier les couleurs, double-cliquez simplement sur la flèche colorée placée sous le dégradé de couleur. Vous pouvez glisser-déposer les flèches de couleurs de votre dégradé selon vos envies. Enfin, vous pouvez ajouter de nouvelles couleurs en cliquant sous le dégradé, à l’endroit où vous souhaitez ajouter votre couleur.

Les couleurs que j’ai choisi ne sont pas absolues, vous pouvez bien sûr choisir un dégradé différent, mais si vous êtes un peu perdu, elles vous donneront de bonnes indications de départ.

En partant de la gauche (le bas du dégradé si vous avez conservé les réglages de base) : Tout d’abord un noir pur (#000000) pas tout à fait collé au bord gauche du dégradé; ensuite, vous devez identifier l’endroit où vous souhaitez que le reflet lumineux de l’argent soit le plus intense, et plaçez une couleur assez lumineuse et moyennement saturée (dans les verts turquoises / bleux pour de l’argent) juste à gauche de cet endroit (#a9c7ca); tout près à droite, ajoutez la couleur qui sera la plus lumineuse de notre dégradé, une couleur presque grise et très claire (#f6f8f8); beaucoup plus loin, ajoutez une couleur saturée et foncée (un bleu foncé comme #356367 devrait convenir); pour finir, sur la bordure de droite de notre dégradé, ajoutez une couleur plus claire que la dernière et un peu moins saturée (#5c8488).

Le placement des couleurs sur notre dégradé

Notre texte commence à ressembler à de l’argent ! Il manque pourtant encore quelque chose pour le rendre plus réaliste : un peu de texture.

3 ) Ajouter de la texture à notre texte

Ici, nous allons faire appel à la photo pour ajouter de la texture à notre texte… les banques d’images et les sources gratuites foisonnent sur Internet. Il est relativement simple de trouver à peu près n’importe quelle texture. N’hésitez pas également à utiliser un appareil photo et à vous constituer vous même votre propre banque d’images. Ici, ne vous souciez pas de la couleur de la texture, mais seulement de son aspect, de son « relief ». J’ai personnellement opté pour une image personnelle de feuille d’or, mais cette texture trouvée sur le site www.cgtextures.com fera très bien l’affaire.

Ouvrez votre image de texture dans photoshop, et copiez/collez la sur un nouveau calque du fichier qui contient votre texte (au dessus du calque de texte). Faites un ctrl-clic (pomme-clic pour mac) sur le calque de texte (faites bien attention de cliquer sur la vignette du calque et pas sur le nom du calque), puis resélectionnez le calque de texture.

Ajoutez maintenant un masque au calque de texture grâce à la sélection en cours. Pour cela, cliquez sur le bouton de masque en bas de la fenêtre des calques de photoshop.

Le bouton de masque de la fenêtre de calques de photoshop

Notre texture n’apparaît désormais que sur les endroits couverts par notre police de caractères !

Nous avons néanmoins perdu tout le travail de couleur précédemment effectué et maintenant recouvert par la texture… nous allons donc devoir mélanger ces 2 composantes de notre effet de texte.

Sélectionnez le calque de texture et choisissez « inscrustation » comme mode de fusion du calque (en haut de la fenêtre de calques).

Le mode de fusion incrustation des calques de photoshop

Vous pouvez ensuite déplacer le calque de texture au dessus de la police de caractère (avec l’outil flèche de photoshop raccourcis « v » ) pour trouver l’endroit le plus adapté à votre texte. Vous pouvez également le redimensionner (ctrl-t ou pomme-t). Pour cela, assurez vous que le masque est bien délié du calque de texture. Si cela n’est pas fait, cliquez sur le lien entre la texture et son masque pour les délier (vous les lierez de nouveau par la suite).

Le bouton de liaison du masque au calque sous photoshop

Pour fini, réglez l’opacité du calque de texture selon vos envies… je trouve qu’une opacité d’environ 55% donne un résultat tout à fait réaliste.

Lorsque vous êtes satisfaits, sauvegardez votre travail, et contemplez le joli effet argenté que vous venez de réaliser !

Le résultat final de notre effet de texte argenté

Note : Ce tuto est tout à fait appliquable à d’autres effets métalliques… Il vous suffit simplement de changer les couleurs du dégradé de l’étape 2. Par exemple, pour de l’or, les couleurs pourraient être de gauche à droite : #000000, #d2aa1e, #f2dc8e, #d2aa1e, #e3bf3f, #9e7f13. Et le résultat serait alors :

L'effet de texte d'or

Cet effet est assez simple à réaliser et il est souvent utile de pouvoir appliquer rapidement ce genre de textures, alors n’hésitez pas à le réutiliser et à le remanier selon vos besoins.

Voici une petite sélection de quelques vidéos de speed painting absolument incroyables. J’espère que ça vous plaira !

Dans ce 1er tuto graphuccino, nous allons nous intéresser à un procédé très technique et qui nécessite peu de créativité, mais dont le déroulement est essentiel à beaucoup de travaux de graphismes (notamment en colorisation numérique). Avec l’essor des tablettes graphiques, toujours plus proches des sensations traditionnelles, beaucoup de graphistes ne passent plus par le scan de leurs esquisses ou de leurs encrages. Néanmoins, l’import du coups de crayon, de plume, ou de pinceau, peut apporter une touche vraiment personnelle et originale à vos créations. Que ce soit en colorisation de B.D., en illustration, ou même en webdesign, utiliser vos talents de dessinateur pourraient développer une toute nouvelle dimension sur vos oeuvres… Alors lançez-vous ! Suivez cette méthode de numérisation, de nettoyage, et d’isolation de vos traits sur photoshop.

1 ) La numérisation

Malgré l’assistance des logiciels de numérisation, il serait dommage de négliger cette partie du travail. En effet, une numérisation adaptée et optimisée peut faire la différence dans votre confort de travail.

Pour faire simple : numériser dans une résolution trop importante provoquerait des fichiers de travail très lourds, et souvent, des ralentissements de machine pour des gains négligeables. En impression vous savez la plupart du temps à quel format et sur quel support vos créations seront tirées. Quand au web, une résolution de 72dpi est toujours la norme… inutile donc de faire plus et de rendre tout votre processus de travail fastidieu.

Assez parlé, au boulot !

Ressortez vos vieux crayonnés, dépoussierez votre scanner, et lancez Photoshop.

Une fois dans Photoshop : Fichier > Importation.

À partir de là, 2 réglages d’acquisition sont possibles selon votre type de dessin :

Le mode Bitmap : adapté à la plupart des cas et notamment aux encrages.

Cette méthode vous imposera moins de souplesse dans votre travail par la suite (les limitations du mode bitmap : pas de retouce couleur, pas de rotations,…). Quels avantages alors ? Eh bien avant tout le poid des fichiers. Contrairement à la seconde méthode que je détaillerai par la suite, la numérisation bitmap génère des fichiers d’une taille relativement faible.

Ensuite, le mode bitmap est un composé de deux couleurs, le noir et le blanc. Cela aura pour avantage d’exercer un « pré-nettoyage » sur vos scan… les tâches et certaines nuances de traits très faibles (un cheveux sur le scanner par exemple) notament seront automatiquement supprimées par ce processus de numérisation. Voilà pourquoi le mode bitmap est fortement déconseillé pour les scan de crayonnés avec des dégradés ! On perdrait alors toutes les nuances du crayon. En revanche, pour un encrage ou l’on n’alterne des couches de noir presque pur sur du blanc (les couleurs de notre mode bitmap), cela est parfaitement adapté.

Pour conceptualiser le fonctionnement du mode bitmap, pensez aux mangas et aux trames : Pour remédier au manque de finesse du noir et blanc utilisé en mangas, on utilise les trames qui réussissent à apporter du relief tout en ne conservant que deux couleurs… les dégradés sont simulés par des espacements de points noirs sur fond blancs plus ou moins élevés. Pour le mode bitmap, c’est pareil.

C’est pourquoi il est important d’utiliser une résolution de numérisation plus élevée. Plus nous aurons de possibilités de plaçer ces points noirs sur notre trame, plus nous reproduirons fidèlement la finesse de nos dégradés. Une résolution de 1200dpi est conseillée, même pour les travaux destinés à l’écran car vous aurez ainsi une reproduction plus franche de vos traits. Vous vous dites peut-être comment les fichiers du mode bitmap peuvent-ils être moins lourds tout en utilisant des résolutions plus élevées ? En fait la résolution aura beaucoup moins d’impact sur le poid du fichier que le mode de numérisation… un fichier 300dpi numérisé en RVB pèsera souvent bien moins lourd qu’un fichier bitmap en 1200dpi.

Le mode Nuances de gris : Fortement conseillé pour les crayonnés

A contrarion du mode bitmap, les nuances de gris vous laissent beaucoup plus de souplesse dans votre travail. Ici, une résolution trop élevée rendra votre travail fastidieu. À moins d’avoir une très bonne machine, et de rechercher une finesse de traits très précise, 600dpi feront largement l’affaire.

La plupart des logiciels de numérisation vous permettront de définir vos points de référence noir et blanc. Vous devrez selectionner dans votre scan une point de noir pur qui sera considéré par le logiciel comme le noir de référence. Et de même pour le blanc.

La manière de choisir le mode de numérisation dans l’interface dépendra de votre scanner (généralement vous aurez le choix entre « niveaux de gris », « bitmap », ou « rvb »).

2 ) Le nettoyage des traits

Dans cette étape de notre travail, nous allons nous appliquer à effaçer tout les défauts de la numérisation (cheveux, poussières,…), mais aussi à mettre en valeur notre dessin pour corriger certains traits et en renforcer d’autres. En utilisant la fenêtre d’informations de Photoshop, vous pouvez voir la valeur de noir de chaque pixel de votre image (0% = blanc, 100%= noir). Vous remarquerez sûrement que certaines zones ont des valeurs intermédiaires… parfois cela concernera des nuances que vous souhaiterez conserver, mais la plupart du temps ce sera le résultat de tâches ou de tout autre élément indésirable.

En réalité, ce travail dépendra beaucoup du mode de numérisation précédemment choisi. En mode bitmap, un simple coup de pinceau noir ou blanc sur votre scan suffira bien souvent.

En revanche, si cela ne suffit pas, ou si vous avez choisi le mode « niveaux de gris », vous aurez probablement besoin d’aller un peu plus loin dans votre travail.

A partir de là, nous aurons besoin d’un fichier exemple… en fouillant dans mes fichiers j’ai moi aussi retrouvé un vieux crayonné et dépoussiéré mon scanner (vous pouvez consulter l’image finale de ce tuto sur mon site portfolio).

Mon dessin scanné

Pour commencer, on peut jouer sur les niveaux de notre fichier… Je commence toujours par cette étape tout en l’utilisant avec beaucoup de précaution car avec parcimonie, elle permet de retirer le gros du travail. Attention tout de même car les niveaux agissent sur tout le fichier et pas seulement sur certaines nuances de gris et en abusant des niveaux, on pourrait supprimer trop d’information et perdre en nuances et en finesses.

Ctrl-l (ou pomme-l) ou bien Image > Réglages > Niveaux pour accéder à l’interface des niveaux. Sur la fenêtre des niveaux, on voit un graphique qui représente l’information de notre notre image. Parfois, les extrémités du graphique (le noir 100% à gauche et le blanc 0% à droite) sont vides ou presque vides comme c’est le cas sur l’image ci-dessous. Cela signifie que l’image ne contient pas ou peu d’information dans ces gammes de nuance de gris. On peut donc déplacer la flèche correspondante au-delà de la zone vide pour augmenter le contraste de notre image.

Je déplace mon noir pur au-delà de la zone vide

Une fois ce premier réglage grossier terminé, nous allons entrer plus en douceur dans les nuances de gris de nos traits.

Photoshop nous offre un autre réglage intéressant, qui cette fois-ci va nous permettre de sélectionner sur quelle nuance de gris nous souhaitons appliquer nos changements. Plus de finesse et de précision nous permettrons de nous lâcher un peu plus sur ce réglage.

Nous allons donc utiliser le réglage par courbes de Photoshop. Pour celà Ctrl-m (pomme-m) ou bien Image > Réglage > Courbes.

L’interface des courbes vous propose un graphique avec en abcisse les informations d’entrée, et en ordonnées les informations de sortie. Du blanc qui part de l’intérieur du graphique au noir à l’exterieur. Nous n’allons pas détailler ici toutes les fonctionnalités des réglages de courbes, mais pour la partie qui nous intéresse (nettoyer les traits), nous pouvons augmenter le contraste de notre dessin sans pour autant dénaturer les tons gris moyen, et donc sans perdre les nuances de notre crayonné.

La fonction courbes de Photoshop

Pour utiliser les courbes, tout est très simple. Aux extrémités de la courbe de notre dessin, vous pouvez voir que Photoshop pace 2 points par défaut (justement les points représentant les extrémités de nos tonalités de gris). Vous pous cliquer sur ces points et les déplacer dans le graphique pour voir les modifications que cela apporte à votre dessin (assurez vous bien que la fonction « aperçu » soit cochée pour voir les modifications en direct). Jouez un peu avec ces points pour comprendre mieux le fonctionnement des courbes. Pensez bien ensuite à replacer les points où ils étaient par défaut, faute de quoi, on modifierait les valeurs de noir pur et de blanc pur de notre image.

Nous allons maintenant nous attaquer à nos réglages !

Pour atteindre notre objectif de nettoyage en finesse, nous allons placer trois nouveaux points sur la courbe qui est pour l’instant droite. Un premier point au centre de la courbe (ne le déplacez pas), qui nous servira de point d’ancrage. Puis deux nouveaux points : un premier au milieu de l’axe allant du point central au point d’entrée, et un second au milieu de l’axe allant du point central au point de sortie. Si mes explications ne sont pas claires, reportez-vous à l’image ci-dessous !

Voici comment placer nos 3 points sur les courbes

Nous allons maintenant déplacer nos 2 derniers points pour augmenter le contraste. Notre point du milieu va nous permettre de ne pas perdre le centre de la courbe. Déplacez vos points comme ci-dessous.

Déplaçez vos points comme ceci pour obtenir un bon nettoyage de traits par les courbes

Attention tout de même : Je vous conseille de ne pas « écraser » la courbe sur les limites du graphique en déplaçant trop les points. Cela nous ferait perdre de l’information.

Nous allons maintenant passer à la dernière étape de notre nettoyage. La plus fine et la plus ludique aussi. Fini les fenêtres de réglage de Photoshop, vous allez devoir vous servir de votre souris !

Nous allons utiliser une petite astuce pour mieux identifier les zones maintenant assez fines après tout les réglages que nous avons effectué. Passons notre image en négatif : Ctrl-i (pomme-i) ou bien Image > Réglages > Négatif.

Notre image en négatif sous Photoshop

Pour peaufiner notre nettoyage, nous allons utiliser l’outil « Densité - » de Photoshop. Réglez la taille du pinceau sur une taille approchant la taille des lignes de votre dessin, l’exposition sur 100%, et surtout la gamme sur « Tons clairs » qui nous permettra de n’agir que sur nos traits (blancs après le passage en négatif). Comme vous l’aurez peut-être deviné, nous allons repasser nos traits avec l’outil « Densité - » pour les contraster encore avec le noir.

L'outil densité - de Photoshop

Il faut ensuite répéter l’opération, avec cette fois l’outil « Densité + », sur la gamme de tons foncés. Cette fois, nous allons pouvoir effacer les traits superficiels.

L'outil densité + de Photoshop

Une fois satisfait du résultat, vous pouvez repasser votre image de nouveau en négatif.

Le nettoyage de vos traits est désormais terminé, vous pouvez prendre un peu de recul sur votre dessin, repasser en négatif pour vérifier que cela vous convient.

3 ) Séparer les traits du fond

Maintenant que nous avons de jolis traits bien dessinés, il va nous falloir les isoler de notre fichier pour pouvoir travailler dessus plus simplement (en colorisation, en design, en illustration, ou en webdesign, vous aurez la plupart du temps plus de confort et de souplesse à travailler avec des traits sur un calque séparé). Que votre dessin soit un encrage à l’encre très contrasté, ou un crayonné plein de nuances de gris, isoler votre numérisation est en réalité très simple.

Deux méthodes s’offrent à nous : passer notre calque de traits en mode « Produit », ou bien utiliser les puissantes fonctions de sélection de photoshop.

Le mode « produit » va appliquer les couleurs sombres du calque concerné à tout les calques qui sont en dessous : Plus la couleur tendra vers le blanc, plus elle sera transparente jusqu’à atteindre une transparence totale sur le blanc pur. Ainsi, pour notre calque de traits, le mode « produit » est parfaitement adapté puisqu’il va nous permettre d’afficher nos traits (noirs ou sombres) au dessus des autres calques de notre réalisation, sans pour autant afficher le fond (blanc ou clair). Vous pourrez ainsi créer autant de calques que vous le souhaitez sous le calque de traits pour coloriser, ajouter des photos ou d’autres éléments selon le résultat que vous recherchez. Dans tout les cas, vos traits scannés s’intègreront parfaitement à votre réalisation.

Pour passer votre calque en mode « produit », sélectionner « produit » dans le mode de fusion de la fenêtre calques de Photoshop.

Les modes de fusion de Photoshop

La deuxième méthode consiste à sélectionner directement nos traits. Pour cela, nous allons tout d’abord créer un nouveau calque vide au dessus de tout les autres. Il faut ensuite resélectionner notre calque de traits.

Rendez-vous dans la fenêtre « couches » de photoshop (normalement située près de la fenêtre des calques). Vous devez voir une couche dans la liste nommée « Gris ».

La fenêtre des couches de Photoshop

Faites un clic droit sur cette couche, puis choisissez « Dupliquer la couche… ». Nommez cette nouvelle couche « traits ». Assurez-vous de bien avoir sélectionner la couche « Gris », puis passer cette couche en négatif (Ctrl-i ou Pomme-i ou Image > Réglages > Négatif).

Notre image apparaît maintenant de nouveau en négatif. Nous allons utiliser la fonction de sélection du remplissage de calque de photoshop. Faites un Ctrl-clic (Pomme-clic) sur notre couche « Gris ».

La sélection par remplissage de calque de Photoshop

Comme vous pouvez le constater, des pointillés de sélection sont apparus un peu partout sur notre image. En réalité, seulement autour de nos traits. Et c’est précisement ce que nous recherchions !

Retournez dans la fenêtre des calques, cachez votre calque de traits et sélectionnez le calque vide que nous avons créé. Assurez vous de bien avoir du noir en couleur de 1er plan, puis remplissez la sélection (alt-Delete ou maj-F5 ou encore Edition > Remplir). Déselectionnez vos traits (Ctrl-d ou Pomme-d ou Sélection > Déselectionner). Votre calque vide contient désormais vos traits ! Cette seconde méthode a pour avantage de réellement séparer vos traits du fond… cela vous offrira plus de possibilités dans vos créations.

Notre tuto sur l’acquisition de dessins sur Photoshop est terminé. C’est le 1er tuto de graphuccino, j’espère qu’il vous aura plu !