Dibujar un botón para web en Adobe Photoshop Cs5

Publicado por asktutorial.

Con Adobe Photoshop, no solamente puedes realizar retoques de imágenes o crear impresionates efectos en textos o fotografías. También puedes crear y dibujar objetos desde su inicio.

Esta vez, aprenderemos a dibujar un botón con estilo para utilizar en cualquier página web o presentación visual. En este ejemplo lo haré en Photoshop Cs5.

Comenzaremos creando un documento nuevo en Photoshop, lo haremos pequeño, con las dimensiones del botón.

Crear botón para web en Adobe Photoshop Cs5

Ahora, con la herramiente de selección “Marco Elíptico” (M), haremos un círculo. Si mantenemos presionada la tecla Shift mientras hacemos la selección, el círculo será proporcionado.

Crear botón para web en Adobe Photoshop Cs5

Vamos a ayudarnos de las Líneas que funcionan como guías de Photoshop. Arrastramos desde las reglas (superior y a la izquierda) dos líneas hasta el centro del círculo, quedando dividido en cuatro partes.

Crear botón para web en Adobe Photoshop Cs5

Nos dirigimos a la herramienta “Selección de Marco rectangular”, y con la ayuda de las guías que hemos creado, realizaremos una selección desde la mitad del círculo hacia afuera. Para que esta nueva selección se sume a la del círculo, mientras la hacemos tenemos que tener presionada la tecla Shift. La selección nueva quedará como la siguiente:

Crear botón para web en Adobe Photoshop Cs5

Creamos una nueva capa (Capa>Nueva>Capa), a la que yo denominaré “Color”. La rellenamos con la herramienta “Bote de Pintura” del color que más nos guste. Siempre debemos picar dentro de la selección, de otra manera no lograremos ver el relleno. Deshacemos la selección presionando Ctrl+D.

Crear botón para web en Adobe Photoshop Cs5

Ahora, lo que haremos es duplicar la capa de color. Hacemos click con el botón derecho del mouse sobre la capa>Duplicar Capa. Luego, rotamos la imagen 180º. Para lograr esto, nos posicionamos sobre la capa, presionamos Ctrl+T y luego click derecho del mouse>Rotar 180º.

Crear botón para web en Adobe Photoshop Cs5

Movemos la imagen, para acomodarla como está en la figura:

Crear botón para web en Adobe Photoshop Cs5

CONSEJO: si mantienes presionada la tecla Shift, la figura se moverá perfectamente sobre los ejes ortogonales (X e Y)

Presionamos Enter para dar fin a la acción.

Ahora, eliminamos la capa de fondo blanco, así nos quedará un botón con el fondo transparente. También, debemos tener todo en una sola capa, por lo que seleccionaremos las dos capas que quedan (con Ctrl) y presionaremos Ctrl+E.

Ahora solo queda personalizar tu botón como más te guste. Puedes ir a las opciones de la capa, y allí agregar un bisel y relieve, o sombra interior.

Para entrar a opciones de la capa, debes hacer doble click sobre la misma. Si lo deseas, puedes utilizar valores como los que yo utilicé:

Crear botón para web en Adobe Photoshop Cs5

Agrega un texto y tendrás como resultado un botón como este:

Crear botón para web en Adobe Photoshop Cs5

Poniendo en funcionamiento tu creatividad podrás crear un botón mucho más original y atractivo utilizando 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!