Même pas mal! » gimp

Standards & Porcs

gael — Tue, 06 Dec 2011 20:28:44 +0000

Si tu suis un peu l’actualité de ces derniers temps tu auras certainement remarqué que la presse adore parler des notes aléatoires données par les trois principales agences de notations financières que compte la planète. Du coup il ne se passe pas une seule journée sans qu’un pays ou une banque ne perde un précieux « A », comme si le commun des mortels en avait quelque chose à carrer.

Pour combattre cette morosité je te propose donc aujourd’hui de certifier ton blog « AAA+ », en ajoutant simplement une superbe bannière en haut à gauche.

L’image originale a été créée sous GIMP, si tu veux la modifier tu peux télécharger le fichier XCF en enregistrant la cible de ce lien.

La procédure à suivre sera expliquée pour un blog tournant sous WordPress, mais un débutant en création web devrait s’en sortir sans problème pour transposer ce tutoriel à n’importe quel site.

Note bien que l’ajout de la bannière est une opération qui nécessite une certaine maitrise dans le transfert par FTP ainsi qu’une vague connaissance des fichiers qui régissent ton thème WordPress, pour le reste ça devrait jouer avec les indications fournies.

Voici donc en trois étapes comment procéder.

Tout d’abord, tu télécharges la bannière (clic droit dessus, puis « Enregistrer sous… ») puis tu la transfères dans le répertoire de ton thème WordPress à l’aide de ton client FTP favori.

Même si ça ne se voit pas sache que le fond de l’image est transparent, ne t’inquiète pas. Le répertoire de ton thème devrait ressembler à « /wp-content/themes/ton_theme ».

Seconde étape, tu édites le fichier « style.css » de ton thème, tout à la fin tu ajoutes ces quelques lignes.

1
2
3
4
5
6
7
8
9

#noteaaa {
background-image: url('noteaaa.png');
width: 250px;
height: 250px;
border: 0px;
position: fixed;
left: 0px;
top: 0px;
}

La balise « #noteaaa » permet de formater un carré contenant la bannière au format PNG, et dont les dimensions correspondent à celles de l’image. Sa position est fixée tout en haut à gauche de la fenêtre, et elle y reste même si l’on fait défiler la page vers le bas. Si tu veux bloquer la bannière en haut il te suffit de remplacer « fixed » par « absolute ».

Dernière étape, tu édites ton fichier « footer.php » pour y insérer cette ligne juste avant la balise « ».

1	<div id="noteaaa"></div>

Cette balise « DIV » sera formatée grâce aux propriétés CSS de « #noteaaa ». En plaçant cette balise « DIV » tout à la fin (dans « footer.php ») on suppose qu’elle sera normalement au dessus des autres, sans trop avoir à se prendre la tête avec la propriété « z-index » qui règle habituellement la hauteur des champs.

Bref, n’oublie pas de renvoyer les deux fichiers « style.css » et « footer.php » sur ton serveur si tu les as téléchargés avant des les modifier.

Voilà, ton blog est maintenant noté « AAA+ », et aucune de ces agences de notations ne pourra rien y faire.

Dernier point, tu serais gentil de ne pas appeler à l’aide via les commentaires si tu utilises Internet Explorer, il y a en effet de fortes chances pour que le code précité ne fonctionne pas avec cet ersatz de navigateur.

Faire des bulles

gael — Sun, 13 Mar 2011 10:08:23 +0000

Tu auras surement remarqué les quelques vertical comics postés ces derniers jours, tu te seras alors peut-être demandé comment diable une telle prouesse technologique était possible. Sèche tes larmes, car dans quelques minutes tu sauras toi aussi comment faire. Je ne m’attarderai toutefois pas sur les plans photographiques rapprochés, mais sur la création des bulles de dialogue, avec GIMP bien entendu.

On fait simple pour commencer, tu ouvres ton image dans le GIMP.

Tu écris ensuite ton texte à l’endroit précis où il devra être situé définitivement, tiens bien compte du futur contour de la bulle.

Afin de ne pas pourrir l’image de fond nous allons dessiner la bulle sur un calque dédié, sur la fenêtre des calques tu cliques donc sur l’icône « Créer un nouveau calque » .

Tu le nommes comme bon te sembles, et tu valides.

N’oublie pas de bien sélectionner ce nouveau calque dans la liste, sinon tu risquerais de faire des dégâts sur ton image.

Tu vas maintenant aller choisir l’outil de sélection rectangulaire, ou circulaire suivant la forme que tu désires donner à ta future bulle.

