Cómo crear botones 3D con Adobe Photoshop

Cómo crear botones 3D con Adobe Photoshop

Hay muchas cosas increíbles que puedes crear en Adobe Photoshop que son útiles en línea, desde simples marcos de imágenes hasta complejas interfaces de usuario. Una de las cosas más útiles que puede crear en Photoshop son los botones 3D, que serán útiles si ejecuta un blog o sitio web con una interfaz personalizada.





En este artículo, le mostraremos cómo crear botones 3D usando Photoshop, junto con estados visuales 'arriba' y 'abajo', para que pueda animarlos. (No cubriremos la animación en sí en este artículo).



Paso 1: prepare su documento

Si bien los botones 3D aparecen con mayor frecuencia en los sitios web, es importante tener en cuenta que existen otras aplicaciones para ellos, como GIF animados, maquetas de productos y juegos móviles. Dependiendo de para qué esté creando este botón, su formato de archivo final y las dimensiones del mismo pueden variar.





Para crear un botón 3D en Photoshop, deberá crear un documento personalizado para él. Para hacer esto, abra Photoshop y haga clic en Crear nuevo> Personalizado . Empiece a escribir sus valores.

Para crear un botón 3D, querrá un documento horizontal. Para el nuestro, usamos:



  • 900 x 300 píxeles de alto
  • 300 píxeles / pulgada
  • Modo de color RGB

Si bien estas especificaciones definitivamente no son una regla estricta y rápida, esto asegurará que tenga espacio más que suficiente para trabajar y la capacidad de escalar el tamaño de su botón hacia arriba y hacia abajo según sea necesario.

Paso 2: configura tu rectángulo para tu botón 3D

Después de configurar las especificaciones para su archivo, será llevado a su espacio de trabajo. Vas a tener un lienzo blanco horizontal en una sola capa, y aquí es donde comenzarás a construir tu botón.



Para construir su botón 3D, haga clic en el Herramienta Rectángulo redondeado en el lado izquierdo de la pantalla, que se ve aquí en rojo. También puedes usar el atajo U para acceder a él.

Haga clic una vez en su capa blanca: esto mostrará automáticamente su Crear rectángulo redondeado caja. Utilizará este cuadro para especificar las dimensiones de su rectángulo.



Para nuestro botón, elegimos:

  • 300 píxeles de ancho
  • 75 píxeles de alto

También nos aseguramos de que las esquinas estuvieran redondeadas en 10 píxeles. Ni demasiado alto ni demasiado bajo tampoco. Entonces presionamos OK .

Nota: Los botones varían según el tamaño y la forma, así que no sienta que tiene que usar estas dimensiones exactas. Además, si está buscando más información sobre accesos directos, aquí tiene algunos de los comandos de teclado de Photoshop más útiles .

Cuando presionas OK , Photoshop creará un rectángulo redondeado con estas dimensiones dentro de su capa. Puedes cambiar su Llenar y Carrera colores mediante el uso de los menús desplegables en la esquina superior izquierda de la pantalla.

Para el propósito de este tutorial --- y para ilustrar cómo se verían los botones 'arriba' y 'abajo' --- vamos a hacer que nuestro botón 'abajo' sea rojo.

Paso 3: haz tu botón 3D

Después de crear su botón básico y elegir su color, querrá ajustarlo en el Estilo de capa caja de diálogo. Esto es para que parezca más 3D.

Para acceder a su Estilo de capa cuadro de diálogo, puede ir Capa> Estilo de capa en el menú superior. También puede hacer doble clic en la capa que contiene su botón, para que aparezca automáticamente. De esta forma es mucho más rápida y personalmente la preferimos.

Una vez que su cuadro de Estilo de capa esté arriba, vaya a la opción Bisel y relieve . Encenderlo.

Esta es una manera rápida y fácil de dar a los bordes de su botón un aspecto más elevado y en '3D'. Para este tutorial, estas son las configuraciones que usamos:

Estructura

  • Estilo: Bisel interior
  • Técnica: Cincel suave
  • Profundidad: 605
  • Dirección: Hasta
  • Tamaño: 5
  • Ablandar: 1

Sombreado

  • Ángulo: 90
  • Altitud: 37
  • Modo de resaltado: Sobreexposición de color, 55% de opacidad
  • Modo sombra: Múltiple, 25% de opacidad

El truco consiste en hacer la configuración lo suficientemente alta como para que pueda ver alguna diferencia, pero no tan fuerte que sea abrumadora.

Después de terminar con Bevel & Emboss, fuimos a Contorno y también lo encendió. Contour hace que la definición de Bevel & Emboss sea un poco más fuerte, y para este tutorial elegimos la configuración Cono - Invertido .

A continuación, enciende Gradiente de superposición . Esto es lo que le da a un botón ese aspecto redondeado y ligeramente 'brillante'. Los ajustes son los siguientes:

  • Modo de mezcla: Cubrir
  • Opacidad: 90
  • Estilo: Lineal
  • Ángulo: 90
  • Escala: 100

Finalmente, encendemos Sombra paralela , para que el botón se vea un poco 'elevado' del fondo blanco de un sitio web o blog. Nuevamente, aquí están las configuraciones:

historia de una casa por dirección

