Adobe Photoshop. Diseño de botón transparente

Publicado por asktutorial.

Cuando estamos realizando diseños de páginas web debemos prestar atención a todos los elementos que la componen, y generalmente estos elementos se diseñan por separado en Adobe Photoshop. No podemos dedicarnos -por ejemplo- a realizar un fondo muy atractivo y por eso descuidar los textos, o ilustraciones de botones. Cada una de las piezas que componen un sitio web debe ser especialmente atractivo, de esa manera los visitantes querrán regresar al sitio en un futuro. Lo que sí es verdad es que muchas veces se nos acaba la imaginación y no se nos ocurren ideas nuevas; por eso es que en este tutorial te damos una mano describiendo cómo diseñar un bonito botón transparente. Luego podrás personalizarlo y obtener el que más te guste.

Comencemos iniciando Adobe Photoshop en cualquiera de sus versiones (si es de las últimas, aún mejor). Creamos un documento nuevo [Ctrl+N] de 200×200 pixeles, con fondo transparente y en modo RGB.

Generamos una nueva capa [Ctrl+Shift+N] y luego tomamos la herramienta “Marco elíptico” del panel de las herramientas. Dibujamos un círculo que abarque la mayor cantidad del área de trabajo y para que éste nos resulte perfecto, mientras lo dibujamos presionamos la tecla [Shift].

Ahora tomamos la herramienta “Degradado” y en sus opciones superiores seleccionamos “Degradado lineal”. Luego elegimos los colores que nos gusten, siempre uno oscuro a la derecha y el mismo tono, pero más claro a la izquierda. Generamos el degradado en dirección de arriba hacia abajo dentro de la selección circular.

Adobe Photoshop. Diseño de botón transparente

Muy bien, ahora creamos una capa nueva y vamos al menú [Selección —–> Modificar —–> Contraer] y colocamos un valor de 4 pixeles. También vamos a [Selección —–> Modificar —–> Desvanecer] con el mismo valor de radio que antes.

Presiona la tecla [D] y luego la [X] para colocar al color blanco en el frente de la paleta de colores y luego con la herramienta “Degradado” selecciona un degradado lineal, de dos colores con la opción “Color frontal – transparente” y aplica de la misma manea que hicimos antes.

Presionamos [Ctrl+D] para perder la selección y nos posicionamos sobre la capa del primer degradado. Hacemos doble clic para ingresar a los Estilos y activamos una “Sombra paralela” con los valores que creas conveniente.

Ahora acopla las capas seleccionándolas y presionando [Ctrl+E]. Luego disminuye la opacidad de la capa resultante a un 65%.

Genial!… ahora solo queda agregar un texto, o dejarlo vacío… como prefieras!.

Adobe Photoshop. Diseño de botón transparente

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!