Cómo crear una interfaz de juego de bloques en Illustrator

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

En el siguiente tutorial aprenderás a crear una interfaz de juego de bloques en Adobe Illustrator CS5. Los gráficos vectoriales de los juegos permiten un trabajo artístico versátil. El flujo de trabajo presentado en este tutorial te enseñará a crear gráficos de juegos en Illustrator. Estas técnicas pueden aplicarse a múltiples proyectos de diseño de interfaces y de juegos. Es hora de comenzar, aprender a crear estas formas y darles una colorida profundidad gráfica.

Paso 1

Pulsa Comando + N para crear un nuevo documento. Introduce 660 en la casilla de anchura y 600 en la de altura, y haz clic en el botón Avanzado. Selecciona RGB, Pantalla (72ppi), y asegúrate de que la casilla Alinear con cuadrícula de píxeles esté desmarcada antes de hacer clic en Aceptar. Ahora, activa la Cuadrícula (Vista > Cuadrícula) y la opción Ajustar a Cuadrícula ( Vista > Ajustar a Cuadrícula).

A continuación, necesitarás una cuadrícula cada 5px. Ve a Edición > Preferencias > Guías > Cuadrícula, introduce 5 en la casilla Línea de cuadrícula cada y 1 en la casilla Subdivisiones. También puedes abrir el panel de información (Ventana > Información) para obtener una vista previa con el tamaño y la posición de tus formas. No olvides cambiar la unidad de medida a píxeles desde Edición > Preferencias > Unidades > Generales. Todas estas opciones aumentarán significativamente tu velocidad de trabajo.

Paso 2

Elige la herramienta Rectángulo (M) y crea una forma de 350 por 490px. La opción Ajustar a cuadrícula te facilitará el trabajo. Rellénala con R=50, G=50, B=50. Ahora elimina el color del trazo y ve a Efecto > Estilizar > Redondear vértices. Introduce un radio de 5px, haz clic en OK, y ve a Objeto > Expandir apariencia.

Paso 3

Desactiva la cuadrícula (Vista > Mostrar cuadrícula) y la opción Ajustar a cuadrícula (Vista > Ajustar a cuadrícula). Ve a Edición > Preferencias > Generales y asegúrate de que Incrementos de teclado está fijado en 1px. Vuelve a seleccionar la forma creada en el paso anterior y ve a Objeto > Trazado > Desplazamiento. Introduce un Desplazamiento de -3px y haz clic en OK.

Selecciona la forma resultante y haz una copia delante (Comando + C > Comando + F). Selecciona esta copia y pulsa la flecha hacia abajo una vez. Vuelve a seleccionar las dos formas creadas en este paso y haz clic en el botón Menos frente del panel Buscatrazos (Ventana > Buscatrazos). Rellena la forma resultante con R=109, G=110, B=113.

Paso 4

Nuevamente, selecciona la forma creada en el segundo paso y ve a Objeto > Trazado > Desplazamiento. Introduce un Desplazamiento de -3px y haz clic en Aceptar. Selecciona la forma resultante y haz una copia delante (Comando + C > Comando + F).

Selecciona esta copia y pulsa la flecha hacia arriba una vez. Vuelve a seleccionar las dos formas creadas en este paso y haz clic en el botón Menos frente del panel Buscatrazos. Rellena la forma resultante con R=109, G=110, B=113.

Paso 5

Vuelve a seleccionar la forma creada en el segundo paso, muévete al panel de Capas, haz doble clic en ella y nómbrala "Principal". Asegúrate de que esta forma sigue seleccionada, ve al panel Apariencia (Ventana > Apariencia) y haz clic en el botón Añadir nuevo relleno. Es el pequeño cuadrado blanco de la parte inferior del panel Apariencia.

Obviamente, esto añadirá un nuevo relleno para tu forma. Selecciónalo en el panel Apariencia y utiliza el degradado lineal que se muestra a continuación. El cero amarillo de la imagen del degradado representa el porcentaje de opacidad.

Paso 6

