Cree un botón de juego inspirado en Diablo 3 en Adobe Photoshop – Photoshop Star

En el tutorial de Photoshop de hoy, aprenderá cómo crear un botón de juego inspirado en Diablo 3.



Imagen final

Como siempre, esta es la imagen final que crearemos:

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Detalles del tutorial

  • Programa: Adobe PhotoshopCC
  • Tiempo estimado de finalización: 60 minutos
  • Dificultad: Principiante Intermedio

Recursos


Paso 1

Crear un 600x 400px documento, vaya a Ver > Mostrar > Cuadrícula para habilitar la Cuadrícula y luego vaya a Ver > Ajustar a > Cuadrícula para habilitar el Encajar a la cuadricula. Golpear Controlar + K para abrir la ventana de Preferencias, vaya a Guías, Cuadrícula y rebanadas e ingrese las configuraciones mencionadas en la siguiente imagen. A lo largo del tutorial apagué la cuadrícula ( Mando + ‘ ) para que usted tenga una mejor visión. La cuadrícula le facilitará la creación/edición de las formas.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 2

concéntrate en tu Barra de herramientas y rellene el color de primer plano con #765B41.

Selecciona el Herramienta Rectángulo redondeadoconcéntrese en la barra superior y establezca el Radio en 2 píxeles.

Vaya a su lienzo y cree un 192 x 56 píxeles forma vectorial

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 3

Abre el Estilo de capa ventana para la forma vectorial existente e ingrese la configuración que se muestra a continuación.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Etapa 4

Cambia el color de primer plano a #B27777 y elige el Herramienta rectangular.

Vaya a su lienzo, cree un 188 x 52 píxeles forma vectorial y colóquelo como puede ver a continuación.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 5

Abre el Estilo de capa ventana para la forma vectorial realizada en el paso anterior e ingrese la configuración que se muestra a continuación.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 6

Con la misma herramienta, enfócate en tu lienzo, crea un 172 x 42 píxeles forma vectorial y colócala como puedes ver en la siguiente imagen.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 7

Abre el Estilo de capa ventana para la forma vectorial realizada en el paso anterior e ingrese la configuración que se muestra a continuación.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 8

Importar esta textura a su documento y colóquelo sobre las formas vectoriales.

Concéntrate en tu Capas panel, sostenga el Control de su teclado y luego haga clic en el icono de miniatura que representa la forma vectorial editada en el paso anterior para cargar una selección simple a su alrededor.

Ahora, asegúrese de que su textura esté seleccionada, haga clic en el Botón Agregar máscara de capa y luego cambiar el Modo de mezcla para Cubrir.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 9

Asegúrese de que el Herramienta rectangular aún está seleccionado, cree un 25 x 7 píxeles forma vectorial y colócala como puedes ver en la primera imagen.

elige el Herramienta de selección directaseleccione el punto de anclaje resaltado en rojo y muévalo 7 píxeles a la izquierda.

Ahora, seleccione el punto de anclaje resaltado en verde y muévalo 4 píxeles A la derecha.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 10

Abre el Estilo de capa ventana para la forma vectorial realizada en el paso anterior e ingrese la configuración que se menciona a continuación.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 11

Centrarse en el Capas panel, seleccione la forma vectorial resaltada y duplíquela usando el Controlar + J atajo de teclado.

Seleccione la copia nueva, vaya a Editar > Transformar > Voltear verticalmente y colócalo como puedes ver en la segunda imagen.

Abre el Estilo de capa ventana para esta copia e ingrese la configuración que se muestra a continuación.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 12

elige el Herramienta rectangularcrear un 7×38 píxeles forma vectorial y colócala como puedes ver en la primera imagen.

Toma el Herramienta de selección directaseleccione el punto de anclaje resaltado en rojo y muévalo 7 píxeles arriba.

Ahora, seleccione el punto de anclaje resaltado en verde y muévalo 7 píxeles abajo.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 13

