Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Design & Illustration
  2. Icon Design
Design

Cómo Crear un Paquete de Íconos de Lanzadores para Android en Adobe Illustrator

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Final product image
What You'll Be Creating

En el tutorial de hoy vamos a hacer algunos pequeños cambios a nuestro programa regular, y abordaremos un tema que hemos querido hacer por mucho tiempo. Si no lo has averiguado por el título, bueno, vamos a crear cinco íconos sencillos que podrían convertirse en íconos de lanzadores para Android para cualquier futura aplicación que podrías crear o estar invoucrado en su creación.

En cuanto al proceso, estaremos usando tu selección básica de formas geométricas combinadas con el panel Alinear y algunas otras herramientas con las que probablemente ya trabajas cada día.

Dicho eso, toma una cantidad importante de café y comencemos.

Oh, no olvides que siempre puedes expandir el proyecto al dirigirte a GraphicRiver, dónde econtrarás muchísimos paquetes de íconos diseñados para Android, esperando ser clickeados.

1. Cómo Configurar un Nuevo Documento

Suponiendo que ya tienes abierto Illustrator en segundo plano, configuremos un Nuevo Documento (Archivo > Nuevo o Control-N) usando los siguientes parámetros:

  • Número de Mesas de Trabajo: 1
  • Anchura: 800 px
  • Altura: 600 px
  • Unidades: Pixeles

Y de la pestaña Avanzado:

  • Modo de Color: RGB
  • Efectos de Rasterizado: Pantalla (72ppi)
  • Modo de Previsualización:  Por defecto
setting up a new document

Consejo rápido: algunos de ustedes podrían haber notado que la opción Alinear Nuevos Objetos con Cuadrícula de Pixeles no se encuentra, lo cuál es porque estoy ejecutando la nueva versión CC 2017 del software, dónde se han efectuado grandes cambios en la forma en que Illustrator maneja la manera en que las formas se ajustan a la subyacente Cuadrícula de Pixeles.

2. Cómo Configurar una Cuadrícula Personalizada

Ya que vamos a estar creando los íconos usando un flujo de trabajo pixel-perfect, queremos configurar una pequeña Cuadrícula para que podamos tener control total sobre nuestras formas-eso es si estamos ejecutando la versión anterior del software.

Paso 1

Ve al submenú Edición > Preferencias > Guías & Cuadrícula, y ajusta los siguientes parámetros:

  • Línea de cuadrícula cada: 1 px
  • Subdivisiones: 1
setting up a custom grid

Consejo rápido: puedes aprender más sobre cuadrículas leyendo éste artículo en profundidad sobre cómo funciona el Sistema de Cuadrícula de Illustrator.

Paso 2

Una vez que configuremos nuestra cuadrícula personalizada, todo lo que necesitamos hacer para asegurarnos de que nuestras formas luzcan claras es habilitar la opción Ajustar a Cuadrícula encontrada en el menú Ver, que lo transformará a Ajustar al Pixel cada vez que ingreses al modo Previsualización de Pixeles.

Ahora, si eres nuevo en el "flujo de trabajo pixel-perfect", te recomiendo ampliamente que consultes mi tutorial cómo crear un diseño pixel-perfect, que te ayudará a ampliar tus habilidades técnicas al instante.

3. Cómo Configurar las Capas

Con el Nuevo Documento creado, sería una buena idea estructurar nuestro proyecto usando un par de capas, ya que de ésta manera podemos mantener un flujo de trabajo constante al enfocarnos en un ícono a la vez.

Dicho eso, ve al Panel Capas, y crea un total de seis capas, que renombraremos como sigue:

  • Capa 1: reference grids (cuadrícula base)
  • Capa 2: battery (batería)
  • capa 3: settings (ajustes)
  • layer 4: messaging (mensajería)
  • capa 5: alarm (alarma)
  • layer 6: photos (fotos)
setting up the layers

