Julien Zmiro blog de webdesign

[Tuto] Colorisation et encrage vectoriel sous Flash

Julien Zmiro — Sat, 23 Jan 2010 21:36:13 +0000

Flash est un outil d’animation très puissant… mais pas seulement ! Ses outils de création graphique vectoriels originaux et très intuitifs en font un substitut de choix pour de nombreux graphistes frustrés par la « rigidité » d’Illustrator. Voyons dans cet exemple comment mettre en pratique ces outils lors d’une colorisation simple d’un dessin scanné.

Pour débuter ce tutoriel, je vais partir d’un croquis dessiné à la main sur un bout de carnet, puis scanné. Pas besoin de nettoyer son crayonné pour cet exercice, il ne nous servira que de guide, et ne sera pas visible sur le rendu final.

Pour cet exercice, mon crayonné est un personnage représentant un orc. Je souhaite un style graphique assez frai, et Flash sera l’outil idéal pour cela :

Dessin scanné de base

Étape 1 : import du dessin

On ouvre donc Flash, et on commence par importer notre dessin.
Pour cela, on fait « Fichier » > « Importer » > « Importer dans la scène », ou ctrl + « r ».

Notre image est maintenant disposée sur notre scène. Pour y voir plus clair et anticiper la multitude de calques qui nous attendront, on va commencer par renommer le calque sur lequel notre dessin de base est positionné. Pour ma part, je l’ai appelé « Line ».

On sélectionne ensuite le dessin sur la scène. Pour l’instant, en regardant le panneau de propriétés de l’objet, il est considéré par Flash comme un « objet bitmap », et les possibilités de manipulation sont limitées. On va donc convertir notre dessin en Clip : « Modification » > « Convertir en symbole » (ou F8). On vérifie que « Clip » soit bien sélectionné dans la fenêtre qui s’affiche, on entre un nom de symbole ( »Line » par exemple), et on clic sur ok.

Lorsqu’on sélectionne de nouveau notre dessin sur la scène (sans double-cliquer !), on s’aperçoit qu’il est maintenant considéré par Flash comme un « Clip », et que nombre de ses propriétés sont modifiables. C’est justement ce qui nous intéressait. Nous allons commencer par modifier le mode de fondu du calque pour le passer à « Produit ». En effet, notre calque de dessin sera placé au dessus de tous autres, et ce mode de fusion nous permettra d’en cacher totalement les zones blanches, pour ne laisser visible que le trait qui nous servira de modèle. Si le trait semble trop visible est gêne votre lecture, n’hésitez pas non plus à baisser l’opacité du calque dans le menu « Couleur » > « Alpha » du panneau de propriétés de l’objet.

Import du dessin scanné sous Flash

Notre base de travail est prête, attaquons nous aux choses sérieuses !

Étape 2 : bases de couleur

On va donc commencer cette mise en couleur en créant un nouveau calque pour la tête de notre personnage. Il faut bien imaginer que chaque élément qui constitue notre personnage (nez, oreille, bras gauche, doigts, bras droit, slip,…) sera sur un calque propre. Pour plus de clarté, il est important de bien nommer tous vos calques, et de les regrouper par « zones » dans des groupes de calque (exemple un groupe pour la tête, un autre pour le corps,…).
Nous plaçons donc tout de suite notre calque « tête fond » dans un groupe de calque nommé « tête ».

Toujours sur ce calque, nous allons commencé notre tracé grâce à l’outil « Ligne » de Flash (raccourci « n »). Nous allons pour l’instant tracer des lignes droites, qui suivront les principaux points d’encrages de notre dessin (mais pas forcements les courbes donc). Pour l’instant, il n’est pas nécessaire que notre tracé suive parfaitement notre dessin.

Il faut en revanche bien faire attention : Votre tracé doit absolument être parfaitement fermé pour pouvoir être rempli ensuite. Pour cela, n’hésitez pas à zoomer pour vérifier le placement des points d’encrage avec l’outil « Sous-sélection » ( »a »). Deux astuces : Vous pouvez également activer l’accrochage aux objets lors du tracé (option disponible en bas de la barre d’outil, avec l’icône d’aimant); vous pouvez aussi double-cliquer sur votre tracé pour vérifier qu’il est bien sélectionné dans son ensemble (si des zones ne sont pas sélectionnées, c’est que la coupure du tracé est autour).

