Ishimaru-Blog » Graphisme http://ishimaru-blog.servhome.org Le journal d'une geekette où l'on y parle autant de Linux et de création Web que de cuisine et de futilités de la vie Thu, 22 Mar 2012 05:33:08 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Big-tuto GIMP : Ça y est ! http://ishimaru-blog.servhome.org/archives/390 http://ishimaru-blog.servhome.org/archives/390#comments Wed, 06 Jul 2011 04:37:08 +0000 Ishimaru http://ishimaru-blog.servhome.org/?p=390 Ceux qui me suivent sur FB et sur les sites que je fréquente (SDZ, GA, Ishimaru Bar) savent déjà la nouvelle, mais pour ceux qui suivent ce blog et qui ne le savent pas encore, je vous l’annonce.

La version 2 de mon cours sur Gimp a été validée ce lundi ! Et cette fois-ci, ça n’a pris que 3 semaines, comparativement aux 2 mois que ça avait pris pour la version 1 !

Je remercie SimSonic, le validateur qui s’est occupé de traiter mon tuto, pour m’avoir permise de corriger quelques erreurs et oublis et de m’avoir conseillée sur certains points, comme transférer le contenu de l’annexe « Au sujet du cours » vers l’intro et la conclusion du cours. Il m’a laissée aussi mettre l’annexe « les bases de l’image » de côté et d’utiliser le premier chapitre du cours de Berzy, poru ne pas retarder la validation et pour me permettre de prendre mon temps pour le retravailler.

Et la suite ?

Pour le moment, travailler sur le cours n’est pas à l’ordre du jour avant le mois d’août, puisqu’il ne me reste même pas 2 semaines avant mes vacances, et je préfère donc finir les trucs plus urgents pendant cette période puisque ce n’est que depuis lundi que je peux à nouveau grapher (voir l’article précédent).

]]>
http://ishimaru-blog.servhome.org/archives/390/feed 1
[Big-tuto GIMP] Refonte enfin terminée !!! http://ishimaru-blog.servhome.org/archives/369 http://ishimaru-blog.servhome.org/archives/369#comments Fri, 06 May 2011 21:28:19 +0000 Ishimaru http://ishimaru-blog.servhome.org/?p=369 Après plusieurs mois de travail, je peux enfin vous l’annoncer !

Ceux qui me connaissent savent que j’ai publié un cours pour apprendre à utiliser le logiciel GIMP à partir de zéro, sur le site du zéro. Or, la version présentement publiée et visible par tous commençait vite à me taper sur les nerfs car je trouvais que j’avais oublié quelques notions importantes, que certains chapitres étaient mal organisées et que les exercices dans le plan initial étaient rares et mal réparties.

Pour ces raisons, je travaillais sur une refonte depuis quelques mois, au cours desquels certaines péripéties ralentissaient la rédaction. J’ai dû notamment me résoudre à retirer mon co-rédacteur suite à des divergences de vision vis à vis le cours.

Maintenant, je viens tout juste de finir le dernier chapitre de l’étape de la refonte (j’avais hâte en criss !) et donc, si vous avez un compte sur le SDZ, vous pouvez bêta-tester le cours à partir de ce fil : http://www.siteduzero.com/forum-83-628705-p1-beta-on-apprenez-a-creer-avec-gimp-2-6.html

Et n’hésitez pas à poster vos retours dans le fil, pour que je puisse améliorer le cours et corriger les fautes.

]]>
http://ishimaru-blog.servhome.org/archives/369/feed 0
Futur webdiz d’Ishimaru Design – Les maquettes sont prêtes ! http://ishimaru-blog.servhome.org/archives/285 http://ishimaru-blog.servhome.org/archives/285#comments Mon, 07 Feb 2011 06:17:09 +0000 Ishimaru http://ishimaru-blog.servhome.org/?p=285 J’en avais déjà parlé dans quelques articles ces deux derniers mois, mais cette nuit, je viens de finaliser les maquettes codées des pages de démo pour donner un premier aperçu live de la prochaine version de mon site qui sera caractérisée par un refresh total du design, avec mon fidèle Gimp avec son petit frère Inkscape pour les graphiques et mon Gedit pour le codage XHTML et CSS. Dakin Quelia, mon collègue de phpBB France, a eu la chance de voir quelques pages et ça m’a du coup permise de faire quelques correctifs dans le CSS, notamment pour le menu en haut à droite qui, sous certaines configs, n’avait pas assez de place pour s’y positionner et se trouvait donc décalé en bas.

