Diseño de botón para web en Adobe Photoshop Cs5

Publicado por asktutorial.

Si estás diseñando una página web, seguramente habrás pensado en Adobe Photoshop para crear algunas de las piezas gráficas que el sitio incluya. No es necesario conocer del todo este software para poder lograr unos bonitos diseños, solo aprendiendo algunas cuestiones sencillas podrás solventar tus necesidades y obtener un diseño web atractivo y funcional.

Los botones de un sitio son de suma importancia a la hora de crearlo, ya que deben ser llamativos y a la vez sencillos. De esta manera, tu página se hará funcional para el usuario.

Vamos a aprender en este tutorial cómo diseñar un botón para una página web en Adobe Photoshop Cs5. Sigue los pasos y luego aplica tus propios diseños creativos.

PASO 1: Iniciamos Adobe Photoshop Cs5 y creamos un nuevo documento con las dimensiones de 300x100píxeles, color RGB y fondo transparente. Luego elegimos la herramienta “marco rectangular (M)” del panel de herramientas y creamos una selección que ocupe la mayor cantidad de área de trabajo posible.

PASO 2: Creamos una nueva capa yendo a Capa>Nueva>Capa. Seleccionamos la herramienta “degradado” y activamos la opción “degradado reflejado”. Hacemos el degradado sobre la selección hecha en el paso anterior. Nos estará quedando una imagen como la siguiente:

Diseño de botón para web en Adobe Photoshop Cs5

NOTA: para cambiar los colores del degradado, solo pica sobre la barra de la misma herramienta y se abrirá el cuadro de diálogo donde puedes seleccionar distintos tonos.

PASO 3: Presionamos Ctrl+D para perder la selección. Creamos una nueva capa y seleccionamos la herramienta “lazo poligonal”. Realizamos un diibujo de trapecio sobre la nueva capa.

Si picas y luego mantienes la tecla mayúscula presionada, lograrás que todos tus trazos sean proporcionados y rectos.

PASO 4: Seleccionamos la herramienta “degradado” nuevamente y aplicamos uno lineal sobre la última selección hecha. Ahora, nos vamos a Selección>Modificar>Contraer  y colocamos un valor de 2 píxeles.

PASO 5: Seleccionamos el color que nos guste para nuestro diseño de botón web. Lo hacemos picando sobre el degradado, como indicamos anteriormente. Volvemos a hacer un degradado sobre la selección, esta vez en sentido contrario.

Diseño de botón para web en Adobe Photoshop Cs5

Ahora, solo debes agregar el texto que necesites para tu botón y colocarle un bisel acolchado para lograr un excelente diseño de barra y botón para tu web en Adobe Photoshop Cs5.

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!