Si tout va bien, on peut désormais remplir notre tracé d’une couleur de fond. Pour cela, on utilise l’outil « Remplissage » ( »k »), on choisit une couleur de remplissage, et on clique à l’intérieur de notre tracé.

Voici le résultat de ma forme de tête de base :

Base de la forme tracée sous Flash

On va maintenant modifier le tracé de notre forme pour qu’elle colle à notre dessin. Pour cela, on utilise l’outil « Sélection » ( »v »), on attrape la partie du trait qu’on souhaite bouger, et on la fait glisser à son nouvel emplacement. Le tracé est déformé de façon fluide, et les traits se courbent naturellement. Cette méthode est extrêmement intuitive, on déplace réellement les lignes selon nos besoins. On peut également déplacer un point d’encrage du tracé (l’icône de l’outil change pour former un angle droit lorsqu’on survole un point d’encrage). On peut enfin ajouter de nouveaux points d’encrage au tracé, ou en supprimer grâce aux outils « Ajouter un point d’encrage » ( »= ») et « Supprimer un point d’encrage » ( »- »). Manipulez un peu votre trac é pour bien appréhender la méthode.

Modification des courbes du tracé sous Flash

À ce stade, on peut également supprimer les lignes de contour qu’on ne souhaitera pas conserver. Pour cela, on les sélectionne grâce à l’outil « v », en prenant bien soin de ne cliquer qu’une fois sur la partie du tracé qui nous intéresse, puis on le supprime grâce à la touche « suppr ». On pourra plus tard, rajouter les lignes de contour effacées grâce à l’outil « Encrier » ( »s »).

Au final, ma forme de tête ressemble à ça :

Forme de la tête du personnage sous Flash

On répète la création des formes de bases sur tous les éléments, en les séparant bien de calques, et en choisissant tout de suite des couleurs adaptées (pour le remplissage au moins).

Étape 3 : les contours

Cette étape est moins amusante que la précédente, un peu plus rébarbative, Elle consiste à modifier la taille, et la couleur de tous les contours que nous avons précédemment tracés. Pour cela, on sélectionne un tracé en cliquant dessus (ou double-cliquant si l’on souhaite le tracé entier). On peut ensuite modifier l’épaisseur du trait, et la couleur dans le panneau de propriétés. Ne pas hésiter à sélectionner plusieurs tracés similaires en maintenant la touche « Shift » lors de la sélection. On peut également utiliser l’outil « Pipette » ( »i ») pour qu’un tracé précédemment sélectionné, prenne les propriétés du tracé sur lequel on applique la pipette.

Modification de l'épaisseur et de la couleur du trait sous Flash

Étape 4 : les volumes

Notre image est pas mal, mais elle manque de volumes !

Bases de nos couleurs sous Flash

On va donc ajouter des aplats clairs ou foncés, pour simuler la lumière et l’ombre sur notre couleur.
Comme pour l’étape des bases de couleur, tout va se passer sur le calque de base de chaque élément. Pour l’exemple, je vais partir sur une jambe.
Je me place donc sur le calque de la jambe, et je sélectionne le remplissage en cliquant une fois dedans.

Sélection du calque de la jambe

Une fois de plus, nous allons faire appel au puissant outil « Ligne » de Flash ( »n »). On va cependant prendre garde à choisir une couleur de trait bien différente de la couleur de remplissage du calque sur lequel nous travaillons. Et on va tracer le contour de notre ombre directement sur le calque de la jambe. Il faut bien faire attention que la partie à ombrer soit totalement isolée du reste du remplissage. En revanche, si il sépare le remplissage en deux, le tracé n’a pas forcément besoin d’être fermé.

Tracé délimitant l'ombre de remplissage

On sélectionne ensuite la partie de remplissage de calque que nous souhaitons modifier, et on utilise l’outil de remplissage ( »k ») pour le remplir d’une couleur plus sombre.

Remplissage de la couleur d'ombre

Comme lors de l’étape des bases de couleur, on peut éventuellement utiliser l’outil de sélection ( »v »), pour modifier le tracé de l’ombre, et arrondir les angles.

Modification du tracé de l'ombre

On sélectionne ensuite la totalité du tracé que nous venons de créer en double cliquant dessus, puis on le supprime grâce à la touche « suppr ».

L'ombre de la jambe

On répète le processus pour tous les éléments, et pour toutes les couleurs que nous souhaitons ajouter.

Astuce : les dégradés sous Flash