Voici donc un aperçu de différentes pages :

Aperçu de la page d’accueil

En version connecté

Page des news

Accueil des ressources

Page spécifique à une catégorie

Une liste de styles

Détails d’un style

Une liste de MODs et hacks

Détails d’un MOD/Hack

Accueil des tutoriels

Une liste de tutoriels

Plan du site

Page fixe #1
Page fixe #2

Quant à la partie Forum, ça se fera quand je commencerai l’intégration dans Connectix Boards.

Jusqu’à maintenant, les pages ont été testées sous FF 2.x et 3.6.x ainsi que sous Chromium. Je n’ai donc pas encore testé sous IE, étant sous Linux, mais je sais que les arrondis CSS3 ne fonctionnent pas avant IE9 et j’hésite entre mettre le script Roundies ou non.

]]>
http://ishimaru-blog.servhome.org/archives/285/feed 3
Ishimaru Design v6 – Premier jet http://ishimaru-blog.servhome.org/archives/213 http://ishimaru-blog.servhome.org/archives/213#comments Wed, 01 Dec 2010 04:33:13 +0000 Ishimaru http://ishimaru-blog.servhome.org/?p=213 Après les travaux dans les codes même de mon site de graphisme pour transférer les textes vers des fichiers de langue et pour mettre les modules en include pour une maintenance plus aisée, j’étais depuis en train de penser à un futur design, un où l’ergonomie serait complètement revue, et où l’on repasserait à une largeur fixe, cette fois à 1000px du fait de la rareté des écrans en dessous de 1024*768.

Mais alors, sur quoi se baser quand le site porte un nom japonais ? J’ai tout d’abord pensé à faire un logo avec un pinceau et une palette de peinture qui formeraient les deux lettres, mais je trouvais que ça faisait juste « trop ». Je me suis alors mise à chercher dans les webdesigns asiatiques/zen pour trouver des idées qui colleraient à l’exotisme du nom.

Puis me vint alors une idée : Du bambou ! C’est typiquement asiatique et ça évoque des verts qui ne sont pas trop froids et qui ne font pas trop « fille » non plus. À partir de cette idée, puisque je fais surtout dans le style moderne/sobre, je voulais donc combiner l’oriental avec le moderne.

J’ai donc ouvert Gimp et commencé à faire le layout général en m’inspirant un peu de Drupal et d’Alsacréations. Puis une petite recherhe sur openclipart.org m’a permise de trouver ce que je voulais : un dessin d’un plant de bambou, puisque j’aurais eu du mal à en dessiner un moi-même.

Ensuite, puisque je me suis récemment remise au dessin vectoriel et que je voulais vraiment une touche de renouveau à mon design avec une réorganisation des pages, j’ai ouvert Inkscape pour dessiner les trois icônes pour chacune des trois parties principales du site : les ressources, les tutorieils et le forum. Bref, un peu comme sur alsacréations, et de ce fait, cela me permettrait de regrouper ensemble ce qui correspond à un point commun, comme par exemple les pages de ressources dans la partie ressources. Le menu horizontale varierait donc selon la partie où l’on est.
Quant aux pages telles que la politique d’accessibilité et les autres pages statiques, tout cela serait mis dans le footer. Du coup, cela permet d’épurer la sidebar que je trouvais trop chargée, et de mettre en avant ce qui a plus d’importance. Quant aux coins des blocs internes, j’utilise le CSS3, et je regarderai par après pour un script pour IE si je ne décide pas de faire de la dégradation gracieuse.

Donc, voici un premier aperçu depuis Firefox de la maquette de la page d’accueil, fraîchement codée, vous n’avez qu’à cliquer pour l’agrandir :

