Share
Uno de los aspectos más importantes de jugar un videojuego es cómo se presenta la información. La forma en que se presentan los gráficos hace una gran diferencia en cómo los jugadores percibirán el juego durante el juego. En el tutorial de hoy, demostraremos cómo diseñar una ventana de interfaz de videojuego. Durante el proceso, mostraremos cómo dibujar manualmente ciertos aspectos, aplicar estilos de capa, texturas e incluso cómo incorporar Adobe Illustrator. Empecemos!
Los siguientes recursos fueron utilizados durante la producción de este tutorial..
Crear nuevo archivo con tamaño 1152 px x 864 px. Nuestro primer paso es crear un fondo para nuestra interfaz. Este proceso es simplemente experimentando con textura. Básicamente, solo lancé algunas texturas que encontré y experimenté con su modo de mezcla. Mi primer intento es un texturas de papel..
Vuelve a agregar texturas de papel, esta vez cambia su modo de mezcla con Multiplicar.
Añadir capa de ajuste Tono / Saturación para oscurecerla..
Agrega texturas de libros antiguos con modo de mezcla Multiplicar y opacidad 48%.
Añadir viejas texturas de papel. Esta vez use Superposición en modo mezcla con opacidad 58%.
Añadir capa de ajuste blanco y negro.
Crear nueva capa. Pulse D para configurar el color de fondo y de fondo en blanco y negro. Haga clic en Filtro> Render> Nubes.
Establece su modo de mezcla en Multiplicar y reduce su opacidad al 8%..
Crear nueva capa. Rellénalo con degradado radial blanco a negro..
Establece su modo de mezcla en Pantalla con Opacidad 67%.
Añadir capa de ajuste Tono / Saturación. Selecciona Colorear para darle un color..
Por último, añade unas bonitas texturas metálicas rayadas. Establece su modo de mezcla en Multiplicar y reduce su opacidad al 20%..
Abra Adobe Illustrator. Dibuja un rectángulo amarillo.
En la parte superior del rectángulo, dibuja un rectángulo negro más pequeño. Seleccione los puntos principales con la Herramienta de selección directa y muévalos.
Selecciona la forma y presiona Alt y arrastra para duplicarla..
Pulsa Comando / Ctrl + D para repetir el proceso de duplicación..
Selecciona todas las formas. Presione Comando / Ctrl + C. Péguelo en Photoshop, Comando / Ctrl + V. Seleccione el objeto inteligente en el cuadro de diálogo Pegar.
Haga doble clic en la capa para abrir el cuadro de diálogo Estilo de capa. Agregue Superposición de patrón, cargue papel de color y seleccione un patrón sucio.
Añade forma de rectángulo en la parte superior e inferior de la raya.
Añadir los siguientes estilos de capa.
Comenzaremos creando la base de la ventana. Cree una forma de rectángulo con Color: # # 313029, Opacidad: 100% y Relleno: 50%. Añadir el siguiente estilo de capa.
El estilo de capa que acabamos de agregar es demasiado plano. Vamos a utilizar una técnica sencilla para solucionarlo. En el cuadro de diálogo Estilo de capa active la máscara de capa oculta los efectos.
Añadir máscara de capa. Comando / Ctrl-clic ruta para crear la selección. Invierta la selección presionando Comando / Ctrl + Shift + I. Agregue un degradado suave y oscuro en la parte superior y pinte negro en la línea industrial para ocultar la sombra.
Puedes ver la diferencia antes y después de modificar la sombra en la imagen de abajo..
Dibuja otro rectángulo. Esta vez más pequeña que la anterior..
Añadir texturas de óxido encima de ella. Use máscara de capa para ocultar áreas innecesarias. Establezca su modo de mezcla en Multiplicar y reducir su opacidad al 10%..
Crea un nuevo rectángulo cubriendo toda la forma. Agrega un rectángulo más pequeño dentro de la forma, configúralo para restar.
Duplicar la forma anterior. Cambiar el tamaño del camino interno.
Añadir los siguientes estilos de capa.
Hay demasiada sombra en la parte superior de la ventana. En el cuadro de diálogo de estilo de capa active la máscara de capa oculta los efectos.
Comando / Ctrl-clic en la ruta. Invertir selección (Comando / Ctrl + Shift + I) y pintar sombras en la parte superior de la ventana con gris.
A continuación, puede ver la diferencia antes y después de que la sombra esté parcialmente oculta..
Dibuja un rectángulo que cubra toda la interfaz de la ventana. Establezca el relleno en 0% y agregue los siguientes estilos de capa.
Nuestro último paso solo agrega un toque sutil en la interfaz de la ventana.
Dibuja un círculo oscuro y colócalo en la esquina. Añadir sombra.
Usa un pincel suave para pintar un poco de blanco en la parte superior del agujero.
Aquí está el resultado en una vista del 100%..
Coloque todas las capas que crean el agujero en un grupo de capas. Duplica el grupo y ponlo en cada esquina..
En Illustrator, crea la mitad de la forma del título de Windows.
Haga clic derecho en la forma y seleccione Transformar> Reflejar. Seleccione Eje: Vertical y haga clic en Copiar.
Mover forma duplicada.
Seleccione los puntos que se superponen. Haz clic derecho y elige Unir.
Pegue el camino en Photoshop como una capa de forma.
Pinte el realce y la sombra en la forma. Puedes ver el progreso que hice a continuación. Uso un cepillo muy suave (Dureza: 0%, Opacidad: 5-10%) y unas 10 capas..
Agrega el título del juego y agrega los siguientes estilos de capa. La fuente utilizada aquí es Celtic Garamond 2da..
Dibuje un rectángulo redondeado en el lado izquierdo de la interfaz. Utilice color: # 605847. Agrega una sutil superposición de degradado de gris a blanco.
Duplicar la forma anterior y redimensionarla. Vea la imagen de abajo para referencia.
Dibuja otro rectángulo. Esta vez usa un color más claro. Añadir superposición de degradado. Duplica y colócalo en la parte inferior del rectángulo más grande..
Dibuja 1 línea de px para su realce y sombra. Vamos a convertir esta forma en una forma 3D. Al final, verás que se necesita este pequeño detalle de 1 px para obtener un resultado realista..
Dibuje una forma a continuación para agregar una perspectiva 3D a la forma. Añadir siguiente superposición de degradado.
Dibujar sombra debajo de la forma.
Dibuja una forma abajo y completa la sombra. Agrega Gradient Overlay a la forma.
Aquí está el resultado en una vista del 100%..
Selecciona todas las capas y ponlas en una capa de grupo. Duplique el grupo, gírelo horizontalmente y colóquelo en el lado opuesto.
Dibuja la forma como se ve abajo. Pinte el realce y la sombra encima de él. No olvide agregar la sombra suave de la forma en la ventana de la interfaz.
Abajo puedes ver el resultado en vista 100%. Duplica la forma dos veces.
Crea una nueva capa debajo de la forma y pinta algunos píxeles negros con un pincel suave pequeño.
Duplica toda la forma. Gírelo horizontalmente y muévalo al otro lado de la interfaz.
Añade texturas de óxido que cubren toda la interfaz. Comando / Ctrl-clic en el borde de la interfaz y el título de la ventana para crear una selección basada en su forma. Añadir nueva máscara de capa. Pinte la forma del título negro con un pincel de baja opacidad porque no queremos ver demasiada textura de óxido en él. A continuación, puedes ver la máscara que he creado..
Reducir su opacidad al 15%..
Crear un marco dentro de la interfaz de la ventana. Esto se hace a partir de dos rutas con la ruta interna se establece en Restar. Añadir los siguientes estilos de capa.
Pegar imagen PNG de un vehículo dentro del cuadro..
Detrás del marco, agregue una nueva capa y rellénela con un degradado de gris a blanco.
Pintar algunas sombras debajo del vehículo..
Agregue otro cuadro debajo de la vista previa del vehículo. Usa una técnica similar en los pasos anteriores.
Añadir alguna información en el marco.
Dibuja otro marco, esta vez más grande..
Dibuja un rectángulo simple dentro del marco. Añadir el siguiente estilo de capa.
Agrega un poco de texto en el rectángulo.
Duplica el rectángulo para otros datos. Elimine el estilo de capa Resplandor exterior y reduzca su opacidad a un 30% del nivel inactivo.
Duplica toda la forma para crear otro conjunto de datos.
Vuelve a Illustrator, crea esta forma..
Pegue la forma en Photoshop como una capa de forma. Añadir los siguientes estilos de capa.
Pinte el resaltado y la sombra manualmente con un pincel suave, Dureza 0% y Opacidad 5-10%.
Duplica la forma y voltéala horizontalmente.
Dibuja un rectángulo azul claro y ponlo detrás de las formas. Añadir los siguientes estilos de capa.
Dibuja algunos reflejos dentro de la forma. Añadir el título del botón. Pintar resplandor de luz en la parte superior del botón.
Duplica el botón y cambia su título..
Accentsconagua