Pour l’étape des bases de couleurs, comme pour celle des volumes, on peut utiliser un dégradé au lieu d’une couleur unie. Cette technique est très utile lorsque l’on souhaite des volumes plus ronds, et des effets de lumières diffusées.
Pour utiliser un dégradé sous Flash, il suffit de choisir « radial » ou « linéaire » à la place de « uni » dans le panneau de couleurs, en sélectionnant la zone de remplissage concernée grâce à l’outil « v ». On peut ensuite modifier les couleurs qui constituent le dégradé en sélectionnant le point de couleur que l’on souhaite modifier et en modifiant sa valeur hexadécimale.

Le panneau de couleur de dégradé sous Flash

On peut enfin modifier la taille, la disposition, et l’étendue du dégradé en sélectionnant la zone du dégradé concernée, puis l’outil « Transformation de dégradé » ( »f »). Cet outil est très puissant et les possibilités sont étendues.

L'outil de transformation de dégradé sous Flash

Étape 5 : l’export d’image sous Flash

Pour finir, on va exporter notre image depuis Flash. Pour cela on va régler les paramètres de publication du document : « Fichier » > « Paramètres de publication ». Dans l’onglet « Formats » de la fenêtre qui s’affiche, on sélectionne les formats qui nous intéressent, puis on clique sur publier.

Voici le résultat finale de ma colorisation sous Flash :

Colorisation sous Flash

Ce tutoriel nous aura permis de faire un petit tour de tous les outils de création graphique de Flash, et de certaines méthodes d’utilisation. Les possibilités sont infinies, et la colorisation sous Flash, très particulière, peut vous rebuter ou vous emballer selon vos affinités avec le logiciel. En tous cas, pour les gens allergiques à Illustrator, cela constitue une sérieuse alternative pour la création graphique vectorielle.

[Ressource] 20 conseils pour des emails HTML bien réalisés

Julien Zmiro — Wed, 26 Aug 2009 22:16:05 +0000

Cet article a été publié sur le site graphuccino.com

J’ai récemment été confronté à un gros travail de refonte de campagnes d’emails pour un éditeur de sites (design et intégration). Un peu novice dans le domaine, je pensais naïvement retrouver les contraintes du design et de l’intégration HTML de sites web… et je fus bien surpris des résultats de mes 1ers tests !
Si comme moi, vous avez un jour du analyser en profondeur vos réalisations HTML dans différents lecteurs mails, vous savez alors à quel point les contraintes du web (nombre de configurations de transmission de l’information différentes) sont multipliées lors de la réalisation d’emails HTML…
Et face à chaque problème, la meilleure attitude reste de tirer profit des difficultés pour en apprendre plus. C’est ce que j’ai fait en me documentant sérieusement sur les contraintes et les enjeux du design et de l’intégration d’email HTML… voici donc quelques conseils ou règles que j’ai pu retenir et qui pourraient vous intéresser.

Quelques rappels rapides

Grossièrement, il existe 2 types de lecteurs mail : les logiciels (Outlook, Thunderbird, le mail de mac,…), et les webmails (des services par navigateur du type Gmail, Hotmail, Aol, et tout type de fournisseur d’accès). Et pour ne rien simplifier, les différentes versions de ces lecteurs peuvent parfois prodiguer des interprétations HTML/CSS totalement différentes. Globalement il faut retenir que les lecteurs les plus « difficiles », et donc ceux qui réclament le plus d’attention, sont Outlook 07 (les précédentes versions beaucoup moins), Gmail, et Lotus.
En gardant cela à l’esprit, il faut ensuite connaître sa cible pour lui adapter au mieux ses réalisations. Beaucoup d’outils statistiques permettent d’avoir des informations sur l’audience d’une campagne de mail (notamment grâce à des outils fournis par les gestionnaires de campagnes…). Mais si vous n’avez pas accès aux statistiques précises de votre audience, je vous conseil de jeter un oeil à ce bilan 2008 d’un gros éditeur de campagnes de mail.

1- Largeur maximale de 600px