Estructura

  • Modo de mezcla: Múltiple
  • Opacidad: 35
  • Ángulo: 90
  • Distancia: 2
  • Propagar: 6
  • Tamaño: 8

Calidad

  • Contorno: Lineal
  • Ruido: 0
  • La capa elimina la sombra paralela: Sobre

Ahora es el momento de guardar estas especificaciones como estilo de capa.

Paso 4: guardar como estilo de capa

Una vez que termine con la configuración de su botón, comenzará a verse en 3D. Debido a que es muy probable que cree más de un botón 3D, necesitamos encontrar una manera rápida y fácil de hacerlo.

Así es cómo.

Antes de hacer clic OK en el Estilo de capa cuadro de diálogo, haga clic en Nuevo estilo . Cuando lo haga, Photoshop guardará este estilo de capa que ha creado para su botón.

Si está utilizando Photoshop CC, este nuevo estilo se guardará en su Bibliotecas sección, como puede ver arriba. Es muy rápido y de fácil acceso.

Paso 5: Cómo utilizar un estilo de capa guardado

Ahora que ha diseñado su botón y lo ha guardado como estilo de capa, veámoslo en acción para su estado 'activo'. No es una mentira, esto reducirá su tiempo de trabajo a la mitad.

Primero, creemos otro botón directamente encima de la capa del botón rojo, así. Hagámoslo verde, para enfatizar.

Siguiente --- en lugar de hacer doble clic en la propia capa para que aparezca el Estilos de capa cuadro de diálogo --- haga doble clic en el estilo de capa en su Bibliotecas panel.

Cuando lo haga, Photoshop aplicará automáticamente su estilo guardado a su nueva capa de botones, mientras mantiene su nuevo color y forma. Ahora tiene dos botones, uno en un estado hacia arriba y otro hacia abajo, y es muy simple de hacer. Amo este atajo.

Paso 6: agregue texto a su botón

A continuación, agregaremos texto al botón.

Para agregar texto, cree una nueva capa sobre las capas de dos botones. Haga clic en el Herramienta de tipo para empezar a escribir.

Para este tutorial, vamos a escribir la palabra 'suscribirse' porque es algo que ve con bastante frecuencia en sitios web y plataformas de redes sociales.

También usaremos una fuente san serif segura para la web. La elección final de cuál usar para su propio botón depende de usted. Montserrat, Proxima Nova, Arial y Verdana son alternativas ampliamente utilizadas y seguras para la web.

Sin embargo, una vez hecho esto, todavía hay algunos cambios más sutiles que debe realizar para que este texto 'salte'.

Primero, haga doble clic en la capa que contiene su texto para que pueda mostrarlo en su Estilo de capa caja de diálogo.

A continuación, haga clic en Sombra interior , para agregar un poco de depresión (o área hundida) a su texto. Esto hace que parezca que las letras se han grabado en el botón. La configuración exacta que usamos para este tutorial se encuentra a continuación.

Estructura

  • Modo de mezcla: Multiplicar
  • Opacidad: 35
  • Ángulo: 90
  • Distancia: 2
  • Ahogo: 4
  • Tamaño: 1

Calidad

  • Contorno: Lineal
  • Ruido: 0

A continuación, aplique un Gradiente de superposición a esas letras, para que se mezclen más fácilmente con el botón sin que parezcan planas. Nuevamente, las configuraciones para las nuestras son:

  • Modo de mezcla: Color quemado
  • Opacidad: 90
  • Estilo: Lineal
  • Ángulo: 90
  • Escala: 100

Paso 7: Terminando

Después de crear este estilo de texto, especialmente si desea volver a usarlo, vaya a Nuevo estilo y guárdelo antes de hacer clic OK .

Con eso envuelto, puede cambiar rápidamente hacia adelante y hacia atrás en la visibilidad entre sus dos capas de botones, para ver cómo se ven los estados 'arriba' y 'abajo'.

Bastante bien, ¿eh? Para guardar su archivo, vaya Archivo> Guardar como y guárdelo con el formato de archivo adecuado para cualquier proyecto en el que esté trabajando.

Personaliza tu blog con botones y widgets 3D

Ahora que sabe cómo crear botones 3D en Photoshop, puede ser creativo con él, diseñando sus propios botones 3D para satisfacer sus necesidades. Y con estas habilidades en su arsenal, puede hacer un producto que no solo sea profesional, sino también de aspecto personal.

¿Quiere saber otras cosas que puede hacer con este programa? Aquí está cómo eliminar un fondo en Photoshop .

Cuota Cuota Pío Correo electrónico Cómo acceder al nivel de burbuja integrado de Google en Android

Si alguna vez ha necesitado asegurarse de que algo esté nivelado en un apuro, ahora puede obtener un nivel de burbuja en su teléfono en segundos.

Leer siguiente Temas relacionados
  • Creativo
  • Adobe Photoshop
  • Consejos de edición de imágenes
  • Tutorial de Photoshop
Sobre el Autor Shianne Edelmayer(136 Artículos publicados)

Shianne tiene una licenciatura en diseño y experiencia en podcasting. Ahora, trabaja como escritora senior e ilustradora 2D. Cubre tecnología creativa, entretenimiento y productividad para MakeUseOf.

Más de Shianne Edelmayer

Suscríbete a nuestro boletín

¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!

Haga clic aquí para suscribirse