Tu traces ensuite un rectangle de sélection autour de ton texte. Si tu veux donner un joli effet de coins arrondis à ta bulle tu vas dans le menu « Sélection » puis tu utilises « Rectangle arrondi… » .

Il est maintenant temps de convertir cette sélection en chemin, afin de pouvoir la tracer. Tu vas donc dans le menu « Sélection » puis tu cliques sur « Vers chemin » . Rien de visuel ne se passe, c’est normal. Sur ta fenêtre des calques, canaux et cætera tu vas sur l’onglet des chemins puis tu doubles cliques sur le premier élément.

Plusieurs choses doivent se passer. Tout d’abord ta sélection doit magiquement devenir un chemin, c’est à dire des droites et des courbes reliés par des points. Deuxièmement, l’icône « Outil chemins » doit s’être automatiquement sélectionné dans la boite à outils.

En maintenant la touche « Ctrl » te ton clavier enfoncée, tu vas aller ajouter trois points à ton chemin en cliquant aux endroits adéquats, sur l’image ci-dessous tu peux les voir sous les lettres « E », « P » et « A ». Le point central que tu ajouteras servira à étirer la bulle pour indiquer qui parle.

Sans maintenir aucune touche enfoncée, tu cliques donc avec le bouton gauche sur le point central (parmi les trois que tu viens d’ajouter), puis tu le glisses vers le bas, où bon te semble.

Il va maintenant falloir reconvertir ce chemin en sélection, pour cela tu fais un clic droit sur ton chemin puis tu choisis « Chemin vers sélection » .

Tu refais la même chose, sauf que tu choisis « Tracer la sélection » , la fenêtre de traçage s’ouvre.

Tu choisis une épaisseur de trait et tu valides, tu peux jouer avec les valeurs jusqu’à obtenir un tracé ni trop fin ni trop épais. Note que la couleur du tracé est la couleur d’avant plan utilisée dans la boite à outils.

Une fois ton tracé effectué, tu choisis le blanc en tant que couleur d’avant plan dans la boite à outils, tu sélectionnes l’outil de remplissage (le pot de peinture qui se vide) et tu cliques n’importe où dans ta bulle.

Si ta bulles écrase à ce moment-là ton texte, il te suffit de descendre le calque « Bulle » de quelques crans.

L’opération peut sembler longue et fastidieuse, elle l’est. Avec de l’entrainement et à force d’utiliser cette technique les manipulations deviennent machinales et vont heureusement plus vite.

Le dilemme des volets

gael — Tue, 10 Aug 2010 14:33:56 +0000

Être genevois implique le respect de nombreuses traditions, l’une d’entre-elles étant le pèlerinage régulier au chalet en Valais.

Âge de l’édifice oblige, il faut de temps en temps repeindre les façades boisées, et cela donne généralement lieu à de grandes discussions récurrentes sur la question de la recoloration éventuelle des volets. Car en Valais, la majorité des volets sont verts, aspect « nature sauvage avec Bambi qui fait dodo » oblige. On en croise parfois des bleus, des rouges, des bruns.

Histoire d’avoir un élément visuel de comparaison pour ton prochain débat familial, je vais aujourd’hui te présenter un tutoriel fait maison au nom équivoque, je l’ai en effet appelé « Recolore virtuellement les volets de ton chalet valaisan avec GIMP » .

Le sujet est quelque peu pointu, je l’admets, mais le résultat en vaut la peine.

Pour commencer, tu ouvres une photo de ton chalet dans GIMP. Dans la liste des calques tu vas cliquer sur l’icône de duplication (flèche rouge), renomme ensuite ton calque du haut en « Masque » puis celui du bas en « Fond ».

Dans ce tutoriel nous allons jouer avec la transparence, malheureusement par défaut les calques ne la supportent pas, les noms des calques sont d’ailleurs en gras pour le signaler. Nous allons donc devoir ajouter un canal alpha sur le calque du haut afin que celui-ci gère la transparence. Pour ce faire tu fais un clic droit sur le calque du haut (celui appelé « Masque ») puis tu choisis l’option « Ajouter un canal alpha » . Le nom du calque ne devrait alors plus être en gras.

Tu vas maintenance décocher l’icône en forme d’œil qui se situe juste à gauche du calque « Masque » pour le rendre invisible, puis tu sélectionnes ensuite le calque « Fond ».

Sur la fenêtre qui contient l’image, tu vas dans le menu « Couleurs » puis « Colorier » . Là tu t’amuses avec les potentiomètres pour obtenir la couleur désirée. Ne focalise ton attention que sur les volets, si le reste se colore bizarrement on s’en fout.

Tu resélectionnes à présent le calque « Masque » et tu le rends visible.