Il faut bien garder à l’esprit que beaucoup des lecteurs de vos mails utilisent des services web (hotmail, orange, aol, yahoo, gmail,…) pour consulter leurs messages. Souvenez-vous alors des dimensions conseillées pour vos webdesign de pages… entre 800px et 1000px de large. Il faut soustraire de ce chiffre la largeur de la colonne, souvent située à gauche de la page, et parfois d’une seconde colonne publicitaire. On arrive à un habillage externe au mail d’environ entre 170px et 300px sur la plupart des webmails… et que dire de ceux qui n’utilisent que le mode prévisualisation de leurs lecteurs mail (Outlook, Thunderbird, le mail de mac,…). Dans ce cas, la largeur est assez imprévisible.
Pour toutes ces raisons, il est conseillé de se limiter à une largeur de 600px lors du design de ses mail pour être à peu près certain d’une bonne visibilité sur toutes les plateformes. On peut bien sûr aller un peu au delà, mais passer au dessus de 800px me semble très risqué.

2- Pouvoir identifier les principales informations du mail dans les 500 premiers pixels de lecture

Encore une fois les contraintes de dimensions ne sont pas les mêmes que pour un site web… Si vous souhaitez gagner la confiance de votre auditeur et lui faire lire votre mail, il va falloir indiquer clairement de quoi il s’agit : qui êtes vous, et ce que vous souhaitez lui dire. Il faut donc faire figurer votre nom, celui de votre entreprise, ou même un logo, ainsi qu’un titre de mail dans les 300 à 500 premiers pixels de la hauteur du mail. Cela assurera la visibilité de ces informations même en mode de prévisualisation (le mode où ces informations sont les plus nécessaires !).

3- Proposer un lien vers la version web du mail

C’est essentiel car cela vous permet de résoudre la plupart des problèmes pour peu que votre lecteur prenne la peine de se rendre sur cette version web… imaginez donc l’un de vos lecteur, qui souhaiterait accéder au contenu de votre mail, mais qui pour une quelconque raison ne pourrait pas le faire correctement dans son lecteur mail. Il serait impensable de ne pas lui proposer un moyen de visualiser ce mail directement dans son navigateur. Il faut donc bien penser à publier une version de vos mail sur votre serveur web, et d’inclure un lien pointant dessus dans votre version mail.

4- Proposer un lien de désabonnement

Encore une fois c’est essentiel ! Si vous entretenez une liste de diffusion régulière, c’est même obligatoire… alors surtout ne l’oubliez pas.

5- Proposer à vos lecteurs de vous ajouter à leur carnet d’adresse

Cela peut paraître idiot, anodin, ou un peu candide… pourtant, si cela est bien fait, les résultats peuvent être très intéressants aussi bien pour vous que pour vos lecteurs. N’hésitez pas à expliquer d’ailleurs à l’utilisateur les avantages de cet ajout (pas de passage dans les spams, images débloquées,…).

6- Un équilibre texte/images

Il faut absolument proscrire les mails tout en image ! C’est certainement l’un des meilleurs moyens de faire passer directement vos messages par la case spam. Une bonne moitié de contenu textuel est essentielle, surtout dans les secteurs « à risque » : jeux concours, commerce, séduction, rencontres,…

7- Un texte alternatif sur vos images

Encore une fois, c’est extrêmement important. Il faut bien que vous gardiez à l’esprit que les images de votre mail seront bloquées par défaut sur la plupart des lecteurs (Outlook, Gmail, Hotmail, Thunderbird,…). Un texte alternatif vous permet d’informer le lecteur sur le contenu de votre mail avant qu’il n’ait besoin de débloquer les images. Pire, il faut savoir que environ 30% de vos lecteurs ne sauront même pas reconnaître des images désactivées, et ne les afficheront donc jamais…

8- Déclarer toutes les dimensions de vos images en HTML

Vos images seront presque toujours désactivées par défaut, mais il ne faudrait pas qu’en plus votre mise en page soit détruite ! Il faut bien penser à déclarer toutes les dimensions de vos images en HTML pour éviter que les espaces qu’elles remplissent d’ordinaire dans votre mise en page ne soient « écrasés ».

9- Eviter les images sur les éléments importants

Même avec de bons textes alternatifs, une image désactivée, ce n’est pas très engageant… les liens importants de vos mails devraient dans la mesure du possible ne pas être intégrés sous forme d’images pour être les plus efficaces possible.

10- Eviter les termes à risque dans l’intitulé des liens

Même si les mécaniques du classement d’un mail en spam restent relativement obscures, il semble évident qu’une abondance de termes du type « Cliquez-ici », ou encore « Gagnez xxxxx euro », est extrêmement néfaste. Je ne vais pas établir une liste exhaustive des termes en questions, le bon sens suffit bien souvent pour éviter les tournures généralistes ou racoleuses.