Aperçu du futur webdesign de mon site de graphisme

La seule chose que je me demande, c’est si le design n’est pas un peu trop vert. Du moins, le retour que j’ai eu jusqu’à maintenant sur le SDZ m’a dit que c’est le cas.

]]>
http://ishimaru-blog.servhome.org/archives/213/feed 4
PNGCrush ou quand Y! Smushit ne suffit plus http://ishimaru-blog.servhome.org/archives/162 http://ishimaru-blog.servhome.org/archives/162#comments Sun, 26 Sep 2010 23:38:23 +0000 Ishimaru http://ishimaru-blog.servhome.org/?p=162 Ce soir, pour la première fois depuis que j’utilise Smushit pour optimiser mes images, je suis tombée sur un cas d’image PNG qui, bien qu’elle ait bien un problème d’affichage de couleurs chez moi, Smushit n’a trouvé aucun octet à enlever.

Je me retrouvais donc devant un problème puisque c’était le seul outil d’optimisation que j’utilisais jusqu’à maintenant.

La ligne de commande salvatrice

Je me souvenais que PNGCrush pouvait enlever les profils ICC qui sont sources de ces problèmes que j’ai, mais je n’avais pas trouvé dans le man quelles options taper pour enlever toutes les infos inutiles.

Mais puisqu’il me restait que ça comme solution, je me suis mise à faire une recherche sur Google en tapant « enlever profil ICC pngcrush » pour finalement tomber sur cet article de blog qui, bien qu’elle parle surtout du gamma et de Safari, donnait LA commande à taper pour enlever les informations colorimétriques superflues dans les images PNG !

Donc si vous êtes sur Linux et que vous faites vos images avec Gimp, installez d’abord pngcrush (pour Ubuntu – à adapter à votre distro) :

sudo apt-get install pngcrush

Ensuite, vous n’avez qu’à taper cette commande pour chacune de vos images PNG fraîchement enregistrée avec Gimp :

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB ancien_fond.png nouveau_fond.png

Et hop, plus de problème !

]]>
http://ishimaru-blog.servhome.org/archives/162/feed 2
Nouvelles en vrac : Roulotte de camping et big-tuto GIMP http://ishimaru-blog.servhome.org/archives/153 http://ishimaru-blog.servhome.org/archives/153#comments Tue, 07 Sep 2010 06:25:36 +0000 Ishimaru http://ishimaru-blog.servhome.org/?p=153 Je me rends compte que ça fait déjà trois semaine depuis mon dernier billet où j’annonçais mes vacances. J’aurais pu publier entre-temps, mais d’autres absences se sont ajoutées en plus que j’étais plutôt occupée. J’en viens maintenant aux nouvelles.

Geekette la semaine, campeuse le WE

Suite à la semaine passée au camping, dans la vieille roulotte que la soeur de ma marraine nous a prêtée, nous (mes parents + moi) avons assez aimé l’expérience qu’avant même de finir la semaine de vacances, nous commencions déjà à faire le tour des roulottes en vente. La soeur de ma marraine était même prête à nous vendre la sienne si son conjoint avait dit oui.

Je ne parle pas des tentes des tente-roulottes ni des hybrides (ces deux types ne nous intéressaient pas), mais bien d’une caravane aux parois rigides (extérieur en tôle ou en fibre de verre) avec les commodités élémentaires (salle de bains, cuisinette et lits dont une table abaissable pour faire un lit avec les banquettes, trappes d’aération) et d’autres commodités qui peuvent s’ajouter dans les modèles récents ou de luxe. Il n’était pas question non plus d’un motorisé de type Winnebago dont la voiture et la caravane ne font qu’un. Nous voulions une caravane qui puisse s’attacher à un véhicule au besoin, que ce soit une fifthwheel (ou caravane à sellette) qui ne peut s’attacher qu’à une boîte de camion, ou une roulotte qui s’attache à n’importe quelle voiture qui a une boule de trailer en arrière.

La tournée des roulottes

