Cómo crear botones 3D con Adobe Photoshop

Anuncio

Hay muchas cosas increíbles que puedes crear en Adobe Photoshop que son útiles en línea, desde simples marcos de cuadros hasta complejas interfaces de usuario. Una de las cosas más útiles que puedes crear en Photoshop son 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 con Photoshop, junto con los estados visuales "arriba" y "abajo", para que pueda animarlos. (No cubriremos la animación en este artículo).

Paso 1: prepara tu documento

Si bien los botones 3D aparecen con mayor frecuencia en los sitios web, es importante tener en cuenta que hay otras aplicaciones para ellos, como GIF animados, pantallas de productos simulados y juegos móviles. Dependiendo de para qué esté creando este botón, su formato de archivo final y sus dimensiones 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. Comience a escribir sus valores.

Para crear un botón 3D, querrá un documento horizontal. Para los nuestros, utilizamos:

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

Si bien estas especificaciones definitivamente no son una regla difícil y rápida, esto garantizará 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. Tendrá un lienzo blanco horizontal en una sola capa, y aquí es donde comenzará a construir su botón.

Para construir su botón 3D, haga clic en el Herramienta de rectángulo redondeado en el lado izquierdo de su pantalla, visto aquí en rojo. También puedes usar el atajo U para acceder a ella

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, fuimos con:

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

También nos aseguramos de que las esquinas estuvieran redondeadas por 10 píxeles. No muy alto, y tampoco muy bajo. Luego presionamos Okay.

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í hay algunos de los comandos de teclado de Photoshop más útiles.

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

A los efectos de este tutorial, y para ilustrar cómo se vería un botón "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 tu Estilo de capa cuadro de diálogo, puedes ir Capa> Estilo de capa desde el menú superior. También puede hacer doble clic en la capa que contiene su botón, para que aparezca automáticamente. De esta manera es mucho más rápido y personalmente lo 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, "3D". Para este tutorial, estas son las configuraciones que utilizamos:

Estructura

• Estilo: Bisel interior
• Técnica: Cincel Suave
• Profundidad: 605
• Dirección: Arriba
• Talla: 5
• Ablandar: 1

Sombreado

• Ángulo: 90
• Altitud: 37
• Modo de resaltado: Color Dodge, 55% de opacidad
• Modo sombra: Múltiple, 25% de opacidad

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

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

A continuación, encienda Gradiente de superposición. Esto es lo que le da a un botón ese aspecto redondeado, ligeramente "brillante". La configuración es la siguiente:

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

Finalmente, encendimos Sombra, 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:

Estructura

• Modo de mezcla: Múltiple
• Opacidad: 35
• Ángulo: 90
• Distancia: 2
• Untado: 6
• Talla: 8

Calidad

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

Ahora es el momento de guardar estas especificaciones como un 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 hay muchas posibilidades de que esté creando 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 Okay en el Estilo de capa cuadro de diálogo, haga clic en Nuevo estilo. Cuando lo haga, Photoshop guardará este estilo de capa que creó para su botón.

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

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

Ahora que ha diseñado su botón y lo ha guardado como un Estilo de capa, veámoslo en acción para su estado "activo". Ni una palabra de 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 capa para que aparezca 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, manteniendo su nuevo color y forma. Ahora tiene dos botones, uno en estado activo y otro en estado inactivo, y es muy sencillo de hacer. Me encanta 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 sus dos capas de botones. Haga clic en el Herramienta de tipo para comenzar a escribir

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

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

Una vez hecho esto, sin embargo, todavía hay algunos cambios más sutiles que debe realizar para que este texto "aparezca".

Primero, haga doble clic en la capa que contiene su texto para que pueda abrirla 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 han sido grabadas en el botón. Las configuraciones exactas que utilizamos para este tutorial están a continuación.

Estructura

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

Calidad

• Contorno: Lineal
• Ruido: 0

Luego, aplique un Gradiente de superposición a esas letras, para hacer que se mezclen más fácilmente en el botón sin aparecer plano. Nuevamente, la configuración para los nuestros es:

• 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 usarlo nuevamente, vaya a Nuevo estilo y guárdelo antes de hacer clic Okay.

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

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

Personaliza tu blog con botones 3D y widgets

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 personal.

¿Quieres saber sobre otras cosas que puedes hacer con este programa? Aqui esta Cómo eliminar un fondo en Photoshop Cómo quitar un fondo en PhotoshopAquí le mostramos cómo eliminar un fondo en Adobe Photoshop en claras instrucciones paso a paso que cualquiera puede seguir. Lee mas .