Un tutorial con pasos muy simples para hacer botones muy realistas. Son como los botones que encuentras en los paneles de control de algunos teléfonos fijos. Los pasos son muy simples; no debes tener un nivel de conocimientos avanzado con Photoshop.
En el tutorial te enseñan a hacer botones de color negro, con letras y números en color blanco. Pero tú puedes cambiar los colores, para que se adapten a tus necesidades. Hasta puedes cambiar la forma de los botones, por ejemplo, los puedes hacer cuadrados o rectangulares.
Pasos para crear botones en Photoshop
1. Crear un documento nuevo
Lo primero es abrir Photoshop y crear un documento nuevo.
Ve al menú Archivo > Nuevo o utiliza el atajo de teclado Ctrl + N en Windows o Command + N en Mac.
Para este ejemplo podemos utilizar un documento pequeño, ya que solamente vamos a diseñar el botón.
Utiliza los siguientes valores:
- Anchura: 500 píxeles
- Altura: 300 píxeles
- Resolución: 72 píxeles por pulgada
- Modo de color: RGB
- Fondo: Blanco
La resolución de 72 ppp no es realmente determinante para un elemento web que se utilizará en píxeles, pero es un valor tradicional para documentos destinados a pantalla.
Haz clic en Crear.
2. Preparar el área de trabajo
Una vez creado el documento, aparecerá un lienzo blanco.
Antes de comenzar a dibujar el botón, es recomendable guardar el archivo de Photoshop.
Ve a:
Archivo > Guardar como
Guárdalo en formato PSD. Por ejemplo:
boton-web.psd
Es importante conservar el archivo PSD porque nos permitirá modificar posteriormente cualquier elemento del botón: tamaño, colores, texto, sombras, etc.
3. Crear la forma del botón
Ahora vamos a crear el elemento principal del diseño.
Selecciona la herramienta Rectángulo en la barra de herramientas. También puedes presionar la tecla U.
En las versiones actuales de Photoshop, las herramientas de formas permiten crear objetos vectoriales, algo especialmente útil para este tipo de diseño.
Antes de dibujar, revisa las opciones que aparecen en la parte superior de Photoshop.
Selecciona:
- Forma
- Un color de relleno
- Sin trazo, si no queremos utilizar un borde
Ahora haz clic y arrastra sobre el documento para crear un rectángulo.
Por ejemplo, podemos crear un botón de aproximadamente:
300 × 80 píxeles
No es necesario que sea exactamente de ese tamaño durante este paso; posteriormente podemos modificar sus dimensiones desde el panel Propiedades.
4. Redondear las esquinas
Un botón con esquinas ligeramente redondeadas suele tener una apariencia más moderna.
Con la capa de la forma seleccionada, busca las opciones de radio de las esquinas en el panel Propiedades.
Introduce, por ejemplo:
20 píxeles
De esta manera tendremos un rectángulo con las cuatro esquinas redondeadas.
Una ventaja de utilizar una forma vectorial es que podemos cambiar posteriormente el radio sin perder calidad.
También podemos utilizar valores diferentes para cada esquina si queremos conseguir un diseño más personalizado.
5. Elegir el color del botón
Ahora vamos a seleccionar el color principal.
Haz clic sobre el color de Relleno de la forma.
Se abrirá el selector de color de Photoshop.
Para nuestro ejemplo podemos utilizar un azul intenso, por ejemplo:
#2878F0
Escribe el código hexadecimal en el campo correspondiente y confirma.
El botón ahora tendrá un color azul.
El color es completamente modificable. Si el botón forma parte de un sitio web existente, lo recomendable es utilizar uno de los colores principales de la identidad visual del sitio.
6. Agregar un degradado
Si queremos darle una apariencia más elaborada, podemos utilizar un degradado en lugar de un color uniforme.
Haz doble clic sobre la capa del botón para abrir el panel Estilo de capa.
También puedes acceder mediante:
Capa > Estilo de capa > Superposición de degradado
Activa Superposición de degradado.
Selecciona un degradado que vaya, por ejemplo, desde un azul ligeramente más oscuro hasta un azul más claro.
Puedes modificar:
- Los colores
- El ángulo
- La escala
- El estilo del degradado
Para este ejemplo podemos utilizar un ángulo de aproximadamente 90°, de manera que el cambio de color se produzca verticalmente.
No conviene exagerar el efecto. En diseño web, un degradado sutil suele funcionar mejor que uno demasiado evidente.
7. Añadir una sombra
Ahora vamos a agregar una sombra para separar visualmente el botón del fondo.
Dentro del mismo panel Estilo de capa, activa:
Sombra paralela
Podemos comenzar con valores similares a estos:
- Opacidad: 25 %
- Ángulo: 90°
- Distancia: 4 px
- Extensión: 0 %
- Tamaño: 8 px
Estos valores son solamente un punto de partida. Lo importante es observar el resultado directamente en el documento.
La sombra debe ser suficientemente discreta para dar profundidad sin hacer que el botón parezca estar flotando demasiado.
8. Crear un efecto de profundidad
Si queremos que el botón tenga una apariencia ligeramente tridimensional, podemos utilizar también:
Bisel y relieve
Activa esta opción dentro de Estilo de capa.
Podemos utilizar:
- Estilo: Bisel interior
- Técnica: Suavizar
- Profundidad: 100 %
- Tamaño: 2–4 px
- Suavizar: 1 px
Después podemos reducir la opacidad de las luces y sombras hasta conseguir un efecto discreto.
Hay que tener cuidado con este paso. Los efectos de Photoshop pueden hacer que un botón rápidamente pase de tener un aspecto moderno a parecer un botón de una página web de principios de los años 2000.
En muchos diseños actuales, una sombra suave es suficiente.
9. Escribir el texto del botón
Ahora vamos a colocar el texto.
Selecciona la herramienta Texto presionando la tecla T.
Haz clic aproximadamente en el centro del botón y escribe el texto que quieres mostrar.
Por ejemplo:
DESCARGAR
También podemos utilizar textos como:
- Descargar
- Ver más
- Comprar ahora
- Leer artículo
- Más información
- Suscribirme
El texto debe explicar claramente qué ocurrirá cuando el usuario haga clic en el botón.
10. Elegir la tipografía
Selecciona el texto y utiliza el panel Carácter para elegir la fuente.
Para un botón web podemos utilizar una tipografía sencilla y fácil de leer.
Por ejemplo:
- Arial
- Helvetica
- Roboto
- Open Sans
- Montserrat
Para nuestro ejemplo podemos utilizar Montserrat SemiBold.
El tamaño dependerá del tamaño definitivo del botón. Para un botón de aproximadamente 300 × 80 píxeles, podemos probar con:
22 px
Utiliza un color blanco:
#FFFFFF
El contraste entre el texto blanco y el fondo azul permitirá que el texto sea fácilmente legible.
11. Centrar el texto
Uno de los detalles más importantes es conseguir que el texto quede perfectamente centrado.
Selecciona la capa del texto y la capa correspondiente al botón.
Después, selecciona la herramienta Mover presionando V.
En la barra superior aparecerán las opciones de alineación.
Utiliza las opciones:
Alinear centros horizontales y Alinear centros verticales
De esta manera, Photoshop colocará automáticamente el texto en el centro de la forma.
Este método es mucho más preciso que intentar colocar el texto visualmente con el mouse.
12. Organizar las capas
Nuestro documento ahora debería tener, como mínimo, dos elementos:
- La forma del botón.
- El texto.
Es recomendable cambiar el nombre de las capas para mantener organizado el documento.
Por ejemplo:
BotónTexto
Para cambiar el nombre de una capa, haz doble clic sobre su nombre en el panel Capas y escribe el nuevo nombre.
Si posteriormente añadimos más elementos, podemos mantener una estructura como:
TextoBotónFondo
Esto resulta especialmente útil cuando el diseño se vuelve más complejo.
13. Crear una versión para cuando el usuario pasa el cursor
Un botón web normalmente tiene diferentes estados.
Por ejemplo:
Estado normal: el botón es azul.
Estado hover: cuando el usuario coloca el cursor encima, el botón puede cambiar ligeramente de color.
Para diseñar este segundo estado en Photoshop, podemos duplicar la capa del botón.
Selecciona la capa Botón y presiona:
Ctrl + J en Windows
Command + J en Mac
Después cambia el color del botón duplicado.
Por ejemplo, podemos utilizar un azul más oscuro:
#155CC7
También podemos modificar ligeramente la sombra.
De esta manera tendremos una representación visual de cómo podría verse el botón cuando el usuario coloque el cursor sobre él.
Hay que aclarar que Photoshop no convierte automáticamente este diseño en un botón interactivo. El comportamiento real del botón se programará posteriormente utilizando HTML, CSS y, si fuera necesario, JavaScript.
14. Revisar el diseño
Antes de exportar el botón, debemos revisar algunos detalles.
Comprueba que:
- El texto sea fácil de leer.
- Exista suficiente contraste entre el texto y el fondo.
- Las esquinas tengan el mismo radio.
- El texto esté perfectamente centrado.
- La sombra no sea demasiado intensa.
- El botón tenga suficiente espacio alrededor.
- El diseño funcione visualmente sobre un fondo claro y uno oscuro.
- No haya elementos innecesarios.
También conviene ampliar y reducir el zoom del documento para comprobar cómo se percibe el botón a diferentes tamaños.
15. Guardar el archivo editable
Antes de exportar, guarda nuevamente el documento PSD.
Ve a:
Archivo > Guardar
El archivo PSD conservará las capas y todos los estilos utilizados.
Esto es importante porque, si después queremos cambiar el texto de DESCARGAR a VER MÁS, modificar el color o hacer el botón más grande, podremos hacerlo sin tener que comenzar desde cero.
16. Exportar el botón para utilizarlo en una página web
Si necesitamos utilizar el botón como una imagen, podemos exportarlo desde Photoshop.
Ve a:
Archivo > Exportar > Exportación rápida como PNG
El formato PNG es apropiado cuando necesitamos conservar transparencia y buena calidad.
También podemos utilizar:
Archivo > Exportar > Exportar como
Desde esta ventana podemos elegir:
- PNG
- JPG
- GIF
- SVG, cuando el contenido y el flujo de trabajo sean adecuados
Para un botón que solamente contiene formas y texto, conviene recordar que lo ideal para una página web moderna normalmente no es utilizar una imagen, sino reproducir el diseño mediante HTML y CSS.
Por ejemplo, Photoshop puede servir para definir visualmente el botón y posteriormente el desarrollador puede crear el botón real con código.
Tutorial para aprender a hacer botones realistas
Estos tutoriales son geniales, porque de una manera muy simple, puedes crear un efecto visualmente muy interesante. Ya conociendo cómo hacer los botones, tú puedes editarlos o aplicarlos a otro tipo de objetos. Por ejemplo, y a lo mejor no te das cuenta, pero en el tutorial te están enseñando a hacer el efecto de profundidad.
En total son 13 los pasos que debes seguir para hacer los botones. Pero realmente te podrías saltar varios pasos. Si tienes conocimientos en el uso de Photoshop, igual y haces el efecto en unos 5 pasos. Todos los pasos del tutorial, están explicados con textos y con imágenes para que sean más fáciles de seguir.
Otro tutorial que encontré y que me gustó cómo se ve el resultado final, el tutorial se trata de hacer teclas de teléfonos realistas, pero se podría adaptar para hacer muchos otros trabajos. Solo se necesitan 13 pasos y editar un par de cosas para hacer el tutorial, nada complicado; por si lo quieren ver, acá la dirección: psd.tutsplus.com. Y ya que estamos aquí, quiero compartir otro tutorial de un miniestudio fotográfico casero. Ahí te enseñan a crear de principio a fin un estudio. Con herramientas y objetos que puedes encontrar en tu casa. O que los puedes comprar en cualquier papelería por muy poco dinero.