Vuelve a seleccionar "Principal", añade un tercer relleno y selecciónalo en el panel Apariencia. Hazlo negro, arrástralo a la parte inferior del panel Apariencia, baja su Opacidad al 15% y ve a Efecto > Trazado > Desplazamiento. Introduce un Desplazamiento de 1px, haz clic en OK y ve a Efecto > Distorsionar y Transformar > Transformar. Introduce los datos que se muestran a continuación y haz clic en Aceptar.

Paso 7

Vuelve a seleccionar "Principal" y céntrate en el panel Apariencia. Ajusta el color del trazo a R=167, G=169, B=172. Hazlo de 4pt de ancho y alinéalo al interior.

Paso 8

Vuelve a seleccionar "Principal" y céntrate en el panel Apariencia. Selecciona el trazo añadido en el paso anterior y haz clic en Duplicar seleccionado. Es el pequeño icono de archivo de la parte inferior del panel Apariencia. Obviamente, esto añadirá una copia del trazo. Selecciona este nuevo trazo, establece su color en R=35 G=31 B=32, y disminuye el tamaño a 3pt.

Paso 9

Vuelve a seleccionar "Principal", céntrate en el panel Apariencia y añade dos nuevos trazos. Selecciona el primero, establece su color en R=128 G=130 B=133, y el tamaño en 1.5pt. Selecciona el otro trazo nuevo, hazlo negro, alinéalo al exterior y establece el tamaño en 1pt.

Paso 10

Vuelve a seleccionar "Principal" y céntrate en el panel Apariencia. Asegúrate de que no hay ningún relleno o trazo seleccionado y ve a Efecto > Estilizar > Sombra paralela. Introduce los datos que se muestran a continuación y haz clic en Aceptar.

Paso 11

Vuelve a activar la Cuadrícula ( Vista > Mostrar Cuadrícula) y la opción Ajustar a cuadrícula ( Vista > Ajustar a cuadrícula). Elige la herramienta Rectángulo (M), crea una forma de 20 por 20px y rellénala con R=88, G=89, B=91. Selecciona este cuadrado y ve a Objeto > Trazado > Desplazamiento. Introduce un Desplazamiento de -1px y haz clic en Aceptar.

Selecciona la forma resultante y ve de nuevo a Objeto > Trazado > Desplazamiento. Introduce un Desplazamiento de -3px y haz clic en Aceptar. Selecciona la forma resultante junto con la forma previamente creada y haz clic en el botón Menos frente del panel Buscatrazos. Rellena la forma resultante con R=65, G=64, B=66.

Paso 12

Elige la herramienta Pluma (P) y dibuja un simple trazado horizontal como se muestra en la primera imagen. La opción Ajustar a cuadrícula debería facilitar tu trabajo. Selecciona este trazado nuevo, junto con la forma más oscura creada en el paso anterior y, haz clic en el botón Dividir del panel Buscatrazos.

Esto creará un grupo con cuatro formas simples. Echa un vistazo al panel de capas y céntrate en este grupo. Primero, selecciona los dos triángulos y elimínalos. A continuación, desagrupa las dos formas restantes (Mayúsculas + Comando + G). Finalmente, rellena la forma superior izquierda con R=109, G=110, B=113. Asegúrate de que la otra forma sigue rellenada con R=65, G=64, B=66.

Paso 13

Vuelve a seleccionar el cuadrado gris creado en el undécimo paso, haz una copia delante (Comando + C > Comando + F) y llévala al frente (Mayúsculas + Comando + Tecla de corchete derecho). Rellena esta nueva forma con negro, baja su Opacidad al 7%, cambia el modo de fusión a Multiplicar y ve a Efecto > Artístico > Grano de película. Introduce los datos que se muestran a continuación y haz clic en Aceptar

Paso 14

Vuelve a seleccionar la forma creada en el paso anterior y haz una copia delante (Comando + C > Comando + F). Escoge la herramienta Elipse (L), crea una forma de 40 por 20px y colócala como se muestra en la segunda imagen. Selecciona este círculo comprimido, junto con la nueva copia, y haz clic en el botón Intersectar del panel Buscatrazos. Rellena la forma resultante con blanco y baja su Opacidad al 25%.

Paso 15

Vuelve a seleccionar el cuadrado gris creado en el undécimo paso y céntrate en el panel Apariencia. Añade un trazo negro de 2 puntos y alinéalo al interior. Selecciona todas las formas creadas en los últimos cuatro pasos y agrúpalas (Comando + G).

