Crear excelente botón para web en Adobe Photoshop Cs5

Publicado por asktutorial.

El diseño de piezas gráficas en Adobe Photoshop Cs5 abarca un abanico súper amplio que recorre desde diseño de afiches, pasando por carátulas de DVD, banners, logos y hasta páginas web. Cuando pensamos en esta última, debemos saber que tienen que ser funcionales y útiles. Es por ello que es obligación detenerse en una buena diagramación, y prestar especial atención en el diseño de los botones para la web.

Es imprescindible crear botones que sean bien simples y además estéticamente bellos para que llamen la atención al visitante del sitio. Podemos crear un excelente botón para web utilizando Adobe Photoshop Cs5 y lo resolveremos a continuación en muy pocos pasos:

PASO1: Iniciamos Adobe Photoshop Cs5 y creamos un documento nuevo de 200×200 píxeles y fondo de color blanco. Creamos una nueva capa (capa>nueva>capa).

Ahora, seleccionamos la herramienta marco elíptico y dibujamos un círculo manteniendo presionada la tecla Shift para que resulte perfectamente proporcional.

PASO2: Elegimos la herramienta “Degradado” y seleccionamos un color claro para el costado izquierdo y uno más oscuro para el derecho. Puedes tomar como referencia la imagen siguiente:

Crear excelente botón para web en Adobe Photoshop Cs5

PASO3: Lo que haremos ahora es dirigirnos a Selección>Guardar Selección.

Creamos una nueva capa y elegimos al color negro como frontal. Vamos a Edición>Rellenar>Color frontal.

PASO4: Sin perder la selección, elegimos nuevamente la herramienta marco elíptico y la movemos un poco hacia la izquierda y otro poco hacia arriba. Ahora, presionamos la tecla Supr para borrar. Nos estará quedando una imagen aproximadamente como la siguiente:

Crear excelente botón para web en Adobe Photoshop Cs5

PASO5: Presionamos Ctrl+D para perder, ahora sí, la selección. Vamos a aplicar uno de los filtros de Adobe Photoshop, nos dirigimos a Filtro>Desenfocar>Desenfoque gaussiano y colocamos un valor de 15 píxeles. A esta capa que hemos creado, le reduciremos la opacidad al 50% . Podemos lograrlo haciendo doble click sobre la capa (en la opción “opacidad”).

PASO6: Habrás notado que al aplicar el filtro de desenfoque sobre el botón diseñado en Photoshop, existe un difuminado alrededor de la imagen que no es demasiado feliz, así que lo eliminaremos.

Nos dirigimos a Selección>Cargar Selección y elegimos la que hemos guardado en el PASO3.

Vamos a Selección>Invertir (Ctrl+Shift+I) y presionamos “Supr” para eliminar los sobrantes.

PASO7: Volvemos a la selección anterior presionando Ctrl+Shift+I. En los parámetros de selección colocamos un valor de expansión de 5 píxeles (Selección>Modificar>Expandir). Creamos una nueva capa, que irá ubicada sobre la capa de fondo, o sea debajo de todas las que hemos creado hasta ahora.

Luego la reellenamos de la misma manera que antes con el color negro.

Nos queda un solo paso para finalizar el diseño de un excelente botón para web en Adobe Photoshop Cs5. Aplicamos un leve desenfoque gaussiano, esta vez con un valor de 3 píxeles bastará

Crear excelente botón para web en Adobe Photoshop Cs5

Hemos terminado!. Logramos con mucha facilidad la creación en Photoshop Cs5 de un bonito y sencillo botón para utilizar en cualquier web que necesites.

 

Dejar un comentario

Tenga en cuenta: la moderación de comentarios está habilitada y puede retrasar su comentario. No hay necesidad de volver a enviar su comentario.

¡SUSCRÍBETE GRATIS!

Nosotros

AskTutorial nace en Junio del 2010 en la ciudad de Chicago, IL con el fin de crear Tutoriales Educativos en Español dirigidos a la comunidad de habla hispana en Estados Unidos y alrededor del mundo. Gracias a la excelente respuesta del publico que diariamente ve nuestros videos nos hemos extendido a no solo crear video tutoriales, si no tambien ofrecemos información relevante de acuerdo a sus preguntas.

Archivos / Mes

Contenido Bloqueado Solo Para Seguidores

Para ver el contenido solo sígueme en cualquiera de estas redes sociales. ¡Muchas gracias por todo!