Dès que nous avons commencé à faire la tournée, nous avions d’abord vu une petite Dauphine 71 en bon état, mais le prix était franchement exorbitant pour son âge et son propriétaire ne voulait pas du tout négocier, ce qui nous a refroidis même si la roulotte était en bon état. Ensuite, nous avons repéré une fifthwheel Bonair 2000 de 24 pieds sur le bord de la plage, au même prix que la Dauphine. Bien qu’elle semblait intéressante avec sa chambre d’enfant, elle était étroite avec ses 7 pieds de large : il n’y avait de l’espace entre la table et le comptoir que pour laisser passer un adulte. Nous l’avions quand même gardé dans notre liste, sans nous douter qu’une autre fifthwheel que nous allions visiter par après serait notre coup de coeur.

Et le coup de coeur arriva

Alors que nous étions sur le point d’acheter la Bonair, mon parrain nous parle d’une Terry 97 de 27 pieds à vendre qu’il a repérée, mais lui et sa femme pensaient qu’il s’agirait d’un modèle pour couple. Eux et mes parents sont allés quand même voir, pour en revenir littéralement emballés : Au même prix que la Dauphine et la Bonair, la Terry est plus spacieuse et a un petit salon avec un divan convertible en lit, ce qui, avec le lit queen de la chambre des maîtres (dans le nez de la fifthwheel) et la table abaissable, permet de coucher 4 adultes. Il y a aussi un poêle avec four, un évier double, une salle de bains avec douche, une fournaise au gaz, un climatiseur, un système de son intégré, un auvent et du rangement à profusion. Et autre élément intéressant : la déco est dans des tons clairs (ce qui est parfait pour ma vision) et les tapis ont été remplacés par du stratifié (parfait pour ma mère qui est asthmatique).

Notre décision était donc prise : Dès la première occasion d’aller faire un tour à la maison, ma mère a fait sa demande de prêt, puis deux jours après, après beaucoup de tension causée par la peur que l’occasion nous échappe une autre fois, nous avons filé direct au camping le soir même où ma mère a eu sa réponse pour signer les papiers, et nous voilà propriétaires !

Je n’ai pas les photos, mais par contre, j’ai trouvé via Google Images une photo du même modèle de la même année avec les mêmes couleurs. Voici de quoi elle a l’air :
caravane identique à la mienne - Terry 97 de 26.5 pieds

Ma marraine nous dit que nous commençons déjà avec presque du camping de luxe, mdr !

Et le camion pour la tirer ?

Nous n’en avons pas encore, mais ce n’est pas grave puisque dans l’immédiat, nous ne bougerons pas du terrain que la soeur de ma marraine nous a laissé, et c’est l’ex-propriétaire qui s’est chargé de la placer. Mais il n’est pas exclu qu’à moyen terme, qu’on puisse voyager avec si mon père s’achète un camion. Pourquoi pas, surtout si je dois recommencer à aller à Québec pour mes examens en basse vision ? J’ai d’ailleurs eu de très bons retours au sujet du Camping de la Joie.

Et l’impact sur ma geekitude ?

J’avais déjà pensé à l’idée de m’équiper d’un ordi portable, mais puisque ma mère ne veut pas voir d’ordi entrer dans la roulotte, je ne peux donc que me résoudre à m’organiser autrement pour m’assurer que mes sites tournent sans anicroche lorsque je dois m’absenter pendant plus de 2 jours lorsque le camping rouvrira au début de l’été prochain. Pour ma todo-list aussi, ça change la donne et de ce fait, il faudrait bien que je me donne un coup de pied pour me lever tôt pour pouvoir travailler en journée lorsque je suis à la maison.

Par contre, je peux apporter mon Gameboy et mes livres fantasy.

L’autre nouvelle : le big-tuto GIMP

