Portrait et travail

Matt Laskowski est un apprenti « illustrateur / designer conceptuel » étudiant à l’Institut d’Art de Boston (Massachusetts – Etats-Unis). Il s’inspire beaucoup de l’architecture, des infrastructures de transport et de l’environnement de la ville de Boston dans laquelle il réside. Il se passionne pour les dessins de personnages, de véhicules et d’environnements urbains.

Son style est davantage technique que organique. Il aime par exemple réfléchir sur la conception d’objets mécaniques, urbains, des gadgets et observer comment ces choses s’usent avec le temps. A mon avis, aux vues de ses dessins, Matt doit probablement aussi être influencé par la culture Manga.

Ce que j’admire dans son travail c’est sa maitrise des perspectives, son art de la composition, sa gestion des couleurs et des lumières et le choix des détails qu’il sélectionne pour rendre ses scènes plus réalistes.

Plutôt que de longs discours, voici quelques exemples issus de son portfolio :

Tutoriaux

Matt est également l’auteur sur le site Deviant Art, de tutoriels très bien fait que je vous recommande si vous voulez progresser en dessin digital :

- Perspective & Composition part. 1
Chapter 1: One Point Perspective
Chapter 2: Two Point Perspective
Chapter 3: Three Point Perspective
Chapter 4: Special Perspective Circumstances

- Perspective & Composition part. 2
Chapter 5: Creating a Compositional Framework
Chapter 6: The Theories of Compositional Design
Chapter 7: Making a Thoughtful Composition
Chapter 8: Get Inspired

- Wacom Tablet Adobe Photoshop & Corel Painter Guide
Chapter 1: Choosing and setting up your tablet for painting
Chapter 2: Tips and recommendations for drawing digitally
Chapter 3: Techniques for painting digitally
Chapter 4: Other things to know

- Photoshop Coloring via Adjustment Layers
Chapter 1: What are adjustment layers and layer masks?
Chapter 2: Using these to color digitally, full step-by-step demo
Chapter 3: Extra tips on using adjustment layers and layer masks

- Comic & Manga Style Halftone Screen Patterning
Chapter 1: What is halftoning?
Chapter 2: How to apply halftones digitally, full step-by-step demo
Chapter 3: Using your results for screen viewing or for print

- Steam, Smoke, and Vapor Effects
Chapter 1: Recommended brush settings
Chapter 2: The technique
Chapter 3: Observing the differences between steam and smoke

Sources :

http://plasticshards.com

C’est quoi exactement Paris Web

Paris Web 2008 – Salle de conférence – Photographie de lejoe sous licence Créative Commons

Paris Web est une association qui organise chaque année depuis 2006 un événement francophone de conférences, tables rondes et ateliers sur le média web. Pour en savoir plus sur la naissance de cette initiative, je vous recommande de lire l’interview des 3 fondateurs (Stéphane Deschamps, Adrien Leygues et Eric Dapset)

Les conférences d’une 50 aines de minutes (questions comprises) se succèdent sur deux jours dans un grand amphithéâtre de la tour IBM à La Défense. La troisième journée est consacrée à la mise en pratique autour d’ateliers animés par des professionnels du web ayant participés aux conférences (ou pas). Le lieu des ateliers n’est pas encore défini.

J’y suis allé l’année dernière et j’ai été très agréablement surpris par le niveau des conférences, le professionnalisme et le travail du staff, la qualité des infrastructures et l’ambiance très conviviale. On y retrouve pleins de professionnels du web, des bloggeurs, des illustres inconnus et même parfois des personnages qui se trouvent dans la bibliographie des livres que vous avez dans votre bibliothèque. Bref que du bon pour apprendre des choses, rencontrer des gens et passer un bon moment.

En savoir plus sur Paris Web …

Le programme de l’édition 2009

Cette année, l’événement aura lieu le 8 et 9 octobre pour les journées conférences et le 10 octobre pour la journée atelier.

Le programme des conférences est le suivant :

Gautier Barrère et Alain Vagner :
« Concevoir un produit web c’est bien, faire en sorte qu’il soit accepté c’est mieux ! »

Eric Daspet :
« Un Web ouvert »

Stéphane Deschamps :
« Intégrateurs, montez au front ! »

Karl Dubost :
« HTTP pour les naifs et les brutes »

Daniel Glazman :
« Un seul Web »

Hervé Mischler :
« Design itératif pour un site web de grande échelle »

Tristan Nitot et Paul Rouget :
« Les nouveaux standards du web et leur implémentation dans les nouveaux navigateurs »

Jeremie Patonnier :
« Le Webdesign orienté business »

Nicole Sullivan :
« CSS peut-il être orienté objet ? »

Amélie Boucher :
« De l’ergonomie pour mon e-commerce »

Arnaud Brin :
« ROI et performance web : intégrer la culture de l’optimisation à la stratégie Internet »

Charles Mc Cathie Neville :
« Mobile, nouvelles fonctionnalités, securité »

Chris Heilmann :
« Basic housekeeping – keeping the web a safe and clean environment »

Molly Holzschlag :
« … sur un sujet sans titre pour l’instant »

Thierry Régagnon :
« Référencement & Standards Web : La même destination »

Stephanie Troeth :
« Being Agile, Being Good »

Gilles Vauvarin :
« Webdesigner, l’homme qui parlait à l’oreille des intégrateurs »

Florent Verschelde :
« Webdesign et qualité »

Aurélien Levy et Sébastien Delorme
« WCAG 2.0, Flash, PDF, Javascript et les autres sont dans un bateau… »

Christophe Zlobinski-Furmaniak :
« Utilisabilité : quand le webdesign rencontre le marketing. »

Le programme des ateliers est à venir sur le site Paris Web …

Si vous avez lu le programme jusqu’au bout, vous avez pu noter que j’ai eu l’honneur d’être sélectionné pour l’édition 2009 avec un sujet sur la relation designer / intégrateur. Simple spectateur l’année dernière, j’ai proposé mes services cette année pour aider à l’organisation. L’équipe étant déjà au complet, on m’a proposé de soumettre un sujet sur le webdesign qui a finalement été retenu par le jury de sélection de l’association.

Me reste plus qu’à me mettre au boulot …

Conclusion

Paris Web 2009 / 8-9-10 ocobre, c’est du bon, mangez-en !

PS: si vous êtes intégrateur, vous pouvez m’aider à préparer mon intervention en répondant dans les commentaires ou par mail à une simple question :

« Quels problèmes vous posent les graphistes dans votre travail d’intégrateur… ? ».

Merci des témoignages que vous pourrez m’apporter sur ce sujet.

Infos pour les geek

Pour ne pas faire attendre les geek, voici rapidement ce qui se trouve sous le capot de la version 7.0.

Pour la gestion du contenu j’utilise toujours un bon vieux « WordPress ». Dans ma crise compulsive de refonte, j’ai hésité un moment à essayer un nouvel outil comme par exemple Habari ou SymphonyCMS. Mais le temps consacré à l’apprentissage d’un nouvel outil ma vite dissuadé vu la disponibilité dont je disposais.

Au niveau XHTML/CSS/JavaScript, j’ai utilisé le Framework CSS « 960 Grid System » avec une grille personnalisée de 26 colonnes. Pour le JavaScript, je suis resté fidèle à la librairie « JQuery » et j’ai adopté ses nouveaux scripts « JQuery Tools« .

Concept

Ce qui ne devait être qu’un re-design au départ , c’est finalement transformé en un véritable Tsunami que se soit au niveau ergonomie, navigation ou design.

Sur le plan ergonomie, je voulais quelque chose de plus simple, moins conventionnelle avec une mise en retrait de la partie blog pour mettre davantage en avant la partie professionnelle.

Les parties « Services », « A propos » et « Contact » ont été dégraissées. La quantité de texte a été réduit pour s’adapter plus facilement à une lecture rapide. Ces contenus s’affichent dans un cadre en cliquant sur les items du menu.

La partie « Portfolio » est traitée à part et différemment sur le plan ergonomique. Pour cette partie, j’ai décidé d’opter pour une navigation horizontale (Agrrr !!! sacrilège, Jacob Nielsen sort de mon corps …).

