Advertisement
  1. Design & Illustration
  2. Pixel Art

Cómo crear una interfaz de usuario de juegos de píxeles en Adobe Photoshop

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Final product image
What You'll Be Creating

Hay muchas cosas que puede hacer al crear un menú o una de las numerosas interfaces que existen dentro de un videojuego. En el caso de este tutorial, nos tomaremos el tiempo para jugar con el arte de píxeles una vez más para hacer que algo inspirado en los juegos de rol retroceda a las pantallas de menú de 16 bits.

1. Configure su documento y fondo

Paso 1

El pixel art es pequeño. En el caso de este diseño, no estamos demasiado preocupados con lo que encajaría o cómo se mostraría (en el caso de que esté trabajando en un diseño de juego específico, usted trabajaría dentro de esas limitaciones, por supuesto).

Abra Adobe Photoshop y cree un nuevo documento que mida 254 px por 117 px a 72 ppi. Este será el archivo de trabajo principal que usamos a lo largo del tutorial.

Create a New Document

Paso 2

Elegí ayudar a establecer el tono de este diseño empezando por el patrón de fondo primero.

Cree un nuevo documento de 10px por 10px a 72 ppi. Elegí tonos de verde en menta y salvia (#daf5d2, #8ca784 y #748f6c de más claro a más oscuro).

Usando la herramienta Lápiz (B) con el pincel predeterminado en 1px, comience en el centro del diseño con el verde más claro. Dibuje una pequeña caja de cuatro píxeles con dos píxeles en cada lado (mantenga las esquinas abiertas). Tres píxeles arriba comienzan las líneas diagonales que se extienden 5 píxeles, diagonalmente a cada lado del documento pequeño. Para terminar el verde menta, coloque tres píxeles en cada esquina del documento. Para los dos tonos de salvia, llena el espacio alrededor de cada uno con franjas diagonales de color.

Para convertir este diseño en un patrón simple, vaya a Edición > Asignar Perfil y otorgue un nuevo nombre a su perfil. Regrese al documento creado en el Paso 1 y use la Herramienta Bote de pintura (G) para rellenar la capa de fondo de su UI con el perfil seleccionado en lugar del primer plano en las opciones de la herramienta. Puede guardar o eliminar el documento de patrón original realizado en este paso.

Making a custom pixel background

2. Crea la correa de cuero

Paso 1

  1. Cree una nueva capa (Control-N) y agarre la herramienta Lápiz y dibuje una línea diagonal de 20 píxeles individuales y una línea perpendicular de 11 píxeles en marrón (#6c0e04).
  2. a cada lado de la línea corta, perpendicular, dibuje 3 píxeles adicionales (vea abajo el ángulo).
  3. Omita dos líneas de píxeles diagonales y dibuje otra línea de 9 píxeles.
  4. Omita otra línea de píxeles diagonales y cierre el pequeño rectángulo diagonal (consulte a continuación). Dibuje el otro lado de la correa de cuero con 20 píxeles diagonales adicionales (podría decirse que podría dibujar esto después de la primera parte de esta sección).
Starting lineart for the leather band

Paso 2

  1. Completa la parte inferior de la correa con 7 píxeles (yendo de izquierda a derecha, en diagonal).
  2. En la parte superior de la correa, omita un píxel a cada lado del broche y dibuje 3 píxeles hacia la esquina derecha del documento y 1 píxel a cada lado yendo de izquierda a derecha.
  3. La línea diagonal en la parte superior del broche mide 11 píxeles.
  4. Para finalizar el cierre, dibuje 1 píxel en cada lado y agregue otros 11 píxeles en una línea perpendicular.
Drawing the clasp on the leather band

Paso 3

  1. Termine la correa con dos líneas diagonales de un solo píxel.
  2. Llene las secciones de la correa con marrón claro (#bb5f15) con la herramienta Lápiz o hágalo con la herramienta Cubo de pintura.
  3. No te olvides de llenar el centro de la correa.
  4. Para el broche, utilicé dorado amarillo (#fbc423).
Base colors for the leather band

Paso 4

  1. En este punto, decidí crear una nueva capa por el bien de trabajar en la prestación de la correa de cuero. Comience con reflejos usando un marrón más claro que el color base (#d67b1b) con líneas diagonales compuestas de 2 o 3 píxeles de grosor.
  2. En el caso de las sombras, alinee los lados de la correa con marrón oscuro (#9b3f0e), así como con líneas finas al lado del broche y por toda la correa (ver a continuación) en diagonal, a lo largo del ancho de la correa.
  3. Repita en el otro lado de la correa.
  4. Use marrón oscuro en el centro de la correa, alineando los bordes superior e inferior de esa sección de píxeles. Para el broche de oro, dibuja líneas diagonales de ocre amarillo (#c27b17) en el borde superior e inferior y crema (#f8dd92) escalonada en la sección central del broche. Combina (Control-E) las capas de la correa juntas (manteniéndola separada de la capa de fondo).
Rendering the leather strap

3. Cadena y papel

Paso 1

Comencemos con el arte lineal de la cadena. Conectará la correa de cuero al menú navegable.

  1. Comience con la parte superior del primer enlace: 2 píxeles en una línea con 2 píxeles hacia abajo diagonalmente en dos filas.
  2. Conecte la primera fila de píxeles diagonales en 2 píxeles y dibuje 3 píxeles hacia abajo en cuatro columnas omitiendo una o dos líneas de espacio (consulte a continuación). Complete la forma (antes de trabajar en el siguiente enlace) con 2 píxeles diagonales en cada lado, yendo hacia adentro, hacia el centro de la forma.
  3. El primer enlace es esencialmente un pequeño rectángulo de 3 píxeles por 5 píxeles con el píxel de la esquina superior derecha del remolque eliminado y agregado a la esquina inferior izquierda.
  4. Desde aquí, estamos repitiendo la forma básica del eslabón de cadena creado en las dos primeras secciones de este paso con 4 píxeles de ancho, un solo píxel diagonal a cada lado, 3 píxeles hacia abajo y 2 píxeles hacia abajo en diagonal que conducen al siguiente eslabón de la cadena.
  5. Repita las secciones 3-4 de este paso para que haya 8 eslabones de cadena en total (consulte a continuación).
Drawing the chain

Paso 2

  1. Comenzando con el color de sombra (#c27b17), enfoque el color en la esquina inferior izquierda de cada uno de los eslabones de la cadena circular.
  2. Luego, complete la parte del medio del diseño con amarillo dorado (#fbc423).
  3. Finalmente, dibuje algunos píxeles en la esquina superior derecha de cada cadena en amarillo cremoso (#f8dd92).
  4. Para el papel al que está conectada la cadena, dibujará un rectángulo al que le faltan los píxeles de la esquina superior. El tamaño total que utilicé es de 53 por 36 píxeles. Me resultó más fácil dibujar el rectángulo en una Nueva Capa, moviendo la cadena hacia el centro superior del rectángulo. El agujero en el papel es de 4 por 5 píxeles.
  5. El "pliegue" en el papel es de 6 píxeles hacia arriba y hacia adentro a la derecha. Elimine píxeles de esquina o píxeles innecesarios con la herramienta Borrador (E) configurada en Lápiz (pincel predeterminado a 1px) o Bloque (Zoom (Z) en para borrar uno o unos píxeles a la vez).
Rendering the chain and drawing the paper menu

Paso 3

  1. Combina la capa de cadena en la capa de papel. Use la herramienta Cubo de pintura (G) para llenar el papel con crema ligera (#fefbd8).
  2. Para las líneas de sombra en el papel, use la herramienta Lápiz de nuevo y un color crema más oscuro (#f8de93).
  3. Coloque la cadena debajo de la correa de cuero en el panel Capas. La cadena está destinada a colgarse del broche de la correa.
Creating the first menu

4. Elementos de menú

Paso 1

El cursor del guante caricaturesco aparece dos veces dentro del diseño. Crea una nueva capa y vamos a dibujar una mano.

  1. Comience con la herramienta Lápiz, marrón (#6c0e04) como color de primer plano, y 7 píxeles hacia abajo.
  2. La línea superior tiene 13 píxeles de ancho, la línea inferior tiene 11 píxeles de ancho y la línea vertical que denota el manguito del guante tiene 7 píxeles de profundidad.
  3. Para el dedo que señala, agregue 2 píxeles hacia abajo desde el final de la línea superior y 4 píxeles hacia la izquierda. En el centro de la forma de dedo que acabamos de crear, dibuja 3 píxeles adicionales hacia abajo para cerrar la forma.
  4. Agregue 3 píxeles para definir dos dedos más dentro del guante (ver a continuación).
  5. Para el pulgar, dibuja un pequeño rectángulo de 5 píxeles desde la izquierda que es de 2 píxeles por 5 píxeles con los píxeles de la esquina eliminados.
  6. Finalmente, la sombra debajo de la mano tiene el mismo color marrón reducido a 50% de opacidad. Llene la mano y el manguito con blanco utilizando la herramienta de cubo de pintura.
Drawing the hand cursor

Paso 2

Coloque la mano sobre la selección de menú elegida. Lo que sea que su guante apunte a este menú correlacionará directamente con el segundo menú. Mantenga la mano en un lugar separado más adelante por ahora, ya que necesitaremos una copia más tarde.

Utilice la herramienta Texto (T) para escribir el texto con Small Fonts Regular u otra fuente pequeña compatible con píxeles, a un tamaño de 10pt. Cada palabra era una capa de texto separada. Verifique su alineación a continuación.

Choosing menu options

Paso 3

Copie (Control-C) y Pegue (Control-V) el papel y la mitad de la cadena usando la Herramienta Rectangulo (M). Alargue el centro del papel ya sea redibujándolo o copiando y pegando partes del papel ya dibujado para completar el espacio. El segundo menú es esencialmente el doble del tamaño del primer menú.

Setting up the first menu

5. Dibuja el corazón rojo

Paso 1

  1. Para el corazón, crea una nueva capa y comienza en el lado izquierdo del corazón con 4 píxeles de ancho, en marrón.
  2. Dibuje una pequeña forma de V formada por 3 píxeles en el centro y 4 píxeles de nuevo para completar la parte superior del corazón.
  3. Luego viene 2 píxeles en diagonal a cada lado, saliendo y bajando.
  4. Agrega 5 píxeles a cada lado bajando por los lados del corazón.
  5. Dibuja 6 píxeles diagonales en ángulo hacia el centro del corazón.
  6. Completa el corazón con 3 píxeles de ancho en la parte inferior de la forma.
  7. Comience a llenar el corazón con rojo oscuro (#bb0708) en las esquinas interiores de la parte superior de la forma.
  8. Continúa alineando el corazón a lo largo del lado derecho e inferior.
Drawing the heart

Paso 2

  1. Llene el corazón de rojo brillante (#fa0000) y alinee el corazón con una segunda capa de rojo medio (#e10507) (entre rojo brillante y rojo oscuro del paso anterior).
  2. Comience los aspectos más destacados con luz roja (#fa6964) en el lado izquierdo del corazón.
  3. Dibuje círculos pequeños de color rojo claro moviéndose hacia la izquierda.
  4. Usando blanco, agregue un par de puntos de puntos calientes en el centro (o cerca de ellos) de las formas resaltadas (vea abajo).
Rendering the heart

6. Dibuja el Cofre del Tesoro

Paso 1

El cofre del tesoro es un rectángulo modificado (tiene una parte superior redondeada). Una vez más, crea una nueva capa.

  1. Para el lado izquierdo del cofre, dibuja una línea vertical con la herramienta Lápiz que consta de 17 píxeles. La parte superior comienza con 2 píxeles de ancho, seguido de 3 píxeles en la línea siguiente, 19 píxeles en la siguiente línea, 3 píxeles en la siguiente línea y 2 píxeles en la siguiente línea.
  2. Completa el lado derecho con 17 píxeles en una línea vertical, yendo hacia abajo. Salta los píxeles de la esquina y conéctate a los dos lados con 30 píxeles de ancho. Para la división del centro, dibuja 30 píxeles en la fila que está 8 píxeles hacia abajo desde la parte superior de las líneas laterales.
  3. En el centro de la separación del cofre, dibuja la parte superior de la cerradura del cofre con 4 píxeles de ancho y 4 píxeles de abajo, reunidos en sus diagonales. Para el inicio del centro del bloqueo, borre 1 píxel a cada lado del centro dos.
  4. Comenzando a agregar color, rellene el candado con amarillo dorado (#953608). Mientras estás en ello, dibuja 3 columnas de amarillo a cada lado del cofre a 3 píxeles de la izquierda y la derecha, respectivamente. Use marrón (#bb5f15) para alinear la parte inferior de la división en el cofre, omitiendo los píxeles amarillos en el camino.
  5. Escalone los píxeles amarillos (#fbf348) en el centro de las franjas doradas en la mitad inferior del cofre.
  6. Alinee la parte inferior del cofre con el mismo marrón usado anteriormente. Completa la cerradura del cofre con 4 píxeles amarillos dorados en la parte inferior de la forma de bloqueo y 6 píxeles marrones debajo de ellos.
Drawing the treasure chest

Paso 2

  1. Rellene el centro y la parte superior del cofre con marrón claro (#fbc423) con la herramienta Cubo de pintura.
  2. Rellene los lados del cofre con el mismo color marrón claro.
  3. Dibuja otra línea de píxeles marrones debajo de la división en el cofre así como en las esquinas del borde superior.
  4. Dibuje líneas verticales medianas marrones (#a84913) desde la parte superior hasta el centro del cofre. Alinee el centro de la parte inferior del cofre con líneas marrones medianas de píxeles (tenga en cuenta tanto las flechas como los píxeles a los que apuntan para ubicarlos).
  5. Usando un marrón mucho más claro que antes (#fdaa74), dibuja una línea horizontal a lo largo de la parte superior del cofre, omitiendo los píxeles marrones medianos. Alterne los píxeles de color marrón claro a través de la línea siguiente (consulte a continuación).
  6. Agregue un par de píxeles amarillos a la cerradura del cofre como toque final.
Rendering the treasure chest

7. Dibuja el hacha

Paso 1

Crea una nueva capa y sigamos dibujando el hacha.

  1. Dibuje 3 píxeles en gris medio a lo ancho (# 5c5c5c).
  2. La curva del lado izquierdo del hacha está a 5 píxeles hacia abajo, seguida de 2 píxeles hacia abajo, luego 2 píxeles de ancho y 5 píxeles de ancho. Muchas de las líneas y formas dentro de este icono se duplican, por lo que está lleno de repeticiones.
  3. Usando gris (#afafaf), dibuje una forma de L invertida que consta de 3 píxeles de ancho y 5 píxeles de abajo, comenzando en el centro de la línea superior. Con gris oscuro (#333333), obtenemos un poco de fantasía en la forma, pero es 1 píxel en diagonal y hacia la derecha de la línea inferior, 2 píxeles hacia la izquierda, 2 píxeles más hacia arriba y 1 píxel hacia la derecha en diagonal.
  4. Comenzando desde la esquina de la forma de L gris, dibuja una línea diagonal de 4 píxeles. Conecte los píxeles gris oscuro a la forma gris con 3 píxeles de ancho y 1 píxel en diagonal.
  5. Con un gris medio, coloque 1 píxel en la diagonal de los dos píxeles más altos y más a la derecha (consulte la ubicación exacta a continuación). Continúe con gris claro agregando 1 píxel a la derecha del gris y 2 abajo diagonalmente.
  6. Complete el resto del diseño con un gris aún más claro (#d7d7d7).
  7. Para el inicio del mango del hacha, dibuja dos líneas diagonales de 7 píxeles en marrón (#6c0e04). Use blanco para agregar algunos reflejos al lado izquierdo de la hoja del hacha.
  8. Continúe el mango diagonal en color marrón claro (#93360b) y termínelo con un ángulo de 90 °.
and my axe part one

Paso 2

  1. Complete el centro del mango con marrón medio (#993511).
  2. Completa el resto del mango con un marrón aún más claro (#bb5f16). Vamos a trabajar en el lado derecho del hacha. Directamente del lado izquierdo, dibuja 3 píxeles hacia arriba, 5 píxeles de lado a lado, 2 píxeles de ancho (en el nivel inferior al último), 2 píxeles hacia abajo y 5 píxeles hacia abajo, todo en gris. Con gris oscuro, cierre la forma con 1 píxel en la diagonal del último gramo dibujado, 2 píxeles hacia arriba y agregue 2 píxeles más a la izquierda. Refleje los dos píxeles grises oscuros que coinciden con el asa central (consulte la ubicación exacta a continuación).
  3. Con gris claro, comience en el píxel gris oscuro superior con 3 píxeles de alto, 5 píxeles de ancho, 1 píxel de diagonal y 3 píxeles de profundidad. Luego, dibuje una línea diagonal de 4 píxeles en el centro del eje y luego coloque 3 píxeles de gris claro a lo largo del lado del mango (consulte a continuación).
  4. Complete el resto del hacha con un gris más claro (código hexadecimal en el paso anterior) y use blanco para resaltar.
  5. Para la parte superior del eje, utilice una variedad de píxeles dorados, marrones y amarillos (los mismos colores utilizados para el cofre del tesoro).
  6. Repita en la parte inferior (en más de una forma cerrada que en la parte superior) con grises surtidos utilizados en la hoja del hacha.
and my ax part two

8. Dibuja la moneda de oro

Paso 1

Nuestro ícono final para el segundo menú es la moneda de oro. Una vez más, crea una nueva capa y prepara tu herramienta Lápiz.

  1. Dibuja 7 píxeles de ancho para el borde superior de la moneda.
  2. A cada lado de la línea superior, tendrá 2 píxeles de ancho, 1 píxel diagonal (hacia afuera) y 2 píxeles hacia abajo.
  3. Los lados están a 6 píxeles hacia abajo en este diseño y la parte inferior es una repetición de la mitad superior de los píxeles (me pareció más fácil copiar, pegar y voltear verticalmente, luego unir las capas de lineart de la moneda).
  4. En las esquinas de la curva del círculo, coloque los píxeles en ocre amarillo (#bb6403).
  5. Continúa usando ocre amarillo para crear un círculo más pequeño en el centro de la moneda. Cada lado consta de 5 píxeles en el centro y 2 píxeles en cada lado. Repita para cerrar el círculo más pequeño.
  6. En la mitad inferior del círculo más pequeño, coloque píxeles de ocre oscuro (#974000) en las esquinas de cada línea (consulte la ubicación exacta a continuación).
  7. Comience a llenar la moneda con oro (#ffaa1b) en la mitad inferior y una línea pequeña de 3 píxeles en el centro inferior del diseño.
Drawing the gold coin

Paso 2

  1. En el centro de la moneda hay una letra mayúscula G. Trabajando fuera de los 3 píxeles dibujados en el paso anterior, continúe con ocre amarillo, ocre oscuro y marrón. Vea a continuación la ubicación exacta de cada color. La forma consta de 4 píxeles verticales, 2 píxeles en cada lado, 5 píxeles de ancho y 2 píxeles hacia arriba.
  2. Para el borde superior de la G, dibuja 4 píxeles de ancho y 1 píxel en la diagonal.
  3. Completa la G con 3 píxeles en el brazo de la carta. Llene la segunda línea entre la G con píxeles amarillos dorados.
  4. Llene el centro de la moneda, cubriendo el resto de la G con un amarillo dorado más claro (#f9c325).
  5. Usando el mismo amarillo claro más claro y un amarillo brillante (#ffef51), trabaje para completar la parte superior de la moneda.
  6. Use crema (#fff7b6) para resaltar en la parte superior derecha del diseño de la moneda para completarla.
Rendering the gold coin

Paso 3

Coloque los íconos completados en una línea en el centro del segundo menú. Copie y pegue el icono de la mano y asegúrese de que esté apuntando al ícono correspondiente con el primer menú (en este caso, "elemento" corresponde con el cofre del tesoro).

Setting up the second menu

8. Medidores de nivel de inventario

Paso 1

Cada medidor comienza con el mismo diseño de marco. Crea una nueva capa y completa lo siguiente:

  1. Dibuje un rectángulo largo con la herramienta Lápiz en el mismo marrón utilizado para los otros elementos del lineart y cubriendo la mayor parte del resto del espacio de la IU. Manténgalo redondeado borrando los píxeles de la esquina.
  2. Dibuje pequeños cuadros de píxeles de 2 por 2 píxeles amarillos dorados en cada esquina del rectángulo grande.
  3. Coloque un solo píxel amarillo en cada esquina. Use marrón para dibujar un rectángulo más pequeño, dejando una línea de 1 píxel de ancho en cada lado.
  4. Llene el centro del rectángulo más pequeño con crema clara (#fffcd3) con la herramienta Cubo de pintura.
  5. Complete el marco con marrón claro (#c45d12).
  6. Use marrón medio (#9e3e14) para agregar 2 píxeles a cada lado de cada esquina del diseño del marco. Alinee la parte inferior del interior del marco con un color tostado (#cfa984).
  7. Usando el mismo marrón medio, agregue un píxel o dos cada 5-8 píxeles alrededor del marco.
Drawing the frames for level gauges

Paso 2

Copie y pegue el diseño del marco 3 veces. Elija un nivel arbitrario para cada indicador y complete con el color correspondiente de cada elemento:

  • Rojo (#fe0211) para el corazón.
  • Marrón (#d47d1e) para el cofre del tesoro.
  • Gris (#b1b1b1) para el hacha.
  • Oro (#ffc643) para la moneda.
Filling in the level gauges

Paso 3

Cada indicador de nivel obtiene una o dos líneas de píxeles en un color de resaltado y en un color de sombra. Use lo siguiente para cada uno:

  • Rojo destacado: #ff6563; Rojo sombra: #bd0704
  • Destacado marrón: #f4912c; Marron Sombra: #f4912c
  • Gris destacado: #dee4e0; Gris sombra: #5c5a5d
  • Oro destacado: #ffe33a; Gold Shadow: #d87e06
Rendering the level gauges

Bien hecho, ¡tu!

¡Se acabó! Muestra la capa de fondo en el panel Capas y alinea los indicadores de nivel de la manera que se muestra a continuación. Mejore aún más el diseño de su píxel artístico creando una maqueta del juego de la que procede esta interfaz de usuario, cambiando la cantidad de información que se muestra o eligiendo su propio esquema de color para la pieza en general. ¡Muéstranos tu versión, ya sea fiel al diseño de este tutorial o a tu propio giro en el concepto, en la sección de comentarios a continuación!

Para ver más tutoriales de arte en píxeles, consulte lo siguiente:

Final design image
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.