Je ne me souviens pas si j’en avais parlé sur le blog, mais ça fait plusieurs mois que je travaille sur un big-tuto GIMP, et ça faisait depuis le 30 juin que j’avais envoyé les premiers chapitres à la validation. Ce n’est finalement qu’hier, le jour même où je revenais d’un WE de 4 jours au camping, qu’il a enfin été validé ! Mettons que le déluge d’emails de notifications sur mon Yahoo et les 28 nouveaux MPs (24 de notifs de commentaires, 1 annonçant la validation, trois normaux) m’ont mis la puce à l’oreille alors que d’habitude, mon nombre de MPs par jour se comptaient sur les doigts d’une main quand j’en avais.

Vous pouvez le consulter sur ce lien : Apprenez à créer avec GIMP 2.6

Ce que je compte faire dans l’immédiat, c’est de mettre à jour les traductions, puisque j’avais su trop tard qu’il y a eu pas mal de changements dans la traduction française de la 2.6. J’aimerais aussi profiter du fait que j’ai upgradé Ubuntu cet été pour changer les captures et ainsi pouvoir peaufiner un peu plus la forme, en particulier pour le chapitre 6 qui n’a d’ailleurs pas été validé et qui a justement le plus besoin d’être retravaillé. Une fois les retouches faites, là je me mettrais à ajouter de nouveaux chapitres.

Bref, la saison froide s’annonce chargée, mdr !

]]>
http://ishimaru-blog.servhome.org/archives/153/feed 1
Tâches à faire – Je commence à avoir le dessus ! http://ishimaru-blog.servhome.org/archives/96 http://ishimaru-blog.servhome.org/archives/96#comments Wed, 30 Jun 2010 08:51:42 +0000 Ishimaru http://ishimaru-blog.servhome.org/?p=96 Ces derniers mois, j’ai eu pas mal de boulot à faire. Cela allait au point où j’ai été quelques temps où j’avais même du mal à m’avancer, même de quelques lignes, dans mon big-tuto GIMP que j’écris depuis plusieurs mois.

Hors-internet, j’avais à jongler entre renouveler les biscuits maison, mes entraînements au gym (bien que j’ai pris une pause le temps de laisser mon genou récupérer après un claquage lors d’un step-up), mes rendez-vous divers avec mes intervenantes, ainsi que plus récemment, les sorties avec ma nouvelle amie.

Mais il reste que j’ai quand même pas mal de boulot à faire sur le PC aussi : Avec la découverte du problème de couleurs des PNGs de mes styles sous Firefox 3.6, cela m’amène donc beaucoup de boulot à faire. Puis vient une commande où l’on me demande plusieurs variantes de mon style phpBB3 « Pro_Ubuntu » pour un phpBB-SEO, ce qui implique qu’en plus de faire les variantes de couleur, il faut que je modifie ce qui est à personnaliser dans ce qui a été ajouté par les modules de la prémod. Puis avec le problème de bots qui devenait de plus en plus difficile à gérer sur mon ancien blog, il a fallu que je déménage et donc, que je me familiarise avec WordPress pour pouvoir mettre en place et personnaliser ce blog où vous êtes présentement en train de lire ce billet. Et c’est sans compter tous les imprévus qu’il peut y avoir.

Avec tout ça, j’en venais à en avoir même de la misère à me trouver du temps pour travailler sur mon cours. Mais avec la demande croissante d’un cours de graphisme ainsi que les questions concernant une date de sortie du cours, il fallait bien que je fasse un choix, d’autant plus que j’aimerais bien pouvoir passer à la toute dernière version d’Ubuntu qui est sortie vers fin avril de cette année.

S’organiser

Même si j’avais une grosse commande et que les mises à jour des styles étaient à faire, le cours de GIMP pressait de plus en plus. Je me suis donc lancée dans un blitz de rédaction durant le mois de juin pour au moins finir le chapitre 6 et faire des retouches sur le cours. J’ai finalement même eu le temps de réorganiser le chapitre 4 dont la structure ne me satisfaisait plus. Je remercie au passage m@tteo78 pour son aide précieuse en tant que gimpeur expérimenté pour certains points.

Entre-temps, en allant sur le blog de Simple IT, je tombe sur ce billet sur l’organisation qui m’a permise d’apprendre quelques trucs pour organiser mes tâches, dont une application pour les gérer.

