Blog

El blog de CaminoCreativo.com con lo ultimo y mas destacdo sobre el diseño.

Efectos

Los mejores tutoriales para Photoshop enfocado sobretodo a crear efectos especiales.

Noticias

Importantes noticias para diseñadores. Tambien algunas novedades de nuestra area.

Recursos

Todos los recursos para poder hacer de tus diseños algo completamente profesional.

Varios

No solo de Photoshop vive el diseñador. Dreamweaver, Illustrator, incluso otros recursos!

Home » Basicos, Dibuja, Web

Botón profesional de Descarga

Publicado por Luch el Lunes, 24 Noviembre 2008Sin Comentarios

Les voy a mostrar este tutorial un diseño simple y profesional de un botón de descarga. Este tipo de botones se esta utilizando mucho últimamente. Su estilo se conoce como Web 2.0 …ya muchos sabrán!.

Abirmos un nuevo documento de 440×110px con fondo transparente.

En la paleta de colores ponemos como color frontal el d8d8d8 y de fondo el color blanco.

Vamos a crearle un fondo al documento para que contraste con el botón. Seleccionamos ((herramienta degradado)) y creamos un ((Lineal Gradient)) de arriba hacia abajo.

Luego seleccionen ((Rounded Rectangle Tool))y dibujen la forma del botón, usen un ((radio)) de 12px, al final lo rellenan de negro.

Hagan doble clic sobre esta capa para abrir la ventana de ((Blending Options)).Aplicaremos Inner Shadow y Gradient Overlay.

En Inner Shadow usen el color 53e04c.

Para el degradado utilizaremos los colores 31d854 y 64df78

Nos quedaría así.

Ahora apretamos Ctrl + Clic sobre la capa de texto para que se nos active la selección. Luego vayan a ((Select))-((Modify))-((Contract)) y reduzcan la selección unos 5px.

Crean una ((nueva capa)).

Volvemos a seleccionar ((herramienta degradado)) y con la selección activa hagan un gradiente blanco a transparente de arriba hacia abajo exactamente como marca la flecha roja que vemos en la imagen.

Con ((Pen Tool)) crearemos un trazado como el que vemos en la siguiente image. Lo que vamos a hacer es crearle un efecto de reflejo ondulado.

Vayan a ((Select))-((Load Selection)) para activar la selección. Luego aceptar y apreten la tecla suprimir.

Reduzcan la ((opacidad)) a un 60% y cambien el modo de la capa a ((Soft Light)).

Por último escribiremos el título de texto. Elegimos la ((fuente)) Arial Bold de tipo Italic tamaño 24.

Hacemos click derecho a la capa del texto y en el menu desplegable seleccionamos ((Drop Shadow)). Copien los valores que aparecen a continuación.

Para darle una terminación más profesional a nuestro botón tendremos que aplicarle un reflejo al estilo Web 2.0. Así que duplicaremos solamente la capa del botón, lo colocamos pegado y debajo del primero.
Hacemos Ctrl + Click en la capa recientemente duplicada, creamos una ((nueva capa)) y sobre ella aplicamos un gradiente blanco a transparente de abajo hacia arriba.

Observen el resultado final.