¿Cómo Crear un Set de Botones de Reproductor de Música UI en Adobe Illustrator?

En el tutorial del día de hoy, vamos a aprender a cómo crear nuestros botones de control de música de UI, usando algunas de las formas y herramientas más básicas que Illustrator tiene que ofrecer.

Y no olvides, puedes expandir el paquete yendo a GraphicRiver, donde encontrarás un gran selección de iconos con temática de UI.

Habiendo dicho eso, asegúrate de llenar la taza de café ya que será un tutorial largo e interesante.

1. ¿Cómo Preparar el Archivo?

Suponiendo que ya tienes Illustrator abierto en el fondo, tráelo al frente y da clic en Nuevo Documento (Archivo > Nuevo o Control-N) usando la siguiente configuración: 

• Número de Mesas de Trabajo: 16
• Espaciado: 20 px
• Anchura: 32 px
• Altura: 32 px
• Unidades: Píxeles

Y desde la pestaña de Avanzado:

• Modo de Color: RGB
• Efectos de Rasterizado: Pantalla (72ppp)
• Modo de Previsualización: Por Defecto

2. ¿Cómo Preparar una Cuadrícula Personalizada?

Ya que vamos a crear los iconos usando un pixel-perfecto, queremos preparar una pequeña Cuadrícula para que podamos tener control total de nuestras formas.

Paso 1

Ve a Edición > Preferencias > Guías y Cuadrículas y ajusta la siguiente configuración:

• Cuadrícula cada: 1 px
• Subdivisiones: 1

Consejo: Puedes aprender más acerca de cuadrículas leyendo este artículo sobre Cómo el Sistema de Cuadrícula de Illustrator funciona.

Paso 2

Una vez preparada nuestra cuadrícula, todo lo que necesitamos hacer para asegurar que nuestras formas se vean perfectas es habilitar las opciones Ajustar a Cuadrícula y Ajustar a Pixel, encontradas desde el menú Vista, que transformará a Ajustar a Pixel cada vez que entres en el modo de Previsualización de Pixel (si estás usando una versión más antigua del software).

Ahora, si eres nuevo en esto de "pixel perfecto", te recomiendo que vayas a través de mi tutorial ¿Cómo Crear una Obra de Arte con Pixel Perfecto?, que te te ayudará a expandir tus habilidades técnicas en poco tiempo.

3. ¿Cómo Preparar las Capas?

Con el Nuevo Documento creado, sería buena idea estructurar nuestro proyecto, usando un par de capas para separar la cuadrícula de referencia de los iconos. Si estás familiarizado con mi tutorial anterior, notarás que con este, estamos tomando un enfoque un poco diferente, ya que estamos basando el proyecto en mesas de trabajo, en vez de capas, debido al número de iconos.

Habiendo dicho eso, trae el panel de Capas y crea un total de dos capas, que renombraremos de la siguiente manera:

• capa 1: cuadrícula de referencia
• capa 2: iconos

4. ¿Cómo Crear la Cuadrícula de Referencia?

Las cuadrículas de referencia (o cuadrículas de base) son un grupo de superficies de referencias precisamente delimitadas, que nos permiten construir nuestros iconos, enfocándonos en tamaño y consistencia.

Usualmente, el tamaño de la cuadrícula determina el tamaño del icono real, y ellos deben ser siempre la primera decisión que hagas cuando comiences un nuevo proyecto, ya que siempre querrás comenzar desde el tamaño más pequeño posible y seguir con eso.

Ahora, en nuestro caso, vamos a crear el paquete iconos usando solo un tamaño, para ser exactos 32 x 32 px, que es el más pequeño de la escala.

Paso 1