En effet, jusqu’à maintenant, j’utilisais une simple note où j’écrivais les tâches à faire, mais je ne mettais pas de délai, ni de division selon la priorité : tout était pêle-mêle ! Cela avait pour résultat que certaines tâches pouvaient traîner pendant plus d’un an !

En lisant le billet, j’ai donc découvert Getting Things Gnome!, un utilitaire Linux s’intégrant parfaitement dans l’environnement Gnome pour gérer ses tâches. Pour un cas comme moi, cela fait parfaitement l’affaire et ainsi, j’ai migré tout ce que j’ai noté. Ce qui est le fun, c’est que :

  • On peut définir un délai pour chaque tâche, en utilisant le petit calendrier. Ainsi, une tâche urgente aura un délai plus court qu’une tâche qui presse moins.
  • Le système d’arborescence fait que l’on peut ajouter des tâches-enfant dans une tâche-parent. Ainsi, par exemple, ma tâche parent est Mettre à jour mes styles phpBB3, et dans cette tâche, il y a plusieurs sous-tâches (ou tâches-enfants), chacun désignant un style à mettre à jour. La profondeur de l’arborescence peut aller à l’infini !

Ainsi, j’ai mis dans les tâches urgentes le big-tuto ainsi que la commande à faire. Ensuite, comme tâches qui viennent après, ce sont mes styles à mettre à jour. De cette façon, si j’ai un trou de libre, je peux mettre à jour un style, avant de replonger dans les tâches urgentes.

Au final, j’ai déjà quelques tâches mis en Terminé : trois styles phpBB3 que j’ai mis à jour lorsque j’ai eu des trous libres. Quant aux tâches urgentes, la finition de mon big-tuto Gimp pour la première publication viendra bientôt rejoindre la liste, puisque j’ai pu faire les dernières retouches (dont compléter les annexes) à temps, et au moment d’écrire ce billet, le cours sera envoyé à la validation dans quelques heures..

Le sentiment d’avancer vite tout d’un coup

Maintenant, dans les tâches urgentes, il ne reste que la grosse commande de styles pour le forum phpBB-SEO. Déjà, j’ai commencé à travailler dessus à fond, en commençant par compléter les modifications là où il y a les modules, pour au moins que le portail soit dans les bonnes teintes de couleurs. Et lorsqu’arrive un trou, j’update un style !

Donc, dès le moment où j’ai terminé la réorganisation du chapitre 4 de mon cours (incluant le transfert des images), j’ai senti tout d’un coup que ça s’est mis à avancer vite et que je ne stagne plus dans les tâches à faire ! Même si je me couche très tard ces temps-ci, le fait que j’ai terminé quelquechose de gros à faire fait que je me couche avec le sourire, en pensant au boulot que je viens de terminer et que je n’aurai pas à reprendre le lendemain.

Je commence donc à être confiante à terminer mes différentes tâches à temps selon le délai donné, voire même de prendre un peu d’avance. Enfin… du moins ça dépend encore de la date à laquelle la version 1.0 de Connectix Boards sortira, puisque je ne veux pas me lancer dans les travaux majeurs sur mon site tant que cette version ne sortira pas, puisque j’aimerais réorganiser l’architecture de mon site pour en faire un vrai CMS utilisant le moteur du forum, et non plus un simple site maison qui ne fait qu’utiliser les sessions du forum pour l’espace membre. D’après les dernières nouvelles, il y a des possibilités que ça puisse sortir en septembre, mais ça dépend toujours des imprévus qui sont inévitables en développement Web.

Mais d’ici-là, j’ai encore deux gros mois pour tout le boulot que je compte faire avant septembre.

]]>
http://ishimaru-blog.servhome.org/archives/96/feed 2
Retour sur les PNGs assombris – là cette fois, c’est la bonne http://ishimaru-blog.servhome.org/archives/44 http://ishimaru-blog.servhome.org/archives/44#comments Fri, 14 May 2010 05:18:17 +0000 Ishimaru http://ishimaru-blog.servhome.org/?p=44 À la suite des commentaires par rapport à mon précédent article, je viens faire un retour là-dessus.

