En el siguiente tutorial aprenderás a crear una interfaz de reproductor de música para teléfonos móviles. Construiremos la interfaz utilizando una alineación perfecta de píxeles, técnicas de construcción de formas vectoriales de calidad, así como control de degradados e iluminación.

Paso 1

Pulsa Comando + N para crear un nuevo documento. Introduce 640 en la casilla de anchura y 960 en la de altura, luego haz clic en el botón Avanzado. Selecciona RGB, Pantalla (72ppi), y asegúrate de que la casilla Alinear nuevos objetos con cuadrícula de píxeles esté desmarcada antes de hacer clic en Aceptar. Ahora, activa la Cuadrícula (Ver > Cuadrícula) y la opción Ajustar a cuadrícula (Ver > Ajustar a cuadrícula).

A continuación, necesitarás una cuadrícula cada 5px. Ve a Edición > Preferencias > Guías y cuadrícula, introduce 5 en la casilla Línea de cuadrícula cada y 1 en la casilla Subdivisiones. También puedes abrir el panel de información (Ventana > Información) para obtener una vista previa con el tamaño y la posición de tus formas. No olvides establecer la unidad de medida en píxeles desde Edición > Preferencias > Unidades > Generales. Todas estas opciones aumentarán significativamente tu velocidad de trabajo.

Paso 2

Elige la herramienta Rectángulo (M) y crea una forma de 640 por 30px. Rellénala de negro, quita el color del trazo y colócala como se muestra en la siguiente imagen.

Paso 3

Elige la herramienta Rectángulo (M) y crea una forma de 640 por 200px. Rellénala con R=50, G=50, B=50, asegúrate de que no hay colores establecidos para el trazo, y colócala como se muestra en la siguiente imagen. Desactiva la opción Ajustar a cuadrícula (Ver > Ajustar a cuadrícula), luego ve a Edición > Preferencias > Generales, y asegúrate de que Incrementos de teclado esté establecido en 1px.

Selecciona esta nueva forma y haz dos copias delante (Comando + C > Comando + F > Comando + F). Selecciona la copia superior y pulsa la flecha hacia abajo una vez (para moverla 1px hacia abajo). Vuelve a seleccionar las dos copias, abre el panel Buscatrazos y haz clic en el botón Menos frente. Rellena la forma resultante con negro.

Paso 4

Vuelve a seleccionar el rectángulo grande creado en el paso anterior y haz dos nuevas copias delante (Comando + C > Comando + F > Comando + F). Selecciona la copia superior y muévela 1px hacia arriba. Vuelve a seleccionar ambas copias y haz clic en el botón Menos frente del panel Buscatrazos. De nuevo, rellena la forma resultante con negro.

Paso 5

Vuelve a seleccionar el rectángulo grande creado en el tercer paso y haz dos nuevas copias delante (Comando + C > Comando + F > Comando + F). Selecciona la copia superior y muévela 2px hacia abajo. Vuelve a seleccionar ambas copias y haz clic en el botón Menos frente del panel Buscatrazos. Rellena la forma resultante con el degradado lineal que se muestra en la imagen final.

Paso 6

Vuelve a seleccionar el rectángulo grande creado en el tercer paso y haz dos nuevas copias delante (Comando + C > Comando + F > Comando + F). Selecciona la copia superior y muévela 2px hacia arriba. Vuelve a seleccionar ambas copias y haz clic en el botón Menos frente del panel Buscatrazos. Rellena la forma resultante con el degradado lineal que se muestra en la imagen final.

Paso 7

Vuelve a seleccionar el rectángulo grande creado en el tercer paso, céntrate en el panel Apariencia y añade un segundo relleno utilizando el botón Añadir nuevo relleno. Es el icono blanco y cuadrado situado en la parte inferior del panel Apariencia. Selecciona este nuevo relleno, hazlo negro, baja su Opacidad al 7%, cambia el modo de fusión a Multiplicar, y ve a Efecto > Bosquejar > Papel con relieve. Introduce los datos que se muestran a continuación y haz clic en Aceptar.

Paso 8

Vuelve a seleccionar la forma editada en el paso anterior, añade dos nuevos rellenos y utiliza los degradados radiales que se muestran a continuación. Los ceros amarillos de las imágenes del degradado representan el porcentaje de Opacidad.

Paso 9

Vuelve a activar la opción Ajustar a cuadrícula (Ver > Ajustar a cuadrícula). Elige la herramienta Rectángulo (M) y crea una forma de 640 por 70px. Rellénala con el degradado lineal que se muestra a continuación y colócala como se muestra en la siguiente imagen. El número blanco de la imagen del degradado representa el porcentaje de ubicación.

Paso 10

Escoge la herramienta Rectángulo (L) y crea una forma de 590 por 10px. Rellénala de blanco, colócala como se muestra en la primera imagen y ve a Efecto > Estilizar > Redondear vértices. Introduce un radio de 5px, haz clic en OK, y ve a Objeto > Expandir apariencia. Selecciona la forma resultante y céntrate en el panel Apariencia. Primero, sustituye el blanco del relleno por un color oscuro (R=25, G=25, B=25).

A continuación, añade un trazo de 3 puntos para esta forma. Establece su color en R=15, G=15, B=15 y alinéalo al interior. Por último, vuelve a seleccionar este rectángulo redondeado, asegúrate de que no está seleccionado ningún relleno ni trazo (en el panel Apariencia), y ve a Efecto > Estilizar > Sombra paralela. Introduce los datos que se muestran a continuación y haz clic en Aceptar.

