Share
En el siguiente tutorial, aprenderá cómo crear una interfaz de juego en bloque en Adobe Illustrator CS5. Los gráficos vectoriales del juego permiten una obra de arte versátil. El flujo de trabajo presentado en este tutorial le enseñará cómo crear gráficos de juegos en Illustrator. Estas técnicas se pueden aplicar a múltiples proyectos de diseño de interfaz y diseño de juegos. Es hora de saltar, aprender a crear estas formas y darles profundidad gráfica colorida.
Pulsa Comando + N para crear un nuevo documento. Ingrese 660 en el cuadro de ancho y 600 en el cuadro de altura, luego haga clic en el botón Avanzado. Seleccione RGB, Pantalla (72ppi) y asegúrese de que la casilla Alinear nuevos objetos con la cuadrícula de píxeles no esté marcada antes de hacer clic en Aceptar. Ahora, active Grid (Ver> Grid) y Snap to Grid (Ver> Snap to Grid).
A continuación, necesitará una cuadrícula cada 5px. Vaya a Edición> Preferencias> Guías> Cuadrícula, ingrese 5 en la casilla de cuadrícula cada casilla y 1 en la casilla Subdivisiones. También puede abrir el panel Información (Ventana> Información) para obtener una vista previa en vivo con el tamaño y la posición de sus formas. No olvide reemplazar la unidad de medida por píxeles en Editar> Preferencias> Unidad> General. Todas estas opciones aumentarán significativamente tu velocidad de trabajo..
Elija la herramienta Rectángulo (M) y cree una forma de 350 x 490 px. The Snap to Grid facilitará tu trabajo. Rellénelo con R = 50, G = 50, B = 50. Ahora elimine el color del trazo y vaya a Efecto> Estilizar> Esquinas redondeadas. Ingrese un radio de 5px, haga clic en Aceptar y vaya a Objeto> Expandir apariencia.
Deshabilite la cuadrícula (Ver> Mostrar cuadrícula) y la función Ajustar a la cuadrícula (Ver> Ajustar a la cuadrícula). Vaya a Edición> Preferencias> General y asegúrese de que el Incremento del teclado esté establecido en 1px. Vuelva a seleccionar la forma creada en el paso anterior y vaya a Objeto> Ruta> Ruta de compensación. Ingrese un -3px Offset y haga clic en OK.
Seleccione la forma resultante y haga una copia al frente (Comando + C> Comando + F). Selecciona esta copia y pulsa la flecha hacia abajo una vez. Vuelva a seleccionar las dos formas creadas en este paso y haga clic en el botón Minus Front del panel Pathfinder (Ventana> Pathfinder). Rellene la forma resultante con R = 109, G = 110, B = 113.
De nuevo, seleccione la forma creada en el segundo paso y vaya a Objeto> Ruta> Ruta de compensación. Ingrese una compensación de -3px y haga clic en Aceptar. Seleccione la forma resultante y haga una copia al frente (Comando + C> Comando + F).
Selecciona esta copia y pulsa la flecha hacia arriba una vez. Vuelva a seleccionar las dos formas creadas en este paso y haga clic en el botón Minus Front del panel de Pathfinder. Rellene la forma resultante con R = 109, G = 110, B = 113.
Vuelva a seleccionar la forma creada en el segundo paso, vaya al panel Capas, haga doble clic en ella y denomínela "Principal". Asegúrese de que esta forma aún esté seleccionada, vaya al panel Apariencia (Ventana> Apariencia) y haga clic en el botón Agregar nuevo relleno. Es el pequeño cuadrado blanco de la parte inferior del panel Apariencia..
Obviamente, esto agregará un nuevo relleno para su forma. Selecciónelo en el panel Apariencia y use el degradado lineal que se muestra a continuación. El cero amarillo de la imagen de gradiente representa el porcentaje de opacidad.
Vuelva a seleccionar "Principal", agregue un tercer relleno y selecciónelo en el panel Apariencia. Haga que sea negro, arrástrelo en la parte inferior del panel Apariencia, baje su Opacidad al 15% y vaya a Efecto> Ruta> Ruta de compensación. Ingrese un Desplazamiento de 1px, haga clic en Aceptar y vaya a Efecto> Distorsionar y transformar> Transformar. Ingrese los datos que se muestran a continuación y haga clic en Aceptar.
Vuelva a seleccionar "Principal" y céntrese en el panel Apariencia. Establezca el color del trazo en R = 167, G = 169, B = 172. Hazlo de 4 puntos de ancho y alinéalo con el interior.
Vuelva a seleccionar "Principal" y céntrese en el panel Apariencia. Seleccione el trazo agregado en el paso anterior y haga clic en Duplicar elemento seleccionado. Es el pequeño icono de archivo en la parte inferior del panel Apariencia. Obviamente, esto agregará una copia del trazo. Seleccione este nuevo trazo, establezca su color en R = 35 G = 31 B = 32, y disminuya el tamaño a 3 puntos.
Vuelva a seleccionar "Principal", céntrese en el panel Apariencia y agregue dos nuevas escenas. Seleccione el primero, establezca su color en R = 128 G = 130 B = 133, y el tamaño en 1.5pt. Seleccione el otro nuevo trazo, conviértalo en negro, alinéelo con el exterior y establezca el tamaño en 1 punto.
Vuelva a seleccionar "Principal" y céntrese en el panel Apariencia. Asegúrese de que no esté seleccionado ningún relleno o trazo y vaya a Efecto> Estilizar> Sombra paralela. Ingrese los datos que se muestran a continuación y haga clic en Aceptar.
Vuelva a habilitar la cuadrícula (Ver> Mostrar cuadrícula) y la función Ajustar a la cuadrícula (Ver> Ajustar a la cuadrícula). Elija la herramienta Rectángulo (M), cree una forma de 20 x 20 px y rellénela con R = 88, G = 89, B = 91. Seleccione este cuadrado y vaya a Objeto> Ruta> Ruta de desplazamiento. Ingrese un desplazamiento de -1px y haga clic en Aceptar.
Seleccione la forma resultante y vaya nuevamente a Objeto> Trayectoria> Desplazamiento de ruta. Ingrese una compensación de -3px y haga clic en Aceptar. Seleccione la forma resultante junto con la forma creada previamente y haga clic en el botón Menos en el frente del panel de Pathfinder. Rellene la forma resultante con R = 65, G = 64, B = 66.
Elija la herramienta Pluma (P) y dibuje una ruta horizontal simple como se muestra en la primera imagen. The Snap to Grid debería facilitar su trabajo. Seleccione este nuevo camino, junto con la forma más oscura creada en el paso anterior y haga clic en el botón Dividir del panel de Pathfinder.
Esto creará un grupo con cuatro formas simples. Eche un vistazo al panel Capas y concéntrese en este grupo. Primero, selecciona los dos triángulos y bórralos. A continuación, desagrupe las dos formas restantes (Shift + Command + G). Finalmente, llene la parte superior izquierda con R = 109, G = 110, B = 113. Asegúrate de que la otra forma todavía esté llena con R = 65, G = 64, B = 66.
Vuelva a seleccionar el cuadrado gris creado en el undécimo paso, haga una copia al frente (Comando + C> Comando + F) y colóquela al frente (Shift + Comando + tecla de corchete a la derecha). Rellene esta nueva forma con negro, baje su opacidad al 7%, cambie el modo de fusión a Multiplicar y vaya a Efecto> Artístico> Grano de película. Ingrese los datos que se muestran a continuación y haga clic en Aceptar.
Vuelva a seleccionar la forma creada en el paso anterior y haga una copia al frente (Comando + C> Comando + F). Elija la herramienta Elipse (L), cree una forma de 40 x 20 px y colóquela como se muestra en la segunda imagen. Seleccione este círculo exprimido, junto con la copia nueva, y haga clic en el botón Intersectar del panel de Pathfinder. Rellene la forma resultante con blanco y baje su opacidad al 25%..
Vuelva a seleccionar el cuadrado gris creado en el undécimo paso y concéntrese en el panel Apariencia. Agrega un trazo negro de 2 puntos y alinéalo con el interior. Seleccione todas las formas creadas en los últimos cuatro pasos y agrúpelas (Comando + G).
Seleccione el grupo creado en el paso anterior y colóquelo como se muestra en la siguiente imagen. Una vez más, el Snap to Grid facilitará su trabajo.
Vuelva a seleccionar el grupo movido en el paso anterior, baje su Opacidad al 15% y vaya a Efecto> Distorsionar y transformar> Transformar. Ingrese los datos que se muestran en la ventana izquierda, haga clic en Aceptar, luego vaya nuevamente a Efecto> Distorsionar y transformar> Transformar. Ingrese los datos que se muestran en la ventana derecha y haga clic en Aceptar.
Elija la herramienta Rectángulo (M), cree una forma de 20 por 20 px y rellénela con R = 0, G = 165, B = 224. Seleccione este cuadrado azul y vaya a Objeto> Ruta> Ruta de desplazamiento. Ingrese un Desplazamiento de -4px y haga clic en Aceptar. Seleccione la forma resultante, haga una copia al frente (Comando + C> Comando + F), y desactive la función Ajustar a la cuadrícula (Ver> Ajustar a la cuadrícula).
Seleccione esta copia y presione la flecha hacia arriba y la flecha derecha una vez. Vuelva a seleccionar esta copia, junto con la forma original, y haga clic en el botón Minus Front del panel de Pathfinder. Rellene la forma resultante con blanco, baje su Opacidad superior al 25% y tome la herramienta Eliminar punto de ancla (-).
Asegúrese de que esta forma delgada y blanca todavía esté seleccionada y haga clic en los dos puntos de anclaje (que se muestran con flechas en la cuarta imagen que se muestra). Al final, su forma debe verse como la quinta imagen mostrada..
Vuelva a seleccionar el cuadrado azul y vaya a Objeto> Ruta> Ruta de desplazamiento. Ingrese un desplazamiento de -1px y haga clic en Aceptar. Seleccione la forma resultante y vaya nuevamente a Objeto> Trayectoria> Desplazamiento de ruta. Ingrese una compensación de -3px y haga clic en Aceptar. Seleccione las dos formas creadas hasta ahora y haga clic en el botón Frontal Inferior del panel de Pathfinder. Rellene la forma resultante con R = 28, G = 117, B = 188.
Vuelva a habilitar el ajuste a la cuadrícula (Ver> Ajustar a la cuadrícula). Elija la herramienta Pluma (P) y dibuje una trayectoria horizontal como se muestra en la primera imagen. Selecciónelo, junto con la forma creada en el paso anterior, y haga clic en el botón Dividir del panel de Pathfinder.
Eche un vistazo al panel Capas y concéntrese en el grupo resultante. Primero, elimine las formas del triángulo, luego desagrupe las dos formas restantes (Shift + Command + G). Finalmente, llene la parte superior izquierda con R = 0, G = 224, B = 255.
Vuelva a seleccionar el cuadrado azul, agregue un trazo negro de 2 puntos y alinéelo con el interior. Seleccione todas las formas creadas en los últimos tres pasos y agrúpelas (Comando + G). Vaya al panel Capas, haga doble clic en este grupo nuevo y asígnele el nombre "BlueBlock".
Seleccione el "Bloqueo azul", haga seis copias y alinéelos en una columna simple (como se muestra en la siguiente imagen). Concéntrese en estas copias grupales y reemplace los colores existentes con los que se muestran a continuación. Cuando haya terminado, vaya al panel Capas y cambie el nombre de estos nuevos grupos según el color del bloque general.
Ahora que tiene todos los bloques que necesita, vamos a crear los bloques reales. Comience con los bloques azules y continúe con el resto. Siempre agrupa los bloques que forman una pieza de bloque. Facilitará su trabajo en los pasos posteriores..
Agrega algunas de esas piezas de bloque como se muestra a continuación.
Elija la herramienta Rectángulo (M), cree una forma de 100 x 20 px y colóquela como se muestra en la siguiente imagen. Ahora llénalo con R = 65, G = 64, B = 66. Quite el color del trazo y vaya a Efecto> Estilizar> Esquinas redondeadas. Ingrese un radio de 10 px, haga clic en Aceptar y vaya a Objeto> Expandir apariencia.
Deshabilite el ajuste a la cuadrícula (Ver> Ajustar a la cuadrícula). Seleccione la forma creada en el paso anterior, envíela al dorso (Shift + Command + Left Bracket key), y haga dos copias al frente (Command + C> Command + F> Command + F). Seleccione la copia superior y presione la flecha arriba y la flecha izquierda una vez. Vuelva a seleccionar ambas copias y haga clic en el botón Frontal Frontal del panel de Pathfinder. Rellena la forma resultante con negro..
Vuelva a seleccionar la forma gris creada en el paso 25 y haga dos copias nuevas al frente. Nuevamente, seleccione la copia superior y esta vez presione la flecha hacia arriba y la flecha izquierda dos veces. Vuelva a seleccionar ambas copias y haga clic en el botón Frontal Frontal del panel de Pathfinder. Rellene la forma resultante con R = 147, G = 149, B = 152.
Vuelva a seleccionar el rectángulo redondeado creado en el Paso 25 y concéntrese en el panel Apariencia. Agregue un nuevo relleno y use el degradado lineal que se muestra en la primera imagen. Agregue un tercer relleno para esta forma, haga que sea negro, baje su opacidad al 10%, cambie el modo de fusión a Multiplicar, y vaya a Efecto> Artístico> Film Grain. Ingrese los datos que se muestran a continuación y haga clic en Aceptar.
Continuar en el panel Apariencia y agregar el primer trazo. Haz que tenga 2 puntos de ancho, establece su color en R = 209 G = 211 B = 212, y alinéalo con el interior. Agregue un segundo trazo para esta ruta, hágalo de 1 pt de ancho y configure el color en R = 147, G = 14, B = 152. Asegúrese de que está alineado con el interior.
Vuelva a seleccionar el rectángulo redondeado editado en el paso anterior y haga una copia al frente. Selecciona esta copia y pulsa la tecla D desde tu teclado. Esto agregará las propiedades predeterminadas para su forma (relleno blanco y 1 punto, trazo negro). Quita el color del trazo..
Ahora, seleccione esta forma blanca, junto con el rectángulo redondeado original, y vaya al panel Transparencia. Abra el menú desplegable y haga clic en Crear máscara de opacidad..
Vuelva a habilitar el ajuste a la cuadrícula. Seleccione todas las formas creadas en los últimos cinco pasos y agrúpelas. Haga dos copias de este grupo y colóquelas como se muestra en la siguiente imagen.
Concéntrese en el grupo superior creado en el paso anterior y seleccione la herramienta Rectángulo (M). Cree una forma de 90 por 80 píxeles y colóquela como se muestra en la siguiente imagen. Rellénelo con R = 65 G = 64 B = 66, quite el color del trazo y aplique Efecto> Estilizar> Esquinas redondeadas. Ingrese un radio de 10 px, haga clic en Aceptar y vaya a Objeto> Expandir apariencia.
Desactiva el complemento a la cuadrícula. Seleccione la forma creada en el paso anterior y vaya a Objeto> Ruta> Ruta de compensación. Ingrese una compensación de -2px y haga clic en Aceptar. Seleccione la forma resultante y haga una copia al frente. Selecciona esta copia y pulsa la flecha hacia arriba una vez. Vuelva a seleccionar las dos formas creadas en este paso y haga clic en el botón Minus Front del panel de Pathfinder. Rellene la forma resultante con R = 209, G = 211, B = 212.
Vuelva a seleccionar el rectángulo redondeado creado en el paso 31 y céntrese en el panel Apariencia. Agregue un nuevo relleno y use el degradado lineal que se muestra a continuación. Agregue un tercer relleno para esta forma, haga que sea negro, baje su opacidad al 10%, cambie el modo de fusión a Multiplicar, y vaya a Efecto> Artístico> Film Grain. Ingrese los datos que se muestran a continuación y haga clic en Aceptar.
Continuar en el panel Apariencia y agregar el primer trazo. Haz que tenga 2 puntos de ancho, establece su color en R = 147 G = 149 B = 152 y alinéalo con el interior. Agrega un segundo trazo para esta ruta, haz que sea de 1 punto de ancho, establece el color en R = 0 G = 0 B = 0, y asegúrate de que esté alineado con el interior.
Vuelva a seleccionar el rectángulo redondeado editado en el paso anterior y haga una copia al frente. Selecciona esta copia y pulsa la tecla D desde tu teclado. Nuevamente, elimine el color del trazo y use la forma blanca restante para enmascarar el rectángulo redondeado original.
Seleccione todas las formas creadas en los últimos cuatro pasos y agrúpelas. Enviar este nuevo grupo al dorso..
Vuelva a habilitar el ajuste a la cuadrícula. Agarre el grupo de bloques de color púrpura, haga una copia y colóquelo como se muestra en la siguiente imagen. Selecciónelo y vaya a Efecto> Estilizar> Sombra. Ingrese los datos que se muestran a continuación y haga clic en Aceptar.
Elija la herramienta Rectángulo (M), cree una forma de 90 x 50 px y colóquela como se muestra en la siguiente imagen. Rellénelo con R = 65 G = 64 B = 66, elimine el color del trazo y vaya a Efecto> Estilizar> Esquinas redondeadas. Ingrese un radio de 10 px, haga clic en Aceptar y vaya a Objeto> Expandir apariencia.
Desactiva el complemento a la cuadrícula. Seleccione la forma creada en el paso anterior y vaya a Objeto> Ruta> Ruta de compensación. Ingrese una compensación de -2px y haga clic en Aceptar. Seleccione la forma resultante y haga una copia al frente. Selecciona esta copia y pulsa la flecha hacia arriba una vez. Vuelva a seleccionar las dos formas creadas en este paso y haga clic en el botón Minus Front del panel de Pathfinder. Rellene la forma resultante con R = 209, G = 211, B = 212.
Vuelva a seleccionar el rectángulo redondeado creado en el paso 31 y céntrese en el panel Apariencia. Agregue un nuevo relleno y use el degradado lineal que se muestra a continuación. Agregue un tercer relleno para esta forma, haga que sea negro, baje su opacidad al 10%, cambie el modo de fusión a Multiplicar, y aplique Efecto> Artístico> Film Grain. Ingrese los datos que se muestran a continuación y haga clic en Aceptar.
Continuar en el panel Apariencia y agregar el primer trazo. Haz que tenga 2 puntos de ancho, establece su color en R = 147 G = 149 B = 152 y alinéalo con el interior. Agrega un segundo trazo para esta ruta, haz que sea de 1 punto de ancho, establece el color en R = 0 G = 0 B = 0, y asegúrate de que esté alineado con el interior.
Vuelva a seleccionar el rectángulo redondeado editado en el paso anterior y haga una copia al frente. Selecciona esta copia y pulsa la tecla D desde tu teclado. Nuevamente, elimine el color del trazo y use la forma blanca restante para enmascarar el rectángulo redondeado original.
Seleccione todas las formas creadas en los últimos cuatro pasos y agrúpelas. Ahora envía este nuevo grupo a la parte posterior.
Vuelva a habilitar Snap to Grid y duplique el grupo creado en el paso anterior. Seleccione esta copia de grupo y muévala hacia abajo como se muestra en la segunda imagen. Una vez más, el snap to grid facilitará su trabajo..
Desactiva el complemento a la cuadrícula. Elija la herramienta de tipo (T) y agregue algunos números y texto en blanco. Usa la fuente Courier New y hazla en negrita. Para el texto, configure el tamaño en 13 y para el número aumente a 20 puntos. Seleccione el texto y los números y vaya a Efecto> Estilizar> Sombra. Ingrese los datos que se muestran a continuación y haga clic en Aceptar. Finalmente, agrúpalos a todos..
Seleccione todas las formas creadas en los últimos diecinueve pasos y agrúpelas. Envíe este nuevo grupo para retroceder y vaya a Efecto> Estilizar> Sombra. Ingrese los datos que se muestran a continuación y haga clic en Aceptar.
Por último, vamos a añadir un fondo simple. Elija la herramienta Rectángulo (M), cree una forma del tamaño de su mesa de trabajo y envíela al dorso. Rellénelo con blanco, luego agregue un segundo relleno y use el degradado radial que se muestra a continuación.
Vuelva a seleccionar la forma creada en el paso anterior y agregue un tercer relleno. Selecciónelo en el panel Apariencia, baje su Opacidad al 10% y cambie el modo de fusión a Multiplicar.
A continuación, necesitará un patrón incorporado para este nuevo relleno. Vaya al panel Franjas (Ventana> Muestras), abra el menú desplegable y vaya a Abrir biblioteca de muestras> Patrones> Gráficos básicos> Gráficos básicos Texturas.
Una nueva ventana con un montón de bonitos patrones debería abrirse. Busque el patrón "USGS 19 Land Inundation". Vuelva a seleccionar ese tercer relleno, agregue el patrón y vaya a Efecto> Artístico> Film Grain. Ingrese los datos que se muestran a continuación, haga clic en Aceptar y listo..
Ahora tu trabajo está finalizado. Aquí es cómo debe verse.
Accentsconagua