Dans la boîte à outils, tu choisis l’outil gomme (flèche rouge).

Tu gommes ensuite minutieusement les volets de ton calque « Masque ». Le calque « Fond » coloré du dessous devrait alors apparaitre peu à peu. Le volet tout à droite n’est ici pas terminé, c’est pour te montrer la progression.

Tu peux à tout moment modifier la couleur du calque « Fond » si le résultat ne te convient pas, les volets roses sont du plus bel effet sur un chalet largement centenaire.

Stencil

gael — Thu, 06 May 2010 06:32:51 +0000

De nombreuses modes sévissent sur Internet, notamment sur les imageboards. L’une d’entre-elles, le « stencil » , a pour principe d’imiter un pochoir en y ajoutant un texte qui reprend en général une citation célèbre du sujet.

Je vais donc aujourd’hui te montrer comment créer de magnifiques stencils avec GIMP. Il n’égaleront bien entendu jamais la qualité de vrais travaux d’artistes, mais il te permettront de faire rire facilement ton entourage. Pour commencer, tu ouvres bien évidemment l’image contenant ton sujet.

Afin d’obtenir un meilleur effet il va falloir augmenter le contraste, pour cela tu vas devoir jouer avec les potentiomètres pour obtenir un bon relief de peau, sans toutefois tomber dans la surexposition de la photo. Pour cela tu vas dans le menu « Couleurs » puis « Luminosité – Contraste » .

Il suffit ensuite d’appliquer un filtre donnant un effet de photocopie, cela se passe dans le menu « Filtres » , « Artistique » puis « Photocopie » . Grossièrement, tu pousses tous les réglages à fond.

Ton image devrait maintenant avoir le rendu final. Afin de suivre la règle imposée tu vas maintenant gommer tout ce qui ne fait pas partie de la tête de ton sujet, c’est à dire le corps ainsi que les traces qui pourraient rester sur le fond blanc de l’image.

Tu sélectionnes l’outil pinceau, la couleur blanche et la brosse la plus grossière. T’en a pour trente secondes normalement, pas besoin de finesse.

Puis tu rajoutes ensuite ton texte en dessous, avec une police qui donne un effet de pochoir. La règle veut que l’on reprenne une phrase clé prononcée par le sujet, dans notre cas il s’agit d’une citation du caporal Guisan reprise par notre vénéré chef de l’armée lors de son dernier discours.

Et voilà!

Tu peux même simuler un graffiti en appliquant ton image sur une texture de mur.

Cette dernière étape est relativement simple. Tu trouves une texture via un moteur de recherche, tu l’ouvres dans GIMP, tu ouvres ton stencil en tant que calque et tu appliques le mode « Multiplier » à ce calque.

(Source du texte : Discours du 12.04.2010)

La charité s’il vous plait

gael — Sat, 13 Feb 2010 09:56:54 +0000

J’aimerais aujourd’hui te parler d’un parti politique genevois qui a besoin de toi, de ton argent, de ton soutien.

Depuis sa création, le MCG est en effet obligé de créer ses affiches sous Microsoft Paint, les moyens financiers nécessaires à l’achat d’une licence pour Adobe Photoshop ou Illustrator faisant apparemment défaut.

C’était déjà le cas lors des dernières élections, mais leur calvaire continue, en voici la preuve récente.

Les images grossièrement déformées illustrant l’affiche ne sont même pas originales, mais récupérées sur le web en tapant des mots clés tels que « mignon chaton avec sa môman » ou « petit chiot adorable » dans le moteur de recherche Google Images.

Afin de garantir l’équilibre politique de notre beau canton, il faut impérativement sortir le MCG de la pauvreté dans laquelle il se trouve.

Tu peux donc leur envoyer des petits cartons avec des restes de nourriture, un DVD gravé avec une version de GIMP ou un bouquin pour apprendre le graphisme sur ordinateur, ça leur fera plaisir.

Brume onirique

gael — Tue, 13 Oct 2009 10:39:18 +0000

Aujourd’hui je vais te montrer comment appliquer un effet de brume lumineuse sur tes photos, avec le GIMP bien entendu. L’effet donne un petit côté onirique à l’image, tu peux l’appliquer par exemple sur des photos de mariage, moi je vais utiliser des légumes. La très belle image de cet exemple vient d’ici.

Après traitement, on est au paradis des cucurbitacées.

Il y a bien évidemment moyen d’obtenir cet effet sans retouche, en tendant un bas (pour femme) clair devant l’objectif de l’appareil photo ou en le recouvrant de vaseline (l’objectif donc, pas tout l’appareil).