Paso 11

Vuelve a seleccionar la forma creada en el paso anterior y haz una copia delante (Comando + C > Comando + F). Selecciona esta copia y edita el degradado utilizado para el relleno (como se muestra en la primera imagen).

A continuación, necesitas enmascarar esta nueva forma. Elige la herramienta Rectángulo (M), crea una forma de 190 por 30px, rellénala de negro y colócala como se muestra en la segunda imagen.

Abre el panel Transparencia. Selecciona esta forma negra, junto con la copia creada al principio del paso, abre el menú desplegable del panel Transparencia, haz clic en Crear máscara de opacidad, y luego desmarca la casilla Recortar. Al final, tu rectángulo redondeado enmascarado debería tener el aspecto de la cuarta imagen mostrada.

Paso 12

Escoge la herramienta Rectángulo (M) y crea una forma de 640 por 90px. Rellénala con el degradado lineal que se muestra a continuación y colócala como se muestra en la siguiente imagen.

Paso 13

Desactiva la opción Ajustar a cuadrícula (Ver > Ajustar a cuadrícula). Selecciona la forma creada en el paso anterior y haz dos copias delante (Comando + C > Comando + F > Comando + F). Selecciona la copia superior y muévela 1px hacia abajo. Vuelve a seleccionar ambas copias y haz clic en el botón Menos frente del panel de Buscatrazos. Rellena la forma resultante con negro.

Vuelve a seleccionar la forma creada en el paso anterior y haz dos nuevas copias delante (Comando + C > Comando + F > Comando + F). Selecciona la copia superior y muévela 2px hacia abajo. Vuelve a seleccionar ambas copias y haz clic en el botón Menos frente del panel Buscatrazos. Rellena la forma resultante con R=90, G=90, B=90.

Paso 14

Vuelve a seleccionar el rectángulo creado en el paso 12, añade un segundo relleno y selecciónalo. Házlo negro, baja su Opacidad al 7%, cambia el modo de fusión a Multiplicar, y ve a Efecto > Bosquejar > Papel con relieve. Introduce los datos que se muestran a continuación y haz clic en Aceptar. Vuelve a seleccionar las tres formas creadas en los dos últimos pasos y agrúpalas (Comando + G).

Paso 15

Vuelve a activar la opción Ajustar a cuadrícula (Ver > Ajustar a cuadrícula). Selecciona el grupo creado en el paso anterior, haz cinco copias y colócalas como se muestra en la siguiente imagen.

Paso 16

Selecciona la herramienta Rectángulo (M) y crea una forma de 640 por 120px. Rellénala con R=50, G=50, B=50, y colócala como se muestra en la siguiente imagen.

Paso 17

Desactiva la opción Ajustar a cuadrícula (Ver > Ajustar a cuadrícula). Selecciona la forma creada en el paso anterior y haz dos copias delante (Comando + C > Comando + F > Comando + F). Selecciona la copia superior y muévela 1px hacia abajo. Vuelve a seleccionar ambas copias y haz clic en el botón Menos frente del panel Buscatrazos. Rellena la forma resultante con negro.

Paso 18

Vuelve a seleccionar la forma creada en el paso 16 y haz dos copias por delante (Comando + C > Comando + F > Comando + F). Selecciona la copia superior y muévela 2px hacia abajo. Vuelve a seleccionar las dos copias y haz clic en el botón Menos frente del panel Buscatrazos. Rellena la forma resultante con el degradado lineal que se muestra en la imagen final.

Paso 19

Vuelve a seleccionar la forma creada en el paso 16, añade un segundo relleno y utiliza el degradado radial que se muestra a continuación. Recuerda que el cero amarillo de la imagen del degradado representa el porcentaje de Opacidad.

Paso 20

Vuelve a activar la opción Ajustar a cuadrícula (Ver > Ajustar a cuadrícula). Escoge la herramienta Elipse (L), crea un círculo de 110px, y rellénalo con el primer degradado lineal mostrado abajo. Selecciona esta nueva forma y ve a Objeto > Trazado > Desplazamiento. Introduce un Desplazamiento de -2px y haz clic en Aceptar.

Duplica la forma resultante (Comando + C > Comando + F). Selecciona esta copia y muévela 2px hacia abajo. Selecciona estos dos círculos más pequeños y haz clic en el botón Menos frente del panel Buscatrazos. Rellena la forma resultante con el degradado lineal que se muestra en la imagen final.

Paso 21

Vuelve a seleccionar el círculo creado en el paso anterior, añade un segundo relleno y arrástralo en la parte inferior del panel Apariencia. Selecciónalo, rellénalo con el degradado radial que se muestra a continuación, y ve a Efecto > Trazado > Desplazamiento. Introduce un Desplazamiento de 3px y haz clic en Aceptar.

Asegúrate de que el círculo sigue seleccionado y añade un trazo 2. Establece su color en R=60, G=60, B=60, y alinéalo al interior. Añade un segundo trazo para esta forma usando el botón de Añadir nuevo trazo. Es el icono cuadrado negro situado en la esquina inferior izquierda del panel Apariencia.

