<?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>Berriart &#187; Iconos</title>
	<atom:link href="http://www.berriart.com/category/iconos/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.berriart.com</link>
	<description>Un programador hablando de diseño............</description>
	<lastBuildDate>Sun, 05 Feb 2012 10:52:46 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Curso de inkscape</title>
		<link>http://www.berriart.com/2008/05/13/curso-de-inkscape/</link>
		<comments>http://www.berriart.com/2008/05/13/curso-de-inkscape/#comments</comments>
		<pubDate>Tue, 13 May 2008 18:36:16 +0000</pubDate>
		<dc:creator>artberri</dc:creator>
				<category><![CDATA[Enlaces]]></category>
		<category><![CDATA[Iconos]]></category>
		<category><![CDATA[Inkscape]]></category>
		<category><![CDATA[Recursos]]></category>
		<category><![CDATA[Tutoriales]]></category>
		<category><![CDATA[curso]]></category>
		<category><![CDATA[logos]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://www.berriart.com/?p=181</guid>
		<description><![CDATA[No es la primera vez que hablo de Joaclint, un profesor de ESO que a muchos nos hubiera gustado tener en su día. Por suerte, no solo ilustra a sus alumos presenciales sino que mediante su blog, que mantiene su posición en mi blogroll casi desde el primer día, imparte cursos online para quien quiera. [...]]]></description>
			<content:encoded><![CDATA[<p><a href='http://joaclintistgud.wordpress.com/2008/05/06/curso-de-inkscape-logo-a-logo/'><img src="http://www.berriart.com/wp-content/uploads/2008/05/curso-inkscape.png" alt="Curso inkscape"  width="150" height="200" style="float:left;margin:0 10px 10px 0;" /></a>No es <a href="http://www.berriart.com/2007/09/06/%c2%bfhasta-donde-llega-inkscape/">la primera vez que hablo de Joaclint</a>, un profesor de ESO que a muchos nos hubiera gustado tener en su día. Por suerte, no solo ilustra a sus alumos presenciales sino que mediante <a href="http://joaclintistgud.wordpress.com/">su blog</a>, que mantiene su posición en mi blogroll casi desde el primer día, imparte cursos online para quien quiera.</p>
<p>Hace unos días ha publicado en PDF uno de sus cursos al completo, <a href="http://joaclintistgud.wordpress.com/2008/05/06/curso-de-inkscape-logo-a-logo/">Curso de Inkscape: Logo a Logo</a>, dónde paso a paso y con exámenes incluidos podemos llegar a crear logos totalmente profesionales. Desde su web lo podéis descargar, pero de todos modos sigue pudiéndose consultar online en la siguiente URL: <a href="http://docs.google.com/View?docid=dhs3vfzq_499fsbh2gr6">http://docs.google.com/View?docid=dhs3vfzq_499fsbh2gr6</a></p>
<p>Así que ya sabéis, para vuestro próximo proyecto podéis diseñaros vuestro propio logo. <a href="http://www.inkscape.org/">Inkscape</a>, la herramienta, es libre y una de las mejores en lo que se refiere al diseño vectorial. El curso es muy bueno, sencillo de comprender y con una utilidad clara. Si a partir de ahora no conseguis un buen logotipo, la única excusa será la falta de creatividad <img src='http://www.berriart.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p>Gracias Joaquín por el curso y por promover la cultura del software libre entre tus alumnos y lectores.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.berriart.com/2008/05/13/curso-de-inkscape/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Set de iconos gratis para web</title>
		<link>http://www.berriart.com/2007/07/27/set-de-iconos-gratis-para-web/</link>
		<comments>http://www.berriart.com/2007/07/27/set-de-iconos-gratis-para-web/#comments</comments>
		<pubDate>Fri, 27 Jul 2007 21:07:04 +0000</pubDate>
		<dc:creator>artberri</dc:creator>
				<category><![CDATA[Iconos]]></category>
		<category><![CDATA[Inkscape]]></category>
		<category><![CDATA[Recursos]]></category>
		<category><![CDATA[Web 2.0]]></category>

		<guid isPermaLink="false">http://www.berriart.com/2007/07/27/set-de-iconos-gratis-para-web/</guid>
		<description><![CDATA[Como hace ya tiempo que no os regalo nada, voy a compartir con vosotros un set de iconos para web que espero que os guste y os sirva de algo. Aunque estos mismos iconos estoy seguro de que cualquiera de vosotros podría hacerlos si sigue cuidadosamente los pasos de mi tutorial de iconos web 2.0 [...]]]></description>
			<content:encoded><![CDATA[<p>Como hace ya tiempo que no os regalo nada, voy a compartir con vosotros un set de iconos para web que espero que os guste y os sirva de algo. Aunque estos mismos iconos estoy seguro de que cualquiera de vosotros podría hacerlos si sigue cuidadosamente los pasos de mi <a href="http://www.berriart.com/2007/06/12/tutorial-inkscape-iconos-web-20/" title="Tutorial de iconos Web 2.0 para Inkscape">tutorial de iconos web 2.0 para inkscape</a>.</p>
<p"></p"></p>
<p style="text-align: center"><a href="http://www.berriart.com/wp-content/uploads/2007/07/berri-web-icons-set.zip" title="Set de iconos gratis para web"><img src="http://www.berriart.com/wp-content/uploads/2007/07/berri-web-icon-set.png" alt="Set de iconos web gratis" height="253" width="390" /></a></p>
<p>Por supuesto son gratis y podéis redistribuirlos si os gustan, aunque os aconsejo que leáis primero los términos de uso que los acompañan. Si simplemente los vais a usar en vuestros diseños hacedlo sin ningún tipo de reparo.</p>
<p>Los iconos se distribuyen en tres tamaños (16&#215;16, 32&#215;32, 64&#215;64) en formato png. Aunque junto con ellos se distribuyn los SVGs originales para que podáis modificarlos al gusto con Inkscape o con vuestro programa de diseño vectorial habitual.</p>
<p>Y sin contaros nada más, aquí os lo dejo: <a href="http://www.berriart.com/wp-content/uploads/2007/07/berri-web-icons-set.zip" title="Set de iconos gratis para web">berri-web-icons-set</a>.</p>
<p"></p">
]]></content:encoded>
			<wfw:commentRss>http://www.berriart.com/2007/07/27/set-de-iconos-gratis-para-web/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>Tutorial Inkscape &#8211; Iconos Web 2.0</title>
		<link>http://www.berriart.com/2007/06/12/tutorial-inkscape-iconos-web-20/</link>
		<comments>http://www.berriart.com/2007/06/12/tutorial-inkscape-iconos-web-20/#comments</comments>
		<pubDate>Mon, 11 Jun 2007 23:21:31 +0000</pubDate>
		<dc:creator>artberri</dc:creator>
				<category><![CDATA[Iconos]]></category>
		<category><![CDATA[Inkscape]]></category>
		<category><![CDATA[Recursos]]></category>
		<category><![CDATA[Tutoriales]]></category>
		<category><![CDATA[Web 2.0]]></category>

		<guid isPermaLink="false">http://www.berriart.com/2007/06/12/tutorial-inkscape-iconos-web-20/</guid>
		<description><![CDATA[Tenía pensado haber actualizado el sábado, pero he tenido unos problemas con los del hosting que me han dejado sin web algún que otro día, así que no puedo hacer menos ahora que estoy de vuelta que regalaros este tutorial de Inkscape con el que intento de una forma sencilla explicar como crear iconos web [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center"><img src="http://www.berriart.com/wp-content/uploads/2007/06/las4.png" alt="Badges" border="0" /></p>
<p> Tenía pensado haber actualizado el sábado, pero he tenido unos problemas con los del hosting que me han dejado sin web algún que otro día, así que no puedo hacer menos ahora que estoy de vuelta que regalaros este tutorial de Inkscape con el que intento de una forma sencilla explicar como crear iconos web 2.0 (o los también llamados badges, que por cierto, así es como le llaman a las chapas los angloparlantes). Para verlo solo tenéis que pulsar en &#8230;<span id="more-7"></span></p>
<p>Este tutorial va a tratar de explicar como hacer iconos para páginas con estilo Web 2.0. Para ello voy a utilizar Inkscape v0.45 y voy a realizar el ya mítico icono de la estrella, pero el mismo procedimiento puede usarse para realizar muchas otras formas. Empezamos con un nuevo documento en blanco, pulsamos la tecla rápida &#8220;1&#8243; para que la escala del zoom se ponga a 1:1 y ya estamos preparados. Recordad que con la combinación Shift+Ctr+L mostramos o escondemos el dialogo de capas, nos será útil durante el tutorial.</p>
<p><a href="http://www.berriart.com/wp-content/uploads/2007/06/pantallazo1.png" title="Img1"></a></p>
<p style="text-align: center"><a href="http://www.berriart.com/wp-content/uploads/2007/06/pantallazo1.png" title="Img1"><img src="http://www.berriart.com/wp-content/uploads/2007/06/pantallazo1.thumbnail.png" alt="Img1" /></a></p>
<p>Lo primero que haremos es pulsar en la herramienta &#8220;estrellas y polígonos&#8221; (o pulsar &#8220;*&#8221;) y crearemos una estrella del tamaño que queramos, recordad que el tamaño no es algo muy importante (aquí al menos) ya que el diseño vectorial nos ofrece la posibilidad de escalar nuestros dibujos de forma libre. En la siguiente imagen podéis ver los parámetros de configuración de la mía pero por supuesto podéis usar los que queráis.</p>
<p><a href="http://www.berriart.com/wp-content/uploads/2007/06/pantallazo2.png" title="Pincha para ampliar"></a></p>
<p style="text-align: center"><a href="http://www.berriart.com/wp-content/uploads/2007/06/pantallazo2.png" title="Pincha para ampliar"><img src="http://www.berriart.com/wp-content/uploads/2007/06/pantallazo2.thumbnail.png" alt="Pincha para ampliar" /></a></p>
<p>Lo siguiente es darle color a nuestra estrella así que pulsamos Shift+Ctrl+F para ver las propiedades del objeto. Yo he elegido darle tonos azules como podéis ver en la imagen. Le pondremos un borde de unos 2 píxeles de un color uniforme y rellenaremos con un gradiente que vaya de un tono más claro al del borde, a un más oscuro.</p>
<p align="center"><a href="http://www.berriart.com/wp-content/uploads/2007/06/trazocolor.png" title="Pincha para ampliar"><img src="http://www.berriart.com/wp-content/uploads/2007/06/trazocolor.thumbnail.png" alt="Pincha para ampliar" /></a> <a href="http://www.berriart.com/wp-content/uploads/2007/06/trazo.png" title="Pincha para ampliar"><img src="http://www.berriart.com/wp-content/uploads/2007/06/trazo.thumbnail.png" alt="Pincha para ampliar" /></a> <a href="http://www.berriart.com/wp-content/uploads/2007/06/rellenogradiente.png" title="Pincha para ampliar"><img src="http://www.berriart.com/wp-content/uploads/2007/06/rellenogradiente.thumbnail.png" alt="Pincha para ampliar" /></a></p>
<p>Lista la forma, vamos a hacer el efecto del brillo, para lo que creamos una nueva capa encima de la anterior. Luego, seleccionamos la estrella y hacemos una copia de la misma en la capa nueva justo encima de la otra. Ahora vamos a seleccionar la herramienta de elipses (F5) y creamos una de color blanco cubriendo parte de la estrella en la capa recién creada. La elipse debe ser blanca y semiopaca:</p>
<p align="center"><a href="http://www.berriart.com/wp-content/uploads/2007/06/brillo.png" title="Pincha para ampliar"><img src="http://www.berriart.com/wp-content/uploads/2007/06/brillo.thumbnail.png" alt="Pincha para ampliar" /></a></p>
<p> Ahora vamos a hacer lo siguiente para quedarnos solo con la parte de la elipse que queremos. Seleccionamos la estrella de la capa brillo y vamos a Menú-&gt;Trazo-&gt;Reducir o pulsamos Ctrl+( y reducimos el tamaño de la estrella hasta que sea del tamaño del relleno de la que está debajo. Es decir, si le hemos puesto 2 píxeles al borde, la reducimos 2 píxeles y la colocamos encima de la elipse (PgUp). Ahora con el Shift pulsado seleccionamos los dos objetos de la capa brillo (la estrella más pequeña y la elipse) y hacemos Menú-&gt;Trazo-&gt;Intersección o lo que es lo mismo Ctrl+* y ya tenemos el brillo para nuestra estrella.</p>
<p align="center"><a href="http://www.berriart.com/wp-content/uploads/2007/06/union.png" title="Pincha para ampliar"><img src="http://www.berriart.com/wp-content/uploads/2007/06/union.thumbnail.png" alt="Pincha para ampliar" /></a> <a href="http://www.berriart.com/wp-content/uploads/2007/06/estrella.png" title="Pincha para ampliar"><img src="http://www.berriart.com/wp-content/uploads/2007/06/estrella.thumbnail.png" alt="Pincha para ampliar" /></a></p>
<p> Ya solo nos queda elegir que es lo que queremos poner dentro, en este caso texto. Con la herramienta de escribir seleccionada (F8) y una fuente de tu elección escribimos en color blanco lo que queramos en la nueva capa destinada al texto que crearemos.</p>
<p><a href="http://www.berriart.com/wp-content/uploads/2007/06/est1.png" title="Pincha para ampliar"></a></p>
<p style="text-align: center"><a href="http://www.berriart.com/wp-content/uploads/2007/06/est1.png" title="Pincha para ampliar"><img src="http://www.berriart.com/wp-content/uploads/2007/06/est1.thumbnail.png" alt="Pincha para ampliar" /></a></p>
<p>Ahora seleccionamos el texto y le damos a duplicar. A esta nueva copia la     vamos a cambiar el color blanco por un gris (60%) y la vamos a mover un     pixel hacia arriba y otro hacia la derecha (puedes hacerlo con las teclas de     dirección y manteniendo la tecla Alt pulsada). Para terminar ponemos la     copia del texto gris debajo del blanco (PgDn) y ya tenemos nuestra bonita     estrella.</p>
<p style="text-align: center"><img src="http://www.berriart.com/wp-content/uploads/2007/06/estrella1.png" alt="Estrella Final" /></p>
<p> Del mismo modo, podemos crear infinidad de bonitos logos. Espero que este tutorial os sirva de ayuda, para cualquier cosa estoy por aquí.</p>
<p style="text-align: center"><img src="http://www.berriart.com/wp-content/uploads/2007/06/las4.png" alt="Badges" border="0" /></p>
<p>Si prefieres, puedes ver este tutorial en Google Docs pulsando en el siguiente enlace: <a href="http://docs.google.com/View?docid=dhrfs26t_2drhjkq" title="Tutorial de iconos Web 2.0 para Inkscape" target="_blank">Tutorial Inkscape &#8211; Iconos Web 2.0</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.berriart.com/2007/06/12/tutorial-inkscape-iconos-web-20/feed/</wfw:commentRss>
		<slash:comments>44</slash:comments>
		</item>
	</channel>
</rss>

