Diseñar botones mini para página web en Adobe Photoshop CC

Publicado por asktutorial.

Para el diseño de botones web el mejor software es Adobe Photoshop CC. Con este excelente programa de diseño podemos generar botones de diferentes colores y tamaños, completamente personalizados y luego utilizarlos en sitios web.

En esta oportunidad vamos a diseñar botones pequeños. Seguramente habrás visto  que más de una web cuenta con botones mini. Generalmente estos contienen la información menos importante, pero no por eso debemos dejar de prestar atención a su diseño. Sigue una serie de pasos para dibujar tus propios botones pequeños con Adobe Photoshop CC.

PASO I: Iniciamos Photoshop CC y creamos un documento nuevo de 250×400 pixeles. Seleccionamos además un fondo blanco para el mismo.

Ahora seleccionamos la herramienta “Marco rectangular” y en sus opciones de Estilo, desplegamos la lista para elegir “Tamaño fijo”. Al activarse las casillas para colocar los pixeles de tamaño, ponemos 325 de anchura y 100 de altura. Vamos al área de trabajo y picamos en el centro. Se habrá realizado una selección con el tamaño que indicamos a Photoshop CC.

PASO II: Creamos una nueva capa desde [Capa —> Nueva —> Capa] y luego vamos al menú [Edición —> Rellenar]. En la ventana de diálogo, en la opción “Usar” seleccionamos “Color” y buscamos un gris claro. Aceptamos todo.

Perdemos la selección desde [Selección —> Deseleccionar].

PASO III: Hacemos doble click sobre la capa del botón mini para ingresar a sus estilos. Activamos “Bisel y relieve”. Cambiamos las siguientes características, el resto quedarán predeterminadas por Photoshop CC.

Tamaño: 2

Suavizar: 2

Cambiamos el ángulo a 135º

Todas las opacidades al 75%

PASO IV: Activamos ahora la opción “Superposición de degradado” y cambiamos solo su opacidad, disminuyéndola al 25%.

Por último activamos la opción “Trazo” cambiando el valor del trazo a 2 pixeles y eligiendo un color gris algo más oscuro que para el rectángulo.

PASO V: Estamos finalizando con el proceso para diseñar un botón pequeño de web en Photoshop CC. Solo nos queda agregar un texto, así que seleccionamos esa herramienta. Tomamos un color blanco para el texto y lo tipeamos en el centro del rectángulo.

Luego ingresamos a los Estilos de la capa de Texto y activamos “Bisel y relieve”; eligiendo la opción “Relieve acolchado”. Juega con los valores y características de este estilo para conseguir un botón web pequeño en Adobe Photoshop CC.

Diseñar botones mini para página web en Adobe Photoshop CC

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!