La partie blog a été simplifiée en mettant à la disposition de l’utilisateur le strict minimum. Exit les archives classées par mois, les nuages de tags, les articles similaires … j’ai même fini par retirer le moteur de recherche. A la place, j’ai décidé de n’afficher que des listes d’articles classées par catégorie. Comme dans les versions précédentes, l’article le plus récent reste mis en avant.

Design

Bon, ok ça pique un peu les yeux et ça ressemble aux couleurs d’une station service. A la limite, sortez vos lunettes 3D en cellophane.

Ma compagne déteste et elle risque de pas être la seule mais j’assume. De toute façon ce design est expérimental et amené à évoluer régulièrement.

J’ai voulu faire quelque chose d’un peu différent de ce que l’on a l’habitude de voir sur le web. Et Dieu sait que c’est pas facile vue la diversité graphique qui existent sur le web.

J’ai fais le choix de couleurs vives et contrastées dans un environnement sombre et géométrique. Pour me démarquer des formes arrondies très en vogue sur les sites web, j’ai pris le contre pied en jouant sur des formes anguleuses (logo, blocs, motifs d’arrière plan, encadrés des titres …). Ce design n’appartient à aucun style en particulier quoique l’on puisse y trouver un côté un peu vintage, année 60, néo-bobo.

Conclusion

Malgré un design non consensuelle qui ne fera pas l’unanimité, je pense que le traitement graphique est cohérent.

En ce qui concerne l’ergonomie, je n’ai pas forcément suivi les règles mais c’est à l’usage que l’on verra si il fonctionne où pas.

Introduction

Le contraste correspond à une opposition marquée, une différence de propriété (taille, orientation, forme, valeur, couleur …) entre deux ou plusieurs éléments. Le contraste est très utile pour le designer car il permet d’attirer l’attention du spectateur vers un sujet particulier et donc d’orienter son regard. En peinture, le sujet principal est souvent beaucoup plus contrasté que les éléments secondaires de la composition.

Dans le domaine de la couleur, Johannes Itten a distingué sept contrastes de couleurs. Les connaitre permet au peintre ou au designer d’accentuer, d’atténuer ou de supprimer ces contrastes afin d’apporter à ses créations plus de force expressive.

Pour mieux comprendre cet article, il est conseillé de maitriser la classification des couleurs sur le cercle chromatique. Si vous avez besoin d’une piqûre de rappel, je vous invite à lire l’article « L’harmonie des couleurs »

Les sept contrastes d’Itten

Contraste de la couleur en soi

Ce type de contraste est le plus significatif lorsqu’il fait intervenir des couleurs qui n’ont rien à voir entre elles et qui sont pures, lumineuses, dans leur intensité la plus forte. Le plus fort contraste de couleur en soi que l’on puisse obtenir est donc celui des trois couleurs primaires Jaune / Bleu Cyan / Rouge Magenta (synthèse soustractive), Vert / Bleu / Rouge (synthèse additive).

On obtient le même type de contraste mais avec une intensité moindre lorsqu’on utilise une juxtaposition des trois couleurs secondaires. Ce type de contraste sera encore plus faible avec trois couleurs tertiaires (que l’on obtient avec les 3 pointes d’un triangle équilatéral inscrit dans la roue chromatique). En effet ces couleurs ont des points communs. Par exemple l’orange et le vert contiennent du jaune, l’orange et le violet contiennent du rouge, le vert et le violet contiennent du bleu. Ceci a tendance à les rapprocher et donc à diminuer le contraste.

Le résultat sera coloré, franc, intense et net avec les couleurs primaires. Mais la force d’expression diminuera au fur et à mesure que les couleurs employées s’éloigneront des ces trois couleurs primaires.

On notera que lorsque les différentes couleurs sont séparées par des contours noirs ou blancs, cela accentue leurs caractères particuliers.

Exemple : Henri Matisse – Stanza Rossa

Contraste clair obscur

Ce contraste s’obtient en jouant sur les différences de valeurs des couleurs.

Chaque couleur possède une luminosité entre le sombre et le clair. Le noir est la valeur sombre absolue alors que le blanc possède la plus grande luminosité. Le plus fort contraste clair obscur est donc obtenu en juxtaposant du noir à coté du blanc.

Entre le noir et le blanc s’étend tout une gamme de tons colorés mais aussi de valeurs de gris.

Le gris moyen est la couleur la plus neutre. Il ne reçoit de la vie que par la proximité des autres couleurs. Sa perception est très changeante selon les couleurs qu’il côtoie :
- Il peut se teinter de la complémentaire de la couleur environnante.
- Il affaiblit et adoucit les couleurs qui l’approchent.
- Il peut lier par sa neutralité un ensemble de fortes oppositions de couleurs.

Une couleur à laquelle on rajoute du noir ou du blanc perd de son intensité.

Exemple : Rembrandt – La Ronde de Nuit

Contraste chaud-froid

Les couleurs nous suggèrent le chaud ou le froid selon les symboles auxquels elles sont rattachées dans notre expérience. Les couleurs chaudes sont les rouges, les oranges, les jaunes (braise, flamme, soleil …) et les couleurs froides sont les bleus, violets, turquoises et les verts (eau, glace, ciel, végétaux …).

On peut définir le caractère des couleurs froides et chaudes selon d’autres critères :
- Chaud / froid
- Ombragé / ensoleillé
- Apaisant / excitant
- Fin / épais
- Aérien / terreux
- Lointain / proche
- Léger / lourd
- Humide / sec

L’aspect chaud ou froid d’une couleur est versatile et va être influencé par les couleurs environnantes.

Par exemple un gris neutre paraîtra plus chaud s’il est entouré d’une couleur chaude comme le rouge, inversement il paraîtra plus froid entouré d’une couleur froide comme le bleu.

Une couleur quelconque paraîtra plus chaude entourée de couleurs plus froides qu’elle (même si cette couleur est considérée comme une couleur froide) et inversement une couleur quelconque paraitra plus froide entourée de couleurs plus chaudes qu’elle (même si cette couleur est considérée comme une couleur chaude).

Exemple : Pierre Auguste Renoir – Le Bal du Moulin de la Galette

Contraste de complémentaires

Un contraste de complémentaires est obtenu, comme son nom l’indique, en juxtaposant une couleur à sa complémentaire (couleurs opposées sur le cercle chromatique).

Lorsque deux couleurs complémentaires sont mises côte à côte, cela avive leur intensité alors que leur mélange les désature pour tendre vers le gris. Un mélange en quantité égale de deux couleurs complémentaires donne un gris pur. Cependant le mélange en quantités différentes permet d’obtenir des tons de couleur d’une grande subtilité et toujours harmonieux.

Chaque couple de couleurs complémentaires a ses particularités :
- Jaune-violet : C’est aussi le contraste clair-obscur maximum.
- Rouge-orangé – Bleu-vert : C’est aussi le contraste chaud-froid maximum
- Rouge-vert : Complémentaires d’égale clarté et de rayonnement égaux.

On notera également que notre oeil, lorsqu’il regarde une couleur, a tendance à rechercher sa complémentaire et, si elle n’est pas donnée, à la produire lui-même.

Exemple : Jan Van Eyck – Les époux Arnolfini

Contraste de quantité

Ce contraste est basé sur des rapports de grandeur beaucoup/peu (quantité) ou grand/petit (surface) qu’occupent deux ou plusieurs couleurs dans une composition.

Matisse disait : « Un mètre carré de bleu est plus bleu qu’un centimètre carré de bleu. »

Pour mettre en place un équilibre harmonieux des couleurs basé sur la quantité, il faut évaluer le rapport de couleurs à utiliser c’est à dire la quantité de chacune des couleurs les unes par rapport aux autres.

Cela peut être évalué intuitivement, cependant Goethe a mis en place une méthode plus objective basée sur les longueurs d’ondes des rayons lumineux c’est à dire les valeurs de luminosité des couleurs. Il a ainsi attribué les valeurs numériques suivantes aux différentes couleurs.

Jaune/orange/rouge/violet/bleu/vert correspondent à 9 / 8 / 6 / 3 / 4 / 6