Paso 16

Selecciona el grupo creado en el paso anterior y colócalo como se muestra en la siguiente imagen. Una vez más, la función "Ajustar a cuadrícula" te facilitará el trabajo.

Paso 17

Vuelve a seleccionar el grupo movido en el paso anterior, baja su Opacidad al 15%, y ve a Efecto > Distorsionar y Transformar > Transformar. Introduce los datos que se muestran en la ventana de la izquierda, haz clic en Aceptar, y luego ve de nuevo a Efecto > Distorsionar y transformar > Transformar. Introduce los datos que se muestran en la ventana de la derecha y haz clic en Aceptar.

Paso 18

Escoge la herramienta Rectángulo (M), crea una forma de 20 por 20px, y rellénala con R=0, G=165, B=224. Selecciona este cuadrado azul y ve a Objeto > Trazado > Desplazamiento. Introduce un Desplazamiento de -4px y haz clic en Aceptar. Selecciona la forma resultante, haz una copia delante (Comando + C > Comando + F), y desactiva la opción Ajustar a cuadrícula (Vista > Ajustar a cuadrícula).

Selecciona esta copia y pulsa la flecha hacia arriba y la flecha hacia la derecha una vez. Vuelva a seleccionar esta copia, junto con la forma original, y haz clic en el botón Menos frente del panel Buscatrazos. Rellena la forma resultante con blanco, baja su Opacidad al 25%, y toma la herramienta Eliminar punto de anclaje(-).

Asegúrate de que esta forma blanca y delgada sigue seleccionada y haz clic en los dos puntos de anclaje (mostrados con flechas en la cuarta imagen mostrada). Al final tu forma debería ser como la quinta imagen mostrada.

Paso 19

Vuelve a seleccionar el cuadrado azul y ve a Objeto > Trazado > Desplazamiento. Introduce un Desplazamiento de -1px y haz clic en Aceptar. Selecciona la forma resultante y ve de nuevo a Objeto > Trazado > Desplazamiento. Introduce un Desplazamiento de -3px y haz clic en Aceptar. Selecciona las dos formas creadas hasta el momento y haz clic en el botón Menos frente del panel Buscatrazos. Rellena la forma resultante con R=28, G=117, B=188.

Paso 20

Vuelve a activar la opción Ajustar a cuadrícula (Vista > Ajustar a cuadrícula). Elige la herramienta Pluma (P) y dibuja un trazado horizontal como se muestra en la primera imagen. Selecciónalo, junto con la forma creada en el paso anterior, y haz clic en el botón Dividir del panel Buscatrazos.

Echa un vistazo al panel Capas y céntrate en el grupo resultante. En primer lugar, elimina las formas triangulares y, a continuación, desagrupa las dos formas restantes (Mayúsculas + Comando + G). Por último, rellena la forma superior izquierda con R=0, G=224, B=255.

Paso 21

Vuelve a seleccionar el cuadrado azul, añade un trazo negro de 2 puntos y alinéalo al interior. Selecciona todas las formas creadas en los últimos tres pasos y agrúpalas (Comando + G). Muévete al panel de Capas, haz doble clic en este nuevo grupo y nómbralo "Bloque Azul".

Paso 22

Selecciona el "Bloque Azul ", haz seis copias y alinéalas en una columna simple (como se muestra en la siguiente imagen). Céntrate en estas copias del grupo y sustituye los colores existentes por los que se muestran a continuación. Cuando hayas terminado, pasa al panel de capas y cambia el nombre de estos nuevos grupos en función del color del bloque general.

Paso 23

Ahora que tienes todos los bloques que necesitas, vamos a crear las piezas de bloque. Comienza con los bloques azules y continúa con el resto. Agrupa siempre los bloques que componen una pieza de bloque. Esto te facilitará el trabajo en los pasos posteriores.

Paso 24

Añade algunas de esas piezas de bloque como se muestra a continuación.

Paso 25

Elige la herramienta Rectángulo (M), crea una forma de 100 por 20px, y colócala como se muestra en la siguiente imagen. Ahora rellénala con R=65, G=64, B=66. Elimina el color del trazo y ve a Efecto > Estilizar > Redondear vértices. Introduce un radio de 10px, haz clic en OK y ve a Objeto > Expandir apariencia.