4. Cómo Crear las Reference Grids (Cuadrícula Base)

Las Reference Grids (o Cuadrícula Base) son un conjunto de superficies de referencia precisamente delimitadas, que nos permiten construir nuestros íconos al enfocarnos en tamaño y consistencia.

Generalmente, el tamaño de las cuadrículas determinan el tamaño de los íconos reales, y siempre deberían ser la primera decisión que tomes en el comienzo de un nuevo proyecto, ya que siempre querrás comenzar desde el tamaño más pequeño posible y construir sobre él.

Ahora, ya que vamos a crear los íconos con la intención de usarlos dentro de Android OS, tendremos que seguir su Tamaño recomendado y pauta de Formato, y configurar una cuadrícula personalizada de 96 x 96 px con un padding de 4 px en todos los costados.

Paso 1

Comienza con bloquear todas menos la capa reference grid, y luego toma la Herramienta Rectángulo (M) y crea un cuadrado naranja (#F15A24) de 96 x 96 px, que ayudará a definir el tamaño general de nuestros íconos.

creating the main shape for the reference grid

Paso 2

Agrega otro más pequeño de 88 x 88 px (#FFFFFF) que actuará como nuestra área activa de dibujo, así nos da un padding de 4 px en todos los costados.

creating the main shape for the active drawing area

Paso 3

Agrupa los dos cuadrados que componen la cuadrícula base usando el atajo de teclado Control-G, y luego crea tres copias a una distancia de 24 px una de la otra, asegurando alinearlas con el centro de la Mesa de Trabajo.

Una vez que termines, bloquea la capa actual y dirígete a la segunda dónde comenzaremos a trabajar en nuestro primer ícono.

creating and positioning all the reference grids

5. Cómo Crear el Ícono de la Batería

Vamos a iniciar el proyecto creando el ícono de la batería, que podría ser usado para una aplicación de ahorro de energía, o incluso un indicador de estatus ya que es muy básico.

Dicho eso, asegúrate de estar en la capa correcta (esa sería la segunda) y luego haz zoom en la primera cuadrícula de base para que podamos empezar.

Paso 1

Comienza creando el fondo del ícono usando un círculo de 88 x 88 px, al que le pondremos color usando #00C853, alinéandolo al centro con la subyacente área activa de dibujo.

creating and positioning the main shape for the battery icons background

Consejo rápido: ya que Google fue lo suficientemente amable para sacar una pauta para los colores en Material Design, he terminado mezclando y combinando un par de valores, que he usado para los fondos.

Paso 2

Crea el cuerpo principal de la batería usando un rectángulo de 24 x 40 px, que le pondremos color blanco (#FFFFFF) y luego lo alineamos con el centro del círculo más grande, a una distancia de 20 px de su borde inferior.

creating and positioning the main shape for the battery icons body

Paso 3

Convierte la forma que acabamos de crear en un contorno, al intercambiar su Relleno con su Trazo (Mayúsculas-X), y luego estableciendo su Grosor en 4 px y su Vértice en Unión Redondeada, todo dentro del panel Trazo.

turning the battery icons body into an outline using the stroke panel

Paso 4

Crea la primera barra del indicador de estado, usando un rectángulo de 12 x 4 px (#FFFFFF) o un trazo amplio de 12 px (#FFFFFF) con un Grosor de 4 px, que alinearemos al centro con el cuerpo de la batería, dejando una brecha de 4 px alrededor.

creating and positioning the battery icons first state indicator bar

Paso 5

Agrega otras dos barras indicadoras, que se apilarán verticalmente a una distancia de 4 px una de otra, agrupándolas después (Control-G).

adding the remaining state indicator bar to the battery icon

Paso 6

Finaliza el ícono agregando el botón superior, que crearemos usando un rectángulo más pequeño de 8 x 4 px (#FFFFFF) que centraremos alineándolo con el cuerpo de la batería, a una distancia de 6 px (4 px para el padding + 2 px para la mitad superior del trazo).

Una vez que terminas, no olvides seleccionar y agrupar (Control-G) todas las formas que componen la batería, haciendo lo mismo para todas las secciones que componen el ícono.

finishing off the battery icon

6. Cómo Crear el Ícono de Ajustes

Asumiendo que has logrado finalizar el primer ícono, bloquea su capa y luego dirígente a la siguiente (que sería la tercera) y comencemos a trabajar en la de ajustes.

Paso 1

Como lo  hicimos en el ícono anterior, comienza creando su fondo usando un círculo de 88 x 88 px, que pondremos de color #2196F3, alineándolo al centro con la subyacente área activa de dibujo.

creating and positioning the main shape for the settings icons background

Paso 2

Comienza a trabajar en el regulador del centro creando un rectángulo de 4 x 32 px o un trazo alto de 32 px con un Grosor de 4 px, que pondremos de color (#FFFFFF) y luego lo alineamos al centro con el círculo grande, a una distancia de 18 px de su borde superior.

creating and positionign the main shape for the settings icons center slider

Paso 3

Crea el indicador de estado del regulador usando un rectángulo de 12 x 4 px (#FFFFFF) que alinearemos con el centro de la forma previamente creada, a una distancia de 4 px de su borde inferior.

creating and positioning the main shape for the center sliders state indicator

Paso 4

Agrega la sección inferior del regulador usando un rectángulo de 4 x 12 px (#FFFFFF) que colocaremos justo debajo de la barra del indicador de estado, seleccionando y agrupando (Control-G)  las tres formas.

creating and positioning the main shape for the center sliders lower section

Paso 5

Crea la sección superior para el regulador izquierdo usando un rectángulo más pequeño de 4 x 12 px (#FFFFFF), que alinearemos con el borde superior del regulador central, colocándolo a una distancia de 12 px de él.

creating and positioning the main shape for the left sliders upper section

Paso 6

Agrega un indicador de estado del regulador creando un rectángulo de 12 x 4 px (#FFFFFF) que apilaremos verticalmente a la forma previamente creada, a una distancia de 4 px de su borde inferior.

creating and positioning the main shape for the left sliders state indicator

Paso 7

Finaliza el regulador izquierdo agregando la sección inferior que crearemos usando un rectángulo de 4 x 32 px (#FFFFFF) que colocaremos debajo del indicador.

Una vez que termines, selecciona las tres formas y agrúpalas (Control-G) como lo hicimos con el regulador central.

finishing off the settings icons left slider

Paso 8

Finaliza el ícono creando una copia (Control-C > Control-F) de su regulador izquierdo, que colocaremos en el lado derecho del círculo, a una distancia de 4 px del regulador central.

Una vez que termines, no olvides seleccionar y agrupar (Control-G) todos las secciones que lo conforman para que no se separen por accidente.

finishing off the settings icon

7. Cómo Crear el Ícono de Mensajería

Asumiendo que ha nos hemos dirigido a la siguiente capa (que sería la cuarta), haz zoom en la tercera cuadrícula base y comencemos.

Paso 1

Crea el fondo del ícono usando un círculo de 88 x 88 px, que pondremos de color #7C4DFF y luego lo alineamos al centro con la subyacente área de dibujo activa.

creating and positioning the main shape for the messaging icons background

Paso 2

Crea la forma principal para el cuadro de mensajería izquierdo usando un rectángulo de 32 x 24 px, que pondremos de color blanco (#FFFFFF) y luego colócalo a una distancia de 20 px de los bordes izquierdo y superior del área activa de dibujo.

creating and positioning the main shape for the messaging icons left text box

Paso 3

Comienza con ajustar la forma que acabamos de crear, primero habilitando el modo Previsualización de Pixeles (Alt-Control-Y) y luego agregando un nuevo punto ancla a su borde inferior, a una distancia de 10 px de su izquierda al hacer click con la ayuda de la Herramienta Añadir Punto Ancla.

Una vez que termines, no olvides salir del modo Previsualización de Pixeles al usar el atajo de teclado Alt-Control-Y.

adding a new anchor point to the bottom edge of the messaging icons left text box

Paso 4

Continua ajustando el rectángulo al seleccionar su punto ancla inferior-izquierdo con la Herramienta Selección Directa (A), y luego emujándolo abajo 8 px con la ayuda de la Herramienta Mover (click-derecho > Transformar > Mover > Vertical > 8 px).

adjusting the shape of the messaging icons left text box

Paso 5

Convierte la forma resultante en un contorno, al intercambiar su Relleno con su Trazo (Mayúsculas-X) y luego estableciendo su Grosor en 4 px y su Vértice en Unión Redondeada.

turning the messaging icons left text box into an outline

Paso 6

Agrega la línea de texto más pequeña al crear un rectángulo de 10 x 4 px, que pondremos de color blanco (#FFFFFF) y luego colócalo dentro del cuadro de mensaje, alinéandolo hacia su esquina superior-izquierda, asegurándote de dejar una brecha de 4 px alrededor.

creating and positioning the first text line onto the messaging icons left text box

Paso 7

Agrega la línea de texto más amplia usando un rectángulo de 20 x 4 px (#FFFFFF) que alinearemos a la izquierda con el creado previamente, a una distancia de 4 px de su borde inferior.

Una vez que termines, no olvides seleccionar y agrupar todas las formas del cuadro de texto usando el atajo de teclado Control-G.

creating and positioning the second text line onto the messaging icons left text box

Paso 8

Crea una copia (Control-C > Control-F) del contorno del pequeño cuadro de texto, y luego reflejalo (click-derecho > Transformar > Reflejo > Vertical) y colócalo en el lado derecho del círculo, a una distancia de 18 px de los bordes inferior y derecho del área activa de dibujo.

creating and positioning the messaging icons second text box

Paso 9

Finaliza el ícono, al remover la sección que se intersecta del cuadro de texto (resaltada con rojo) para que finalices teniendo una brecha de 4 px entre él y el contorno del izquierdo. Para hacer ésto, simplemente agrega un nuevo punto ancla a su borde superior e izquierdo, y luego remueve todos los demás.

Una vez que termines, selecciona todas las secciones que componen el ícono y agrúpalas usando el atajo de teclado Control-G.

finishing off the messaging icon

8. Cómo Crear el Ícono de la Alarma

Ya que probablemente por ahora ya conoces la mecánica, bloquea la capa y dirígete a la siguiente capa (que sería la quinta) y comenemos a trabajar en nuestro ícono de la alarma.

Paso 1

Crea un círculo de 88 x 88 px, que luego pondremos de color #FFC107, lo alineamos al centro con la subyacente área activa de dibujo.

creating and positioning the main shape for the alarm icons background

Paso 2

Crea al cuerpo principal del reloj de la alarma usando un círculo de 40 x 40 px, que pondremos de color (#FFFFFF) y luego lo alineamos al centro con el área activa de dibujo, a una distancia de 20 px de su borde inferior.

creating and positioning the main shape for the alarm icons body

Paso 3

Convierte la forma que acabamos de crear en un contorno, al intercambiar su Relleno y su Trazo, y luego estableciendo su Grosor en 4 px en el panel Trazo.

turning the alarm icons main body into an outline

Paso 4

Selecciona la Herramienta Pluma (P) y dibuja las manecillas del reloj usando un Trazo de un grosor de 4 px con el color establecido en blanco (#FFFFFF) y el Vértice en Unión Redondeada, asegurándote de dejar una brecha de 4 px entre los puntos ancla finales y el círculo grande.

drawing in the little hands inside the alarm clocks main body

Paso 5

Mueve unos cuántos pixeles hacia arriba, y crea un rectángulo de 8 x 6 px (#FFFFFF) que alinearemos centrado con la sección superior del círculo grande, colocándolo para que termine de superponerse a la mitad superior del Trazo.

creating and positioning the main shape for the alarm clocks upper section

Paso 6

Agrega un rectángulo de 16 x 4 px (#FFFFFF) arriba del que acabamos de crear, seleccionándolos y agrupándolos (Control-G) después.

finishing off the alarm clocks top section

Paso 7

Finaliza el ícono al dibujar dos pequeños segmentos de líneas diagonales usando un Trazo de 4 px con el color establecido en blanco (#FFFFFF). Una vez que termines selecciona y agrupa (Control-G) todas las formas que componen el reloj de la alarma, haciendo lo mismo para todo el ícono.

finishing off the alarm clock icon

9. Cómo Crear el Ícono para las Fotos

Dirígete a la sexta y última capa, y finalicemos el proyecto creando el ícono para las fotos.

Paso 1

Usando un círculo de 88 x 88 px (#FF6F00) crea el fondo del ícono que alinearemos al centro con la subyacente área activa de dibujo.

creating and positioning the main shape for the photos icons background

Paso 2

Crea el cuerpo principal de la foto usando un rectángulo de 36 x 36 px, que pondremos de color blanco (#FFFFFF) y luego lo alineamos centrado con la subyacente área activa de dibujo, a una distancia de 20 px de su borde superior.

creating and positioning the main shape for the photos icons body

Paso 3

Convierte la forma que acabamos de crear en un contorno, al intercambiar su Relleno con su Trazo (Mayúsculas-X), y luego estableciendo su Grosor en 4 px y su Vértice en Unión Redondeada del panel Trazo.

turning the photos icons main body into an outline

Paso 4

Usando la Herramienta Pluma (P) dibuja la línea divisora horizontal usando un Trazo de 4 px de grosor (#FFFFFF) que colocaremos dentro de la forma previamente creada, a una distancia de 4 px de su borde inferior.

adding the horizontal divider line to the lower body of the photos icon

Paso 5

Usando el mismo Trazo con grosor de 4 px (#FFFFFF) con un vétice de  Unión Redondeada, comienza a dibujar la primera montaña al colocar tu primer punto ancla en el borde izquierdo de la foto a una distancia de 10 px de la línea divisora horizontal que acabamos de crear.

Agrega el segundo punto ancla a una distancia de 10 px tanto horizontal como vertical del primero. Termina la montaña al añadir el tercero y último punto ancla en la línea divisora horizontal, mientras mantienes presionada la tecla Mayúsculas para dibujar una línea diagonal perfecta.

drawing the photos icons first mountain

Paso 6

Dibuja la segunda montaña más pequeña, usando el mismo Trazo de 4 px de grosor (#FFFFFF), y luego una vez que termines, selecciona y agrupa todas las formas que conforman la foto usando el atajo de teclado Control-G.

drawing the photos icons second mountain

Paso 7

Crea la sección inferior del ícono usando un rectángulo de 28 x 6 px que pondremos de color blanco (#FFFFFF) y luego lo alineamos centrado con la sección inferior del contorno de la foto, a una distancia de 4 px.

creating and positioning the main shape for the lower section of the photos icon

Paso 8

Finaliza el ícono, al convertir la forma que acabamos de crear en un contorno de 4 px de grueso (#FFFFFF) con un vértice de Unión Redondeada, y luego ajustándola al añadir un nuevo punto ancla al centro de su borde superior, que luego eliminaremos para abrir el trazado (resaltado en rojo).

Selecciona la forma resultante y el resto de los elementos que conforman la foto y agrúpalos (Control-G) haciendo lo mismo para las secciones que conforman el ícono.

finishing off the photos icon

¡Se terminó!

Espero que hayas logrado mantener el ritmo en cada paso, y lo más importante, hayas aprendido algo nuevo y útil durante el proceso. Dicho eso, ¡nos vemos en el siguiente!

Final Design
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.