Botones para aplicaciones Web

Con el programa de photoshop podemos crear de una manera muy sencilla botones con apariencia tridimensional, un efecto útil para páginas web y botones de aplicaciones móviles.

Para comenzar abrimos un nuevo archivo con las medidas que vemos en la siguiente imagen (por ejemplo).

tutoriales-y-cursos-webmaster-botones-para-aplicaciones-web-tutoriales-y-cursos-webmaster

Creamos una nueva capa y usamos la herramienta Marco Elíptico, presionamos la letra “Shift” para crear un círculo en lugar de una elipse.

tutoriales-y-cursos-webmaster-botones-para-aplicaciones-web-tutoriales-y-cursos-webmaster

La rellenamos del color que deseemos con la herramienta bote de pintura.

tutoriales-y-cursos-webmaster-botones-para-aplicaciones-web-tutoriales-y-cursos-webmaster

Para crear los reflejos, creamos una nueva capa y volvemos a usar la herramienta Marco Elíptico para crear otra elipse dentro de la que ya teníamos, en la parte superior, como vemos en la imagen.
Utilizamos la herramienta de degradado con el color blanco y el mismo color que hemos usado para la primera elipse.

tutoriales-y-cursos-webmaster-botones-para-aplicaciones-web-tutoriales-y-cursos-webmaster
tutoriales-y-cursos-webmaster-botones-para-aplicaciones-web-tutoriales-y-cursos-webmaster

Para que el reflejo se vea más real, en la capa del reflejo, añadimos una máscara de capa (hacer click en el “recuadro con un círculo en el interior” que vemos bajo el cuadro de las capas), y lo rellenamos con el mismo degradado.

tutoriales-y-cursos-webmaster-botones-para-aplicaciones-web-tutoriales-y-cursos-webmaster

En el siguiente paso tenemos que duplicar la capa de los reflejos, y seleccionar “Edición-Transformar- Voltear vertical”, y la arrastramos a la parte inferior del objeto (en este caso un círculo).

tutoriales-y-cursos-webmaster-botones-para-aplicaciones-web-tutoriales-y-cursos-webmaster
tutoriales-y-cursos-webmaster-botones-para-aplicaciones-web-tutoriales-y-cursos-webmaster
tutoriales-y-cursos-webmaster-botones-para-aplicaciones-web-tutoriales-y-cursos-webmaster

Le aplicamos al reflejo inferior la herramienta “Filtro- Desenfocar- Desenfoque gaussiano”, con un valor del radio de 16.

tutoriales-y-cursos-webmaster-botones-para-aplicaciones-web-tutoriales-y-cursos-webmaster
tutoriales-y-cursos-webmaster-botones-para-aplicaciones-web-tutoriales-y-cursos-webmaster

A continuación añadimos una imagen o un texto sobre el círculo.
Después crearemos una sombra con en el objetivo de aumentar su parecido con una bolapa tridimensional. Creamos una elipse negra y usamos de nuevo la herramienta “Filtro- Desenfocar- Desenfoque gaussiano. Para terminar la arrastramos bajo la capa de la primera elipse, como vemos en la imagen.

tutoriales-y-cursos-webmaster-botones-para-aplicaciones-web-tutoriales-y-cursos-webmaster
tutoriales-y-cursos-webmaster-botones-para-aplicaciones-web-tutoriales-y-cursos-webmaster
tutoriales-y-cursos-webmaster-botones-para-aplicaciones-web-tutoriales-y-cursos-webmaster

Este efecto se puede crear también con cuadrados o triángulos, o cualquier otra figura. Espero que os sea útil para los fines que se pretenden.

Otro ejemplo con un cuadrado: Este es el efecto que se usa para los botones de las aplicaciones móviles, y es el mismo que el de la bola de crista.

tutoriales-y-cursos-webmaster-botones-para-aplicaciones-web-tutoriales-y-cursos-webmaster

Con práctica llegan a salir mucho mejor que los regalos que os he puesto. Pero poco a poco con práctica se consigo un efecto mejor.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*
*