Selecciona este nuevo trazo, hazlo de 1pt de ancho, establece su color en R=25, G=25, B=25, y alinéalo al interior. Vuelve a seleccionar tu círculo de 110px, asegúrate de que no hay relleno ni trazo seleccionado (en el panel Apariencia), y ve a Efecto > Estilizar > Sombra paralela. Introduce los datos que se muestran a continuación y haz clic en Aceptar.

Paso 22

Elige la herramienta Rectángulo (M), crea un cuadrado de 30px, rellénalo con R=240, G=241, B=241, y colócalo como se muestra en la primera imagen. Cambia a la herramienta Selección directa (A) y céntrate en esta nueva forma. Selecciona los puntos de anclaje de la derecha y ve a Objeto > Trazado > Promediar.

Marca el botón Ambos y haz clic en Aceptar. Tu cuadrado debería convertirse ahora en un triángulo. Selecciónalo y ve a Efecto > Estilizar > Redondear vértices. Introduce un radio de 2px y haz clic en Aceptar.

Paso 23

Selecciona todas las formas creadas en los últimos tres pasos, agrúpalas, (Comando + G) y coloca el grupo como se muestra en la siguiente imagen.

Paso 24

Escoge la herramienta Elipse (L), crea un círculo de 90px, y rellénalo con el degradado lineal que se muestra a continuación. Selecciona esta nueva forma y ve a Objeto > Trazado > Desplazamiento. Introduce un Desplazamiento de -2px y haz clic en Aceptar.

Ahora duplica la forma resultante (Comando + C > Comando + F). Selecciona esta copia y muévela 2px hacia abajo. Selecciona estos dos círculos más pequeños y haz clic en el botón Menos frente del panel Buscatrazos. Rellena la forma resultante con el degradado lineal que se muestra en la imagen final.

Paso 25

Vuelve a seleccionar el círculo creado en el paso anterior, añade un segundo relleno y arrástralo a la parte inferior del panel Apariencia. Selecciónalo, rellénalo con el degradado radial que se muestra a continuación, y ve a Efecto > Trazado > Desplazamiento. Introduce un Desplazamiento de 3px y haz clic en Aceptar. Asegúrate de que el círculo sigue seleccionado y añade un trazo de 2px.

Establece su color en R=60, G=60, B=60, y alinéalo al interior. Añade un segundo trazo para este círculo, hazlo de 1pt de ancho, establece su color en R=25, G=25, B=25, y alinéalo al interior.

Vuelve a seleccionar tu círculo de 90px, asegúrate de que no hay relleno ni trazo seleccionado (en el panel Apariencia), y ve a Efecto > Estilizar > Sombra paralela. Introduce los datos que se muestran a continuación y haz clic en Aceptar.

Paso26

Selecciona la herramienta Rectángulo (M), crea un cuadrado de 15px, rellénalo de blanco y colócalo como se muestra en la primera imagen. Pasa a la herramienta Selección directa (A) y céntrate en esta nueva forma.

Selecciona los puntos de anclaje de la izquierda y ve a Objeto > Trazado > Promediar. Marca el botón Ambos y haz clic en Aceptar. Duplica la forma triangular resultante y arrastra esta copia hacia la izquierda. Cambia a la herramienta Rectángulo (M), crea una forma de 5 por 15px, rellénala de blanco y colócala como se muestra en la tercera imagen.

Selecciona las tres formas creadas en este paso y agrúpalas (Comando + G). Selecciona este nuevo grupo y ve a Efecto > Estilizar > Redondear vértices. Introduce un radio de 1px y haz clic en Aceptar.

Paso 27

Selecciona todas las formas creadas en los últimos tres pasos, agrúpalas (Comando + G) y coloca el grupo como se muestra en la siguiente imagen.

Paso 28

Vuelve a seleccionar el grupo creado en el paso anterior y haz una copia delante (Comando + C > Comando + F). Selecciona esta copia del grupo, arrástrala hacia la derecha como se muestra en la primera imagen, y ve a Objeto > Transformar > Reflejar. Marca el botón Vertical y haz clic en Aceptar.

Paso 29

Selecciona la herramienta Rectángulo (M), crea una forma de 70 por 30px, rellénala de blanco y ve a Efecto > Estilizar > Redondear vértices. Introduce un radio de 10xp, haz click en OK y ve a Objeto > Expandir apariencia. Rellena la forma resultante con el primer degradado lineal que se muestra a continuación y haz dos copias delante (Comando + C > Comando + F > Comando + F).

Desactiva la opción Ajustar a cuadrícula (Ver > Ajustar a cuadrícula), selecciona la copia superior y muévela 1px hacia abajo. Vuelve a seleccionar ambas copias y haz clic en el botón Menos frente del panel Buscatrazos. Rellena la forma resultante con el segundo degradado lineal que se muestra en la siguiente imagen.

Paso 30

Vuelve a seleccionar el rectángulo redondeado creado en el paso anterior y añade un trazo de 2 puntos. Establece su color en R=25, G=25, B=25, y alinéalo al exterior.

Añade un segundo trazo para esta forma, hazlo de 1pt de ancho, establece su color en R=60, G=60, B=60, y alinéalo al exterior. Asegúrate de que no hay relleno ni trazo seleccionado y ve a Efecto > Estilizar > Sombra paralela. Introduce los datos que se muestran a continuación y haz clic en Aceptar.

Paso 31