Paso 26

Desactiva la opción Ajustar a cuadrícula (Vista > Ajustar a cuadrícula). Selecciona la forma creada en el paso anterior, envíala hacia atrás (Mayúsculas + Comando + Tecla de corchete izquierdo), y haz dos copias por delante (Comando + C > Comando + F > Comando + F). Selecciona la copia superior y pulsa la flecha arriba y la flecha izquierda una vez. Vuelve a seleccionar las dos copias y haz clic en el botón Menos frente del panel Buscatrazos. Rellena la forma resultante con negro.

Paso 27

Vuelve a seleccionar la forma gris creada en el paso 25 y haz dos nuevas copias delante. De nuevo, selecciona la copia superior y esta vez pulsa la flecha arriba y la flecha izquierda dos veces. Vuelve a seleccionar las dos copias y haz clic en el botón Menos frente del panel Buscatrazos. Rellena la forma resultante con R=147, G=149, B=152.

Paso 28

Vuelve a seleccionar el rectángulo redondeado creado en el paso 25 y céntrate en el panel Apariencia. Añade un nuevo relleno y utiliza el degradado lineal que se muestra en la primera imagen. Añade un tercer relleno para esta forma, hazlo negro, baja su Opacidad al 10%, cambia el modo de fusión a Multiplicar y ve a Efecto > Artístico > Grano de película. Introduce los datos que se muestran a continuación y haz clic en Aceptar.

Continúa en el panel Apariencia y añade el primer trazo. Hazlo de 2pt de ancho, establece su color en R=209 G=211 B=212, y alinéalo al interior. Añade un segundo trazo para este trazado, hazlo de 1pt de ancho, y establece el color en R=147, G=14, B=152. Asegúrate de que está alineado al interior.

Paso 29

Vuelve a seleccionar el rectángulo redondeado editado en el paso anterior y haz una copia delante. Selecciona esta copia y pulsa la tecla D de tu teclado. Esto añadirá las propiedades por defecto para tu forma (relleno blanco y un trazo negro de 1pt). Elimina el color del trazo.

Ahora, selecciona esta forma blanca, junto con el rectángulo redondeado original, y ve al panel de Transparencia. Abre el menú desplegable y haz clic en Crear máscara de opacidad.

Paso 30

Vuelve a activar la opción Ajustar a cuadrícula. Selecciona todas las formas creadas en los últimos cinco pasos y agrúpalas. Haz dos copias de este grupo y colócalas como se muestra en la siguiente imagen.

Paso 31

Concéntrate en el grupo superior creado en el paso anterior y elige la herramienta Rectángulo (M). Crea una forma de 90 por 80px y colócala como se muestra en la siguiente imagen. Rellénala con R=65 G=64 B=66, elimina el color del trazo y aplica Efecto > Estilizar > Redondear vértices. Introduce un radio de 10px, haz clic en OK, y ve a Objeto > Expandir apariencia.

Paso 32

Desactiva la opción Ajustar a cuadrícula. Selecciona la forma creada en el paso anterior y ve a Objeto > Trazado > Desplazamiento. Introduce un Desplazamiento de -2px y haz clic en Aceptar. Selecciona la forma resultante y haz una copia delante. Selecciona esta copia y pulsa la flecha hacia arriba una vez. Vuelve a seleccionar las dos formas creadas en este paso y haz clic en el botón Menos frente del panel Buscatrazos. Rellena la forma resultante con R=209, G=211, B=212.

Paso 33

Vuelve a seleccionar el rectángulo redondeado creado en el paso 31 y céntrate en el panel Apariencia. Añade un nuevo relleno y utiliza el degradado lineal que se muestra a continuación. Añade un tercer relleno para esta forma, hazlo negro, baja su Opacidad al 10%, cambia el modo de fusión a Multiplicar y ve a Efecto > Artístico > Grano de película. Introduce los datos que se muestran a continuación y haz clic en Aceptar.

