Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

mercredi, 08 avril 2009

Changement d'un avatar légendaire...

Déjà plus de deux mois sans bloguer... Saturée par le travail, par la lassitude, démotivée... je manquais de goût plutôt que de temps pour l'exercice. D'ailleurs, n'est-ce pas souvent le cas ? Le "manque de temps" si souvent allégué cache le plus souvent, dans la réalité, une véritable carence de motivation. Quand on veut, on peut. En maintes occasions, j'ai pu le vérifier...

La création de mon nouvel avatar est justement celle de reprendre les choses en main. Un avatar, c'est une image par laquelle un internaute choisit de se représenter sur un forum, une messagerie... Le mien est lié à mon pseudonyme le plus fréquent, "Flamme". Il peut donner à sourire et préter à maintes plaisanteries (je pense en avoir fait le tour...), mais dissimule une origine plus intellectuelle qu'il n'y parait : mon goût pour les histoires impliquant des bateaux volants (des "nefs") me l'avait fait choisir, en référence à Nausicaa, fille d'Alkinoos, roi des Phéaciens, venue en aide à Ulysse naufragé. Quand j'étais au lycée et que j'étudiais l'Odyssée dans le texte, une note discrète en bas de page du vénérable ouvrage de Grec donnait comme éthymologie du prénom princier "Flamme des Nefs".  D'où ce pseudonyme de "Flamme"...

Donc, ce vénérable pseudonyme m'avait poussée à employer comme avatar l'image, trouvé sur la toile, d'une petite élémentaire de feu à la foix kawaï et gothique...

flamme2.gif

Mais au fil du temps, j'ai commencé à éprouver un malaise de plus en plus constant lié à l'emploi d'une image dont je n'étais pas l'auteur, ce qui contrariait mes principes. Aussi, après quelques croquis et crayonnés (l'un est d'ailleurs apparu ici), j'ai fini par produire un croquis qui satisfaisant et me lancer dans la réalisation sous Inkscape de ce nouvel avatar.

Au départ, un crayonné scanné pour servir de base au tracé vectoriel :

flamme-crayon.jpg

Après quatre heure de travail, voici le résultat :

 

flamme-blog.jpg

Cette image somme toute assez simple me définiera désormais sur l'ensemble des forums où j'apparais sous le pseudo "Flamme". Fin d'une époque, début d'une autre... Un bon (re)commencement.

Post-scriptum : cet avatar comportant une part de transparence partielle, je ne peux que regretter que le blog Hautetfort ne supporte pas cette transparence, me forçant à la simuler par un fond blanc. Voilà qui est tout de même très dommage, notamment pour les blogueurs qui s'intéressent au graphisme à destination du web...

lundi, 26 janvier 2009

La "Gimp Attitude", c'est créer en liberté ! (Chapitre I)

A plusieurs reprises, j'ai évoqué mon activité amatrice de webmestre. La passion du web m'est venue en 1999, lorsque dans mon activité professionnelle, ma chef m'a obligée à créer en 15 jours un ensemble de pages sur une exposition en l'absence la collègue qui était censée le faire. Le logiciel de création "Wywiwyg" Frontpage (Microsoft) m'ayant déplu, j'ai choisi d'apprendre le HTML pour coder "à la main" et avoir toute liberté dans la création de pages. A partir de là, je me suis mise à construire toute sorte de pages dans le domaine privé, plus ou moins bien ficelées (on peut en voir un exemple dans ma note A l'époque, on faisait du web sans casque... Soyez indulgents !)

Conjointement, j’ai commencé à me passionner pour l’image numérique… Mon premier outil : Paint Shop Pro, la version 3.1, encore minimaliste mais qui n’avait rien de l’usine à gaz que ce logiciel devait devenir par la suite. Les possibilités pouvaient sembler ridicules, mais utiliser un logiciel très simple, adapté à son niveau, permet d’acquérir des bases solides bien utiles quand on passe sur un logiciel plus perfectionné : qu’on se le dise !