Selecciona la herramienta Texto (T), haz clic en tu mesa de trabajo y añade el texto "Aleatorio". Usa la fuente Myriad con un tamaño de 14pt y establece el color en R=240, G=241, B=241.

Selecciona este texto, junto con las formas creadas en los dos últimos pasos, y agrúpalas (Comando + G). Vuelve a activar la opción Ajustar a cuadrícula (Ver > Ajustar a cuadrícula), selecciona el grupo y colócalo como se muestra en la siguiente imagen.

Paso 32

Selecciona la herramienta Rectángulo (M), crea una forma de 70 por 30px, rellénala de blanco y ve a Efecto > Estilizar > Redondear vértices. Introduce un radio de 10xp, haz clic en Aceptar y ve a Objeto > Expandir apariencia.

Rellena la forma resultante con el degradado lineal que se muestra a continuación y ve al panel Apariencia. Selecciona el relleno y ve a Efecto > Estilizar > Resplandor interior. Introduce los datos que se muestran a continuación y haz clic en Aceptar.

Paso 33

Vuelve a seleccionar el rectángulo redondeado creado en el paso anterior y añade un trazo de 2 puntos. Establece su color en R=25, G=25, B=25, y alinéalo al exterior. Añade un segundo trazo para esta forma, hazlo de 1pt de ancho, establece su color en R=60, G=60, B=60, y alinéalo al exterior. Asegúrate de que no hay relleno ni trazo seleccionado y ve a Efecto > Estilizar > Sombra paralela. Introduce los datos que se muestran a continuación y haz clic en Aceptar.

Paso 34

Selecciona la herramienta Texto (T) y añade el texto "Repetir". Utiliza la fuente Myriad con un tamaño de 14pt y establece el color en R=73, G=230, B=198. Selecciona este texto, junto con las formas creadas en los dos últimos pasos, y agrúpalas (Comando + G). Ahora coloca este nuevo grupo como se muestra a continuación.

Paso 35

Para el siguiente paso necesitarás una cuadrícula cada 1px. Ve a Edición > Preferencias > Guías y cuadrícula, e introduce 1 en la casilla Línea de cuadrícula cada. Selecciona la herramienta Rectángulo (M), crea una forma de 50 por 14px, rellénala de blanco y ve a Efecto > Estilizar > Redondear vértices. Introduce un radio de 3xp, haz clic en Aceptar y ve a Objeto > Expandir apariencia.

Rellena la forma resultante con el degradado lineal que se muestra a continuación y ve al panel Apariencia. Primero, añade un trazo de 2 puntos. Establece su color en R=15, G=15, B=15, y alinéalo al exterior. Añade un segundo trazo para esta forma, hazlo de 1pt de ancho, establece su color en R=70, G=70, B=70, y alinéalo al exterior. Asegúrate de que no hay relleno ni trazo seleccionado y ve a Efecto > Estilizar > Sombra paralela. Introduce los datos que se muestran a continuación y haz clic en Aceptar.

Paso 36

Elige la Herramienta Rectángulo (M), crea un cuadrado de 5px, rellénalo con R=25, G=25, B=25, y colócalo como se muestra en la primera imagen. Cambia a la herramienta Selección directa (A) y céntrate en esta nueva forma. Selecciona los puntos de anclaje de la izquierda y ve a Objeto > Trazado > Promediar. Marca el botón Ambos y haz clic en Aceptar.

Duplica la forma triangular resultante y arrastra la copia hacia la derecha, como se muestra en la tercera imagen. Duplica estos dos triángulos, rótalos y colócalos como se muestra en la cuarta imagen.

Paso 37

Vuelve a la "línea de cuadrícula cada 5px". Para ello, ve a Edición > Preferencias > Guías y cuadrícula, e introduce 5 en la casilla Línea de cuadrícula cada. Elige la herramienta Elipse (L), crea un círculo de 30px, rellénalo con el degradado lineal que se muestra a continuación y colócalo como se muestra en la primera imagen. Selecciona esta nueva forma y haz dos copias delante (Comando + C > Comando + F > Comando + F).

Desactiva la opción Ajustar a cuadrícula (Ver > Ajustar a cuadrícula), selecciona la copia superior y muévela 1px hacia abajo. Vuelve a seleccionar ambas copias y haz clic en el botón Menos frente del panel Buscatrazos. Rellena la forma resultante con el degradado lineal que se muestra en la imagen final.

Paso 38

Vuelve a seleccionar el círculo creado en el paso anterior y añade un trazo de 2 puntos. Establece su color en R=25, G=25, B=25, y alinéalo al exterior. Añade un segundo trazo para esta forma, hazlo de 1pt de ancho, establece su color en R=60, G=60, B=60, y alinéalo al exterior. Asegúrate de que no hay relleno ni trazo seleccionado y ve a Efecto > Estilizar > Sombra paralela. Introduce los datos que se muestran a continuación y haz clic en Aceptar.

Paso 39

Vuelve a activar la opción Ajustar a cuadrícula (Ver > Ajustar a cuadrícula). Selecciona las formas creadas en los dos últimos pasos y agrúpalas (Comando + G). Haz cinco copias de este grupo y colócalas como se muestra a continuación.

Paso 40

Elige la herramienta Rectángulo (M), crea una forma de 45 por 30px, rellénala con el degradado lineal que se muestra a continuación y ve a Efecto > Estilizar > Redondear vértices. Introduce un radio de 2xp, haz clic en Aceptar, y ve a Objeto > Expandir apariencia. Asegúrate de que la forma resultante está colocada como se muestra.