Réglé… ou presque

Puisque mes images s’affichaient correctement une fois le profil appliqué et que je n’avais pas eu de signalements de problèmes, je pensais que c’était totalement réglé.

Or, Florent.V, dans ses interventions autant ici que dans mon sujet sur Alsacréations, m’a fait remarquer que la solution que j’utilisais était risquée car le profil utilisé par le système pouvait varier d’un OS à l’autre, ce qui fait que mes images pouvaient aussi bien mal rendre sur Mac OSX par exemple, alors que ça rend bien sur Ubuntu 9.04.

L’optimisation – Oui, mais il faut trouver le bon outil

On m’a donc parlé de l’optimisation de mes images. J’avais déjà vu l’article d’Alsacréations à ce sujet et j’avais même déjà commencé à utiliser des outils en ligne de commande bien avant mon passage vers Firefox 3.6. Mais je croyais que mon problème n’avait rien à voir avec ce qui était évoqué avec l’article puisque les seuls sujets que je trouvais dataient de plusieurs années déjà.

De plus, mes tentatives avec optipng et pngcrush ne m’avaient pas permis de virer ce problème de couleur (mauvais paramètres ?). On me parlait de PNGOptimizer et d’autres scripts pour Windows, mais le hic c’est que je suis sur Linux !

On me parlait donc de Smushit, mais je ne l’avais pas encore essayé jusqu’à aujourd’hui puisque je pensais que les résultats allaient être aussi mitigés qu’avec optipng et pngcrush.

Ce n’est donc que ce soir que je l’ai essayé, en envoyant les 8 coins de mon cadrage du thème Provalentina pour finalement voir que… l’assombrissement a disparu, autant sous Firefox que sous Internet Explorer ! Cet outil enlève vraiment toute information de couleur superflue (gamma, profil ICC) en plus que le poids total a considérablement baissé, surtout avec deux morceaux qui ont été allégés de 90% !

Vous pouvez donc voir le résultat sur ce lien, où j’ai remplacé tous les morceaux du cadrage.

La leçon à retenir

Cette épisode qui aura duré plus d’un mois m’a fait voir l’importance d’optimiser mes images, et surtout, d’utiliser les bons outils pour l’optimisation, afin de prévenir tout problème de rendu.

Pour les webdesigners-gimpeurs, je vous donne donc le lien de l’outil en ligne Smushit, qui est à utiliser en complément avec Gimp : http://www.smushit.com/

]]>
http://ishimaru-blog.servhome.org/archives/44/feed 0
Firefox 3.6 et les PNGs assombris – Dénouement ! http://ishimaru-blog.servhome.org/archives/33 http://ishimaru-blog.servhome.org/archives/33#comments Fri, 07 May 2010 05:34:26 +0000 Ishimaru http://ishimaru-blog.servhome.org/?p=33 Jusqu’à la fin mars, j’étais encore sur Firefox 3.0 qui était installé par défaut sur ma Ubuntu 9.04. Or, en parcourant les articles de Branchez-vous.com, je tombe sur un article annonçant la fin du support de Firefox 3.0 le 30 mars cette année.

Jusque là, je n’osais pas mettre à niveau mon Firefox, car je n’étais pas sûre si ça allait bien se passer, surtout que je n’avais jamais fait de mise à niveau d’un logiciel sur une version donnée d’Ubuntu depuis mon passage vers Linux. Mais face à l’annonce, je me suis finalement décidée de le faire et je retranscrirai d’ailleurs l’article que j’avais écrit à ce sujet sur l’ancien blog.

Une fois les données sauvegardées et Firefox 3.0 enlevé pour laisser la place à Firefox 3.6 après deux tentatives avant de pogner le bon dépôt, tout est maintenant en place, mais lorsque je m’en vais visionner un de mes propres styles phpBB3, là c’est le drame : Tous mes PNGs étaient assombris ou avaient une couleur bizarre, et ça paraissait encore plus sur les images avec fausse transparence et les images ayant une couleur moyenne ! De ce fait, le cadrage que j’avais fait pour le tour de la page de mon style Provalentina était assombri, tandis que le fond de page d’un thème Forumactif que j’ai fait récemment était plus clair que la couleur qui était censé prolonger ce fond ! Ce problème n’apparaissait ni sur Opera, ni sur Internet Explorer.

