Este documento explica cómo crear iconos web 2.0 en Inkscape utilizando una estrella como ejemplo. Primero se crea una estrella y se le da color con un borde y relleno de gradiente. Luego se crea una capa superior con una elipse blanca semiopaca para simular el brillo, y se reduce el tamaño de la estrella para que coincida con la elipse. Finalmente se añade texto dentro de la estrella.

1. Tutorial Inkscape – Iconos Web 2.0
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 “1″ 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.
Lo primero que haremos es pulsar en la herramienta “estrellas y polígonos” (o pulsar “*”) 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.
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.
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:

2. 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ú->Trazo->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ú->Trazo->Intersección o lo que es lo mismo Ctrl+* y ya tenemos el brillo para
nuestra estrella.
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.
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.
Del mismo modo, podemos crear infinidad de bonitos logos. Espero que este tutorial os sirva de ayuda,
para cualquier cosa estoy por aquí.