Asegúrate de que estés en la capa correcta (que sería la primera), y luego toma la Herramienta Rectángulo (M) y crea un cuadrado naranja (#F15A24) de 32 x 32 px, que alinearemos al centro a la primera Mesa de Trabajo y usaremos para definir el tamaño general de nuestros iconos.

Paso 2

Añade uno más pequeño de 28 x 28 px (#FFFFFF), que posicionaremos encima de la forma anterior, ya que actuará como nuestra área activa de dibujo, de esta manera dándonos 2 px de relleno con el cual trabajar.

Paso 3

Selecciona y agrupa dos cuadrados, usando Control-G, y luego crea la cuadrícula restante, usando 15 copias (Control-C > Control-F), que posicionaremos sobre las Mesas de Trabajo vacías. Toma tu tiempo, y una vez terminado, asegúrate de bloquear la capa actual, antes de proceder a la siguiente sección.

5. ¿Cómo Crear el Botón de Play?

Suponiendo que exitosamente has podido crear las pequeñas cuadrículas de referencia, sigue a la siguiente capa (que sería la segunda), comenzando el proyecto creando el primer icono del grupo.

Paso 1

Comienza creando el cuerpo principal del botón, usando un rectángulo de 20 x 24 px, con un Trazo de 4 px de ancho (#152730), con Unión Redonda, que alinearemos al centro de la primera Mesa de Trabajo.

Paso 2

Ajustaremos la forma del rectángulo que hemos creado, añadiendo un nuevo punto de ancla al centro de su borde derecho, usando la Herramienta Añadir Punto de Ancla (+), y luego borrando las de su parte superior e inferior derecha, usando la Herramienta Borrar Punto de Ancla (-).

6. ¿Cómo Crear el Botón de Parar?

El siguiente botón el probablemente una de los más fáciles para crear ya que está hecho de una sola forma.

Toma la Herramienta Rectángulo (M) y crea el cuerpo del botón usando un cuadrado de 24 x 24 px, con un Trazo de 4 px de ancho (#152730) con Unión Redonda, que posicionaremos en el centro de la segunda Mesa de Trabajo.

7. ¿Cómo Crear el Botón de Pausa?

Suponiendo que te has posicionado en la tercera Mesa de Trabajo, vamos a comenzar con el siguiente botón.

Paso 1

Crea la sección de la izquierda del botón usando un rectángulo de 8 x 24 px, con un Trazo de 4 px de ancho (#152730) y Unión Redonda, que alineará al centro el borde izquierdo del área activa de dibujo, como se ve en la imagen de referencia.

Paso 2

Termina el botón añadiendo su sección de la derecha, usando una copia (Control-C > Control-F) de la forma que hemos creado, que posicionaremos al lado opuesto del área activa de dibujo. Una vez que tengas la copia en lugar, asegúrate de seleccionar y agrupar (Control-G) las dos formas antes de seguir con el siguiente botón.

8. ¿Cómo Crear el Botón de Grabación?

Sigue con la otra Meas de Trabajo (que sería la cuarta) y vamos a crear el botón de grabación.

Paso 1

Toma la Herramienta Elipse (L) y crea un círculo de 22 x 24 px, con un Trazo de 4 px (#152730), que alinearemos al centro de la subyacente área de dibujo.

Paso 2

Termina el botón añadiendo un círculo más pequeño de 12 x 12 px, con un Trazo de 4 px de grosor (#EF815B) en el centro de la forma más grande, asegurando de seleccionar y agrupar las dos, usando la combinación de tecla Control-G.

9. ¿Cómo Crear el Botón de Adelantar?

Suponiendo que has terminado el botón anterior, muévete a la segunda fila de Mesas de Trabajo, donde comenzaremos a trabajar en el botón de adelantar.

Paso 1

Crea la forma principal para la flecha correcta, usando un rectángulo de 12 x 16 px, con un Trazo de 4 px (#EF815B) con Unión Redonda, que alinearemos al centro del borde derecho del área activa de dibujo.

Paso 2

Haz la forma que creamos en una flecha apuntando a la derecha, usando el mismo proceso para el botón de play, añadiendo un nuevo punto de ancla al centro de su borde derecho, usando la Herramienta Añadir Punto de Ancla (+), y luego borrar su superior e inferior derecho, usando la Herramienta Borrar Punto de Ancla (-). 

Paso 3

Termina el botón añadiendo la flecha izquierda, usando una copia (Control-C > Control-F) de la que hemos terminado de trabajar, que ajustaremos poniendo el color de su Trazo a #152730, alineando al lado izquierdo del área activa de dibujo. Una vez hecho, selecciona y agrupa las dos formas, usando Control-G.

10. ¿Cómo Crear el Botón de Retroceso?

Luego, vamos a crear el botón de retroceso con la ayuda del que acabamos de terminar.

Haz una copia (Control-C > Control-F) de las formas que acabamos de agrupar y la posicionaremos en la siguiente Mesa de Trabajo, asegurando de reflejarla verticalmente, usando la herramienta Reflejo (clic-derecho > Transformar > Reflejar > Vertical).

11. ¿Cómo Crear el Botón de Saltar hacia Adelante?

Ve a la siguiente Mesa de Trabajo, y vamos a crear el botón de Saltar Hacia Adelante.

Paso 1

Comienza creando la sección derecha del botón, usando un rectángulo de 6 x 24 px, con un Trazo de 4 px (#EF815B) con Unión Redonda, que alinearemos al centro del borde derecho del área activa de dibujo.

Paso 2

Añade la forma principal para la flecha que mira hacia la derecha, usando un rectángulo de 18 x 24 px, con un Trazo de 4 px de ancho (#152730) con Unión Redonda, que posicionaremos al lado opuesto del área activa de dibujo subyacente.

Paso 3

Termina el botón haciendo la forma que hemos creado en una flecha viendo hacia la derecha, asegurando de seleccionar y agrupar (Control-G) todas las formas que la componen, antes de proceder a la siguiente.

12. ¿Cómo Crear el Botón de Saltar hacia Atrás?

Luego, crearemos la versión reflejo del botón saltar en cuestión de segundos.

Crea una copia (Control-C > Control-F) del botón que hemos terminado, y posicionalo en la siguiente Mesa de Trabajo, asegurando de reflejarlo verticalmente, usando la herramienta Reflejo (clic-derecho > Transformar > Reflejar > Vertical).

13. ¿Cómo Crear el Botón Aleatorio?

Ve a la tercera fila de Mesas de Trabajo, y vamos a comenzar a trabajar con el botón Aleatorio.

Paso 1

Pon el modo de Previsualización de Pixel (Alt-Control-Y), y luego dibuja un trazado con forma de z, usando un Trazo de 4 px de Ancho (#EF8815B) con Extremo Redondeado, usando la imagen de referencia como tu guía principal Toma tu tiempo, y una vez que termines, sigue al siguiente paso.

Paso 2

Ajusta la fora del trazado que hemos creado, suavizando los puntos de ancla interior, usando la herramienta Convertir puntos de ancla seleccionados para suavizar, y luego reposicionando sus manecillas a una distancia de 6 px de su centro.

Paso 3

Mientras aún estás en el modo Previsualización de Pixel, dibuja la flecha pequeña apuntando a la derecha, usando la imagen de referencia como tu guía principal. Una vez que termines, selecciona y agrupa (Control-G) los dos trazados,asegurando de regresar al modo de Previsualización Por Defecto (Alt-Control-Y).

Paso 4

Termina el botón añadiendo su sección inferior, usando una copia (Control-C > Control-F) de las formas que hemos terminado de trabajar, que reflejaremos horizontalmente (clic-derecho > Transformar > Reflejar > Horizontal) y luego posicionaremos para que el trazado se superponga, como se ve en la imagen de referencia.

14. ¿Cómo Crear el Botón de Repetir?

Suponiendo que has terminado de trabajar con el botón de aleatorio, sigue a la siguiente Mesa de Trabajo, donde comenzaremos a trabajar en el botón de repetición.

Paso 1

Comienza creando la forma principal para la sección superior del botón, usando un rectángulo de 18 x 8 px, con un Trazo de 4 px de grosor (#152730), que alinearemos al borde izquierdo del área activa de dibujo, posicionándolo a una distancia de 6 px de su borde superior.

Paso 2

Ajusta la forma del rectángulo que hemos creado, poniendo el Radio de su esquina superior izquierda a 8 px, dentro de las Propiedades del Rectángulo del panel Transformar.

Paso 3

Continua ajustando la forma, seleccionando su punto de ancla inferior derecho, usando la Herramienta Selección Directa (A) y luego borrandolo presionando Suprimir, asegurando de poner la Extremo del trazado a Redondo.

Paso 4

Añade la pequeña flecha apuntando a la derecha, usando una copia (Control-C > Control-F) del botón anterior, que posicionaremos en el punto de ancla superior derecho del trazado ajustado, como se ve en la imagen de referencia. Una vez hecho, selecciona y agrupa los dos trazados, usando Control-G.

Paso 5

Termina el botón actual, creando su sección inferior, usando una copia (Control-C > Control-F) de las formas que hemos agrupado, que reflejaremos vertical y horizontalmente (clic-derecho > Transformar > Reflejar > Horizontal y Vertical) y luego posicionando como se ve en la imagen de referencia. Una vez hecho, selecciona y agrupa (Control-G) las dos secciones, antes de proceder al siguiente botón.

15. ¿Cómo Crear el Botón de Lista de Reproducción?

Luego, vamos a tomar un par de momentos y crear el botón de Crear Lista de Reproducción, así que asegúrate de que estés en una nueva Mesa de Trabajo.

Paso 1

Crea las pequeñas líneas horizontales, usando dos Trazos de 14 px de ancho y 4 px de grosor (#152730) con Extremo Redondeado, posicionado 4 px derriba de uno más pequeño de 4 px (#152730), que agruparemos (Control-G) y luego alinearemos al borde superior izquierdo del área activa de dibujo.

Paso 2

Comienza trabajando en la nota musical, creando su cuerpo inferior, usando una elipse de 10 x 8 px con un Trazo de 4 px (#EF815B), que alinearemos al borde inferior del área activa de dibujo, posicionandolo a una distancia de 4 px de su borde derecho.

Paso 3

Termina la nota musical, y con ella el icono, dibujando su línea, usando un Trazo de 4 px de ancho (#EF815B) con Extremo Redondeado y Uniones, usando la imagen de referencia como tu guía principal. Toma tu tiempo, y una vez que termines, selecciona y agrupa (Control-G) todas las formas que la componen, antes de proceder a la siguiente.

16. ¿Cómo Crear el Botón de Añadir a Lista de Reproducción?

Suponiendo que has terminado el botón anterior, asegúrate de que estés en la siguiente Mesa de Trabajo y comencemos nuestro siguiente elemento.

Paso 1

Crea líneas con detalles horizontales, usando dos Trazos de 24 px de ancho y 4 px de grosor (#152730), con Extremo Redondeado, verticalmente puestas 4 px derriba de las dos más pequeñas de 10 px (#152730), que agruparemos (Control-G) y luego alinearemos al centro del borde izquierdo del área de dibujo.

Paso 2

Comienza trabajando en el signo más, creando el segmento vertical, usando una línea de Trazo de 8 px de alto y 4 px de grosor (#EF815B), con un Extremo Redondeado, que alinearemos a borde inferior del área activa de dibujo, posicionandolo a una distancia de 4 px de su borde derecho.

Paso 3

Termina el signo más, y con ello, el botón, añadiendo el segmento horizontal, usando un Trazo de 8 px de grosor (#EF815B) con Extremo Redondeado, que alinearemos al centro del segmento anteriormente creado. Una vez hecho, selecciona y agrupa (Control-G) las dos, haciendo lo mismo para todo el botón.

17. ¿Cómo Crear el Botón de Descarga?

Ve a la cuarta y última fila de las Mesas de Trabajo, y vamos a comenzar con el botón número 13.

Paso 1

Crea la forma principal para la casilla, usando un rectángulo de 24 x 6 px, con un Trazo de 4 px de grosor (#EF815B) con Extremo Redondeado y Unión, que alinearemos al centro del borde inferior del área activa de dibujo.

Paso 2

Abre el trazado de la forma que hemos creado, añadiendo un nuevo punto de ancla, al centro de su borde superior, usando la Herramienta Añadir Punto de Ancla (+), que luego borraremos, usando la Herramienta Borrar Punto de Ancla (-).

Paso 3

Comienza trabajando en la flecha que mira hacia abajo, creando su cuerpo, usando un Trazo de 18 px de alto y 4 px de grosor (#152730) con un Extremo Redondeado, que alinearemos al centro del borde superior del área activa de dibujo.

Paso 4

Termina la flecha, y con eso el icono, dibujando una cabeza hacia abajo, usando un Trazo de 4 px de grosor (#152730) con un Extremo Redondeado y Unión. Una vez hecho, selecciona y agrupa (Control-G) las formas que componen la flecha, asegurando de hacer los mismo para todos los botones.

18. ¿Cómo Crear el Botón de Ecualizador?

Lo siguiente es el botón Ecualizador, que como puedes ver, es muy fácil de hacer.

Paso 1

Comienza creando tres columnas de 4 px de ancho y líneas de Trazo de 4 px de grosor (#152730), que pondremos verticalmente 2 px una de la otra, ambas vertical y horizontalmente.

Paso 2

Selecciona las tres filas de Trazo superior, y luego ajustalas, cambiando su color a #EF815B.

Paso 3

Termina el botón, seleccionando y borrando algunas de las líneas de segmento que la componen, como se ve en la imagen de referencia. Una vez hecho, selecciona y agrupa (Control-G) todas las restantes, antes de proceder al siguiente botón.

19. ¿Cómo Crear el Botón de Transmitir?

Suponiendo que has terminado de trabajar en el botón anterior, sigamos a la siguiente Mesa de Trabajo, y vamos a comenzar en el pequeño botón de Transmisión.

Paso 1

Crea la forma principal del botón, usando un rectángulo de 24 x 20 px, con un Trazo de 4 px de grosor (#152730) y un Extremo Redondeado y Unión, que alinearemos al centro del área activa de dibujo subyacente.

Paso 2

Ajusta la forma que hemos creado, cambiando al modo de Previsualización de Pixel (Alt-Control-Y) y luego añadiendo un nuevo punto de ancla de 4 px, de su esquina superior izquierda, seguido por otro posicionado 8 px de su esquina inferior derecha, usando la Herramienta Punto de Ancla (+).

Paso 3

Abre el trazado que hemos ajustado, seleccionando su punto de ancla inferior izquierdo, usando la Herramienta de Selección Directa (A), y luego borrandola, presionando Suprimir.

Paso 4

Comienza trabajando en la sección inferior izquierda, creando un círculo de 8 x 8 px, con un Trazo de 4 px de grosor (#EF815B), que posicionaremos como se ve en la imagen de referencia.

Paso 5

Crea un círculo un poco más grande de 20 x 20 px con el mismo Trazo de 4 px de grosor (#EF815B), que alinearemos al centro del que se hizo en el paso anterior.

Paso 6

Termina el botón seleccionando y borrando los puntos de ancla inferior e izquierdo de los dos círculos, agrupando las formas resultantes y las más grandes juntas, usando Control-G.

20. ¿Cómo Crear el Botón Compartir?

Ahora estamos en nuestro último botón número 16, así que asegúrate de que te has posicionado en la Mesa de Trabajo restante, y, ¡vamos a terminarlo!

Paso 1

Comienza creando el marco, usando un rectángulo de 24 x 16 px, con un Trazo de 4 px de grosor (#152730) con un Extremo Redondeado a Unión, que alinearemos al centro del borde inferior del área activa de dibujo, posicionandolo a una distancia de 2 px de el.

Paso 2

Ajusta la forma que hemos creado añadiendo un nuevo punto de ancla a una distancia de 4 px de su esquina superior izquierda, seguido de otro a una distancia de 6 px de su derecho inferior. Abre el trazado de la forma resultante, seleccionando su punto de ancla derecho, usando la Herramienta Selección Directa (A), y luego borrandolo presionando Suprimir.

Paso 3

Termina el botón actual, y con eso el proyecto mismo, añadiendo la flecha apuntando a la derecha, usando una copia (Control-C) del botón repetir, que pegaremos (Control-F) encima de la Mesa de Trabajo y luego ajustaremos acortando el largo de su cuerpo de 18 px a 16 px.

Una vez hecho, posiciona las formas resultantes como se ven en la imagen de referencia, asegurando de seleccionar y agrupar (Control-G) todas las formas que la componen antes de presionar ese botón de guardar.

¡Está Terminado!

Ahí lo tienes—un tutorial fácil sobre cómo crear tu propio grupo de botones de control. Como siempre, espero que hallas podido seguir cada paso, y más importante, aprendido un nuevo truco o dos en el camino.