Paso 41

Desactiva la opción Ajustar a cuadrícula (Ver > Ajustar a cuadrícula), selecciona la forma creada en el paso anterior y haz dos copias delante (Comando + C > Comando + F > Comando + F). Selecciona la copia superior y muévela 1px hacia abajo. Vuelve a seleccionar ambas copias y haz clic en el botón Menos frente del panel Buscatrazos. Rellena la forma resultante con el degradado lineal que se muestra en la imagen final.

Paso 42

Vuelve a seleccionar el rectángulo redondeado creado en el paso 40 y añade un trazo de 2 puntos. Establece su color en R=25, G=25, B=25, y alinéalo al exterior. Añade un segundo trazo para esta forma, hazlo de 1pt de ancho, establece su color en R=60, G=60, B=60, y alinéalo al exterior.

Añade un segundo relleno para esta forma y arrástralo a la parte inferior del panel Apariencia. Selecciónalo, establece su color en R=70, G=70, B=70, y ve a Efecto > Trazado > Desplazamiento. Introduce un Desplazamiento de 2px, haz clic en Aceptar, y ve a Efecto > Deformar > Arco inferior. Introduce los datos que se muestran a continuación y haz clic en Aceptar.

Paso 43

Vuelve a activar la opción Ajustar a cuadrícula (Ver > Ajustar a cuadrícula). Selecciona las formas creadas en los tres últimos pasos y agrúpalas (Comando + G). Haz cinco copias de este grupo y colócalas como se muestra en la siguiente imagen.

Paso 44

Elige la herramienta Rectángulo (M), crea una forma de 110 por 35px, rellénala de blanco y ve a Efecto > Estilizar > Redondear vértices. Introduce un radio de 5xp, haz clic en OK, y ve a Objeto > Expandir apariencia. Asegúrate de que la forma resultante está colocada como se muestra en la primera imagen. Selecciónala, haz dos copias por delante (Comando + C > Comando + F > Comando + F), y desactiva la opción Ajustar a cuadrícula (Ver > Ajustar a cuadrícula).

Selecciona la copia superior y muévela 1px hacia abajo. Vuelve a seleccionar ambas copias y haz clic en el botón Menos frente del panel Buscatrazos. Rellena la forma resultante con el degradado lineal que se muestra en la imagen final de abajo.

Paso 45

Vuelve a seleccionar el rectángulo redondeado creado en el paso anterior, sustituye el blanco por el degradado lineal que se muestra a continuación y añade un trazo de 2 puntos. Establece su color en R=15, G=15, B=15, y alinéalo al exterior. Añade un segundo trazo para esta forma, hazlo de 1pt de ancho, establece su color en R=70, G=70, B=70, y alinéalo al exterior. Asegúrate de que no hay relleno ni trazo seleccionado y ve a Efecto > Estilizar > Sombra paralela. Introduce los datos que se muestran a continuación y haz clic en Aceptar.

Paso 46

Selecciona las formas creadas en los dos últimos pasos y agrúpalas (Comando + G). Haz una copia de este nuevo grupo y arrástralo hacia abajo como se muestra en la siguiente imagen. Selecciona el rectángulo redondeado dentro de esta copia del grupo, ve al panel Apariencia y abre el efecto Sombra paralela existente.

Reemplaza las propiedades existentes por las que se muestran en la siguiente imagen. El grupo superior representa el botón activo, mientras que el grupo inferior representa el botón inactivo.

Paso 47

Selecciona el grupo de botón inactivo, haz ocho copias y colócalas como se muestra en la siguiente imagen.

Paso 48

Enfócate en los botones inferiores, escoge la herramienta Texto (T), y añade algo de texto. Usa la fuente Myriad. Para el botón activo, pon el texto en negrita, establece el tamaño en 17pt y el color con R=150, G=150, B=150. Para los botones inactivos, establece el estilo de texto en cursiva y los colores en R=15, G=15, B=15, luego añade el discreto efecto de Sombra paralela que se muestra a continuación.

Paso 49

Continúa con la herramienta Texto (T) y añade un nuevo texto. Esta vez utiliza la fuente Calibri, establece el tamaño en 20pt, y el color en R=208, G=210, B=211, luego añade el efecto de Sombra paralela que se muestra a continuación.

Paso 50

Continúa con la herramienta Texto (T) y añade los números del 1 al 6 como se muestra en la siguiente imagen. Utiliza la fuente Myriad, con un tamaño de 15pt, y establece el color en R=150, G=150, B=150.

Paso 51

A continuación, tienes que editar el rectángulo redondeado que representa la canción que se está reproduciendo. Selecciónalo y enfócate en el panel Apariencia. En primer lugar, elimina el relleno inferior. Selecciona el relleno restante, sustituye el degradado existente por el que se muestra a continuación y ve a Efecto > Estilizar > Resplandor interior. Introduce los datos que se muestran a continuación y haz clic en Aceptar.

Vuelve al panel Apariencia, selecciona el trazo superior y sustituye el color existente por R=41, G=225, B=188. Vuelve a seleccionar este rectángulo redondeado, asegúrate de que no está seleccionado ningún relleno ni trazo, y ve a Efecto > Estilizar > Sombra paralela. Introduce los datos que se muestran a continuación y haz clic en Aceptar.

Paso 52

