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

Icono “Comprar ahora!”

Publicado por Luch el Miércoles, 26 Noviembre 2008Sin Comentarios

Diseñaremos un ícono de “comprar ahora!”, similares a los que podemos encontrar Amazon, E-Bay y todos los sitios dedicados a la venta de productos y objetos Online. Ahora les traigo este tutorial para que puedan tener su propio botón “Comprar ahora!”.

Creamos un nuevo documento de 300×300px con fondo blanco.

Seleccionamos ((Rounded Rectangle Tool)), color frontal 009900 ,radio 6px y dibujaremos un rectángulo que será nuestro botón.

Creamos una ((nueva capa)).

Ahora vamos a ((Shape Tool)) y elegiremos el gráfico carrito de compras que ya viene por defecto con Photoshop. Antes de dibujarlo ponemos el blanco como color frontal. Lo ubicaremos en el costado izquierdo del botón, tal cual muestra la imagen de abajo.

Hacemos clic derecho encima de la capa del carrito y en el menu que se nos desplegará seleccionamos ((Blending Options)). Dentro de este activamos ((Stroke)).

Aceptamos los cambios y nos quedará así.

Luego nos paramos encima de la capa del botón y apretamos Ctrl + Clic para activar la selección. Nos vamos a ((herramienta degradado)) y elegimos un gradiente que vaya del color 009900 a 03a903. Trazamos de izquierda a derecha para que nos quede así:

Creamos una ((nueva capa)) y la colocamos entre el fondo y la capa del botón.

Volvemos a seleccionar ((Rounded Rectangle Tool)) y dibujamos un rectángulo igual al botón pero esta vez relleno de negro. Con ((Rectangular Marquee Tool)) eliminaremos 3/4 de este botón empezando desde arriba hacia abajo. En la imagen que sigue se ve claramente lo que les expliqué ahora.

Nos ha quedado una barra negra. Le aplicaremos ((Filter))((Blur))((Gaussean Blur)) (Radio: 8px). Apretamos Ctrl + T y lo rotamos 20º.

Con la fuente Verdana, Bold, tamaño 21 escribimos “Buy Now!”, apretamos botón derecho sobre la capa del texto y seleccionamos ((Blending Options)), luego ((Stroke))

Doypor terminado el tutorial! Les muestro mi resultado.