11- Eviter les URL dans l’intitulé des liens

Un peu plus subtil que le point précédent, mais peut être tout aussi risqué. L’utilisation d’URL (du type http://www.google.fr) peut être assimilée à du phishing (hameçonnage) : une technique qui consiste à obtenir des informations (mot de passe, login, numéro de carte,…) en simulant l’interface d’un autre site, ou pour notre exemple, les liens vers des sites de confiance.

12- Ne pas aller au delà de 8 tableaux imbriqués

Un seul lecteur mail (Lotus) semble ne pas réussir à interpréter le HTML au delà de 8 tableaux imbriqués. Il faut noter que ce lecteur touche une cible assez particulière et ne représentent souvent pas une grosse part de l’audience. D’un autre côté, on peut se questionner sur l’utilité d’aller au delà de 8 tableaux HTML imbriqués…

13- Attention aux GIF animés

Ils resteront tout simplement statiques (sur la 1ère image) sur Outlook 07… pour les autres navigateurs ça passe à priori. Prenez donc soin de bien inclure votre message dans la 1ère image de vos GIF animés.

14- Pas de contenu Flash

Votre contenu Flash ne sera pas affiché sur la plupart des lecteurs… pire il pourra même provoquer certaines alertes de sécurité sur quelques lecteurs !

15- Eviter la transparence sur les PNG

Je vais rester un peu plus retenu sur ce point qui reste flou pour moi… il semblerait que la transparence des PNG pose encore problème sur la plupart des lecteurs mail.

16- Eviter le mapping d’images

Cette technique consiste à déclarer plusieurs liens sur une seule image grâce à un système de coordonnées. Je ne sais même pas si c’est une technique encore utilisée dans les intégrations de sites web, en tout cas je pense qu’on peut assez facilement s’en passer dans la plupart des cas.

17- Eviter les images CSS

Les images placées dans un style « background:url(image.jpg); » risquent de ne pas être affichées dans certains lecteurs… c’est une chose à savoir et à anticiper, pour ne pas, par exemple se retrouver avec du texte blanc sur un fond blanc au cas ou les images CSS d’arrière plan seraient désactivées. Les lecteurs concernés sont principalement Gmail et Outlook 07.

18- Pas de formulaires

Les formulaires ne seront pas actifs dans la plupart des lecteurs mail (AOL, hotmail, Outlook 03, Yahoo mail classic,…). Ils ne seront même pas affichés dans Outlook 07, ce qui pourra en plus vous causer des problèmes de design. Préférez toujours un lien vers un formulaire web.

19- Déclarer tout vos styles en ligne dans les balises HTML

Si il semble évident que les liens vers des feuilles de style externes sont à proscrire, il faut faire le tri entre les 2 méthodes restantes. Doit-on déclarer nos styles dans des balises HTML « », ou bien directement en ligne dans les balises HTML «

» ? En fait, la 1ère méthode suffirait si l’on oubliait Gmail… malheureusement, le lecteur de Google n’interprète que les styles en ligne. Si l’on souhaite s’assurer une compatibilité maximale, il faut donc s’en tenir aux styles en ligne, même si cela est beaucoup plus contraignant pour les mises à jour. Remarquez que pour les utilisateurs de Mac et de l’éditeur de texte Textmate, il existe une série de bundles pour passer directement vos styles CSS en styles en ligne. Notez également que si vous décidez d’utiliser des balises «

Exemple 1

Exemple 2

1) Explications

Bien sûr, ce petit raté ne sera visible que lors du 1er survol du bouton. La raison est simple : Dans le 1er exemple, le bouton est composé d’une image chargée en CSS. Cette image correspond uniquement à l’état « normal » du bouton (au repos, sans survol). Lors du chargement de la page, le navigateur charge toutes les images qui doivent être affichées, mais bien sûr pas toutes les autres images présentent dans le répertoire de votre site, mais pas affichées. Lors du survol du bouton de l’exemple 1, la CSS indique au navigateur l’affichage d’une nouvelle image, celle qui correspond à l’état « survol » de votre bouton. Le navigateur, qui n’a pas chargé cette image lors du chargement de la page (puisqu’elle n’était pas affichée), va devoir la charger au moment du survol. Et même si les connexions modernes sont souvent très rapides, vous aurez toujours au mieux un léger effet de saccade lors du survol, et au pire un réel temps de latence… c’est un détail certes, mais dans le webdesign, et surtout en intégration, ce sont les finitions qui font toute la différence entre un site réussi et un site plus banale.