Elige la herramienta Texto (T) y añade un texto final. De nuevo, usa la fuente Myriad con un tamaño de 12pt.

Conclusión

Ya tu trabajo esta listo. Así es como debería lucir.

Y así una vez colocado en un diseño de teléfono.



Cómo crear una infografía sobre el cambio climático en Adobe InDesign

Ayuda a difundir los efectos del calentamiento global con esta infografía informativa sobre el cambio climático. Fácilmente adaptable a tu propia elección de datos y estadísticas, esta es una gran plantilla para crear un diseño único.

Configuraremos el diseño en Adobe InDesign y lo prepararemos para compartirlo en línea, en las redes sociales o en Pinterest.

¿Estás listo para correr la voz sobre el cambio climático? Empecemos...

Lo que necesitarás para crear tu infografía

Necesitarás acceso a Adobe InDesign y Adobe Photoshop para crear tu diseño. Si quieres crear gráficos circulares, también necesitarás tener a mano Adobe Illustrator. Además, necesitarás descargar las siguientes imágenes y archivos de fuentes:

• Foto del oso polar
• Fuente Charlevoix Pro, en grosor Regular y Bold
• Ilustración vectorial de peso de este conjunto de iconos

Si quieres personalizar tu diseño con más detalles de los iconos, puedes considerar el uso de algunos de los iconos de este conjunto de línea sobre energía o de este conjunto sobre el medio ambiente.

Una vez que hayas descargado las imágenes e instalado las fuentes en tu ordenador, estarás listo para empezar.

1. Cómo configurar tu documento infográfico

Paso 1

Abre InDesign y ve a Archivo > Nuevo > Documento. Elige Web para la Calidad en la parte superior, y deselecciona Páginas opuestas.

En Tamaño de página, ajusta el Ancho a 1800 px* y el Alto a 6950 px (puedes ajustar el alto más tarde si lo deseas utilizando la Herramienta de página).

Haz clic en OK para crear tu documento.

*Pinterest recomienda un ancho de imagen de 600 px. 1800 px es el triple de esa anchura recomendada, lo que significa que tu diseño se verá nítido y claro cuando se redimensione posteriormente.

Paso 2

Despliega el panel Capas (Ventana > Capas), y haz doble clic en la Capa 1 para abrir la ventana Opciones. Cambia el nombre de la capa por el de Fondo y haz clic en OK.

Haz clic en el botón Crear nueva capa en la parte inferior del panel y cambia el nombre de esta segunda capa por Foto. Luego crea una nueva capa final llamada Tipografía.

Bloquea todas las capas excepto la capa Fondo.

Paso 3

Es una buena idea crear una paleta de colores completa para utilizarla en todo tu diseño antes de empezar. A continuación te explicamos cómo hacerlo.

Expande el panel de Muestras (Ventana > Color > Muestras), y selecciona Nueva muestra de color en el menú desplegable del panel (arriba a la derecha).

Con el Tipo establecido en Cuatricromía y el Modo en RGB, ajusta los niveles de Rojo, Verde y Azul hasta que hayas creado el resultado deseado.  Haz clic en Añadir y luego en OK.

Repite este proceso para crear más muestras RGB, construyendo una paleta completa. Para crear la paleta utilizada en el diseño que se muestra aquí, crea las siguientes muestras:

• R=251, G=252, B=247
• R=224, G=110, B=9
• R=164, G=104, B=13
• R=118, G=81, B=37
• R=229, G=35, B=47
• R=168, G=217, B=232
• R=83, G=172, B=188
• R=45, G=4, B=11
• R=116, G=194, B=206
• R=47, G=154, B=172
• R=0, G=127, B=159
• R=51, G=52, B=80

Paso 4

También puedes crear dos muestras de degradado eligiendo Nueva muestra de degradado en el menú del panel. Aquí, podemos crear un "Degradado de calor" y un "Degradado de inundación" para crear efectos contrastantes en el diseño.

Para la muestra de Degradado de calor, establece el Tipo a Radial y elige Muestras para el Color de tope. A continuación, elige una muestra de color rojo más oscuro para un tope y una muestra de color naranja para el otro.

Para la muestra de Degradado de inundación, elige un azul pálido para un tope y [Papel] (blanco) para el otro.

Paso 5

Con las reglas visibles (Ver > Mostrar reglas), arrastra una guía hacia abajo desde la regla superior, hasta la posición Y 1865 px (puedes ver esto en el panel de controles superior).

Arrastra una segunda guía hasta 3780 px, una tercera hasta 4540 px y una última hasta 5385 px. Esto secciona la página, ahora lista para aplicar nuestro color de fondo.

2. Cómo crear un fondo en tu maquetación

Paso 1

Toma la Herramienta Rectángulo (M) y arrástrala a través de la sección superior de la página, extendiéndola hasta la primera guía. En el panel Muestras, establece el Relleno en una muestra de color azul cielo.

Crea más formas de rectángulo, rellenando cada sección designada con un color, graduando desde el azul marino pálido hasta el azul intenso hacia la parte inferior.

Paso 2

Acerca el zoom a la parte inferior de la página. Utiliza la Herramienta Pluma (P) para dibujar una forma aproximada, imitando las curvas arenosas del fondo del océano. Ajusta el Relleno a un tono melocotón oscuro.