Continúa en el panel Apariencia y añade el primer trazo. Hazlo de 2pt de ancho, establece su color en R=147 G=149 B=152, y alinéalo al interior. Añade un segundo trazo para este trazado, hazlo de 1pt de ancho, establece el color en R=0 G=0 B=0, y asegúrate de que está alineado al interior.

Paso 34

Vuelve a seleccionar el rectángulo redondeado editado en el paso anterior y haz una copia delante. Selecciona esta copia y pulsa la tecla D de tu teclado. De nuevo, elimina el color del trazo y utiliza la forma blanca restante para enmascarar el rectángulo redondeado original.

Paso 35

Selecciona todas las formas creadas en los últimos cuatro pasos y agrúpalas. Envía este nuevo grupo a la parte de atrás.

Paso 36

Vuelve a activar la opción Ajustar a cuadrícula. Agarra el grupo de piezas de bloque púrpura, haz una copia y colócala como se muestra en la siguiente imagen. Selecciónala y ve a Efecto > Estilizar > Sombra paralela. Introduce los datos que se muestran a continuación y haz clic en Aceptar.

Paso 37

Elige la herramienta Rectángulo (M), crea una forma de 90 por 50px, y colócala como se muestra en la siguiente imagen. Rellénala con R=65 G=64 B=66, elimina el color del trazo y ve a Efecto > Estilizar > Redondear vértices. Introduce un radio de 10px, haz click en OK, y ve a Objeto > Expandir Apariencia.

Paso 38

Paso 39

Vuelve a seleccionar el rectángulo redondeado creado en el paso 31 y céntrate en el panel Apariencia. Añade un nuevo relleno y utiliza el degradado lineal que se muestra a continuación. Añade un tercer relleno para esta forma, hazlo negro, baja su Opacidad al 10%, cambia el modo de fusión a Multiplicar y aplica Efecto > Artístico > Grano de película. Introduce los datos que se muestran a continuación y haz clic en Aceptar.

Paso 40

Paso 41

Selecciona todas las formas creadas en los últimos cuatro pasos y agrúpalas. Ahora envía este nuevo grupo al fondo.

Paso 42

Vuelve a activar la opción Ajustar a cuadrícula y duplica el grupo creado en el paso anterior. Selecciona esta copia del grupo y muévela hacia abajo como se muestra en la segunda imagen. Una vez más, la opción Ajustar a cuadrícula te facilitará el trabajo.

Paso 43

Desactiva la opción Ajustar a cuadrícula. Elige la herramienta Texto (T) y añade algo de texto y números blancos. Usa la fuente Courier New y ponla en negrita. Para el texto establece el tamaño en 13 y para el número aumenta a 20pt. Selecciona tanto el texto como los números y ve a Efecto > Estilizar > Sombra paralela. Introduce los datos que se muestran a continuación y haz clic en Aceptar. Por último, agrúpalos todos.

Paso 44

Selecciona todas las formas creadas en los últimos diecinueve pasos y agrúpalas. Envía este nuevo grupo al fondo y ve a Efecto > Estilizar > Sombr paralela. Introduce los datos que se muestran a continuación y haz clic en Aceptar.

Paso 45

Por último, vamos a añadir un fondo sencillo. Elige la herramienta Rectángulo (M), crea una forma del tamaño de tu mesa de trabajo y envíala al fondo. Rellénala con blanco, luego añade un segundo relleno y utiliza el degradado radial que se muestra a continuación.

Paso 46

Vuelve a seleccionar la forma creada en el paso anterior y añade un tercer relleno. Selecciónalo en el panel Apariencia, baja su Opacidad al 10% y cambia el modo de fusión a Multiplicar.

A continuación, necesitarás un motivo incorporado para este nuevo relleno. Ve al panel de Muestras (Ventana > Muestras), abre el menú desplegable y ve a Abrir biblioteca de muestras > Motivos > Gráficos básicos > Gráficos básicos_Texturas.

Debería abrirse una nueva ventana con un montón de bonitos motivos. Busca el "USGS 19 Land Inundation". Vuelve a seleccionar ese tercer relleno, añade el motivo y ve a Efecto > Artístico > Grano de película. Introduce los datos que se muestran a continuación, haz clic en Aceptar, y ya está.

Conclusión

Ya has finalizado tu trabajo. Este es el aspecto que debería tener.