2) Solution

La solution semble évidente : il faut réussir à charger les images de rollover dès le chargement de la page. Il existe plusieurs méthodes, mais la plus simple et la plus propre est certainement la suivante. Il faut bien préciser que cette technique ne s’applique qu’aux images chargées par CSS (oubliez donc vos images HTML).
Dès la phase de webdesign, il faut prendre en compte les problématiques d’intégration. Ainsi, il faut penser à assembler les 2 états (normal et survolé) de chaque bouton sur une seule image. Pour celà, je vous conseille de suivre le précédent tutoriel de graphuccino : « Un effet de rollover sur vos boutons ».
Une fois votre image prête, il va falloir effectuer un léger travail CSS.
Ce que nous voulons :
1 – Que notre image, qui fait le double de la hauteur réelle de notre bouton soit affichée correctement à l’état normal. Pour celà, nous utiliserons simplement les propriétés CSS de dimension pour spécifier la taille à afficher.
2 – Que lors du survol, l’image normal sorte du « champs » de notre bouton pour laisser place à la partie de l’image au survol. Et nous utiliserons pour cela les propriétés de position de l’arrière plan.
Voici donc ce que celà donne en CSS et HTML, en partant du principe que notre bouton doit faire 150px de large et 80px de haut :

Le HTML
Acheter

Et le CSS
#notreBouton {display:block; width:150px; height:80px; background:url(/notre-image.jpg) no-repeat 0 0;} #notreBouton:hover {background:url(/notre-image.jpg) no-repeat 0 -80px;}

La propriété « display:block; » permet de stipuler au navigateur que notre balise « » doit être considérée comme un bloc (au lieu d’une balise en ligne). Cela nous permet de donner des dimensions à notre lien. Il est important de bien penser à donner une hauteur égale à la moitié de notre image ( »height:80px; »). Pour finir, nous indiquons que notre lien aura pour image d’arrière plan « notre-image.jpg », qui ne sera pas répétée, et qui sera placée au haut à gauche de notre lien ( »background:url(/notre-image.jpg) no-repeat 0 -80px; »). Lors du survol du lien ( »#notreBouton:hover »), nous stipulons au navigateur que la position de l’image d’arrière plan doit changerde 80px, pour permettre d’afficher la partie au survol qui était cachée jusque là ( »background:url(/notre-image.jpg) no-repeat 0 -80px; »). C’est aussi simple que ça !

[Tuto] Un effet de rollover style firefox sur vos boutons

Julien Zmiro — Wed, 26 Aug 2009 22:04:27 +0000

Cet article a été publié sur le site graphuccino.com

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é !

[Ressource] Hack de transparence des png sur IE6 avec jquery

Julien Zmiro — Wed, 26 Aug 2009 22:02:58 +0000

Cet article a été publié sur le site graphuccino.com

Les png transparents offrent de larges perspectives aux concepteurs de sites Web. Le rendu des dégradés de transparence des png par les navigateurs modernes (IE7, FF3, Opera9,…), permet aux webdesigners des mises en pages innovantes. Malheureusement, dans un souci de rétro compatibilité avec IE6, les png sont proscrits de nombreux projets web.

Il est temps de déserrer le frein et de laisser roue libre à l’utilisation des png sur IE6 grâce à un plugin javascript basé sur ce qui est pour moi le meilleur framework js : jquery. Ce plugin vous permettra d’avoir un rendu parfait de la transparence de vos png sur IE6, que vos images soient appellées dans le HTML, ou dans le CSS.

Le plugin jquery png fix

Jquery png fix
Une solution très simple à mettre en oeuvre. Son seul inconvéniant étant la nécessité de charger la librairie javascripy « jquery« … inconvéniant qui n’en est pas un lorsque l’on à goûté a la qualité de ce framework !
Si vous comptez utiliser un peu de js sur votre site, faites un tour sur le site de jquery, et si vous choisissez d’utiliser jquery, alors jquery png fix est obligatoire !
Toutes les instructions d’installation sont disponibles sur le site du plugin.

Voilà, vous n’avez désormais plus à vous priver de l’utilisation de la transparence dans vos design !

[Tuto] Un effet de texte argenté sous photoshop

Julien Zmiro — Wed, 26 Aug 2009 22:01:49 +0000

Cet article a été publié sur le site graphuccino.com

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.

[Ressources] Le reset CSS d’Éric Meyer avec explications et bonus

Julien Zmiro — Wed, 26 Aug 2009 22:00:23 +0000

Cet article a été publié sur le site graphuccino.com

Si vous vous intéressez un peu aux CSS, vous avez certainement déjà entendu parler d’Éric Meyer. En plus d’écrire des livres, le « gourou des CSS » tient un excellent blog :

http://meyerweb.com/

Sur ce blog justement, Éric Meyer a publié son reset CSS. Bien sûr, ça vaut le coup d’oeil :

Le reset CSS d’Éric Meyer

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; }