Edición > Copiar, Edición > Pegar la forma, y muévela hacia abajo, cubriendo completamente el fondo de la página. Ajusta el Relleno a un tono beige.

Paso 3

Desplázate hacia la parte superior de la página.

Utiliza la Herramienta Pluma (P) para dibujar una línea recta a través de la guía superior (debajo de la primera sección coloreada), y luego tira de ella hacia abajo y trabaja a través, creando una ilustración dentada. Esto da la impresión de la parte inferior de un iceberg.

Une la ilustración en una forma completa y ajusta el Relleno a [Papel].

Despliega el panel de Trazo (Ventana > Trazo), y ajusta el Grosor del trazo a 6 pt y el Tipo a Barra inclinada a la derecha, para dar al diseño algo de textura.

Finalmente, dirígete a Objeto > Efectos > Sombra paralela. Baja la Opacidad al 10% y ajusta el Color de efecto (haciendo clic en el cuadrado de color junto al menú Modo en la parte superior) a un tono azul ligeramente contrastado para que la sombra parezca sutil y natural.

Haz clic en OK para salir.

3. Cómo editar la foto para tu infografía

Paso 1

Dirígete a Archivo > Guardar para guardar tu diseño, y minimiza la ventana por un momento. Abre la foto del oso polar en Photoshop.

Duplica la capa Fondo para mantener una copia de la imagen intacta, y desactiva su visibilidad.

A continuación, utiliza la Herramienta Lazo (L) para seccionar un área alrededor del borde de la silueta del oso. El objetivo es aislar la imagen del fondo.

Una vez que hayas seleccionado un área, haz clic en el botón Perfeccionamiento de borde en el panel superior de Controles, y marca Radio inteligente. Ajusta los controles deslizantes hasta que estés satisfecho con la precisión de la selección, antes de hacer clic en OK.

A continuación, pulsa Suprimir en el teclado para eliminar la selección.

Recorre toda la imagen hasta eliminar todo el fondo.

Paso 2

La imagen tendrá un aspecto más elegante en el diseño final si la convertimos a blanco y negro.

Dirígete a Imagen > Ajustes > Mezclador de canales. Marca la opción Monocromo en la parte inferior de la ventana y ajusta los niveles hasta que estés satisfecho con el resultado. Haz clic en OK.

A continuación ve a, Archivo > Guardar como la imagen como un archivo de Photoshop (.psd), que conservará el fondo transparente y la calidad de la imagen.

Paso 3

Regresa a tu documento de InDesign y bloquea la capa Fondo. Desbloquea la capa de arriba, Foto.

Utiliza la Herramienta Marco Rectángulo (F) para crear un marco de imagen sobre la parte superior de la ilustración del iceberg y la parte inferior de la sección de color azul cielo.

Selecciona Archivo > Colocar, elige la imagen de Photoshop y Abrir.

Paso 4

Con el marco de la imagen seleccionado, ve a Objeto > Efectos > Transparencia, y ajusta el Modo a Luz fuerte. Haz clic en OK.

A continuación, selecciona el marco de la imagen y Edición > Copiar, y Edición > Pegar en mismo sitio, creando una segunda copia de la imagen una capa encima de la original. Vuelve a la ventana de Efectos y ajusta el Modo a Normal y la Opacidad al 50%.

4. Cómo dar formato a la tipografía para tu infografía

Paso 1

Bloquea la capa de Foto y desbloquea la capa superior, Tipografía.

Utiliza la Herramienta Texto (T) para crear un marco de texto en la parte superior de la página y escribe el título de la infografía.

Desde el panel de Controles en la parte superior del espacio de trabajo o los paneles de Carácter y Párrafo (Ventana > Texto y Tablas > Carácter), ajusta la Fuente a Charlevoix Pro Bold, Tamaño 140 pt, Tracking 40, y Alinear al Centro. Ajusta el Color de la fuente a [Papel] en el panel Muestras.

Para crear un borde alrededor del título, haz clic en el marco de texto con la Herramienta de Selección (V, Escape), y establece el Trazo del marco en [Papel] desde el panel Muestras. Luego ve a Objeto > Opciones de marco de texto y aumenta el valor de Margen (aquí, a 30 px) hasta que el texto esté bien centrado en el marco.

También puedes crear un marco de texto debajo del título principal para un subtítulo si lo deseas. Establece el texto en Charlevoix Pro Regular.

Paso 2

Crea otro marco de texto y pon una capa encima de la foto del oso polar. Escribe "2050" y establece el Color de la fuente en Degradado de calor. Establece la Fuente a Bebas Neue y haz que el Tamaño de la fuente sea muy generoso (alrededor de 600 pt).

También puedes ajustar la configuración de la Transparencia en la ventana de Efectos a Multiplicar, para que aparezca parte de la foto que hay debajo.

Paso 3

Crea un marco de texto en la parte superior izquierda del oso polar y escribe tu primer hecho. Por supuesto, puedes adaptarlo a cualquier estadística que quieras presentar.

Establece la Fuente en Charlevoix Pro y juega con las proporciones del texto, ajustando el Tamaño de la fuente, el interlineado y el Color de la fuente para crear una jerarquía en el párrafo y destacar las palabras clave.

Paso 4

Puedes crear "apuntadores" para elementos de texto utilizando la Herramienta Línea (\). En el panel Trazo, establece el Tipo como Círculo sólido.

Añade créditos para cada estadística en un marco de texto separado, configurado con un Tamaño de fuente menor.

