Botón rectangular para web en Adobe Photoshop Cs6

Publicado por asktutorial.

El diseño de páginas web está en auge en los últimos tiempos y entre los elementos más importantes a destacar, encontramos el diseño de los botones que podemos realizar con Adobe Photoshop Cs6. Un botón para web debe ser llamativo y atractivo, pero siempre debemos cuidar que no compita con el resto de la información. Es por ello que es conveniente diseñar botones con formas geométricas (como rectángulos y círculos) de manera de simplificar la visual general de la web.

Desarrollaremos, entonces, una serie de pasos para lograr como resultado un atractivo botón rectangular para web utilizando Adobe Photoshop Cs6.

PASO 1: Inicia Adobe Photoshop Cs6 y crea un documento nuevo de 120 x 90 pixeles, con un fondo en color blanco y en modo RGB. Ahora, debemos crear una nueva capa desde Capa —> Nueva —> Capa.

PASO 2: En la nueva capa dibujaremos el botón rectangular para web. Tomamos la herramienta “Rectángulo redondeado” (podemos hacerlo por atajo presionando la tecla [U]) y luego, en las propiedades para generar el nuevo rectángulo colocaremos las mismas que en la imagen de abajo:

Botón rectangular para web en Adobe Photoshop Cs6

Respecto al color para el botón rectangular para web que realizaremos en Photoshop Cs6, puedes seleccionar el que más te guste. Sin embargo, recomiendo elegir un color virando a oscuro para destacar dentro de tu sitio en internet.

PASO 3: Nos posicionamos sobre la capa donde hemos dibujado el rectángulo y hacemos click con el botón derecho del mouse. Luego seleccionamos “Rasterizar capa”. Elegimos la herramienta “Varita mágica” del panel de herramientas de Photoshop Cs6 y picamos en el centro de la imagen.

Nos dirigimos a Filtro —> Deenfocar —> Desenfoque gaussiano y en la opción del “radio”, colocamos un valor de 3 pixeles. Aceptamos.

PASO 4: Creamos nuevamente otra capa y seleccionamos la herramienta “Pincel”. Elegimos una punta difusa y un valor no muy grande de espesor. Colocamos el color blanco como color frontal en la paleta de colores.

Disminuye la opacidad del pincel a un 65% y dibuja una línea horizontal en la zona superior del rectángulo.

PASO 5: Reduce al menos a la mitad el tamaño de la punta de tu pincel y dibuja otra línea horizontal en la zona inferior del botón rectangular para web.

PASO 6: Estamos a punto de finalizar nuestro trabajo, solo debes ir a Selección —> Modificar —> Contraer y colocar un valor de 2 pixeles. Invierte la selección desde Selección —> Invertir y presiona [Supr] para eliminar las zonas que sobran.

Botón rectangular para web en Adobe Photoshop Cs6

Elimina la capa de fondo y ya tendrás el diseño de un botón rectangular para web logrado con Adobe Photoshop Cs6.

Botón rectangular para web en Adobe Photoshop Cs6

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!