Vous noterez la similitude avec l’échelle des valeurs vue ci-dessus. Plus une couleur est lumineuse, plus le chiffre qui lui est attribué est grand.

Rapport des complémentaires pour équilibrer harmonieusement une composition :

- Jaune / violet > 9:3= 3:1= 3/4 – 1/4 (le jaune est trois fois plus lumineux que le violet).
Il faut donc mettre 3 fois plus de violet en surface que de jaune pour équilibrer la composition harmonieusement.

- Orange / bleu > 8:4= 2:1= 2/3 – 1/3 (le orange est deux fois plus lumineux que le bleu)
Il faut donc mettre 2 fois plus de bleu en surface que de orange pour équilibrer la composition harmonieusement.

- Rouge / vert > 6:6= 1:1= 1/2 – 1/2 (le rouge est aussi lumineux que le vert)
Il faut donc mettre autant de rouge en surface que de vert pour équilibrer la composition harmonieusement (regardez le tableau de Jan Van Eyck – Les époux Arnolfini).

L’emploi de rapports équilibrés élimine le contraste de quantité. Par contre, lorsqu’une couleur domine, on réalise un effet expressif.

Exemple : Pieter Bruege l’Ancien – La Chute d’Icare

Contraste de qualité

Le contraste de qualité est obtenu en juxtaposant des couleurs vives, intenses, saturées et des couleurs ternes, désaturées.

Il y a différentes manières de ternir une couleur vive :
- En l’assombrissant (ajout de noir = rabattre une couleur) ou en l’éclaircissant (ajout de blanc = rabattre une couleur)
- En ajoutant de sa couleur complémentaire (désaturation = rompre une couleur)
- En ajoutant du gris

Exemple : Paul Klee – L’enchantement des poissons

Contraste simultané

C’est peut être le contraste le moins évident à appréhender. Ce contraste se définit comme le phénomène qui fait que notre œil pour une couleur donnée exige en même temps (simultanément) sa complémentaire et qu’il la crée lui-même si elle n’est pas donnée. La couleur complémentaire engendrée n’existe pas réellement, mais est produite par un phénomène physiologique.

Donc notre oeil, lorsqu’il regarde une couleur, génère automatiquement sa couleur complémentaire et projette cette image rémanente sur les objets environnants. On comprend pourquoi la juxtaposition de deux couleurs complémentaires fait ressortir chacune d’elle de façon si particulière.

- Le rouge crée le vert
- Le vert crée le rouge
- L’orange crée le bleu
- Le bleu crée l’orange
- Le jaune crée le pourpre
- Le pourpre crée le jaune

C’est à cause de ce phénomène que l’on dit que les couleurs s’influencent entre elles. Chaque couleur emprunte quelque chose à la couleur opposée qui lui correspond. Ce contraste est d’autant plus fort que la couleur est lumineuse.

L’effet de contraste simultané se produit :
- entre deux couleurs pures qui ne sont pas exactement complémentaires
- entre une couleur et un gris

Par exemple, la juxtaposition du bleu et du rouge produit dans notre oeil du vert (complémentaire du rouge) qui vient influencer notre perception du bleu.
Une surface grise placée sur une grande surface verte de même valeur apparaîtra teintée de rouge (complémentaire du vert).

Lorsqu’une couleur cherche à repousser l’autre du côté de sa complémentaire, les couleurs paraissent dans un état d’excitation dynamique. Leur stabilité disparaît et elles vibrent.

Comment accentuer ou éliminer le contraste simultané :

Entre une couleur et un gris :
- On peut le renforcer en teintant le gris avec la complémentaire de la couleur à laquelle il est associé .
- On l’atténue en teintant le gris avec la couleur associée.

Entre deux couleurs :
On peut l’accentuer en utilisant une couleur donnée, juxtaposée à l’une des voisines de sa complémentaire sur le cercle chromatique.
(Rouge+bleu-vert / Rouge+jaune-vert / Vert+rouge-orangé / Vert+rouge-violet)

Exemple : Vincent Van Gogh – La terrasse de café

Conclusion

Le contraste permet de dynamiser nos compositions et guide notre regard vers l’essentiel. Tout élément, dont les caractéristiques dénotent de celles des autres éléments, contraste. Il peut s’agir de la position, de l’orientation, du sens, de la taille, de la couleur …

Rien qu’en utilisant la couleur, Johannes Itten a défini sept façons de créer du contraste. Nous possédons donc, avec les couleurs, un outil puissant pour améliorer l’expressivité de nos créations.

D’ailleurs, les plus grands peintres utilisent ces techniques depuis des siècles, il n’y a donc pas de raisons pour que les graphistes web n’en fassent pas autant.

Sources :

• - Site Crayon.be : Les sept contrastes d’Itten
• - Site pedagogie2 : Les contrastes selon Johannes Itten
• - Site peintre analyse : La couleur

Introduction

Pour réaliser les exemples de bouton de cet article, j’ai utilisé Gimp dans sa version 2.6.6 sous Linux Ubuntu 9.04.

Pour réaliser un bouton, les outils « Crayon » et « Dégradé » peuvent suffire. Cependant afin d’automatiser un peu la procédure, il est possible d’utiliser des scripts tels que « Layer Effects » qui correspondent aux effets de calque sous Photoshop. Je vous conseille d’installer la version en Python qui donne accès à une fenêtre d’aperçu avant exécution du script.

Caractéristiques d’un bouton

On pourrait se contenter de lire un tutoriel, de cocher quelques options et générer un bouton en moins de temps qu’il ne faut pour le dire. Le problème est qu’à force d’appliquer des formules magiques sans comprendre exactement ce que l’on fait, on devient incapable d’apporter de la variété à ses créations.

Pour savoir comment dessiner un bouton, il faut donc commencer par l’observer et comprendre ses caractéristiques.

Définition

Un bouton selon mon Larousse 2003 est « une saillie mobile d’un objet servant à actionner manuellement un mécanisme. En informatique, un bouton correspond à un élément d’interface graphique sur lequel l’utilisateur peut cliquer pour déclencher une action. »

Selon cette définition et notre propre expérience, nous savons à quoi ressemble un bouton. Il s’agit le plus souvent d’un objet en volume sur lequel on interagit pour déclencher un événement.

Affordance

Je rappel que l’affordance est la capacité d’un objet à suggérer son utilité.

Donc pour qu’un bouton soit affordant, il faut qu’il apparaisse comme un objet saillant, généralement de forme ronde, ovale ou rectangulaire.

La forme triangle ou hexagonale pourrait être utilisée mais sa reconnaissance en tant que bouton serait moins évidente car moins commun dans la vie courante (sauf pour les joueurs de Play Station). Un bouton hexagonale est donc moins affordant qu’un bouton rectangle aux bords arrondis.

Dessiner le volume

Dans la plupart des cas, pour qu’un bouton soit reconnu comme tel avec le moins d’effort possible par l’utilisateur, il sera judicieux de le dessiner avec un effet de volume.

En webdesign tout comme en dessin, nous travaillons dans un environnement en deux dimensions. Pour donner plus de réalité aux objets que nous dessinons, nous devons simuler un monde en trois dimensions. Pour cela, nous utilisons des techniques comme la perspective et le modelé (représentation des ombres et des lumières). Dans notre cas, c’est surtout la technique du modelé qui sera utilisée.

Répartition des ombres

Pour donner du modelé à un objet dessiné, il suffit de jouer avec les dégradés et les valeurs pour simuler les lumières, les ombres propres et les ombres portées. Le plus difficile est de savoir où placer ces ombres et ces lumières et de choisir les bonnes couleurs.

Pour placer les ombres et les lumières, il faut prendre conscience de la forme de l’objet dans l’espace et connaître d’où vient la source de lumière qui éclaire notre objet. Plus une surface de l’objet est frontale et proche de la source lumineuse, plus elle sera éclairée. Inversement, plus une surface de l’objet est oblique et éloignée de la lumière, plus elle sera dans l’ombre.

Illustrons par des schémas :

Considérons que nous voulions représenter un bouton plat mais avec une petite épaisseur, rectangulaire et aux bords arrondis. Observons comment la lumière frappe l’objet en fonction de sa forme dans l’espace et comment dessiner les valeurs pour représenter cette observation.

