Cómo diseñar una interfaz de ventana para videojuegos en Photoshop

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

Uno de los aspectos más importantes de jugar un videojuego es cómo se presenta la información. La forma como se presentan los gráficos hace una gran diferencia en cómo los jugadores percibirán el juego. En el tutorial de hoy vamos a demostrar cómo diseñar una interfaz de ventana para videojuegos. Durante el proceso mostraremos cómo dibujar manualmente ciertos aspectos, aplicar estilos de capa, texturas e incluso cómo incorporar Adobe Illustrator. ¡Vamos a empezar!

Recursos del tutorial

Los siguientes recursos se utilizaron durante la producción de este tutorial.

Texturas de papel por Vandelay Premier
Texturas Vintage de un Libro por Lost and Taken
Viejas texturas de papel por WeGraphics
Texturas metálicas arañadas por WeGraphics
Texturas de óxido por WeGraphics
Caravan Set PNG por mysticmorning

Paso 1: Fondo

Crea un nuevo archivo con un tamaño de 1152 px x 864 px. Nuestro primer paso es crear un fondo para nuestra interfaz. Este simple proceso es simplemente experimentar con textura. Básicamente, acabo de colocar algunas texturas que encontré y experimento con su modo de mezcla. Mi primer intento es una textura de papel.

Paso 2

Añade texturas de papel de nuevo, esta vez cambia su modo de mezcla a Multiplicar.

Paso 3

Añade la capa de ajuste Matiz/Saturación para oscurecerla.

Paso 4

Añade texturas vintage de un libro con el modo de mezcla en Multiplicar y su Opacidad en 48%.

Paso 5

Añade texturas de papel viejo. Esta vez, utiliza la superposición del modo de mezcla con una opacidad del 58%.

Paso 6

Agrega la capa de ajuste Negro y Blanco.

Paso 7

Crea una nueva capa. Pulsa D para establecer el primer plano y el color de fondo en blanco y negro. Haz clic en Filtro > Renderizar > Nubes.

Paso 8

Establece su modo de mezcla en Multiplicar y reduce su opacidad al 8%.

Paso 9

Crea una nueva capa. Llénala con un gradiente radial de blanco a negro.

Paso 10

Establece su modo de mezcla en Pantalla con una Opacidad del 67%.

Paso 11

Añade un ajuste a la capa de Matiz/Saturación. Selecciona Colorear para darle un color.

Paso 12

Finalmente, añade una bonita textura metálica rayada. Ajusta su modo de mezcla a Multiplicar y reduce su Opacidad al 20%.

Paso 13: Línea Industrial

Abre Adobe Illustrator. Dibuja un rectángulo amarillo.

Paso 14

En la parte superior del rectángulo, dibuja un rectángulo negro más pequeño. Selecciona los puntos superiores con la herramienta de selección directa y muévelos.

Paso 15

Selecciona la forma y pulsa Alt para arrastrarla y duplicarla.

Paso 16

Pulsa Comando / Ctrl + D para repetir el proceso de duplicación.

Paso 17

Selecciona todas las formas. Pulsa Comando / Ctrl + C. Pega en Photoshop, Comando / Ctrl + V. Selecciona Objeto inteligente en el cuadro de diálogo y después pegar.

Paso 18

Haz doble clic en la capa para abrir el cuadro de diálogo Estilo de capa. Añade superposición de patrón, carga el papel de color y selecciona un patrón sucio.

Paso 19

Añade la forma del rectángulo en la parte superior e inferior de la raya.

Paso 20

Añade los siguientes estilos de capa.

Paso 21: Interfaz de ventana básica

Empezaremos creando la base de la ventana. Crea una forma de rectángulo con color: #313029, opacidad: 100% y relleno: 50%. Añade el siguiente estilo de capa.

Paso 22

El estilo de capa que acabamos de agregar es demasiado plano. Usaremos una técnica simple para solucionarlo. En el cuadro de diálogo Estilo de Capa, activa Ocultar los Efectos de la Máscara de Capa.

Paso 23

Añade la máscara de capa. Comando / Ctrl-clic en la ruta para crear la selección. Invierte la selección presionando Comando / Ctrl + Mayús + I. Añade un gradiente suave y oscuro en la parte superior y pinta de color negro en la línea industrial para ocultar la sombra.

Paso 24

Puedes ver la diferencia antes y después de modificar la sombra en la imagen de abajo.

Paso 25

Dibuja otro rectángulo. Esta vez que sea menor que el anterior.

Paso 26

Añade texturas de óxido encima de ella. Usa máscara de capa para ocultar las áreas innecesarias. Ajusta su modo de mezcla a Multiplicar y reduce su Opacidad al 10%.