Paso 5

Puedes crear flechas utilizando la Herramienta Línea (\) y el panel Trazo también, aunque generalmente prefiero utilizar la Herramienta Línea para crear tanto el tronco como la cabeza de la flecha, lo que me permite controlar las proporciones exactas de la flecha.

Aquí he creado una flecha a la derecha del oso polar, antes de poner una estadística en Charlevoix Pro Bold en un marco de texto al lado de esta. He ajustado el Color de la fuente a Degradado de calor para lograr un mayor impacto.

Continúo construyendo el texto alrededor de esta estadística clave, con una fuente Charlevoix Pro Regular más sencilla y un Color de fuente en [papel].

Paso 6

Una vez que hayas diseñado una estadística, puedes utilizarla como modelo para crear otras, copiando y pegando.

Aquí he pegado la flecha y los marcos de texto en el centro de la sección del iceberg, y he ajustado el contenido del texto y el Color de la fuente.

Una vez que estés completamente satisfecho con el formato y la disposición del texto, puedes dirigirte a Texto > Crear contornos para vectorizar este texto*. Esto te permite escalar el grupo fácilmente para adaptarlo a tu diseño.

*Ten en cuenta que esto te impedirá aplicar otros formatos, como ajustar el tracking, etc., por lo que sería conveniente pegar una copia de tu texto original en la mesa de trabajo junto a la página.

Paso 7

Puedes añadir iconos a tu infografía de forma rápida y sencilla abriendo un conjunto vectorial de iconos en Illustrator, antes de copiar y pegar iconos individuales.

Aquí, he pegado un icono de peso de este conjunto de balanzas y reglas, antes de ajustar el Relleno a una muestra de color blanco.

Adorna tus diseños de iconos con flechas y texto, y resalta las cifras o palabras clave con un color que contraste.

Paso 8

También puedes crear iconos de flechas de sección utilizando la Herramienta Elipse (L) y manteniendo pulsada la tecla Mayús para crear un pequeño círculo hacia la parte inferior de una sección de color.

Utiliza la Herramienta Pluma (P) para crear una forma de flecha simple dentro del círculo.

Haz clic con el botón derecho del ratón > Agrupar los elementos para crear un icono que sea fácil de copiar y pegar.

Sigue acumulando estadísticas a lo largo de tu infografía, variando los Colores de las fuentes para conseguir contraste e interés.

Paso 9

Para crear un gráfico circular, necesitaremos la breve ayuda de Illustrator. Minimiza tu documento de InDesign y abre Illustrator.

Utiliza la Herramienta Elipse (L) y mantén pulsada la tecla Mayúsculas para crear un círculo en la mesa de trabajo, configurándolo para que no tenga relleno y un trazo grueso (alrededor de 50 pt).

Ve a Objeto > Trazado > Trazo de contorno.

Luego dirígete a Edición > Copiar.

Paso 10

Vuelva a tu documento de InDesign y selecciona Edición > Pegar el círculo en la página, colocándolo en el centro de una sección coloreada. Ajusta el color a una muestra pálida.

Ve a Edición > Pegar, Edición > Pegar en mismo lugar el círculo directamente sobre el primero y ajusta el color a una muestra que contraste.

A continuación, coge la Herramienta de Tijeras (C) y recorta los lados del círculo de arriba, aislando una sección del "pastel" para que coincida aproximadamente con el porcentaje de tu estadística.

Paso 11

También puedes añadir gráficos de barras a tu infografía, que son más fáciles de hacer directamente en InDesign.

En primer lugar, utiliza la Herramienta líneas (\) para crear dos flechas, una que apunte hacia arriba y la otra hacia la derecha.

A continuación, utiliza la Herramienta Rectángulo (M) para crear "barras" en el gráfico. Puedes suavizar los vértices de estas yendo a Objeto > Opciones de vértice y ajustando la Forma a Redondeado.

Añade leyendas debajo de la flecha inferior y encima de cada barra si lo deseas.

He utilizado la muestra de Degradado de inundación para hacer que el título principal del gráfico de barras destaque realmente.

5. Cómo exportar tu diseño para la web

Paso 1

Cuando hayas terminado tu diseño infográfico, asegúrate de ir a Archivo > Guardar todo tu trabajo.

Para exportar el diseño listo para compartirlo en línea, dirígete a Archivo > Exportar. Elige JPEG o PNG en el menú Formato de la parte inferior de la ventana y dale un nombre adecuado a la imagen.

Haz clic en Guardar.

Paso 2

En la ventana de opciones de exportación, puedes ajustar la configuración de la imagen para que sea adecuada para subirla a Internet. Ajusta la Calidad a Media o Alta, establece la Resolución a 72 ppp, y asegúrate de que el Espacio de Color está establecido en RGB.

Finalmente, haz clic en Exportar para crear tu imagen lista para la web.

¡Un trabajo increíble! ¡Tu infografía está terminada!

Conclusión: Tu infografía terminada

Con tu infografía exportada, es hora de subirla a Internet y difundir el impacto del calentamiento global en el cambio climático y medioambiental. ¿O por qué no la imprimes y la pones en el tablón de anuncios de tu universidad o lugar de trabajo?

Si buscas más recursos para tus diseños infográficos, puedes encontrar un montón de iconos temáticos en GraphicRiver y plantillas infográficas listas para editar en Envato Elements.