Lorsque la source lumineuse provient de haut à gauche, le coin supérieur gauche du bouton est plus éclairé que le coin inférieur droit.

Lorsque la source lumineuse provient du haut et légèrement en retrait, le bord supérieur du bouton est plus éclairé que le bord inférieur.

Couleurs des ombres

Pour ce qui est des couleurs, j’applique personnellement les règles suivantes :

Pour obtenir la couleur de l’ombre propre d’un objet, je prends la couleur de base de cet objet et je diminue sa valeur.

Pour obtenir la couleur de l’ombre portée d’un objet, je prends la couleur du support sur lequel se projette l’ombre de l’objet et je diminue sa saturation et sa valeur.

Concevoir un bouton

Je vais vous expliquer, à travers cinq exemples, quelques techniques pour concevoir un bouton d’interface web. Dans les 5 exemples, je considère que la lumière provient de la partie supérieure et surplombe à la verticale le bouton.

Exemple 1

Etape 1 :Je commence par choisir ma palette de couleurs. Dans l’exemple 1, j’ai choisis un vert ni trop sombre ni trop clair comme couleur de base puis j’ai assombris cette teinte en diminuant sa valeur afin de représenter l’ombre propre du bouton.

Etape 2 : Je trace un rectangle, j’arrondis les coins et j’applique un dégradé pour donner l’effet de volume.

Etape 3 : Pour accentuer la forme du bouton, j’ajoute une bordure de 1 px avec la couleur de base. Dans la partie inférieure, la bordure contraste bien avec la partie ombrée et le fond sombre soulignant le contour de la partie basse du bouton.

Exemple 2

Etape 1 : La palette de couleurs est ici un peu plus riche. J’ai choisis un rouge moyen comme couleur de base. Je décline deux autres couleurs du même rouge mais plus sombre en diminuant la valeur du rouge de base. Enfin, je choisis un rouge plus clair et moins saturé en augmentant la valeur de la couleur de base et en diminuant sa saturation.

Etape 2 : Je trace un rectangle, j’arrondis les coins et j’applique un dégradé pour donner l’effet de volume.

Etape 3 : Pour accentuer la forme du bouton, j’ajoute cette fois ci deux bordures. Une bordure sombre externe et une bordure claire interne. Pour que la bordure claire n’apparaisse que dans la partie la plus éclairée du bouton et disparaisse dans la partie ombrée, j’utilise un masque de calque sur le calque de la bordure interne et j’applique un dégradé blanc/noir de la partie supérieure vers la partie inférieure du bouton.

Exemple 3

J’ai dessiné dans l’exemple 3, un bouton pixelisé. Pour cela, j’ai gardé les coins carrés et j’ai travaillé à l’aide du crayon et d’une brosse ronde de 1 pixel.

Etape 1 : La palette de couleur est composée d’une teinte de base qui correspond ici à la même couleur que celle de l’arrière plan. A partir de cette teinte j’ai décliné une version sombre, une version très sombre et une version claire. La version claire sera utilisée pour la partie du bouton qui sera la plus éclairée et pour l’une des bordures. La couleur de base sera utilisée pour représenter l’ombre propre du bouton dans la partie inférieure du dégradé. La version sombre sera utilisée pour la deuxième bordure et la version très sombre pour le texte et la flèche.

Etape 2 : Je trace un rectangle et j’applique un dégradé pour donner l’effet de volume.

Etape 3 : Pour accentuer la forme du bouton, j’ajoute deux bordures. La technique est la même que pour les deux exemples précédents. La différence se situe au niveau du placement des bordures. Ici les deux bordures se chevauchent et sont tantôt à l’extérieur tantôt à l’intérieur.

Exemple 4

Etape 1 : J’utilise dans l’exemple 4, trois paires de couleurs. Une pour le dégradé du bouton et une pour chacune des deux bordures. Le gris me servira pour mettre en place une ombre portée.

Etape 2 : Je trace un rectangle, j’arrondis les coins et j’applique un dégradé pour donner l’effet de volume.

Etape 3 :Pour sophistiquer un peu le rendu, j’applique également un dégradé aux deux bordures. C’est la raison pour laquelle j’ai choisi une paire de couleurs pour chacune d’entre elles. La partie inférieure du dégradé des bordures est moins saturée et plus sombre que la partie supérieure.

Etape 4 :J’utilise la teinte grise pour appliquer une ombre portée sur le bouton et ainsi accentuer l’effet de volume.

Vous remarquerez que nous avons ici un bouton sur fond clair. La mise en place d’une bordure sombre à l’extérieur permet par contraste de faire ressortir la bordure claire interne soulignant ainsi d’autant mieux le contour du bouton. L’absence de bordure sombre externe sur ce fond clair ferai disparaître par manque de contraste, la bordure claire. Elle ne jouerait alors plus son rôle d’accentuation du contour.

Exemple 5

Le dernier exemple est le plus élaboré des cinq. J’utilise les mêmes techniques de construction que pour l’exemple 4 mais j’ai ajouté en plus un effet glacis et une lueur subtile centrée au niveau du texte.

Pour dessiner la lueur, j’utilise une brosse ronde, blanche, large et très diffuse que j’applique sur un calque en mode superposer. Je fais varier l’opacité du calque jusqu’à ce que j’obtienne un résultat qui me satisfasse. Cette lueur a été appliquée une première fois par dessus le calque du bouton et une seconde fois par dessus le calque du dégradé de la bordure interne. J’ai utilisé les sélections que j’ai inversé pour effacer les débordements de la lueur.

Pour l’effet glacis, j’ai tracé une ellipse avec l’outil sélection et j’ai tracé un dégradé avec la quatrième paire de couleurs de la palette. Le dégradé est inverse de celui appliqué sur le bouton. En effet la partie sombre se trouve au niveau de la zone supérieure de la sélection et la partie claire dans la zone inférieure. Pour effacer la partie basse du dégradé du glacis, j’ai utilisé un masque de calque avec l’outil dégradé (noir/blanc).

Variation sur le thème du bouton

Vous savez désormais dessiner un bouton. Cependant, avec un peu d’imagination, il existe une variation infinie de possibilités.

En voici quelques exemples :

Applat de couleur ou dégradé

Concave ou convexe

Mat ou brillant

Dégradé circulaire ou linéaire

Sans pictogramme ou avec

Pixelisé

Arrondi, rectangle, flèche …

Ajout d’effets divers

Sélection de 25 boutons pour vous inspirer

Conclusion

Comme nous venons de le voir, dessiner un bouton d’interface n’est pas très compliqué. Il faut juste se familiariser avec les techniques du modelé et faire preuve d’un peu d’imagination.

Pour réaliser vos boutons avec votre logiciel de traitement d’image, vous pouvez, comme moi, utiliser simplement quelques outils (dégradé, sélection, crayon) ou utiliser des scripts qui automatisent un peu plus les procédures (Layer effects pour Gimp ou les effets de calques sous Photoshop). Ces scripts peuvent améliorer la productivité de votre travail mais vous aurez moins le contrôle de ce que vous faite.

Si la plupart du temps les boutons sont représentés de formes rectangulaires et en volumes, rien ne vous empêche de les dessiner d’une autre forme et avec un aplat de couleur. Mais attention, la reconnaissance de l’objet en tant que bouton risque d’être moins évidente.

Pour renforcer l’affordance d’un bouton, vous pouvez, en plus du volume, prévoir un état survolé et enfoncé qui s’affiche au passage et au clique de la souris. Cet effet peut facilement être réalisé avec la technique des sprites et un peu de CSS.

Cette tablette est idéale pour le graphisme et la retouche photo.

C’est de l’excellent matériel comme tout ce que fait Wacom en général.

Je n’envoie pas la tablette par colis mais effectue une livraison de la main à la main sur Draveil, Juvisy ou Paris. Comme ça pas de risque de casse et vous pourrez voir le matériel avant achat.

Contenu de la boite