Paso 27

Crea un nuevo rectángulo cubriendo toda la forma. Añade un rectángulo más pequeño dentro de la forma, configura esto para sustraer.

Paso 28

Duplica la forma anterior. Cambia el tamaño de la ruta interna.

Paso 29

Añade los siguientes estilos de capa.

Paso 30

Hay demasiada sombra en la parte superior de la ventana. En el cuadro de diálogo de estilo de capa, activa Ocultar los Efectos de la Máscara de Capa.

Paso 31

Comando / Ctrl-clic en la ruta. Invierte la selección (Comando / Ctrl + Mayús + I) y pinta sombras en la parte superior de la ventana con gris.

Paso 32

A continuación, puedes ver la diferencia del antes y el después de que la sombra está parcialmente oculta.

Paso 33

Dibuja un rectángulo cubriendo toda la interfaz de la ventana. Establece su relleno a 0% y agrega los siguientes estilos de capa.

Paso 34

En nuestro último paso sólo añade un destello sutil en la interfaz de la ventana.

Paso 35: Agujeros

Dibuja un círculo oscuro y colócalo en la esquina. Añade una sombra.

Paso 36

Utiliza un pincel suave para pintar algo de blanco en la parte superior del agujero.

Paso 37

Aquí está el resultado en la vista al 100%.

Paso 38

Coloca todas las capas que crean el agujero en un grupo de capas. Duplica el grupo y colócalo en cada esquina.

Paso 39: Título de la ventana

En Illustrator, crea la mitad de la forma del título de la ventana.

Paso 40

Haz clic derecho sobre la forma y selecciona Transformar > Reflejo. Selecciona ejes: Vertical y haz clic en copiar.

Paso 41

Mueve la forma duplicada.

Paso 42

Selecciona los puntos que se superponen. Haz clic derecho y selecciona Unirse.

Paso 43

Pega la ruta en Photoshop como una capa de forma.

Paso 44

Pinta el resaltado y la sombra en la forma. Puedes ver el progreso que hice a continuación. Utilicé un cepillo muy suave (dureza: 0%, opacidad: 5-10%) y cerca de 10 capas.

Paso 45

Agrega el título del juego y añade los siguientes estilos de capa. La fuente usada aquí es Celtic Garamond the 2nd.

Paso 46: Accesorios

Dibuja un rectángulo redondeado en el lado izquierdo de la interfaz. Usa el color: #605847. Añade un gradiente sutil de superposición de gris a blanco.

Paso 47

Duplica la forma anterior y cambia su tamaño. Mira la imagen de abajo para la referencia.

Paso 48

Dibuja otro rectángulo. Esta vez usa un color más claro. Añade una superposición de degradado. Duplica y coloca esto en la parte inferior del rectángulo más grande.

Paso 49

Dibuja una línea de 1 px para resaltarlo y añadir sombra. Vamos a convertir esta forma en una forma 3D. Al final, verás que este pequeño detalle de 1 px es necesario para obtener un resultado realista.

Paso 50

Dibuja la forma debajo para agregar la perspectiva 3D a la forma. Añade la siguiente superposición de degradado.

Paso 51

Dibuja una sombra bajo la forma.

Paso 52

Dibuja la forma debajo y completa la sombra. Añade la superposición de degradado a la forma.

Paso 53

Aquí está el resultado en la vista al 100%.

Paso 54

Selecciona todas las capas y agrúpalas en una capa. Duplica el grupo, gíralo horizontalmente, y colócalo en el lado opuesto.

Paso 55: Accesorios

Dibuja la forma como se ve a continuación. Pinta el resaltado y la sombra encima de él. No te olvides de añadir una sombra suave de la forma en la ventana de la interfaz.

Paso 56

A continuación, puedes ver el resultado en la vista al 100%. Duplica la forma dos veces.

Paso 57

Crea una nueva capa bajo la forma y pinta algunos píxeles negros con un pequeño pincel suave.

Paso 58

Duplica toda la forma. Gírala horizontalmente y muévela al otro lado de la interfaz.

Paso 59: Añade la textura de óxido

Añade texturas de óxido que cubran 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ñade una nueva máscara de capa. Pinta la forma del título en negro con un pincel de baja opacidad ya que no queremos ver demasiada textura de óxido en él. A continuación, puedes ver la máscara que he creado.

Paso 60

Reduce su opacidad al 15%.

Paso 61: Vista previa del vehículo

Crea un marco dentro de la interfaz de la ventana. Esto se hace desde dos trazados con el mismo trazado en interior se ajusta para sustraer. Añade los siguientes estilos de capa.