C’est quand j’ai découvert la capacité des masques et l’existence des calques que j’ai commencé à chercher un outil plus perfectionnés… J'en ai acheté un paquet, à vils pris avec des revues d'informatique ou les "Presqu'Offerts" qui revandaient les vieux coucous pour six sous. J'en ai téléchargé, libres d'utilisation ou shareware. J'ai même tenté d'installer un Photoshop piraté (je n'avais pas alors de eprincipes aussi fermement établis sur ce genre de chose), qui - heureusement ! - n'a jamais voulu démarrer.

Mes premiers contacts avec Gimp ont été pour le moins chaotiques. Mon informaticien-geek de mari, qui en avait entendu parler, m'avait encouragé à l'installer, mais j'ai été à l'époque rebutée par les fenêtres multiples qui envahissaient l'écran, et puis, surtout ! par le curseur qui pointait vers la droite au lieu de pointer vers la gauche...

Après avoir bidouillé quelque temps à l'aide de Ulead PhotoImpact et de UltimateFX, j'ai fini par revenir vers Gimp (The Gimp comme on disait alors...). En 2002, à la naissance de mon plus jeune fils, j'ai profité de mon congé de maternité pour faire des gammes en graphisme 2D et 3D, à grands coups de tutoriaux que je suivaitsaveuglément... Cette, les choses m'ont semblé plus faciles, presque "coulant de source"...

Je me suis alors mise à reproduire toute une série d'images : boutons, puces... J'ai fini par rédiger mon premier tuto et le mettre sur une page web, hébergée sur le serveur d'un ami. Il est toujours visible dans sa présentation d'origine. J'avais à cette époque fait un choix étrange... Celui d'une couleur que j'estimais peu exploitée sur le web : le violet ! Choix audacieux s'il en est, tant cette couleur est mal aimée... des hommes essentiellement !

Ce site fut le tout premier Gimp Attitude. Suite au prochain épisode ;).

 

wilmattitude200.jpg

 

 

mercredi, 06 août 2008

Précis de typo pour blogueurs fantaisistes

Sur de nombreux blogs, un fond de qualité est desservi par une forme "fantaisiste" qui nuit à leur lisibilité. Personnellement, il m'arrive de déserter un blog qui me fait trop mal aux yeux par ses choix de couleurs ou dont la lecture me fatigue parce que son auteur méconnait les principes essentiels de l'ergonomie. Aussi ai-je pensé qu'il pourrait être intéressant de donner quelques conseils de base sur la présentation d'un blog, afin qu'il soit lisible et compréhensible de tous.

Actuellement, les hébergeurs de blogs offrent des possibilités étendues de mise en forme : sachons ne pas en abuser et les employer à bon escient ! Vous devrez peut-être renoncer à une fantaisie toute formelle, mais vous montrerez que vous respectez vos visiteurs en les accueillant sur un espace agréable à parcourir.

Les paragraphes : restez clair à tout prix !

Il est très désagréable de lire un texte qui se présente comme un seul gros pavé, sans la moindre coupure. Il l'est tout autant de lire un texte dont le rédacteur saute une ligne après chaque phrase. Il est important de créer des paragraphes de quelques lignes (à interlignes simples !) séparés du paragraphe suivant d'un espace vertical d'environ une ligne - ou un peu moins. Quand change-t-on de paragraphe ? Globalement, quand on passe à une nouvelle idée, un nouveau thème. La paragraphe doit comporter une cohérence interne et une unité de sens pour qu'il aide à la lecture logique de la note.

Il est également capital de bien utiliser les alignements de paragraphe. Le plus clair et le plus utilisé est l'alignement à gauche, convention dans notre écriture. Cet alignement aide le regard à retrouver le début de la phrase après avoir fini de parcourir la ligne précédente. La justification (alignement du texte à droite et à gauche) est parfois jugé plus agréable et plus claire, mais elle ne doit être appliquée que si la ligne est suffisamment longue pour que le fait de justifier n'introduise pas un écartement disgracieux entre les mots. Le centrage doit être réservé aux titres, à de brèves citations, à des illustrations. Centrer des paragraphes complets est très fortement déconseillé ! Cela rend le texte difficile à lire, car l'oeil peine à retrouver le début de la ligne suivante. L'alignement à droite induit des difficultés de lecture, pour les même raisons : à réserver aux signatures !