• Pen tablet Intuos3 A4
• Grip Pen Intuos3
• Souris à 5 boutons Intuos3
• Pointe de stylet standard (3x)
• Pointe de stylet Stroke Pen (1x)
• Porte-stylet
• CD-ROM des pilotes (pilote, manuel en anglais, allemand, français, italien, espagnol et néerlandais)
• CD-ROM Corel Painter Essentials2 (en anglais, allemand et français)
• Guide d’installation rapide

Voici les caractéristiques techniques

Quatre ou huit ExpressKeys (selon le format de la tablette) peuvent être programmées pour les commandes de menu et les combinaisons de touches les plus courantes. Le Touch Strip innovant agit comme une barre de défilement tactile. Les deux outils, intégrés à la tablette, améliorent sensiblement le flux de travail. Avec les tablettes au format de surface active A4 et A5, les blocs de fonction se situent à droite et à gauche et conviennent donc aussi bien aux droitiers qu’aux gauchers.

Avec l’appui de la technologie Penabled de Wacom et du Grip Pen ergonomique, ces outils accroissent l’efficacité et la productivité dans les applications artistiques.

Le Grip Pen permet de concevoir et de dessiner comme avec un stylo ordinaire. Les 1.024 niveaux de pression du stylet et la résolution de 5.080 ppp de la tablette répondent à toutes vos attentes en matière de retouche d’image. Aucun autre périphérique de saisie ne permet de créer des transitions aussi fluides et d’atteindre des résultats aussi naturels. En outre, la navigation dans les applications et les documents de grande taille est aisée grâce au positionnement absolu et au pixel près du stylet. Comme les autres tablettes à stylet de Wacom, l’Intuos3 ne conduira pas à l’apparition du syndrome des lésions attribuables au travail répétitif du fait de l’ergonomie et du parfait équilibre du Grip Pen.

Introduction

Les icônes sont des représentations graphiques qui permettent par métaphore de désigner un objet, une fonction ou une action. Elles renforcent la signification d’un contenu ou fournissent un raccourci visuel pour symboliser un élément activable d’une interface ou l’exécution d’une tâche particulière.

Les icônes sont utilisées pour différentes raisons : elles font gagner de la place sur l’interface en remplaçant de longues explications textes, elles font gagner du temps à l’utilisateur qui reconnait plus rapidement la signification d’une image que celle d’un texte.

Cependant, l’utilisation d’icônes n’est pas sans risques et demande un travail de réflexion. En effet, il est très difficile de transmettre un message compréhensible par tous les utilisateurs à l’aide d’une illustration miniature qui comporte forcément un certain degré d’abstraction. Certaines icônes ont gagné une acceptation internationale, c’est le cas du « panier » sur les sites de e-commerce, de la « maison » pour un retour à la page d’accueil ou de la « loupe » pour la recherche. Pour d’autres actions ou concepts, la symbolisation par icônes est beaucoup moins évidente.

Pour le graphiste, la création d’un set d’icônes est un véritable défis aussi bien sur le plan de la conception (choix de la représentation) que sur le plan réalisation (dessin et retranscription infographique), les icônes étant de véritables illustrations numériques le plus souvent en 3 dimensions.

Voici quelques recommandations à garder à l’esprit lorsque l’on souhaite se lancer dans la réalisation d’un set d’icônes.

L’unité

Les icônes d’une même application doivent rester cohérentes sur le plan graphique afin de maintenir son unité visuelle.

Pour obtenir cette unité graphique, il faut dessiner toutes ses icônes avec :

• la même palette de couleur
• le même style graphique
• la même perspective
• la même direction de lumière et traitement des ombres
• la même taille/proportion
• les mêmes conventions

Toutes ces caractéristiques devront être décrites avant la phase de création dans une charte graphique pour constituer un document de référence.

Les couleurs

Choisissez une palette de couleur qui vous servira de référence pour colorier vos icônes. Vous pourrez faire varier la valeur et la saturation de ces teintes pour dessiner les ombres et les effets de lumière.

Par exemple, choisissez trois variantes pour chaque couleur (bleu, rouge, vert, jaune, violet, marron), quatre variantes de bleu gris pour les effets métalliques et quatre variantes de gris.

Le style

Il y a différentes manières de dessiner une icône : en aplat ou en relief, en valeurs de gris ou en couleurs, avec un effet brillant … Peu importe le style du moment qu’il est cohérent avec l’identité visuelle de l’application et que tous les icônes soient dessinées dans le même style.

Pour définir un style vous pouvez par exemple réfléchir sur :

- Les lignes de contour des objets (présence ou pas, épaisseur minimum et maximum, couleurs autorisées, présence de gradient autorisé ou pas …)

- Les bordures internes des objets (présence ou pas, épaisseur minimum et maximum, couleurs autorisées, présence de gradient autorisé ou pas …)

- Les dégradés (présence ou pas, radial ou linéaire )

- Les ombres (présence ou pas, dégradé-opacité-flou autorisé ou pas, couleur, position par rapport à l’objet)

Tous ces éléments peuvent varier selon la taille des sets d’icônes. Par exemple on ne met généralement pas d’ombres sur les icônes de petites tailles car cela les rends moins visible.

La perspective

Vous avez la possibilité de dessiner vos icônes sous différentes perspectives mais pour une taille donnée, choisissez un type de perspective et tenez-vous y.

Généralement les petites tailles d’icônes (16×16, 22×22, 24×24) sont dessinées à plat, de face par soucis de visibilité.

Les tailles moyennes (32×32) et grandes (48×48) peuvent être dessinées en perspective.

Vous pouvez utiliser une grille de référence pour conserver la même perspective pour toutes les icônes d’une même taille.

La lumière et les ombres

Les effets de lumière (dégradé, brillance) et les ombres apportent du modelé à vos icônes. Leurs présences n’est pas obligatoire, tout dépend du style que vous voudrez mettre en place.

Si vous dessinez des icônes en 3 dimensions, pensez à fixer la direction de la lumière afin de traiter les dégradés, les brillances et les ombres de la même manière sur toutes vos icônes.

Si votre icône est complexe, c’est à dire composée de plusieurs objets, traitez la lumière sur chaque objets séparément.

Évitez les ombres sur les petites taille d’icônes au risque de brouiller leur visibilité.

La taille et les proportions

Vous pouvez avoir besoin de décliner vos icônes en différentes tailles. Sachez que selon la taille de l’icône, il sera parfois préférable de changer la façon de les dessiner pour leur garantir une bonne visibilité. Nous en avons déjà parlé, il s’agit par exemple de la présence ou non des ombres, le choix de la perspective …

Le cadre dans lequel les icônes sont dessinées est le plus souvent carré.

Les tailles en pixels les plus communes sont (16×16, 22×22, 24×24, 32×32, 48×48, 128×128, 512×512) mais vous pouvez en choisir d’autres si besoin.

Définissez dans votre charte graphique dans quel contexte chaque type de taille doit être utilisé.

Pour que vos icônes soient utilisables sur tous les arrières-plans, dessinez-les sur un fond transparent. Vous devez prévoir également la taille de la bordure transparente entre le bord extérieur de l’objet iconique et le bord de l’image. Elle peut par exemple être de 1 pixel.

Les conventions

Vous pouvez choisir d’utiliser des signes comme référence à un type d’action donné.

Exemples :

Une action de création peut être symbolisée par le signe plus.
Une action de suppression peut être symbolisée par un signe moins.
Une action de fermeture peut être symbolisée par une croix rouge.

Les points d’attaches de ces signes sur l’icône doivent être clairement définie dans la charte graphique.

Process de création

Lorsque l’on dessine une icône, notre attention doit se porter sur la clarté suggestive de cette icône. L’utilisateur devra comprendre au premier coup d’œil la signification véhiculée par l’icône. Certaines conventions se sont progressivement mises en place et il ne faut pas hésiter à les réutiliser.

Par exemple le « message » est souvent représenté par une enveloppe, le « retour à l’accueil » par une maison, le « répertoire » par une chemise de classement avec onglet …
Restez simple car trop d’originalité dans la symbolisation peut nuire à la compréhension du message.

Pour distinguer les icônes, ou familles d’icônes entre elles, pensez à utiliser des silhouettes distinctes. Pour cela utilisez les formes usuelles (carré, rectangle, triangle, cercle)