Étant donné le fait que les PNG s’assombrissent sous Internet Explorer si on enregistre nos PNGs avec le gamma, j’ai donc l’habitude de toujours enregistrer sans gamma. Lorsque je me suis aperçue de ce problème sous Firefox 3.6, je me suis mise à tester en enregistrant le gamma et… ô surprise, les images ne s’assombrissaient pas sous FF, mais l’étaient sous IE.

Pour mieux vous monter, je vous ai fait un petit montage des captures que j’avais prises de mon style ProValentina. Dans ces captures, le bout de cadre du haut est enregistré avec gamma, et le reste du cadrage est enregistré sans gamma. Vous pourrez constater que le haut est assombri sous IE et que le reste est assombri sous FF 3.6. Juste au cas où votre configuration d’écran rende cette perception très difficile, j’affiche à la fois la version non modifiée du morceau de capture à gauche, et une version où j’ai renforcé le contraste à droite.

Assombrissement des PNG sous IE et FF - Comparatif

Cela me mettait donc dans un dilemme : Soit je prenais en compte IE, soit je prenais en compte FF, soit je sacrifiais tous mes PNGs. Je me mettais donc à faire ma petite enquête en allant demander à d’autres Firefox-users sur Alsacréations, phpBB-fr, Québec, puis finalement Geckozone, pour me rendre compte que certains avaient le problème, d’autres pas, suivant l’OS, voire même la distribution (dans le cas de Linux), la version et même le Service Pack utilisé ! Je pus moi-même le remarquer en démarrant Windows XP SP2 pour pouvoir tester sur la version Windows de Firefox 3.6 : Les PNGs n’étaient pas assombris avec le SP2, tandis que chez ceux qui ont la SP3, ils sont assombris !

Sur Geckozone, j’avais pu avoir une solution qui consistait à désactiver la gestion du mode des couleurs sous Firefox 3.6, mais cela ne réglait le problème que chez moi. Puis plusieurs jours plus tard, je tombe sur une réponse dans mon sujet que j’avais posté sur Alsacréations, où ça parlait d’encodage des images et où on me disait que mes images étaient en TrueColor.

Une histoire de profils

Suite à cela, puisque j’ai entendu parler des profils ICC dont vous pouvez en savoir plus dans cet article Wikipédia, j’ai fait des recherches pour finalement trouver de la documentation concernant l’utilisation de ces fichiers dans Gimp, et sur le fait que l’utilisation du mode sRGB est recommandée pour les éléments de design pour sites Web. Je cherche donc dans la documentation de Gimp pour finalement trouver ce lien où j’ai trouvé le fichier que j’utilise maintenant. Par contre, je ne me souviens plus trop lequel j’avais pris parmi les deux premiers puisque je l’ai renommé, mais il me semble que c’était le premier. En tout cas, les gimpeurs pourront tester, mais dans mon cas, une fois que j’ai chargé le fichier dans mes préférences de la gestion des couleurs, j’ai testé en assignant ce profil à l’un des morceaux du cadrage du style ProValentina tout en enregistrant sans gamma. Le résultat : Plus aucun assombrissement, que ce soit sous IE ou FF, comme vous pouvez le voir dans la partie gauche du cadrage ProValentina sur mon forum phpBB3 de tests.

Puisque j’ai fait le design de ce blog après la découverte, ce design en a donc bénéficié !

Cette aventure m’a aussi fait réaliser que je devrais utiliser plus souvent le GIF ou le PNG indexé pour les images ayant peu de couleurs afin de réduire le poids des images.

Maintenant, avec tout ça, il me faudra mettre à jour tout mes styles et designs pour corriger ce problème de couleurs, ouille !

]]>
http://ishimaru-blog.servhome.org/archives/33/feed 7