mardi 24 juin 2008

Masque de calque

Le Saïyen Noir, un pingouin d'en face, ne parvient toujours pas à saisir le principe des masques de calques. Je me suis donc mis en tête de rédiger un petit explication illustrée afin qu'il puisse comprendre ce qui est au final très simple.

Alors qu'est ce qu'un masque de calque? Gimp contient une info-bulle fort révélatrice à ce propos.

un masque [de calque] permet l'édition non destructive de la transparence




Sur cette image, on peut voir l'utilisation qu'il est possible de faire d'un masque de calque. A gauche, j'ai désactivé le masque de calque. Sur la partie de droite, celui ci est actif. Son usage me permet de ne récupérer que les pixels qui m'intéressent sans pour autant détruire le premier calque. Et il est plus simple d'effacer un masque de calque et de la recréer que de supprimer une partie d'un calque et de devoir revenir sur de nombreuses modifications si l'on se rend compte que quelque chose ne va pas.

Comment ajouter un masque de calque sous Gimp? Comment se servir d'un masque de calque? C'est ce que je vous propose de découvrir rapidement dans la suite de ce billet. Pour cela, prenons l'exemple suivant.



Mon but va être de faire disparaître les rayures avec un effet de dégradé. Je commence donc par ajouter un masque de calque sur le calque Rayures. Pour cela, il est possible de faire un clic-droit sur le calque concerné puis de cliquer sur l'option adéquate. Cette option est également accessible depuis le menu Calque > Masque.


Le principe d'un masque de calque est le suivant. Un pixel blanc sur le masque de calque ne modifiera pas la transparence du pixel correspondant du calque auquel il est lié. Au contraire, un pixel noir sur le masque de calque rendra le pixel correspondant totalement transparent. Et ainsi, un dégradé du blanc au noir rendra les pixels progressivement transparents.

Pour mon exemple, je choisis d'initialiser le masque de calque à noir. Toutes mes rayures sont donc totalement transparentes.



Pour obtenir l'effet désiré, je clique sur le masque de calque afin de me placer dessus. Puis, je trace mon dégradé comme indiqué sur la capture précédente. La flèche montre dans quel sens je l'ai appliqué. Une fois que cela est fait, la miniature du masque de calque montre la répartition du noir et du blanc.

Il est possible d'utiliser les masques de calque dans plusieurs situation en faisant de bons choix de couleur initiale et de bonnes sélections. Seule l'expérience pourra vous indiquer comment procéder...

Remarques: Je me suis aperçu que Gimp acceptait les couleurs sur les masques de calque. J'avoue que je ne sais pas comment cela marche mais je pense que s'en tenir au noir et blanc sur ce type de calques est amplement suffisant pour la plupart des usages. Le fonctionnement des masques de calque est strictement le même sous Photoshop en dehors de la façon de les ajouter.

dimanche 22 juin 2008

Ancien

Mais comment ai-je pu oublier de vous le dire? La semaine dernière, Ink of Sound a mis en ligne la la partie 3 de l'épisode 7 de Kiponie Stories. Et en plus de pouvoir écouter ce qui est sans doute le meilleur épisode de cette présaison, vous pourrez entendre votre serviteur dans le rôle d'un mystérieux personnage.

Alors, si on ne m'entend dire que deux phrases différentes tout à la fin de la partie, il paraît qu'Inky a écrit ce personnage en pensant à moi. Et je devrais même faire d'autres apparitions dans la saison une... En tous cas, je voulais le féliciter du travail qu'il a fait sur ma voix (j'ai eu du mal à me reconnaître) et aussi le remercier pour la faveur qu'il me fait. Merci Machin!

Après la pluie...

Vient le beau temps. Voici donc quelques photos prises l'année dernière, un beau matin après quelques jours de pluie...


C'est juste après la pluie que l'on voit le plus d'escargots.


Une rose pour
Lahenor qui se reconnaîtra si jamais elle passe dans le coin...


Je ne vous l'avais pas dit qu'on en croise beaucoup après la pluie?



Et encore, j'aurais pu être encore plus en décalage avec la saison car j'ai aussi quelques photos d'automne à vous montrer.

samedi 14 juin 2008

iPod - Partie 2

La première partie de ce billet a été publié la semaine dernière sous le nom iPod - Partie 1.




Les indications


Ici, j'ajoute à la plume les formes de la flèche de lecture et de la pile (qui compte en fait deux calques: le culot et le corps de la pile). Les guides qui me servent à garder les proportions se basent sur l'image initialement trouvée sur le web.


Les indications


Afin de travailler proprement mes couleurs, j'efface tous les guides et je travaille alternativement sur deux zooms différents: le premier très important pour soigner les détails (particulièrement sur le culot de la pile) et le second comme sur la capture pour avoir un aperçu de ce que cela donnera au final (surtout parce que l'iPod sera réduit pour être intégré au site).