Le brief créatif

Comme tout bon projet qui se respecte, un brief créatif est indispensable avec votre client ou avec vous même (si c’est un projet personnel) avant de foncer tête baissée sur votre ordinateur.

Le brief créatif à pour but de donner une direction à votre travail, il devra vous permettre de répondre aux questions suivantes :

- Quel sont les caractéristiques graphiques de l’environnement dans lequel les icônes seront affichées ?
Connaitre l’environnement graphique de l’application ou du site web qui accueillera les icônes vous permettra d’harmoniser et d’intégrer de façon cohérente le design de vos icônes.

- Quels sont les concepts, les actions, les fonctionnalités qui seront à illustrer ?
Cette étape est très importante. Il s’agit de lister toutes les actions qui seront représentés par une icône.

- Dans quels environnements (page, menus, barre d’outils …) les icônes seront affichés ?
Selon l’environnement dans lequel l’icône viendra s’insérer, sa taille et ses caractéristiques ne seront pas les mêmes.

- Quelles tailles d’icônes faut-il prévoir ?
Il faut définir en amont la taille en pixel des sets d’icônes à dessiner.

- Quel est le profil des utilisateurs ?
Selon le profil des utilisateurs, notamment culturel, la représentation des concepts peu varier. Une boite aux lettres aux Etats-Unies ne ressemble pas à une boite aux lettres en Europe. Il sera souvent judicieux de trouver le représentation qui sera la plus universelle.

Conception : la méthode de Yegor Gilyov

Yegor Gilyov du studio graphique Turbo Milk nous explique dans son article Designing an iconic language une méthodologie judicieuse pour plannifier la réalisation d’un set d’icônes.

Voici un résumé de cette méthode :

Imaginons une application de facturation pour laquelle un client vous demande de dessiner un set d’icônes.

La première étape va consister à lister les caractéristiques de cette application.

« Les factures s’effectuent en ligne »
« Les factures peuvent être réglées en plusieurs versements » …

La seconde étape va répertorier toutes les commandes à illustrer par une icône.

Commandes pour gérer la facturation :
- Ajouter une facture
- Supprimer une facture
- Envoyer une facture
- Afficher les factures payées …

Commandes pour gérer les lignes de facturation :
- Effacer complètement la ligne …

Commandes pour enregistrer les commandes :
- Ajouter un paiement
- Supprimer un paiement …

Et ainsi de suite.

Les phrases doivent être courtes, précises et concises. Vous remarquerez que dans ces phrases vous pouvez repérer la présence d’un mot d’action, d’un mot qui désigne un objet, d’un mot qui désigne un état restrictif et un mot qui désigne une qualité.

« Ajouter une facture » (action=ajouter, objet=facture)

« Afficher les factures payées » (action=afficher, objet=facture, état=payées)

« Effacer complètement la ligne » (action=effacer, objet=la ligne, qualité=complètement)

Une fois ce travail d’analyse effectué, il s’agit de regrouper tous les mots d’actions, d’objets, d’état et de qualité.

ACTIONS :
- Ajouter
- Effacer
- Afficher …

OBJETS :
- Facture
- Paiement
- Ligne de facture …

ETAT :
- Payées
- Envoyées
- Tous
- En cours
- Epuisées …

QUALITE :
- Complètement
- Dans la facture
- Dans la pile …

L’étape qui suit est l’étape de recherche pour représenter chacun des concepts listés.

Recherche

Cette étape de recherche peut se faire à l’aide d’une réunion de Brainstorming. Vous allez lister toutes les idées d’illustrations qui vous viennent à l’esprit sans censures ni jugement. Dessinez des croquis, pas la peine à cette étape de soigner les détails de réalisation des icônes. Dans un second temps, vous effectuerez un tri des meilleurs idées. La règle du Brainstorming veut que les personnes qui produisent les idées soient différentes des personnes qui sélectionnent les idées. Adaptez cette procédure selon vos moyens.

Pour voir une illustration ce cette étape, reportez-vous à l’article de Yegor Gilyov : Designing an iconic language

Process

Voici une proposition de workflow pour la réalisation graphique de vos icônes :

- Définir la charte graphique de vos icônes
- Création de la forme générale, faire un croquis (penser au choix de perspective)

- Ajout des détails (travailler en noir et blanc)

- Réalisation sur ordinateur, penser à la présence ou pas de lignes de contours internes ou externes

- Rajouter la couleur
- Appliquer les dégradés en fonction de la direction de la lumière

- Ajouter les ombres

Erreurs à éviter

Il y a certaines erreurs à éviter et qu’il faut garder dans un coin de la tête lorsque l’on se lance dans le processus de création des icônes.

Voici quelques exemples :

Utiliser du texte dans vos icônes
Une icône est une métaphore visuelle qui doit se suffire à elle même. Si votre icône est pertinente, elle n’a pas besoin de texte pour l’expliciter. De plus le texte dans une icône devient vite illisible avec la réduction de taille.

Ajouter des informations accessoires
Une icône doit être conçue avec le strict minimum. Trop d’informations brouillent le message et diminue la lisibilité de l’icône. Souvenez-vous « less is more ».

Se baser sur un jeu de mots
Se baser sur un jeu de mot pour dessiner une icône est restrictif à la langue à laquelle elle s’applique. De plus il n’est pas sure que le jeu de mots soit compris de tous et rapidement.

Vous pouvez compléter cette liste d’erreurs en lisant l’article de Denis Kortunov qui s’intitule 10 Mistakes in Icon Design

Conclusion

Une icône bien conçue est un puissant outil de communication. C’est un élément efficace et esthétique pour fournir aux utilisateurs le moyen de scanner rapidement une page web. De plus, elles facilitent la compréhension du contenu et des fonctionnalités tout en attirant l’attention des utilisateurs. Les icônes peuvent dans certains cas remplacer avantageusement du texte encombrant et inutile.

Ne vous méprenez pas sur l’apparente simplicité des icônes, leur réalisation est bien plus ardue qu’il n’y parait. Il faut en effet connaître les règles de la perspective, savoir dessiner, comprendre les caractéristiques des ombres et des effets de lumières et maitriser l’utilisation des couleurs. Sur le plan graphique, la réalisation d’un set d’icônes réclame méthode, reflexion et des talents d’illustration.

Sources et autres liens :

Guide de création des icônes pour le système d’exploitation Linux Fédora
7 Principles of Effective Icon Design
Designing Effective Icons (Environnement graphique Gnome)

Introduction

Les appareils photos numériques proposent généralement par défaut un mode d’enregistrement des images au format JPEG. Avant cet enregistrement, votre appareil photo effectue de manière automatisée un traitement sur l’image selon des paramètres pré-définis. Bien que le résultat soit acceptable il est rarement complètement satisfaisant et peut être facilement amélioré avec quelques manipulations simples à l’aide d’un logiciel de retouche d’image.

Sachez que pour ceux qui disposent d’un appareil photo qui permet d’enregistrer les photographies au format RAW (format image codé sur 16 bits n’ayant subi aucun traitement), le dématriçage à l’aide de logiciels spécifiques reste la meilleure solution pour avoir le maximum de contrôle sur le rendu de ses photographies. En effet, le format RAW correspond pour le numérique à ce qu’était le négatif pour les appareils argentiques. L’utilisation du format RAW s’adresse aux professionnels de l’image et aux amateurs avertis qui souhaitent maîtriser tout le processus de « développement » de leurs photos numériques pour un rendu optimum. Son utilisation est plus long, plus complexe et demande une période d’apprentissage des fondamentaux de la retouche photo et de manipulation des logiciels de dématriçage (logiciel permettant de « développer » les formats RAW).

L’utilisation du format RAW n’est pas le sujet de cet article. Je supposerais donc que vous enregistrez vos photos au format JPEG et que vous souhaitez améliorer le traitement des images à l’aide d’un logiciel de retouche d’image comme Gimp ou Photoshop.

Techniques

Le traitement automatisé des appareils photos donne généralement des photographies un peu ternes qui manquent de contraste et de saturation. Pour redonner du « peps » aux photos, vous avez le choix entre plusieurs techniques que je vais vous présenter ci-dessous :

