BOTÓN WEB o BLOG METÁLICO -Tutorial-

Aprovechando que hoy dispongo de un poquito de tiempo libre para emplear en el mundo "virtual" os he preparado este interesante tutorial a través del cual os enseñaré a crear desde cero un botón para vuestra página web o bien blog. 

Veréis que es una sencilla técnica y muy buena para continuar conociendo los entresijos de este maravilloso programa. 

Como siempre os digo, lo que importa es aprender la técnica para posteriormente usarla en vuestros trabajos. 

COMENZAMOS: 

1. CONTROL + N, para crear un nuevo documento, en modo RGB y fondo negro. 

• Las medidas las dejo a vuestra elección. 

2. CONTROL + MAYÚSCULAS + N, para crear una nueva Capa. 

• Pónganle el nombre de Textura. 

3. Ahora pulsar la letra G para activar la herramienta Degradado: 

• hacer clic en el triangulito del selector de degradado y escoger el de COBRE –es el segundo, por la derecha, de la fila segunda-. 
• Seleccionar Degradado Lineal y aplicarlo, en ésta capa vacía, diagonalmente, es decir clic en el ángulo superior izquierdo y arrastrar hacia el ángulo inferior derecho –o al contrario, como gustéis-. 

4. CONTROL + U, para abrir el cuadro de dialogo TONO/SATURACIÓN y, sin activar la casilla colorear, pongan estos valores (todo es orientativo):

• en TONO un valor de -170
• en SATURACIÓN pongan -50. 
• Con esto conseguimos un efecto plateado. 

5. Vamos a darle un poco de textura: 

• FILTRO > RUIDO > AÑADIR RUIDO: 
• ajustar la opción Cantidad al 5% 
• Pulsen OK. 
• Seguidamente le añadimos: FILTRO > DESENFOQUE > DESENFOQUE DE MOVIMIENTO: 
• configurar el Ángulo a 0 y Distancia a 30. 

6. Crear una nueva capa pulsando CONTROL + MAYÚSCULAS + N y pónganle de nombre FORMA. 

• Activen las herramientas de forma pulsando la letra U y de las herramientas que disponemos, en esta opción, escoger Herramienta Polígono: 
• Pongan en la opción Lados 6 y activar el icono Rellenar Pixeles –de los tres iconos que se nos muestran en la barra de herramientas seleccionar el primero, tiene forma de un cuadrado-.
• A continuación dibujáis un Hexágono –hacer clic en el centro del documento y arrastrar hacia arriba al tiempo que mantenéis la tecla mayúsculas pulsada, para crearlo proporcionalmente-. 

7. Hagan CONTROL + Clic, sobre la capa del Hexágono –para activar la selección- y situaros en la capa Textura –OJO, lo repito colocaros en la capa de nombre Textura- y a continuación pulsar este combinado de teclas CONTROL + MAYÚSCULAS + J, de esta manera movemos la textura seleccionada a una capa independiente. 

8. Ahora hagan clic con el puntero del ratón en los iconos de los ojos, de la paleta capas, correspondiente a las Capas Forma y Textura para ocultarlas. 

9. Os recuerdo que nos encontramos en la capa creada en el paso 7 y que tendrá el nombre de Capa 1 –en ella se encuentra el Hexágono metalizado-. 

• Con el puntero del ratón hagan clic en el icono (fx) Añadir un estilo de capa, situado en la parte inferior de la Paleta de Capas y aplicarle un Bisel y Relieve con esta configuración: 
• en ESTILO: seleccionar Relieve Acolchado y de PROFUNDIDAD poner un valor alto -950%
• Las restantes opciones dejarlas tal cual vienen por defecto. 

10. Hagan clic con el puntero del ratón en el icono del ojo, de la capa Textura, veréis el hexágono esculpido en la placa metálica –OJO, hacer clic en el ojo, no situaros en la capa-. 

• Pulsar la letra T para activar la herramienta de TEXTO y escribir una palabra en el interior del Hexágono –en mi ejemplo he puesto Inicio-. 

11. A continuación pulsar CONTROL + Clic sobre la capa del texto, para cargarlo como una selección y clic en el icono del ojo, de esta capa, para ocultarla. 

• Ahora tendremos la selección del texto. 
• Colocaros en la capa del Hexágono de metal y pulsar la tecla Suprimir. 
• Así de fácil habéis conseguido un bisel instantáneo para el texto, al borrar parte del Hexágono y el estilo de capa se ha aplicado de manera automática a los bordes. 

12. Pulsen la combinación de teclas CONTROL + M, para activar el cuadro de dialogo CURVAS y ajustarla de manera parecida a la captura de pantalla que os muestro. 

Con esto logramos realzar el efecto metal. 

13. Sin no os gusta el efecto, por la cascada de colores que se ha producido al aplicarle las dos Curvas, abrir la ventana de diálogo TONO/SATURACIÓN, pulsando CONTROL + U y pongan estos valores de configuración:

• Clic en la casilla de verificación Colorear.
• en TONO poner un valor de 205.
• 18 en SATURACIÓN.
•  Hemos conseguido recuperar el tono azul, del principio. 

14. Por último ocultamos la capa de la Textura, haciendo clic en el icono del ojo –no situaros en ella-, y le aplicamos –a la capa del Hexágono metálico- un RESPLANDOR EXTERIOR. 

• Para ello hacer clic en el icono (fx) Añadir un estilo de capa, situado en la parte inferior de la Paleta de Capas y escoger RESPLANDOR EXTERIOR: 
• Con el puntero del ratón hagan clic en el icono del color y del selector escoger un color verde.
• En TAMAÑO pongan un valor de 20px y el resto de las opciones no tocarlas, dejarlas tal cual. 
• Pulsar OK. 

...listo!! Ya tienen ustedes un botón metálico para la web. 

Ahora a practicar, practicar y practicar. 

Crearos vuestros propios botones.

DISEÑO ES IMAGINACIÓN 

Saludos.