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

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

by
Difficulty:BeginnerLength:LongLanguages:

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

Final product image
What You'll Be Creating

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
setting up a new document

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
setting up a custom grid

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
setting up the layers

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.

creating the main shape for the reference grid

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.

creating the main shape for the active drawing area

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.

adding the remaining reference grids

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.

creating and positioning the main shape for the play button

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 (-).

finishing off the play button

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.

creating and positioning the main shape for the stop button

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.

creating and positioning the main shape for the left section of the pause button

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.

finishing off the pause button

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.

creating and positioning the main shape for the record button

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.

finishing off the record button

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.

creating and positioning the main shape for the right arrow of the fast forward button

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 (-)

adjusting the shape of the right arrow of the fast forward button

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.

finishing off the fast forward button

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).

creating the fast backward button

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.

creating and positioning the main shape for the right section of the skip forward button

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.

creating and positioning the main shape for the left section of the skip forward button

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.

finishing off the skip forward button

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).

creating the skip backward button

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.

drawing the main shape for the upper section of the shuffle button

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.

adjusting the shape of the upper section of the shuffle button

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).

adding the arrowhead to the upper section of the shuffle button

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.

finishing off the shuffle button

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.

creating and positioning the main shape for the upper body of the repeat button

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.

adjusting the shape of the upper section of the repeat button

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.

removing the lower section from the upper body of the repeat button

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.

adding the arrowhead to the upper body of the repeat button

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.

finishing off the repeat button

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.

creating and positioning the main shape for the lower section of the musical note

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.

finishing off the playlist button

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.

creating the main shapes for the left section of the add to playlist button

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.

creating and positioning the main shape for the vertical section of the plus symbol

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.

finishing off the add to playlist button

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.

creating and positioning the main shape for the bottom section of the download button

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 (-).

opening up the path of the bottom section of the download button

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.

creating the main body for the down facing arrow of the download button

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.

finishing off the download button

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.

creating and positioning the main shapes for the eq button

Paso 2

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

adjusting the color of the eq button

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.

finishing off the eq button

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.

creating and positioning the main shape for the body of the cast button

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 (+).

adding a set of new anchor points to the body of the cast button

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.

adjusting the shape of the body of the cast button

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.

creating and positioning the smaller circle for the cast button

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.

creating and positioning the larger circle onto the cast button

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.

finishing off the cast button

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.

creating and positioning the main shape for the body of the share button

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.

opening up the path of the body for the share button

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.

finishing off the share button

¡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.

finished project preview
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.