Morton 10 de julio de 2011 a las 07.50
   Imprimir artículo
elWebmaster.com

C√≥mo crear tu propio set de √≠conos de dise√Īo dibujados a mano


iconosamano-wideAlgunos de los mejores íconos que vemos en la web han sido creados a mano alzada, y luego digitalizados, logrando un efecto inigualable. Aquí te mostramos cómo crear tu propio set de de pinceles y de imágenes vectorizadas para luego utilizar como íconos con esta curiosa técnica.

Fuente original del artículo: Vandelay Design
Traducción realizada por
elWebmaster.com

Lo primero que vamos a necesitar es, claramente, l√°piz y papel. Tambi√©n un escaner o alguna otra herramienta que te permita digitalizar tus dibujos. Y por √ļltimo, softwares de edici√≥n de im√°genes que pueden ser Adobe Photoshop y Adobe Illustrator, o alternativas s√≠miles.

1) Creación de los pinceles

Comenzaremos tomando nuestro lápiz o bolígrafo y trazando algunas flechas, elipses, recuadros, y cualquier cosa que se te ocurra. No te preocupes por crear una pieza de arte, ya que gran parte de la magia de este tipo de íconos es justamente su look imperfecto y realista. Obtendrás mejores resultados si utilizas distintos grosores y tintas.

Cuando hayas terminado, toma los bocetos que desees utilizar, digitalízalos con tu scanner y abre la imagen resultante en Adobe Photoshop. Utilizaremos la herramienta de Desaturar para pasar nuestra imagen a escala de grises.

iconos-mano-scan

También puedes modificar los niveles de color para aclarar un poco la imagen y que no denote que ha sido digitalizada. Para ello, si utilizas Photoshop, ve a Imagen > Ajustes > Niveles y lleva el nivel de blanco (el de la derecha) un poco hacia la izquierda, y luego el de grises (el del medio) un poco a la derecha. Esto puede variar dependiendo de tu digitalización. Puedes alterar los niveles como desees hasta que te agrade el resultado.

Para facilitar el resto del proceso, separaremos cada ícono en un archivo propio. Para esto, selecciona el boceto que desees, copia, crea una imagen nueva y pega allí el resultado. Deberás repetir el proceso una vez por cada boceto de ícono.

Si ves alg√ļn resto de trazo que necesite ser borrado, utiliza un pincel blanco (o del color que utilices de fondo) o la herramienta de Borrar.

Cuando una imagen esté lista, deberás convertirla a pincel de Photoshop (o del software que utilices). Para ello, en Photoshop deberás ir a Editar > Definir Pincel. Dale un nombre, y grábalo. Es importante que no utilices una imagen más ancha o alta que 2500 pixeles para esto. Ahora deberás repetir el proceso por cada boceto de ícono que hayas guardado previamente.

2) Vectorización

Elige una de las im√°genes de bocetos individuales que creamos anteriormente y abre ese archivo en Illustrator.

Usaremos la herramienta Trazo vivo para convertir f√°cilmente el JPG a vector. Haz clic en la imagen y aparecer√° la barra de Trazo Vivo. Ingresa a Opciones de trazo y tilda “Ignorar blanco”. Puedes configurar el resto de las opciones como desees. Cuando est√© todo listo, enciende el Trazo vivo y presiona el bot√≥n Expandir.

iconos-mano-livetrace1

La imagen est√° ahora vectorizada y puedes guardarla como un archivo .ai o .svg. Esto te permitir√° redimensionarla tanto como desees sin perder calidad. Repite este proceso con el resto de los bocetos individuales.

icono-mano-vector

Esperamos que te sea de utilidad. ¡Hasta la próxima!

Fuente original del artículo: Vandelay Design
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (3)

  1. Mali Mazko dice:

    Una opcion unica, sencilla pero muy original.. Es que definitivamente el dise√Īo Web es dejar volar la imaginacion en variedades y formas… Amo el dise√Īo Web :). Buen Aporte.

  2. Daniel Batista dice:

    Muy √ļtil el articulo gracias.!

  3. Erika Encina dice:

    Realmente, una excelente opción para ser bien originales y no uno más del resto

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder