<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Cloud Connected &#187; Graphisme</title>
	<atom:link href="http://www.cloudconnected.fr/tag/graphisme/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.cloudconnected.fr</link>
	<description>Thoughts of a french web developer</description>
	<lastBuildDate>Wed, 01 Feb 2012 08:53:57 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Réaliser un texte façon web 2.0 avec The GIMP</title>
		<link>http://www.cloudconnected.fr/2007/03/27/realiser-un-texte-facon-web-20-avec-the-gimp/</link>
		<comments>http://www.cloudconnected.fr/2007/03/27/realiser-un-texte-facon-web-20-avec-the-gimp/#comments</comments>
		<pubDate>Tue, 27 Mar 2007 14:10:00 +0000</pubDate>
		<dc:creator>Rémi</dc:creator>
				<category><![CDATA[Non classé]]></category>
		<category><![CDATA[gimp]]></category>
		<category><![CDATA[Graphisme]]></category>
		<category><![CDATA[web 2.0]]></category>

		<guid isPermaLink="false">http://pre.the-asw.com/?p=75</guid>
		<description><![CDATA[Le web 2.0, ce n'est pas seulement des <em>API</em>, des <em>feeds</em> et du <em>JSON</em>, c'est aussi une tendance graphique. Il existe sur Internet un paquet de tutoriaux pour les apprentis webdesigners comme moi, mais, malheureusement, la plupart sont pour Adobe Photoshop, logiciel très puissant, certes, mais qui deux inconvénients majeurs : il n'est pas libre et il ne fonctionne pas sous Linux. Voici donc un tutorial pour les utilisateurs de The GIMP...]]></description>
			<content:encoded><![CDATA[<p>Le web 2.0, ce n&#8217;est pas seulement des <em>API</em>, des <em>feeds</em> et du <em>JSON</em>, c&#8217;est aussi une tendance graphique. Il existe sur Internet un paquet de tutoriaux pour les apprentis webdesigners comme moi, mais, malheureusement, la plupart sont pour Adobe Photoshop, logiciel très puissant, certes, mais qui deux inconvénients majeurs : il n&#8217;est pas libre et il ne fonctionne pas sous Linux. Voici donc un tutorial pour les utilisateurs de The GIMP&#8230;<br />
<span id="more-76"></span></p>
<h3>Etape 1</h3>
<p>Commencez par créer un nouveau document blanc et insérez votre texte avec l&#8217;outil du même nom.</p>
<p class="center"><img src="http://www.cloudconnected.fr/wp-content/uploads/2009/02/texte_web_etape1.png" alt="Logo : Etape 1" title="Logo : Etape 1" width="355" height="80" class="aligncenter size-full wp-image-159" /></p>
<p>Utilisez de préference une police <a href="http://fr.wikipedia.org/wiki/Sans-serif" hreflang="fr">sans-serif</a> et, évidemment, libre d&#8217;utilisation. Ici <a href="http://www.dafont.com/search.php?psize=m&amp;q=boris+black" hreflang="en">Boris Black Bloxx</a> en taille 62px. </p>
<p>L&#8217;outil Texte de GIMP 2.2 étant ce qu&#8217;il est (c&#8217;est-à-dire tout pourri), il n&#8217;est pas possible de mettre plusieurs couleurs dans une zone de texte. Il faut donc ruser en créeant une zone de texte pour chaque mot et en les alignants correctement. Ici le calque « The » est en <code>#666666</code> et le calque « ASW » est en <code>#669966</code>. Attention, ces couleurs seront éclaircies dans le rendu final.</p>
<h3>Etape 2 : Dégradé</h3>
<p class="center"><img src="http://www.cloudconnected.fr/wp-content/uploads/2009/02/texte_web_etape2.png" alt="Logo : Etape 2" title="Logo : Etape 2" width="355" height="80" class="aligncenter size-full wp-image-160" /></p>
<p>Créez un nouveau calque transparent, positionné par dessus les calques de textes.</p>
<p>Avec l&#8217;outil Dégradé, remplissez le calque par un dégradé du noir vers le blanc (noir en bas, blanc en haut). Ensuite, dans la fenêtre des calques (si elle n&#8217;apparait pas, utilisez la combinaison de touches <kbd>Ctrl + L</kbd>), sélectionnez le mode de fusion « Lumière douce ».</p>
<h3>Etape 3 : Contour interne</h3>
<p>Maintenant il s&#8217;agit de créer un contour au texte. Vu que GIMP n&#8217;a pas d&#8217;option toute faite pour ça, il faut ruser. C&#8217;est maintenant que le texte va être éclaircit.</p>
<p><img src="http://www.cloudconnected.fr/wp-content/uploads/2009/02/texte_web_etape3.png" alt="Logo : Etape 3" title="Logo : Etape 3" width="355" height="80" class="aligncenter size-full wp-image-161" /></p>
<p>D&#8217;abord, il faut regrouper les calques de textes dans un seul afin de pouvoir travailler sur des sélections (je n&#8217;ai pas trouvé de manière plus propre de faire ça !). Dupliquez chaque calque de texte, placez les les uns au dessus des autres et utilisez la fonction « Fusionner vers le bas » (clic droit sur le calque dans la fenête des calques). Au final, il faut obtenir un seul calque qui contient tous les mots. Vous pouvez masquer ce calque, qui ne sert qu&#8217;à obtenir des sélections.</p>
<p>Faites un clic droit sur ce calque dans la fenête des calques, puis « Alpha vers Sélection ». Vous devriez obtenir une selection de la forme du texte. Sans la perdre, créez un nouveau calque transparent et selectionnez le.</p>
<p>Dans le menu « Sélection », choississez la fonction « Réduire » de 1 pixel (ou plus, selon les goûts). Ensuite, remplissez la selection de blanc et choississez le mode de fusion « Superposer ». Si besoin, modifiez l&#8217;opacité pour obtenir l&#8217;effet souhaité.</p>
<h3>Etape 4 : Ombre</h3>
<p>Pour créer une ombre avec GIMP, il faut créer un nouveau calque, le placer dessous, et utiliser une option de flou. Oui, c&#8217;est super pratique.</p>
<p><img src="http://www.cloudconnected.fr/wp-content/uploads/2009/02/texte_web_etape4.png" alt="Logo : Etape 4" title="Logo : Etape 4" width="355" height="80" class="aligncenter size-full wp-image-162" /></p>
<p>Dupliquez le calque créé à l&#8217;étape 3 qui contient la totalité du texte. Faites un clic droit dessus dans la fenêtre des calques puis « Eliminer le texte d&#8217;information ».</p>
<p>Dans le menu « Calque », choisissez « Calque aux dimensions de l&#8217;image ». Ensuite, toujours dans le même menu, choisissez « Couleurs » puis « Luminosité-Contraste ». En mettant la luminosité au minimum (-127), on obtient un texte tout noir.</p>
<p>Enfin, dans le menu « Filtres », choisissez « Flou » puis « Flou Gaussien ». Vous pouvez choisir n&#8217;importe quelle taille de flou, mais il faut prendre en compte le fait qu&#8217;on va ajouter un contour blanc dans l&#8217;étape suivante. Ici c&#8217;est un flou de 11 pixel.</p>
<p>Enfin, placez ce calque sous les calques de textes pour obtenir l&#8217;effet d&#8217;ombre.</p>
<p>Note : Si le flou n&#8217;apparait pas, vérifiez que la case « Garder la transparence » (dans la fenêtre des calques, à côté du choix du mode de fusion) n&#8217;est pas cochée.</p>
<h3>Etape 5 : Contour externe</h3>
<p>Dernière étape : on ajoute un gros contour blanc. Encore une fois GIMP ne sait pas le faire tout seul, donc il faut se débrouiller autrement.</p>
<p><img src="http://www.cloudconnected.fr/wp-content/uploads/2009/02/texte_web_etape5.png" alt="Logo : Etape 5" title="Logo : Etape 5" width="355" height="80" class="aligncenter size-full wp-image-158" /></p>
<p>Refaite la manipulation de l&#8217;étape 3 pour obtenir une sélection de la forme du texte (« Alpha vers Sélection », etc.). Sans perdre la selection, créez un nouveau calque transparent. Dans le menu « Sélection », choississez la fonction « Agrandir » de 3 pixels (ou plus, selon les goûts). Puis remplissez la sélection de blanc.</p>
<p>Enfin, placez cette sélection sous les calques de texte. C&#8217;est fini, vous avez un maginifique texte façon web 2.0 !</p>
<p>Note : Plutôt que de faire une gros flou à l&#8217;étape 4, une autre possibilité consiste à d&#8217;abord agrandir la sélection pour prendre en compte le contour blanc, puis de faire un flou plus petit. L&#8217;effet est globalement similaire.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cloudconnected.fr/2007/03/27/realiser-un-texte-facon-web-20-avec-the-gimp/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
		</item>
	</channel>
</rss>