Les niveaux

Une photographie numérique est composée de plusieurs milliers/millions de pixels possédant chacun une luminosité. L’outil Couleurs > Niveaux de Gimp affiche un histogramme qui représente la répartition de ces pixels en fonction de leur luminosité du plus sombre à gauche au plus clair à droite.

Un histogramme déséquilibré à gauche est le reflet d’une image possédant beaucoup de pixels sombres donc souvent d’une image sous-exposée. A l’opposé, un histogramme déséquilibré à droite est le reflet d’une image possédant beaucoup de pixels claires donc d’une image généralement sur-exposée.

Enfin, un histogramme qui ne s’étale pas sur toute la largeur de gauche à droite caractérise une image qui manque de contraste.

L’outil Niveaux, va vous permettre de corriger un manque de contraste :

Commencez par dupliquer votre calque puis opérez les manipulations sur le calque dupliqué.

- En déplaçant les curseurs des niveaux d’entrées :
En ajustant la position des curseurs du point blanc et du point noir aux deux extrémités de l’histogramme (voir copie d’écran) vous redistribuez de façon plus équitable la luminosité dans votre image à partir d’une gamme allant du blanc au noir. Vous pouvez ajuster la luminosité globale de l’image en faisant varier le curseur central qui correspond au point gris neutre ou gamma.


Si vous désirez un résultat plus précis, faite la même manipulation sur chacun des trois canaux R,V et B.

- En utilisant les pipettes :
Il est possible d’effectuer la même manipulation avec les pipettes en pointant dans l’image la zone la plus sombre avec la pipette correspondant au point noir et la zone la plus claire avec la pipette correspondant au point blanc. La luminosité moyenne peut être pointé à l’aide de la pipette correspondant au gris moyen. Cette technique est moins précise car elle fait intervenir votre perception de la zone la plus claire et la plus sombre, perception qui sur certaine photo n’est pas toujours évidente.

Attention, les pipettes agissent sur les trois canaux même si vous vous placez sur l’un d’entre eux. Vous ne pouvez donc pas affiner le résultat de la même façon qu’avec les curseurs.

- En utilisant le réglage « Auto » :
Vous pouvez également cliquer sur le bouton « Auto » pour laisser Gimp faire le travail tout seul. Le résultat est parfois bon, parfois moins bon. Testez et revenez en arrière (bouton réinitialiser) si le résultat ne vous satisfait pas.

Les courbes

L’outil Couleurs > Courbes est un outil plus perfectionné que l’outil Niveaux. Alors que l’outil Niveaux vous permet d’agir globalement sur les tons sombres et les tons clairs, l’outil Courbes, lui, vous permet d’agir sur n’importe quel intervalle tonal. Il est donc possible d’agir plus précisément en appliquant des changements sur un intervalle de ton. De plus l’outil Courbes permet d’opérer des manipulations non seulement sur les contrastes mais aussi la luminosité et les couleurs, tout ceci en lissant les transitions.

La barre dégradée horizontale représente l’échelle tonale d’entrée. Elle va de la valeur 0 (noir) à la valeur 255 (blanc), des tons sombres aux tons clairs. Donc déplacer sur la courbe/droite le point d’extrémité haute vers la gauche et le point d’extrémité basse vers la droite revient au même que déplacer le curseur blanc vers la gauche et le curseur noir vers la droite dans l’outil Niveaux.

Dupliquer le calque et sur chacun des canaux R, V et B déplacez le point haut vers la gauche et le point bas vers la droite de sorte à ce qu’ils se calent au bord de l’histogramme. Vous devriez obtenir un résultat similaire à celui effectué avec les curseurs de l’outil Niveaux. Ensuite pour augmenter le contraste il suffit d’obtenir une courbe en « S » telle que dessinée sur la copie d’écran suivante :

Lorsque « Canal » est en mode « Valeur » si vous déplacez un point vers le haut, vous augmentez sa luminosité, si vous le déplacez vers le bas vous l’assombrissez. En construisant une courbe en « S » j’augmente le contraste de l’image en fonçant un peu plus les pixels sombres et en éclaircissant les pixels claires. Plus la forme en « S » sera prononcée, plus le contraste sera fort.

On observe une dominante bleue. Pour retirer cette dominante, il suffit de se positionner sur le canal bleue et de tirer la courbe vers le bas. Cela aura pour effet de diminuer la quantité de couleur bleue.

Pour éclaircir l’image en accentuant les zones claires, je passe le calque dupliqué en mode « Ecran » et j’atténue légèrement son effet en fixant l’opacité à 75%.

Calques et modes

L’utilisation des modes de calque est moins connue, pourtant elle permet très facilement d’obtenir des résultats intéressants. Dans le cadre de ce chapitre sur les modes, je considère que je travaille toujours sur des calques dupliqués. Le calque qui change de mode est donc toujours une copie conforme du calque d’origine. L’effet obtenu peut être ensuite modulé en variant l’opacité du calque dupliqué.

Mode Superposer

Ce mode a tendance à assombrir l’image en rendant les gris moyens du claque du dessus transparent. Ainsi, les couleurs du calque du dessus intensifient les couleurs du calque du dessous. Par exemple un premier plan bleu sur un fond bleu génère une image avec un bleu plus soutenu.

En fait ce mode ajoute de la valeur (luminosité) à l’image, c’est ce qu’on appel “peindre avec la lumière”.

Pour résumer, le calque du dessus affecte le calque du dessous qui reste dominant en intensifiant les couleurs, les surbrillances et les zones d’ombres.

Pour diminuer l’effet du mode « Superposer », réduisez l’opacité du calque dupliqué. Pour l’accentuer, dupliquez le calque d’origine une seconde fois et passez le aussi en mode « Superposer ».

A titre d’exemple, voici une série d’images qui montre l’effet du mode « Superposer » :

1- image d’origine traité par l’appareil photo
2- image d’origine avec un calque dupliqué en mode « Superposer » opacité 100%
3- image d’origine avec deux calques dupliqués en mode « Superposer » opacité 100%

Remarque : si vous souhaitez accentuer le contraste des valeurs sans accentuer la saturation des teintes de votre image, désaturez le calque dupliqué (Couleurs > Désaturer) avant de le passer en mode « Superposer ».

Mode écran

Le mode « Ecran » éclaircie l’image en rendant plus transparente les zones sombres. Avec ce mode, le noir devient transparent et le blanc reste blanc. Donc plus le calque du dessus est sombre moins il affectera le calque du dessous et vice versa.

Passer un calque dupliqué en mode « Ecran » permet donc d’accentuer la luminosité des zones claires. Plus une zone de l’image sera sombre, moins elle sera éclaircie. L’utilisation de ce mode peut être intéressant pour les images légèrement sous-exposées.

A titre d’exemple, voici une série d’images qui montre l’effet du mode « Ecran » :

1- image d’origine traité par l’appareil photo
2- image d’origine avec un calque dupliqué en mode « Ecran » opacité 100%

Désaturation et mode lumière douce

Le mode « Lumière douce » a un effet assez similaire au mode « Superposer » mais de manière moins accentuée et en éclaircissant les couleurs. Si vous souhaitez accentuer le contraste des valeurs sans accentuer la saturation des teintes de votre image, désaturez le calque dupliqué (Couleurs > Désaturer) avant de le passer en mode « Lumière douce ».

Dupliquez le calque d’origine et désaturez le avec l’outil Couleurs > Désaturer. Ensuite, passez le en mode « Lumière douce ».

A titre d’exemple, voici une série d’images qui montre l’effet du mode « Lumière douce » :

1- image d’origine traité par l’appareil photo
2- image d’origine avec un calque dupliqué et désaturé en mode « Lumière douce » opacité 100%

Modèle LAB

Le mode Lab représente toutes les couleurs visibles par l’œil humain. La composante L (Luminosité) correspond à la vision humaine de la luminosité, la composante A regroupe les informations couleur suivant deux axes allant du vert au rouge, et la composante B regroupe les informations couleur suivant deux axes allant du bleu au jaune. Cette séparation entre les informations de luminance (couche L) et les informations couleur (couches A et B), permet de corriger les couleurs sans modifier la luminosité ou de modifier le contraste sans toucher à la saturation des couleurs.