La molette


La première fois que j'ai réalisé un iPod, je n'ai pas réussi à trouver une police qui se rapproche de celle utilisée par Apple. Il me semble que j'avais utilisé une Helvetica mais cela ne collait pas trop au niveau du M. Depuis, j'ai réussi à trouvé que la police utilisée par Apple pour les noms de ses produits. Il s'agit de Kozuka Gothic. Seulement, c'est une fonte payante. En travaillant sur le fond d'écran I'm a Mac, j'ai trouvé mon bonheur: Myriad Pro. Le reste des indications de la molette a été réalisé à la plume.


Corrections


Petite pose avant d'attaquer le contenu de l'écran. Je corrige ici l'ombre supérieure qui ne me plaît plus à ce moment là car trop sombre (d'ailleurs, je n'en suis toujours pas tout à fait satisfait...). J'aplatis la flèche et la pile de la barre supérieure afin d'ajouter sur chacun un effet de biseau. J'en profite également pour les placer au bon endroit sur l'écran. Pour cela, j'utilise une photo de l'écran de mon propre iPod. Photo qui me sert également à placer les quelques guides nécessaires à la suite de mon travail (positions de la pochettes, des informations du fichier et du lecteur).


La pochette


Ici, j'utilise la pochette du paquet de l'iTunes Project (j'en ai profité pour faire la version sans nom d'artiste). La déformation se fait sans réelle difficulté. Par contre, je me demande toujours quelle est la perspective choisie pour le reflet car j'ai eu l'impression que ce n'était pas la même que celle de la pochette.


Le texte


Pas grand chose à dire ici. La police utilisée est Helvetica. Remarquez que je rajoute encore des guides...


Le lecteur


La même photo me sert ici à placer les chiffres sur l'écran. J'utilise également une capture du dewPlayer qui me servira pour la lecture du Journal. Je l'étire en largeur afin qu'il coïncide avec la barre d'avancement de l'iPod. Cela n'est pas gênant car cette capture ne sera pas sur l'image finale. En effet, elle me sert simplement à calculer la réduction que j'appliquerai à l'étape suivante afin de mettre l'iPod aux mêmes proportions que celle du lecteur flash.


La préparation


