En estos últimos tiempos una de las cosas que más estoy viendo en la web son los botones profesionales, es más, para esta nueva versión de Wydblog decidí utilizarlos en el theme (pueden verlos en el menú o en el botón Swim)… para aquellas personas que no saben como hacerlos y tienen ganas de saberlo, aquí les mostrare en forma de un pequeño tutorial como yo los hago, les aseguro que es muy sencillo de seguir y su resultado es algo así:


1_ Abrimos el Photoshop y sobre una hoja en blanco del tamaño deseado, tomamos la herramienta Rectangular Marquee Tool (M) y creamos una selección similar a un rectángulo (no importa el tamaño), luego la pintamos de cualquier color, ya que, luego lo cambiaremos con el blending options.

2_ Manteniendo la tecla ctrl. pulsada hacemos clic sobre la capa en la que creamos el rectángulo, podremos observar que aparece la selección. Luego nos dirigimos a Select→Modify→Contratc y seleccionamos 1px y luego aceptamos, de esta forma nuestra selección sera un píxel mas pequeña y por ultimo en una nueva capa la pintamos de cualquier color.

3_ Ahora comienza lo divertido, nos dirigimos a la capa del rectángulo mas grande (el primero que creamos) y hacemos doble clic para abrir sus opciones y seleccionamos “Color Overlay”, en este caso crearemos un botón anaranjado (#ff4800).

4_ En esta instancia nos posicionaremos sobre el otro rectángulo, pero en vez de elegir color overlay seleccionaremos “Gradient Overlay”, presten especial atención en la creación del gradiente:

5_ Con la misma capa seleccionada, mantenemos pulsado ctrl. y hacemos clic en la capa, luego seleccionamos la herramienta Rectangular Marquee Tool (M) y activamos la opción “interyected whith selection” en el panel de opciones (para los que no tienen activada esta opción, se dirigen a window y activan “Options”). Luego seleccionaremos la mitad del botón, justo donde se corta el gradiente y en una nueva capa pintamos la selección de cualquier color, luego ponemos en 0% (cero) el Fill y hacemos doble clic en esta nueva capa para activar el stroke

6_ Luego creamos una selección de 1px de alto y de ancho un poco menos que el ancho del botón y lo rellenamos con un gradiente radial de blanco a transparente.

7_ Para este paso, repetiremos el mismo procedimiento que el anterior, pero seleccionaremos la mitad inferior del botón, y en una nueva capa y con una opacacidad menor, por su puesto.

8_ Aquí añadiremos el texto en una nueva capa:

Listo señores, ya tenemos nuestro botón profesional terminado, una vez aprendida esta técnica, podemos probar diferentes formas y colores para la obtención de resultados distitos. Aquí les dejo algunos ejemplos:

Espero que le haya servido de algo este tutorial, saludos,


Lucas.