Pour décomposer votre image en mode LAB, allez dans Couleurs > Composants > Décomposer …, puis sélectionnez le modèle « LAB » avec la case « Décomposer en calques » cochée.

Dupliquez les calques A et B et passez les en mode « Superposer » ‘ (Vous pourrez aussi tester d’autres modes comme « Lumière douce », « Lumière dur » …).

Fusionnez les calques dupliqués avec leurs calques d’origines (clique droit sur le calque dupliqué > « Fusionner vers le bas »)

Placez-vous sur le calque L et à l’aide de l’outil Couleurs > Courbes, augmentez le contraste avec une courbe en « S ».

Enfin recomposez l’image de cette façon : Couleurs > Composants > Composer, choisissez le modèle LAB et validez.

1- image d’origine traité par l’appareil photo
2- image traitée en mode LAB

Conclusion

Il existe plusieurs outils et plusieurs techniques sous Gimp pour redonner du « peps » à vos images à partir des images JPEG issus du traitement automatisé de votre appareil photo numérique. Les résultats diffèrent d’une technique à l’autre et selon les réglages choisis. A vous de sélectionner celle qui s’adapte le mieux aux caractéristiques de votre photo et au rendu que vous souhaitez obtenir.

Rien ne vous empêche non plus de combiner plusieurs techniques. Par exemple corriger les contrastes avec l’outil Niveaux puis appliquer un mode de fusion sur un calque dupliqué. Cependant méfiez vous d’une surcharge de traitement qui risquerait de dénaturer le rendu de votre image.

Pour retoucher ses photos plus finement et avec moins de dégradations, il faudra passer au traitement du format RAW et utiliser des logiciels de dématriçage comme Bible, RawTherapee …

Sources

• - Ouvrage « Gimp 2 efficace » – Cédric Gémy – Eyrolles
• - Développer ses fichiers RAW – Volker Gilbert – Eyrolles
• - Documentation francophone de Gimp

L’IUT Di Corsica

La Corse dispose d’un campus universitaire et d’un IUT dans la ville de Corté. Cet IUT a été créé en 1983 et propose diverses formations dans les domaines de la gestion, de la gestion appliquée à la valorisation ou à la qualité des produits agroalimentaires, de l’entrepreneuriat, des techniques de commercialisation, des nouvelles technologies informatiques de la communication, de la biologie appliquée à l’agroalimentaire ou à l’environnement, du génie civil, de l’eau et des énergies renouvelables.

L’IUT dispose de nouveaux locaux depuis 2004 qui surplombent une partie de Corté et font face aux montagnes et à la citadelle de la vieille ville.

La licence professionnelle TAIS – Multimédia

La licence professionnelle TAIS (Techniques et Activités de l’Image et du Son) – option Multimédia aborde de nombreux domaines du multimédia pour donner aux étudiants une vision élargie des possibilités du secteur des nouvelles technologies. Le programme de la licence ne se concentre pas sur un ou deux secteurs d’activité mais essaye d’aborder une large palette de métiers du multimédia : vidéo, motion design, 2D, 3D, graphisme print, infographie, technologies web …

La plupart des étudiants font leur formation en alternance et perfectionnent leurs compétences en entreprise. Les enseignements sont dispensés par des professeurs de l’IUT mais aussi par des intervenants extérieurs dont la plupart sont en activité. On pourra noter par exemple sur l’année scolaire 2008-2009 l’intervention d’Amélie Boucher en ergonomie, Corine Girieud en culture de l’image, Olivier Schramm en film d’animation et bien d’autres, tous experts dans leur domaine respectif.

Mon intervention en webdesign

Marc Labbé, responsable pédagogique de la licence – option multimédia, m’a contacté en mai 2008 pour me proposer de prendre en charge le module webdesign. J’ai accepté sa proposition et j’ai dispensé sur deux jours (17-18 mars 2009), un cours théorique de 8 heures suivi d’une journée de travaux dirigés pour mettre en application quelques méthodes de prototypage de site web.

Les grandes lignes du cours théorique étaient :

• Qu’est ce que le webdesign ?
• Le process de création d’un site web
• Le process de création d’un design web
• Le langage graphique

… et le travail dirigé consistait, à partir d’un brief créatif, de réaliser :

• Le zoning de la page d’accueil d’un site web
• La wireframe correspondante
• Un moodboard représentatif de la tonalité graphique en accord avec le brief créatif

J’ai dû survoler certaines parties du cours pour me concentrer sur d’autres. J’avais en effet prévue un cours un peu trop riche (178 pages imprimés) pour le temps qui m’était impartie. Pour les étudiants qui voudraient approfondir les sujets abordés, n’hésitez pas à consulter mon blog.

Bilan

Je suis très satisfait de cette expérience et je voudrais remercier les étudiants de m’avoir accordé leur attention pendant les 8 heures de cours théoriques où j’ai essayé de leur transmettre en un temps record une grande partie de mon savoir en webdesign. Je sais que les ordinateurs portables branchés sur internet n’étaient pas tous focalisé sur le webdesign mais dans l’ensemble, les étudiants qui se sont un peu égarés sur MSN ou Youtube l’on fait avec discrétion sans déranger leurs camarades ni perturber le cours.

Je remercie également Marc Labbé, responsable pédagogique de la licence, pour son accueil et l’organisation sans faille qu’il a mis en place. Il faut savoir que l’IUT s’occupe de régler le billet d’avion, de réserver la voiture de location et le studio au sein même de l’IUT à deux pas de la cafétéria et des salles de cours.

Je précise également que j’ai particulièrement bien mangé à Corté. J’ai essayé plusieurs restaurants du vieux centre et j’ai par exemple mangé une assiette de pâtes aux coquilles St Jacques (fraiches) et tomates séchées pour seulement 12 euros. A Paris, pour le même prix, j’ai une tranche de jambon pleine d’eau avec trois haricots verts.

Donc au final, un bilan très positif et je me rendrais disponible pour rempiler l’an prochain si l’IUT a besoin de moi.

Pourquoi ?

J’ai décidé de ne plus supporter la compatibilité d’Internet Explorer 6 sur mon site pixenjoy pour les raisons suivantes :

- Ce navigateur ne respecte pas les standards web,
- Ce navigateur fait prendre des risques de sécurité à ses utilisateurs,
- Ce navigateur fait perdre du temps et de l’argent aux intégrateurs et designer,
- Ce navigateur est à l’agonie et je compte bien l’aider dans ce sens,
- Plusieurs initiatives visant à ne plus supporter ce navigateur voient le jour dans le monde entier,
- Microsoft lui même sollicite ses utilisateurs à migrer vers une version plus récente de son navigateur.

Toutes ces raisons font que je n’ai plus aucun scrupule pour suive à mon tour le mouvement et inciter les derniers récalcitrants à migrer leur navigateur.

Vous aussi, bannissez cette relique aux oubliettes

Internet Explorer 6 est dépassé, nocif pour le web, les utilisateurs et nos professions.

Plus nous serons nombreux à ne plus supporter Internet Explorer 6, plus nous précipiterons sa chute.

Si vous voulez suivre le mouvement, il suffit de rajouter dans votre page d’accueil, entre les balises HEAD, le code suivant :

<!--[if lte IE 6]>

<style type="text/css">
 <!-- Ici votre code CSS -->
 </style> 

<div>
    <p>Votre message pour inciter les internautes à migrer leur navigateur.</p>
</div>

<![endif]-->

Vous avez des scripts tout fait qui peuvent vous faciliter le travail (attention, souvent en Anglais). Regardez sur cet article d’Alsacreations, vous en trouverez plusieurs.

Si votre blog fonctionne sous WordPress, vous pouvez utiliser le plugin « Stop Living in the Past« .

C’est celui que j’ai utilisé en rajoutant dans le code un message en Français :

Le message par défaut qui s’affiche pour les utilisateurs d’Internet Explorer 6 est en Anglais mais vous pouvez ajouter/remplacer un message en Français dans le code html du plugin en cliquant sur « Modifier » dans le menu « Extensions » de votre espace d’administration WordPress.