Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Site Elements

Diseña un hermoso botón de web detallado

by
Read Time:5 minsLanguages:

Spanish (Español) translation by Pierina (you can also view the original English article)

Hoy volveremos a lo básico con un tutorial de Liam McCable sobre cómo crear un botón profesional, elegante y sencillo. Liam sabe crear toda clase de elementos web, por ello, él será un gran guía durante este proceso. Si has estado buscando una forma de darle sabor a tus diseños de botones o elementos UI (Interfaz de usuario) con estilo único, no sigas más...

Tutorial publicado nuevamente

Cada cierto tiempo, nosotros volvemos a visitar las publicaciones favoritas de nuestros usuarios en el historial de nuestro sitio web. Este tutorial se publicó primero en febrero de 2011.

En este tutorial, vamos a enseñarte cómo diseñar un botón detallado empleando Photoshop. Se usan varias técnicas útiles para lograr el diseño perfecto de pixeles, mediante un proceso realmente simple que no toma más de entre 15 a 20 minutos. Puedes ver el resultado final abajo, ¿te gusta?, entonces, ¡empecemos!


Paso 1: cómo empezar

La primera cosa que debes hacer es abrir Photoshop, Ctrl + N para abrir la nueva ventana de lienzo. La anchura y la altura dependen totalmente de ti, pero asegúrate de que la resolución sea al menos de 72 y que el modo de color sea RGB de 8 bits. Ah, y establece el contenido del Fondo en transparente. Me refiero a algo como esto:

Step 1Step 1Step 1

Paso 2: relleno

Ahora, rellena esta capa, presionando Shift + F5 para abrir la ventana de relleno del menú desplegable, selecciona Color... y copia el valor hexadecimal 141d28 al lado del símbolo # en el cuadro. Esto deberá rellenar la capa con un lindo color azul oscuro.

Step 2Step 2Step 2

Paso 3: alineamiento

Ahora, cuando se trata de diseñar cualquier cosa, siempre es una buena idea emplear guías para asegurarse que todo esté bien alineado. Para añadir una guía en pleno centro del lienzo, selecciona Vista > Guía nueva en el menú de la parte superior, luego selecciona la orientación vertical y añade la mitad del tamaño del que sea tu ancho, para mí es 250 px.

Step 3Step 3Step 3

Paso 4: esquinas redondeadas

Lo siguiente que harás será escoger la herramienta Rectángulo redondeado (del panel de la izquierda) y dibujarás una linda forma rectangular en el medio del lienzo, así:

Step 4Step 4Step 4

Yo establecí el color del fondo del rectángulo redondeado en un azul ligeramente más brillante, el valor hexadecimal es: 17202b. Para lograr esto, puedes establecer el color frontal antes de dibujar el rectángulo o hacer doble clic en la miniatura de color de la capa, luego de haber dibujado el rectángulo.

Step 4 - 2Step 4 - 2Step 4 - 2

Paso 5a: estilo de capa

Con la forma básica ya dibujada, vamos a añadir un poco de estilo de capa. Para añadirlo, solamente haz doble clic en la capa de la forma y la ventana de estilo de capa aparecerá. El primer estilo que añadiremos será una sombra paralela. Usando una sombra con un valor de extensión de 100, podremos darle un toque 3D al botón.

(Para los siguientes estilos de capas, siéntete en la comodidad de jugar con los valores y de emplear los míos como guías)

Step 5Step 5Step 5

El siguiente estilo a añadir será un Resplandor interior, esto le dará un toque 3D aún más profundo al botón, al agregar un brillo en la parte superior del mismo.

Step 5 - 2Step 5 - 2Step 5 - 2

Un Resplandor exterior solo cierra la parte superior del botón, rodeándolo.

Step 5 - 3Step 5 - 3Step 5 - 3

Añadiendo una Superposición de degradado, podremos simular una superficie curva, haciendo pensar que la forma es un objeto que se puede presionar, como un botón.

Step 5 - 4Step 5 - 4Step 5 - 4

El último estilo de capa es un trazo. Esto le da un borde bonito a toda la forma y también, un poco más de definición entre el fondo de la forma y la sombra paralela.

Step 5 - 5Step 5 - 5Step 5 - 5

Paso 5b: borde degradado

Está bien, ese estilo de capa se sale del camino. Siempre vale la pena experimentar con varios estilos, así podrás lograr conseguir algunos efectos bonitos. Si le echamos un ojo a nuestro botón, podremos ver el fondo (el fondo de la sombra paralela), careciendo de definición y, por lo tanto, hay un ligero desenfoque. Para arreglar esto, añadiremos un buen borde degradado.

La primera cosa por hacer será establecer el color frontal con algo como #050607. Crea una nueva capa (Ctrl + Shift + n) y luego, mantén la tecla Ctrl presionada y haz clic en la miniatura de la forma, de esta forma seleccionas el contenido de una capa.

Step 6Step 6Step 6

Si lo has hecho correctamente, deberías tener una línea discontinua alrededor de tu rectángulo redondeado. Ahora, presiona G para seleccionar la herramienta Degradado y arrástrala hacia afuera, justamente debajo de la forma, así:

Step 6 - 2Step 6 - 2Step 6 - 2

Con la forma aún seleccionada, cambia a la herramienta Marco, presionando la tecla M y luego la flecha hacia arriba una vez, y luego la tecla eliminar. Ahora presiona la tecla V, la cual, te permitirá mover el borde degradado que acabas de crear y ubicarlo en el fondo de la sombra paralela, así:

Step 6 - 3Step 6 - 3Step 6 - 3

Paso 7: más detalles

Para agregar más detalles al botón, duplica el borde degradado de la capa, ubícalo justamente sobre el fondo de la forma, inviértelo, presionando Ctrl + I, y establece la opción de fusión a Superponer. También necesitarás duplicar la capa, solo para iluminarlo un poco.

Step 7Step 7Step 7

Paso 8: degradado radial

Ahora añade un degradado radial a la parte superior del botón. Así como hicimos antes, mantén la tecla Ctrl presionada y haz clic en la capa para seleccionar la forma. Selecciona la herramienta Degradado (G) y establece el color frontal en blanco. Un buen consejo es que presionar la tecla D, la cual, establecerá el color frontal a negro y el color del fondo en blanco, y luego presiona la tecla X para invertir los colores.

Sobre la selección, arrastra desde el centro hacia afuera, como hicimos antes, para obtener el resultado siguiente:

Step 8Step 8Step 8

Presiona Ctrl + D para quitar la selección y luego establece la capa en Superposición.


Paso 9: el texto

Añade algo de texto; yo elegí la fuente Arial, tamaño 14, en negrita y marqué la opción redondeado, y agrega una ligera sombra paralela y ¡ahí lo tienes!, un hermoso botón detallado. Puedes añadir más detalle en la sección de sobra paralela (es algo simple) y también puedes empezar a imaginar cómo podrías codificar esto en css con los diferentes estados para jugar.


¡Terminado!

¡Y eso es todo! Espero que hayas disfrutado este tutorial y te hayas divertido al crear algunos hermosos botones detallados :)

Final ResultFinal ResultFinal Result
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.