Dernière étape avant la mise en ligne, je réduis la taille de mon image et je prépare soigneusement la découpe à effectuer. Bien plus pertinente sur cette version, j'ai ainsi pu gagner une bonne heure sur la mise en place du code html. Je n'efface pas immédiatement tout le contenu "utile" de l'écran. Cela me permet de savoir où placer mes éléments via ma feuille de style. Une fois que tout est correctement adapté sur MacP3 et que j'ai vérifié le rendu sous Firefox (je n'utilise quasiment que Safari pour naviguer sur internet), je fais une nouvelle découpe sans les éléments superflus. J'ajoute également un profil ICC à mes .png à l'aide de Aperçu. Je privilégie dès le début le sRGB IEC61966-2.1 car il est le plus restrictif mais aussi le plus répandu parmi les usagers du web. L'ajout du profil est surtout destiné au confort des utilisateurs du butineur d'Apple (et par conséquent du mien) car il est pour l'instant le seul à savoir le gérer.

Ici, je viens de passer entre 7 et 8 heures sur deux jours à travailler sur cette réalisation. Et je crois que je peux aller me reposer sans avoir à rougir du travail effectué...

Knock, knock Neo [maj]

C'est dingue ce que j'aime cette phrase...


Télécharger le pack (version 1.4.1)



Au menu des nouveautés de cette semaine:
  • Trois nouveaux fan-arts (voir plus bas).
  • Modification de la pochette du Journal de MacP3 au profit d'une version sans nom d'auteur.
  • Nouvelles contributions (et particulièrement, un grand merci au Mago).
  • Mise à jour du fichier Lisez moi! (remerciements).






[maj]: Suite à la mise à jour du pack, des créateurs se sont manifestés sur Netophonix. Suite à cela, j'ai mis à jour trois pochettes et j'ai complété le .pdf.

samedi 7 juin 2008

iPod - Partie 1

Chose promise, chose dûe, je vous invite à découvrir dans les grandes lignes la création du nouvel iPod MacP3.


Les guides


La première version de l'iPod MacP3 se basait sur une photographie de mon ancien iPod Photo. Seul problème, mon appareil déformait les lignes droites pour une raison qui m'est inconnue. Afin d'éviter ce soucis, j'ai passé pas mal de temps sur le web à rechercher une photo d'un Classic qui soit de face et complète.


Les formes


Les guides de l'étape précédente sont ici bien pratiques pour dessiner à la plume les contours des principaux éléments. Et afin de faciliter la suite du travail, j'ai rapidement assigné les bonnes couleurs à ces formes.


La coque


C'est ici que commence le réel travail de création. Les formes des ombres sont dessinées à la plume afin de me permettre de créer une sélection pour limiter les dégradés. Dégradés qui ont ensuite été floutés et dont j'ai abaissé l'opacité pour les rendre moins visibles. La texture de la coque utilise une texture de type Grains en noir et blanc de Photoshop. J'ai ensuite joué sur le mode de fusion du calque et sur son opacité pour arriver à un résultat qui se rapproche beaucoup de la réalité.


La molette


Pour le bouton central, j'ai repris les mêmes méthodes que pour la coque. Le relief est cependant créé à partir d'un biseau plutôt que d'un dégradé. Et c'est ici que j'ai rajouté les contours de la molette clicable.


Les indications


Je commence ici le travail sur l'écran avec une mise en place du dégradé et de l'ombre portée de la barre. La police choisie est Helvetica car c'est celle utilisée par Apple dans ses applications.


Corrections


J'effectue des corrections sur certains éléments (ombres supérieures et dégradé de la barre) car le travail à 100% ne permet pas forcément de se rendre compte de l'effet sur l'ensemble. A ce stade, je viens de passer entre 3 heures et 3 heures et demie devant mon écran. Mes yeux commencent à fatiguer, j'arrête donc ma Bestiole et comme c'est le soir, je vais me coucher. La suite viendra dans la partie 2 de ce billet.

Bien que cela n'ait pas de rapport direct avec ce qui nous occupe, je souhaite préciser que j'ai modifié la licence Creative Commons qui s'applique sur la majorité des créations de ce blog. Désormais, vous pouvez modifier mes créations puisque j'ai choisi une BY-NC-SA plutôt qu'une BY-NC-ND. Cela répond à ma difficulté à trouver sur le web des images que je puisse retravailler afin de progresser. Si vous mêmes publiez vos créations sur le web, je vous invite à réfléchir sérieusement à ce problème de licence car trop peu de sites renseignent ce point. Et si vous faîtes de bons choix, vous deviendrez les amis de pleins de petits pingouins.

vendredi 6 juin 2008

Isaac Newton


Dieu qu'elle est moche...
*va se cacher plus loin mort de honte*

dimanche 1 juin 2008

Un pod... Deux pods...

Un an après, il est de retour. Mais de qui est-ce que je parle? Du Journal de MacP3 mais aussi de l'iPod de la page d'accueil. Comme celui-ci est coupé à la moitié pour éviter de me manger toute la page, je vous propose ici de le découvrir dans sa totalité.



Plusieurs billets sur la façon (générale) dont je l'ai réalisé sont à venir pour la section des Komankonafé. Rendez-vous la semaine prochaine pour en savoir plus. Et comme certains étaient nostalgiques de la version précédente, la voici pour le plaisir de leurs yeux...



Je dois vous avouer quelque chose. Aujourd'hui, je trouve que cette ancienne version est moche. Il s'agit d'une de mes premières créations sous Photoshop et en regardant cette image, je me dis que j'ai fait pas mal de progrès depuis. Mais je ne pense pas que cela soit tant dû au logiciel. Certes, j'utilise plusieurs de ses options que l'on ne retrouve par exemple pas sous Gimp mais en un an, ma façon de travailler a beaucoup évolué.

Au niveau de l'iPod Classic, il n'y a que l'ombre au dessus de l'écran qui ne me plaît pas trop sinon, je suis très satisfait du résultat. Au total, entre 7 et 8 heures auront été nécessaires cette nouvelle création et à son adaptation en html pour le site.