Gras, italique, soulignement : à employer avec modération !

Le gras et l’italique servent à apporter une emphase sur un mot ou une portion de texte, c’est à dire à faire ressortir un élément important, une consigne, une citation. Il faut éviter de les employer de façon systématique, répétitive ou sur un texte trop long (au-delà d'une ligne ou deux). La combinaison italique et gras, disgracieuse et fatigante, est à éviter comme la peste.

Comme les machines à écrire n'offraient pas la possibilité de taper des lettres en gras ou en italique, l’habitude a été prise d'employer à la place le le soulignement. Son usage n'a plus lieu d'être. Il vaut mieux bannir le soulignement pour éviter toute confusion avec les liens hypertextes.

La taille du texte : le juste milieu

Pour la majorité de gens, un texte est difficile à lire s'il est trop petit, mais aussi s'il est trop grand. Mieux vaut adopter une taille de caractère moyenne, par exemple la taille 12. Évitez de changer de taille de texte en plein milieu d'une note, l'oeil aura de la peine à se réadapter.

Les couleurs : restez minimalistes !

Les blogs offrent la possibilité d’utiliser pour les caractères un large panel de couleurs. Certains blogueurs aiment à jouer avec toutes sortes de couleurs... Pour ma part, j'y suis défavorable, pour plusieurs raisons :

  • Au delà de deux ou trois couleurs, les autres seront trop vives, trop pâles, agressives, pas assez contrastées sur un fond donné ;
  • un nombre non négligeable de personnes (près de 10% de la population mâle !) souffre de troubles de perception des couleurs ;
  • la juxtaposition de plusieurs couleurs est fatigante pour l’oeil.

Il est de toute façon impératif que le texte reste bien contrasté, au risque d'être totalement illisible ! Souvenez-vous également que depuis notre plus jeune âge, nous sommes habitués à lire des caractères noirs sur fond blanc : notre oeil (toujours lui) sera généralement plus à l’aise pour reconnaître un caractère sombre sur un fond clair.

Police de caractère : restez classiques

Par l'intermédiaire des feuilles de styles, vous pouvez choisir une police de caractère particulière. Les polices les plus utilisées sont de deux types : les sérifs reconnaissables à leurs petits empâtements (Times New Roman, Garamond…) et les sans-sérifs, qui n’en comportent pas (Arial, Verdana…). Les polices les plus lisibles à l’impression sont les sérifs. Par contre, sur l’écran où existent toujours des risques de pixélisation, les sans-sérifs, plus simples, rendent mieux.

Certaines polices fantaisie, anciennes ou manuscrites peuvent sembler belles au premier regard, mais se révèlent très fatigantes  pour les yeux quand elles sont utilisées sur écran et dans un texte long. En effet, notre oeil n’a pas été habitué à les lire, à la différence des polices classiques. Il faut savoir aussi que le visiteur doit posséder la même police sur son disque dur pour qu’elle apparaisse telle quelle. Dans le cas contraire, un autre caractère lui sera automatiquement substitué et le résultat risque d’être laid ou illisible.

Les fantaisies typographiques : elles n'amusent que vous

Il est très à la mode, parfois, de se créer un style typographique particulier (par exemple, en doublant systématiquement une lettre, ou en la tapant en majuscule). Ce style de coquetterie se fera toujours au mépris de vos lecteurs !

Présentation générale

Essayez de bien délimiter les différentes colonnes de votre page, par un jeu de lignes ou de couleur : elle n'en sera que plus lisible. Certains blogueurs font le choix d'un colonne centrale très étroite. Ces blogueurs doivent rester attentif à ne pas publier d'image plus large que cette colonne, ou le résultat sera désastreux ! Quand vous publiez des images dans le cours du texte, essayer qu'elles ne dépassent pas le tiers ou la moitié de la ligne, selon sa longueur, au risque de voir des lignes dramatiquement raccourcies au point d'en être illisibles de part ou/et d'autre de l'image.

Au final !

On a jamais rien à perdre à se remettre en cause, surtout suite à des erreurs qui sont commises par méconnaissance de ces règles. Essayez de méditer ces quelques petits principes, au lieu de vous sentir agressés dans votre créativité. Vous donnerez plus de plaisir aux autres à lire votre blog, ce qui sera un bénéfice et une stisfaction non négligeable !

lundi, 23 juin 2008

Symphonie en rouge pour créations futiles

Pour fêter mon nouveau téléphone portable, un minuscule truc plat, noir et rouge choisi par mon mari et portant le nom de Nokia XPRessMusic, j'ai créé quelques fonds d'écrans en harmonie avec les couleurs de la bête. Ce n'est pas tout à fait conforme à l'image "techno" que ce petit appareil veut afficher, mais ça rend plutôt bien...

 Le premier, qui se décline en rouge-brun et en rouge framboise, ne sera pas sans vous rappeler la charte graphique de ce blog :

q2dlga4y73.jpg
 yvv31ffg76.jpg
Le second est créé à partir d'une photo du prunus qui se trouve en face de mon appartement, avec quelques effets de superposition :
qwm9bmza59.jpg
onr6g4yid5.jpg

 Bien entendu, ils sont récupérables et utilisables par qui veut...

dimanche, 02 mars 2008

La vecto pour les nuls

Vec… quoi ?

 Depuis que j'ai commencé à m'intéresser au dessin vectoriel, je me suis aperçue que cette notion n’était pas si largement connue que le fait de vivre le nez dans le graphisme numérique pouvait me porter à le croire.

 En bref, il existe deux type d’images numériques : les images « matricielles » et les images « vectorielles ». Les images matricielles ou « image en mode point », plus connues sous le terme anglais de « bitmap », sont similaires à une tapisserie ou un canevas : elles sont définies par des points de couleurs. C’est le cas des photos numériques, des peintures virtuelles, bref, de l’immense majorité des images qui traînent sur les ordinateurs privés et le web. Plus il y a de points et plus les couleurs de ces points sont nombreuses, meilleure est la qualité de l'image.

Les images vectorielles fonctionnent de façon différente. Elles sont composées d’objets géométriques (polygones, formes complexes, courbes, traits) définis par des formules mathématiques recalculées par l’ordinateur à chaque visualisation. Quel est l’intérêt ? Ce style d’image, contrairement aux images matricielles, peut être rapetissé mais aussi agrandi à l’infini sans perte de qualité. Néanmoins, ce type de dessin ne permet pas de subtiles transitions de couleurs : il est plus adaptés aux dessins au trait ou stylisés, comme les logo.

 Et les courbes dans tout ça ?

L’outil le plus puissant de création des dessins vectoriel s’appelle la « courbe de Bézier ». Non pas du nom de la ville, mais de celui d’un français de génie, Pierre Bézier. C’est dans les années 60 (il n’y a donc pas si longtemps à l’échelle de notre histoire…) que cet ingénieur chez Renault a trouvé le moyen de définir des courbes grâce à des points de contrôle, sans forcément avoir à entrer des équations compliquées. Quand on bouge ces points, la courbe se déforme.

Je ne rentrerai pas dans des explications compliquées que je ne suis pas sûre de comprendre moi même. Tous les logiciels de dessin vectoriel dignes de ce nom intègrent l'outil dérivé de cette découverte. En bref, une forme est définie par une succession de point et les segments de courbes que ces points relient. On peut définir si à l’endroit du point, la courbe est arrondie ou brisée, et grâce à deux petites « poignées » qui apparaissent de part et d’autre du point. Cette capture d’écran du logiciel Inkscape montre clairement comment s’utilise cette fonctionnalité.

Si vous voulez en savoir plus sur Pierre Bézier (et sur la façon dont les idées géniales sont reçues en France…), allez faire un tour sur le site de Régis Le Boite

Des monts et des plaines

Il y a deux façons de vectoriser : celle qui semble la plus simple consiste à transformer une image matricielle en image vectorielle. Le logiciel détermine les zones de couleur et les transforme en formes géométriques superposées. Pour un dessin trop complexe, c’est vite lourd et pas forcément très harmonieux. La seconde, c’est de dessiner, sois ex-nihilo, soit sur l’appui d’un dessin scanné, chaque courbe à la main, en employant les formes géométriques et les courbes de Bézier. Plus long, mais plus satisfaisant. 

Il suffit juste de comprendre que moins il y a de points, plus la courbe est belle. On lisse, on modèle, on s’approche par approximation de la perfection… Il y a un aspect presque sensuel dans le travail de la courbe.  

 

1914391729.jpg

 

J’espère que ces explications vous auront un peu éclairés !

jeudi, 28 février 2008

Brune et bleue

Voilà, j'ai retouché mon logo qui est ici dans sa version définitive ! Vectoriser Lejy prendra plus de temps.

 

86927562.png

 
 Je pense l'intégrer à deux graphismes différents, un brun et l'autre bleu. Avec, comme d'habitude, introduction d'un sélecteur de styles. Voici, d'ailleurs, à quoi le site est susceptible de ressembler :
 
 
1643572272.jpg
 

 Ce n'est qu'un crayonné, le résultat final risque d'être très différent. En fait, je fais rarement une maquette statique complète. Je dessine à la main, puis je crée les éléments graphiques sur Gimp et je les mets directement en place grâce à la feuille de style.

 Une chose est sûre, il y a encore du boulot...

samedi, 23 février 2008

Quelques grammes de responsabilité dans un monde de pirates

Dans le monde graphique, les communautés abondent... Mais il serait utile de souligner l'ambiguité sur laquelle la plupart reposent.

Tout utilisateur de Gimp (logiciel de création graphique 2D libre et gratuit, doté de fonctionnalités très poussées) qui débarque sur un forum où la majorité des utilisateurs utilise Photoshop se voit confronté aux même réactions : "pourquoi tu utilises Gimp quand tu peux avoir Photoshop ?" Même si le Gimpeur répond en toute bonne foi et sans provocation, il risque de susciter des réactions outrancières, qui vont du mépris à l'agressivité pure.

Reprenons notre "Gimpeur" qui explique son choix... S'il s'appuie sur des considérations éthiques (je ne veux pas pirater, je soutiens la gratuité et le partage...), il renvoie ses interlocuteurs au fait que leur choix n'a, justement, rien d'éthique. Dès lors, les dits interlocuteurs vont soit l'approuver mais s'avouer incapable de faire de même pour X raisons (pas forcément très bonnes...), soit assumer totalement leur choix personnel... soit éprouver de la gêne.

Ce sont ces derniers qui posent des problèmes. Parfois parce qu'ils pensent que reconnaître publiquement l'illégalité de leur situation peut se retourner contre eux. Mais aussi, parfois, parce que ce sont des gens qui se targuent d'idéologie libertaire et qu'ils sont renvoyés face à leur incapacité d'aller au bout de leurs idéaux, soit en embrassant la cause du libre, soit en assumant de contrevenir la loi. D'autant qu'ils ne font pas réellement les "rebelles" puisque par ailleurs ils savent très bien, sauf quelques individus particulièrement naïfs, qu'ils jouent le jeu d'Adobe... Ce sont ces derniers qui seront les plus violents, viendront insulter et traiter de tous les noms le défenseur du libre.

 Car il faut être réaliste... Combien de communautés autour de logiciels pro, qui  ne devraient s'adresser qu'aux graphistes et étudiants en graphisme, ou aux personnes en possédant l'usage légal ou du moins professionnel ? Combien de gamins qui étrennent leur premier ordi, d'utilisateurs sachant à peine ce qu'est un pixel, d'amateurs pas trop mal débrouillés qui pensent que seul l'usage de ces logiciels leur apporterons une reconnaissance sont poussés à créer dans une illégalité béate ? Le système entier favorise cet état d'esprit, les éditeurs des logiciels en question les premiers ; cet usage illicite, tant qu'il survient hors contexte professionnel, sert d'école de formation gratuite qui leur assurera la prépondérance du marché. 

Il nous faut plus de communautés ambitieuses qui se lanceront globalement sur le "tout alternatif", la 2D sans Photoshop, le Flash sans Flash, le webdesign sans Dreamweaver...  A défaut, plus de communautés qui se refusent à conseiller aux débutants le "haut de gamme", histoire "faire pro" ? Qui oserait conseiller une Ferrari à un conducteur débutant, et qui plus est le vol de la Ferrari en question ?

C'est une question que chaque responsable de communauté devrait de poser, avant toute chose...

jeudi, 21 février 2008

Mini, mini, mini, Miniban

Petite note qui ne sert à rien, ou presque

 Je viens de créer ma mini-bannière : une petite barre de 100 pixels de large sur 15 de haut, dans laquelle il faut parvenir à tout dire. Fichtre.

 A quoi cette petite chose peut-elle bien servir ? Pas à rien, mais à lien... (Aha, désolée, avec mon n'hom, je suis à bonne école pour les jeux de mots nuls !)

a533d0d6f71f6420b6eed5dac6e771b1.gif

00:45 Publié dans Pot de pixels | Lien permanent | Commentaires (0) | Tags : Bannière

lundi, 18 février 2008

A l'époque, on faisait du web sans casque...

Je me permets de reprendre ici un sujet que j'avais développé sur un de mes forums (certains le reconnaîtront).

Une remarque anodine m'a remise en tête la façon dont on "faisait du web" dans les années 90... A cette époque, on ne s'embarrassait pas de normes (à part une poignée de geeks), assez peu d'ergonomie, on ne se posait pas de questions existentielles sur la séparation du contenu et de la mise en forme, il y avait des tableaux partout, on truffait ses pages de gifs animés, on collait une musique de fond qui couinait en midi, on utilisait des grosses polices de caractères pour écrire les pages, sur une seule colonne qui allait d’un bord à l’autre de l’écran (en 640 X 480 !), on mettait des couleurs criardes (dans une palette de 256 couleurs…), on ne se préoccupait pas de mode...

A cette époque, j'ai commis, comme tout le monde, ma part de pages kitsch...


Je ne dis pas que suivre des normes bien définies, se préoccuper d'accessibilité et d'ergonomie, c'est une mauvaise chose... Bien au contraire ! Mais il faut bien avouer qu'on s'amusait beaucoup plus. On expérimentait beaucoup, plus librement, sans soucis de mode et d'esthétisme artistique, sans label Web 2.0.

Au final c'était un temps heureux. Un peu comme celui de l'enfance. Sincèrement, je le regrette, tout en sachant que ce temps ne reviendra pas, qu'il ne doit pas revenir et que je serai la première à décourager tout petit nouveau qui voudrait bâtir ses pages comme nous le faisions à l'époque...

Nostalgie, quand tu nous tiens !  

8b4c25e5abcc812a75019a59507a2e62.gif

 

Vecto vintage

Voilà, enfin terminé, ce maudit logo qui conditionnait la création du nouveau design d'un de mes sites !

 
7652f44f7c0d99a44a4905c9c791ea63.png

Rien de bien extraordinaire, donc, si ce n'est encore un prétexte de sortir mes feuilles virtuelles de leur pochette. Il reste à travailler sur la mascotte du site, drôle de créature rebondie d'espèce indéterminée baptisée "Lejy".

0cfb82f0d15ea3d0ef3f4c16e6d8b5b4.jpg

 

 Ce sera long, pas forcément très facile. Lejy héritera de la plume du dé du logo précédent, ce qui permettra de gagner du temps... 

 Je précise que le logiciel utilisé est Inkscape, libre et gratuit. Allez, un coup de pub ! Il faut vraiment qu'un amateur soit plus qu'un peu nigaud pour s'embêter à pirater Illustrator, quand des outils de cette qualité lui sont offert en toute légalité !