[Tutorial] Crea un icono - Parte 1: Creación de la estructura (Illustrator)
![]()
Como indica el tÃtulo esta es la primera entrega del mega tutorial en donde aprenderemos a crear un icono por completo, desde su estructura en Illustrator, el coloreado en PhotoShop y la creación del formato .ico para usarlo en cualquier aplicación. Por lo tanto, si te gustan los iconos tanto como a mi o tienes ganas de aprender nuevas técnicas y tips que te ayudaran a la hora de diseñar, no te pierdas este tutorial.
Esta primera parte será rápida y fácil de seguir, ya que el Illustrator hará casi todo por nosotros. Para comenzar necesitamos abrir el Illustrator y crear un nuevo documento, como vamos a crear un icono no necesitamos que sea excesivamente grande, por lo tanto mi nuevo documento es de 800×600px y el icono lo haremos de 500px aproximadamente (pero como trabajamos con vectores podemos modificar el tamaño sin perder la calidad).
Una vez que tenemos el nuevo documento abierto comenzaremos a crear la estructura, primero asegúrense de tener las reglas activadas (View > Show Rulers o Ctrl. + R) y también los Smarts Guides (View > Smart Guides o Ctrl. + U) ya que nos ayudaran mucho en el proceso. Primero crearemos el techo de la casa, para eso crearemos un rectángulo (que será una especie de guÃa) y lo dividiremos en 2 partes iguales (con las reglas) y luego con la herramienta vector trazaremos el techo, no hace falta poner borde, solamente color de relleno. FÃjense en la imagen que también que cree más guÃas de ayuda, asà me aseguro que todo quede simétrico y que nada se descoloque:

Paso 2, en este paso crearemos la estructura de la casa siguiendo la misma metodologÃa usada en el primer paso. Les recomiendo que elijan un color más claro que el del techo y usen cuantas guÃas necesiten. Lo que recomiendo hacer en estos casos es tomar una columna como referencia y luego la voy modificando según necesite, pero siempre partiendo de la misma columna, asà nos aseguramos que todas las lÃneas sean iguales.
Como verán las columnas que limitan con el techo encajan con la forma del techo, esto es muy fácil de hacer, simplemente debemos seleccionar la flechita blanca (“Direct Selection Tool (A)â€) luego seleccionar la esquina que queremos modificar y moverla a su nueva posición, hasta hora deberÃa tener algo como esto:

Paso 3, Crearemos la base de la casa, con lo aprendido en los puntos anteriores ya tienen que ser capaces de poder hacer esto solos. En el caso de que no les salga repasen el paso 1 y 2.
Una vez hecha la base ya tendremos la estructura de la casa completa y deberÃamos tener algo como esto:

Paso 4, sin duda este es el paso en donde nuestra casa deja de ser 2D y se convierte en algo real de 3 dimensiones. Para ello debemos seleccionar la casa con la herramienta “Selection Tool (V)†y dirigirnos a Effects > 3D > Extrude & Bevel, se nos abrirá una ventana que deberia tener un cubo y varias opciones. Primero activen el Preview y PUFF! Nuestra casa en 3D, pero ahora falta configurar las opciones para lograr un mejor resultado, en la siguiente imagen podrán ver como debe quedar configurado:

Listo! Ya terminamos con la parte número 1 de este mega tutorial. Repasemos todo lo visto: Creación de estructuras simples, uso de guÃas & las Smart guides y como convertir objetos planos en 3D. En conclusión, Illustrator es una herramienta asombrosa para este tipo de trabajos ya que en simples pasos podemos conseguir resultados muy interesantes.
Aquà tienen el archivo fuente del tutorial es un archivo .ai, si se trabaron en alguna parte pueden descargar este archivo y ver como esta hecho. Para el próximo tutorial sera necesario contar con la estructura en illustrator ya que partiremos de eso, por lo tanto si no hiciste el tutorial te recomiendo que lo descargues.
Ya estoy trabajando en la parte 2 del mega tutorial… asi que a esperar :)
Side Info
Autor: adminMar 2008-09-30 - 16:30
Comentarios: 5 Categorías: Destacados, Diseño, Inspiracion, tutorial Tags: icons, illustrator, Photoshop
Relacionados:



Comentarios (5)
Mar 2008-09-30 - 17:16
bitacoras.com/votar/anotacion/wydstudios.com/blog/tutorial-crea-un-icono-parte-1-creacion-de-la-estructura-illustrator
Información Bitacoras.com…
Si lo deseas, puedes hacer click para valorar este post en Bitacoras.com. Gracias….
Mie 2008-10-01 - 13:32
Muy buen tutorial, muchas gracias
Mie 2008-10-01 - 13:36
Muchas gracias Eduerdo… :)
Dentro de poco se viene la sengunda parte.
Vie 2008-10-03 - 4:39
wydstudios.com/blog/video-tutorial-crea-un-icono-%e2%80%93-parte-2-de-illustrator-a-photoshop
[...] les traigo la segunda entrega de este video tutorial sobre la creación de un icono (esta es la primera), en teorÃa se trata sobre como exportar elementos de Illustrator para luego ser tratados en [...]
Mar 2008-10-07 - 2:04
wydstudios.com/blog/tutorial-crea-un-icono-%e2%80%93-parte-4-creacion-del-formato-ico
[...] en presentarles la cuarta y ultima parte de este tutorial sobre la creación de un icono desde su estructura en Illustrator, la importación a PhotoShop desde Illustrator, el coloreado en PhotoShop y por ultimo la creación [...]