On a pas tous ce genre de matériel professionnel sous la main, tu vas donc ouvrir ta photo avec GIMP.

Ensuite tu dupliques le calque de la photo, tu auras donc ton arrière plan (l’image originale), et une copie.

Tu te positionnes sur le calque du haut, à savoir la copie, puis tu sélectionne le filtre « Flou gaussien » .

Tu choisi ensuite des valeurs de flou assez fortes, mais sans exagérer, puis tu valides.

Partant du principe que ton calque du haut (la copie) est toujours sélectionné, tu changes le mode de fusion du calque en « Écran » .

Tadaaaaaa.

Ajouter une bordure à un texte dans GIMP

gael — Wed, 23 Sep 2009 19:42:39 +0000

Ajouter une bordure à un texte peut être simple dans une grande partie des logiciels de traitement de texte ou de retouches d’images. Dans GIMP, il faut un peu plonger les mains dans le cambouis.

Il faut en effet créer une copie de la forme du texte, l’agrandir et la remplir de la couleur désirée.

Démonstration. Imaginons un texte pris au hasard.

Nous allons tout d’abord créer un chemin depuis ce texte, c’est à dire mémoriser sa forme. Pour cela tu sélectionnes ton texte et tu cliques sur « Créer un chemin depuis le texte » .

Rien de visible ne se passe quand tu cliques là-dessus, c’est normal. Ensuite tu ajoutes un nouveau calque, tu le nommes comme bon te semble, il contiendra notre bordure.

Tu le déplaces en dessous de ton texte, vérifie qu’il soit bien sélectionné.

Menu « Sélection » puis « Depuis le chemin » .

Ton texte va paraitre sélectionné, il n’en est rien. En fait, la sélection que tu vois se trouve sur ton nouveau calque, nous allons l’agrandir pour ensuite la remplir. Menu « Sélection » puis « Agrandir » .

Tu indiques le nombre de pixels pour ta bordure, puis tu valides.

Sur la boite à outils, tu choisis « Remplissage » , c’est l’icône avec un bidon de peinture qui verse. La couleur de premier plan sera utilisée pour le remplissage, tu peux donc la modifier.

Ensuite tu cliques n’importe où dans la sélection, et pouf, magie.

Il existe probablement une méthode plus simple, mais c’est moins drôle.

Un Jedi tu seras

gael — Wed, 01 Jul 2009 20:10:32 +0000

Suite à une forte demande (une personne en tout cas), voici l’incroyable tutoriel qui va t’apprendre à ajouter un effet de sabre laser sur tes photos de vacances. Cette technique a été fortement inspirée par quelques unes disponibles sur tutorialized.com.

Pour commencer, il te faut la photo d’un gars qui se la pète avec quelque chose de long et dur dans la main. Ça fonctionne aussi avec une femme.

Je sais à quoi tu pensais, pervers.

Si tu es pointilleux tu remarqueras que j’ai préalablement gommé numériquement les deux quillons de la garde.

Ajoute un calque vide, on va travailler dessus, on ne touche pas à l’image originale.

Nomme ton calque de manière intelligente, et fait en sorte qu’il soit de fond noir.

Tu devrais avoir quelque chose comme ça, sélectionne le calque noir, on ne touchera jamais au calque de l’image originale.

Change le mode d’affichage du calque pour « Ecran » , il va devenir transparent.

Sélectionne l’outil « Sélection à main levée » dans la boite à outils.

Puis trace le contour de ton futur sabre laser, tu peux le faire plus large que sur l’image originale.

Ensuite tu sélectionnes « Remplissage » dans la boite à outils, et tu fais bien attention que le blanc soit défini comme couleur d’avant plan.

Tu cliques n’importe où dans ta zone sélectionnée, ce qui va nous faire une belle arme entièrement blanche.

Tu annules la sélection en allant dans le menu « Sélection » puis « Aucune » .

Dans la liste des calques, tu vas cliquer deux fois sur le bouton de duplication. Au final tu devrais avoir trois calques identiques, tous noirs avec une forme de sabre blanc vaguement visible.

Tu sélectionnes le calque tout en haut puis tu vas dans le menu « Filtres » , « Flou » , « Flou gaussien » .

Tu choisis une valeur de 5, et tu valides.

Tu fais la même chose pour le calque du dessous mais avec la valeur 20, et encore une fois pour le troisième calque noir avec la valeur 40.

Nous allons maintenant fusionner ces trois effets de flous, de sorte à obtenir un sabre laser avec une aura. Tu sélectionnes donc ton premier calque, tu fais un clic droit dessus et tu choisis « Fusionner vers le bas » .

Change ensuite le mode d’affichage de ce nouveau calque en « Ecran » . Maintenant, tu refais exactement la même opération une deuxième fois, c’est à dire « Fusionner vers le bas » puis passage en mode « Ecran » une fois terminé.

Tu devrais à présent n’avoir plus que deux calques, celui du sabre avec un joli effet, ainsi que l’image originale que nous n’avons pas touchée. Les deux calques étant superposés du devrais voir ton sujet qui tient fièrement en main un sabre blanc partiellement éthéré. Colorons tout ça!

Tu sélectionnes donc le premier calque (celui du sabre), puis tu vas dans le menu « Couleurs » , « Balance des couleurs » .

Et là, tu t’amuses.

Dis bonjour à Aragorn le chevalier Jedi!

Tilt-Shift

gael — Mon, 29 Jun 2009 14:39:34 +0000

Lorsque l’œil humain fixe un objet, celui-ci est généralement net. Si l’entourage est flou et que la cible est loin alors notre vision sera trompée et croira que ce que nous regardons est petit.

C’est là un des principes du Tilt-Shift, une technique photographique donnant un aspect de maquette aux photos.

Via ferrata de la Clusaz, 2008

Villette, Paris, 2008

Pour bien réussir de telles photos il est nécessaire de s’équiper d’un objectif Tilt-Shift, le problème étant qu’un tel équipement coûte au minimum un bon millier d’euros.

Heureusement, si tu n’as comme moi ni l’argent ni l’âme d’un puriste il existe quelques techniques pour créer de fausses images Tilt-Shift au moyen de ton éditeur graphique favori, l’effet sera toutefois bien entendu de bien moindre qualité qu’avec un objectif dédié. Dans cet exemple, c’est le célèbre (et surtout gratuit) GIMP qui sera utilisé. Nous allons en fait rendre flou toute l’image, à l’exception de la zone que nous voulons modéliser.

Quelques règles de bases sont à respecter pour obtenir un meilleur effet. Il faut par exemple si possible prendre les photos du dessus, et de loin, avec une netteté complète. Mieux vaut avoir un sujet sur la photo, les paysages vides donnent d’assez mauvais résultats. Tu peux également donner auparavant un bon coup de contraste à ton image, cela renforce l’effet de peinture flashy propre aux maquettes.

Mais lançons-nous.

Pour commencer, tu ouvres ton image dans le GIMP.

Ensuite tu dupliques le calque de ton image.

Tu devrais avoir deux calques dans ta liste, l’original et la copie. Tu sélectionnes la copie et tu vas dans « Filtres » , « Flou » puis « Flou gaussien » .

Tu règles ensuite la valeur du flou gaussien jusqu’à ce que l’image soit bien floutée, il ne faut pas que ça soit trop, ni trop peu. Ça demande quand même un peu de savoir faire tu vois.

Une fois que ton calque copié est flouté, tu cliques dessus avec le bouton droit et tu choisis « Ajouter un masque de calque » .

Tu laisses le blanc en opacité complète et tu valides.

À ce niveau là, tu as deux calques dont un flou. Le calque du dessus possède un masque, c’est à dire que selon si tu peins en noir ou en blanc dessus, il deviendra plus ou moins transparent, laissant apparaitre le calque du dessous qui est l’image nette.

C’est maintenant qu’intervient le travail de l’artiste qui est en toi, sélectionne le pinceau dans les outils, et choisis « Circle Fuzzy » dans la brosse.

Et maintenant, tu peins en noir ou en blanc, pour ajouter ou supprimer de la netteté à l’image. Pense bien à la profondeur, essaie de rendre net tout ce qui est censé être au même niveau que ton sujet central (ici, le bateau). Tu peux modifier à tout moment la taille de ton pinceau, par exemple pour fignoler les détails entre les zones nettes et les zones floues.

Κέρκυρα (Corfou), Grèce, 2008

Ensuite, c’est de la pratique. Ou alors l’achat onéreux d’un bon objectif Tilt-Shift.

Variations fédérales

gael — Wed, 12 Nov 2008 21:06:40 +0000

Faut bien poster de temps en temps, même si rien d’exceptionnel ne se passe au pays des moutons blancs.

Donc, dans les nouvelles peu intéressantes on notera que notre ministre de l’armée a démissionné hier matin (un mois après le chef de l’armée donc) et que GIMP 2.6 est sorti.

Si on mélange les deux ça donne quelques images amusantes.

Sinon depuis cette nuit les bateaux de l’Alliance et les zeppelins de la Horde ont commencé à emmener onze millions d’émigrants vers le froid continent de Norfendre, mais ça faut être vraiment geek pour apprécier la nouvelle.