Petite Explication :

Le reset CSS est une remise à plat qui tente d’être exhaustive des propriétés CSS des balises HTML. Ainsi, on écrase les interprétations de base des navigateurs pour repartir sur une base commune à tous… Le reset CSS nous permet donc de gommer toutes une bonne partie des problèmes de compatibilité entre navigateurs (les problèmes CSS bien sûr, ne vous attendez pas à voir ie6 appliquer les dégradés de transparence sur vos png). Tout ça sans hack CSS, ou sans commentaires conditionnels, simplement grâce à une déclaration exhausitve des propriété CSS de base d’un fichier HTML.

Pour aller plus loin :

Éric Meyer n’oserait pas, mais nous si ! Nous allons rendre notre petit reset CSS invalide selon le w3c… L’intérêt ? Ajouter une nouvelle propriété à nos éléments HTML, invalide car faisant partie des spécifications en cours de discussion pour les css 3, mais bien utile dès aujourd’hui, pour vraiment repartir de zéro et gommer les décalages de blocs d’un navigateur à l’autre. Ajoutez si vous l’osez ces quelques lignes dans la première déclaration de propriétés CSS du reset d’Éric Meyer (entre les premiers crochets) :
-moz-box-sizing:border-box; box-sizing:border-box; -webkit-box-sizing:border-box;

Ces propriétés CSS indiqueront aux différents navigateurs (1ère ligne pour Firefox, 2ème ligne pour Opera, et 3ème ligne pour Safari) qu’ils devront calculer la taille et la hauteur des éléments html de la même façon qu’Internet Explorer. Non pas que l’interprétation d’Internet Explorer soit particulièrement remarquable… simplement, comme souvent, c’est Internet Explorer qui n’en fait qu’à sa tête : En plus d’avoir une interprétation de base de la taille et de la hauteur différente des autres navigateurs, Internet Explorer ne comprend pas et ne prend pas en compte la propriété CSS « box-sizing »… Impossible donc d’accorder tout les navigateurs sans tous les ramener à l’interprétation d’Internet Explorer. Un choix à faire en somme !

Pour revenir au box-sizing en lui même : cette propriété CSS spécifie au navigateur comment il doit calculer la taille des éléments.

Voici les différentes valeurs possibles :

content-box (la taille inclut le padding)

border-box (la taille inclut le padding ET les bordures)

padding-box (la taille n’inclut NI le padding, NI les bordures)

Source :

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

[Inspi] 14 speed painting de portraits

Julien Zmiro — Wed, 26 Aug 2009 21:58:55 +0000

Cet article a été publié sur le site graphuccino.com

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

[Tuto] Nettoyer et séparer un crayonné scanné sous photoshop

Julien Zmiro — Wed, 26 Aug 2009 21:54:57 +0000

Cet article a été publié sur le site graphuccino.com

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 !

[Inspi] 46 character design style vectoriel sensationnels

Julien Zmiro — Wed, 26 Aug 2009 21:50:16 +0000

Cet article à été publié sur le site graphuccino.com

Pour ce 1er véritable article du blog, voici une sélection de quelques character design remarquables ! Tous dans un style vectoriel, parfois très différents mais toujours très réussis… De quoi prouver l’étendue du monde vectoriel et laisser loin derrière l’idée que le vectoriel c’est toujours pareil. Il me semble que certaines de ces illustrations ont été réalisées exclusivement sur Flash…. ce que je trouve assez bluffant.

Jonathan Ball

Maroto

siXsiXsiX

niark1

César Evangelista Bautista

Berk Cankat

Grelin Machin

Ntamak

Xa Brigandine Dofus

Xa Sram Wakfu

Xa Ecaflip Wakfu

Xa Sacri Wakfu