Abre el Estilo de capa ventana para la forma vectorial realizada en el paso anterior e ingrese la configuración que se muestra a continuación.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 14

Centrarse en el Capas panel, seleccione todas las formas vectoriales resaltadas en la siguiente imagen y luego duplíquelas. Haga clic derecho en uno de ellos y vaya a Convertir a objeto inteligente.

Ahora, asegúrese de que el Objeto inteligente está seleccionado, vaya a Editar > Transformar > Voltear horizontal y colóquelo en el lado opuesto.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 15

Establezca el color de primer plano en #2D1D15elige el Lapicera y crea la siguiente forma vectorial.

Toma el Agregar herramienta de punto de anclaje y agrega dos nuevos puntos de anclaje como puedes ver en la segunda imagen.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 16

elige el Herramienta de selección directaseleccione uno a uno los puntos de anclaje agregados en el paso anterior y muévalos 1 píxeles hacia el centro.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 17

Abre el Estilo de capa ventana para la forma vectorial realizada en el paso anterior e ingrese la configuración que se muestra a continuación.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 18

Asegúrese de que la forma vectorial editada en el paso anterior aún esté seleccionada y luego duplíquela.

Seleccione la copia, vaya a Editar > Transformar > Voltear horizontal y colóquelo en el lado opuesto.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 19

Cambia el color de primer plano a #765B41elige el Lapicera y crea la siguiente forma vectorial.

Toma el Agregar herramienta de punto de anclaje y agrega dos nuevos puntos de anclaje como puedes ver en la segunda imagen.

Ahora, simplemente elija el Herramienta de selección directaseleccione uno por uno los puntos de anclaje agregados en este paso y luego arrástrelos 2 píxeles hacia el centro. El resultado debe ser el mismo que se puede ver en la última imagen.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 20

Abre el Estilo de capa ventana para la forma vectorial realizada en el paso anterior e ingrese la configuración que se muestra en las siguientes imágenes.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 21

elige el Lapiceramuévase a su lienzo y cree la siguiente forma vectorial.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 22

Abre el Estilo de capa ventana para la forma vectorial realizada en el paso anterior e ingrese la configuración que se muestra en las siguientes imágenes.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 23

Seleccione todas las formas vectoriales del lado izquierdo de su botón y duplíquelas. Seleccione las copias, vaya a Editar > Transformar > Voltear horizontal y colóquelos en el lado opuesto.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 24

Abre la ventana de tu personaje ( Ventana > Carácter ) y usa el Mal muerto regular fuente.

Cambia el color a #CDCDCDestablezca el tamaño en 16 píxeles y luego ingrese el texto como se muestra a continuación.

Abre el Estilo de capa ventana para este texto, vaya a la Sombra paralela e ingrese la configuración que se muestra a continuación.

Una vez que el botón está listo, puede seleccionar todas las formas que componen su botón y agruparlas usando el Controlar + G atajo de teclado. Ahora puedes duplicar tu botón cuando quieras.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 25

Centrarse en el Capas panel, seleccione la capa Fondo y haga clic en el icono del candado para desbloquear la capa.

Abre el Estilo de capa ventana para esta capa e ingrese la configuración que se muestra a continuación.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


Paso 26

Centrarse en el Capas panel y duplicar la capa realizada en el paso anterior. Asegúrese de que la capa nueva esté seleccionada, haga clic derecho sobre ella y vaya a Borrar estilo de capa.

Asegúrese de que la capa nueva aún esté seleccionada y baje el Llenar para 0%.

Ahora, simplemente abra el Estilo de capa ventana para esta nueva capa e ingrese la configuración que se muestra a continuación.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop
Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop


¡Y hemos terminado!

Así es como debería verse el resultado final.

Crea un botón de juego inspirado en Diablo 3 en Adobe Photoshop

¿Todavía no eres usuari@ de Fiverr ?

Tenemos una entrada sobre Fiverr donde te contamos cono funciona.

Deja un comentario