ANRAFERA

ANRAFERA

martes, 17 de junio de 2014

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 COBREes 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 Ángulo0 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ágonohacer 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ágonopara activar la selección- y situaros en la capa TexturaOJO, 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 1en 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.

29 comentarios:

  1. Tiene muy buena pinta, lo intentare. Gracias por tus tutoriales.
    Un fuerte abrazo

    ResponderEliminar
  2. Que botón más chulo has creado..interesante como siempre, me encanta el colorido que le has dado..eres genial Ramón.
    Gracias siempre y feliz jornada.
    Un abrazo

    ResponderEliminar
  3. Hola Ramón, en un primer momento he pensado que era un tutorial sencillo pero, no, no es tan sencillo como parece. Nos pondremos manos a la obra, para aprender la técnica como muy bien nos dices siempre.
    SAludos.

    ResponderEliminar
  4. Muy interesante, lo pondre en practica sin duda alguna, un abrazo amigo.

    ResponderEliminar
  5. Como siempre, un interesante tutorial para guardar y aprovechar en el momento más apropiado.
    Muchas grácias Ramon
    Un abrazo

    ResponderEliminar
  6. Como siempre , muy interesantes tus aportaciones.
    Saludos

    ResponderEliminar
  7. Realmente esa textura te invita a pulsar la pantalla esperando sentir ese frío del metal.

    Besos.

    ResponderEliminar
  8. Siempre aprovechando el tiempo.
    Muchas gracias por tu trabajo.
    Expresiones
    Piedra

    ResponderEliminar
  9. Ramón, me alegra verte por aquí de nuevo, me gusta la combinación de colores que has cogido para este botón, el efecto es muy llamativo

    Abrazos!!!

    ResponderEliminar
  10. Haciéndonos la vida más fácil...
    Muchas gracias.
    Un abrazo.

    ResponderEliminar
  11. Me parece interesante. Tan pronto como consiga resucitar mi PC trataré de realizarlo. Un abrazo,

    ResponderEliminar
  12. Muchas gracias por compartir lo que sabes, más aún dada la falta de tiempo a la que aludías.

    ResponderEliminar
  13. Excelente diseño, una buena lección Ramón! Un abrazo!

    ResponderEliminar
  14. •°
    Muito legal!
    º°。♡♡

    Ótimo dia cheio de luz e muita paz!!!
    Bom fim de semana!
    Beijinhos.
    º。✿✿º°

    ResponderEliminar
  15. siempre practico, bien explicado ... me queda trabajo para alcanzar tu perfeccion pero poco a poco voy aprendiendo gracias a ti...
    un abrazo.

    ResponderEliminar
  16. Como siempre, gracias por tu labor, y por tus visitas ;-)
    Un abrazo!

    ResponderEliminar
  17. Como siempre explicado de una manera facil y sencilla y además muy util. Un abrazo.

    ResponderEliminar
  18. Desde luego el que no sepa hacerlo con tus estupendos tutoriales!!!

    Muy buena entrada, Ramón...nunca se sabe y, desde luego, se agradece mucho tu esfuerzo!!!

    Un gran abrazo, amigo!!! ;)

    ResponderEliminar
  19. Ramón gracias por tu buen trabajo Saludos

    http://creatividadeimaginacinfotosdejosramn.blogspot.com.es/

    ResponderEliminar
  20. MUCHAS GRACIAS BROTHER, POR COMPARTIRNOS TAN IMPORTANTE HERRAMIENTA.
    UN ABRAZO

    ResponderEliminar
  21. Αγαπητέ μου φίλε καλλιτέχνη και δάσκαλε Ramon
    Μας έχεις χαρίσει τις πολύτιμες γνώσεις σου, τόσο απλόχερα, που σε ευχαριστώ πάρα πολύ γι αυτό!
    Σου εύχομαι ένα θαυμάσιο καλοκαίρι!
    Μια αγκαλιά

    ResponderEliminar
  22. Jolin José Ramón. No está nada mal! Me gusta mucho:) Gracias!
    Un abrazo :)

    ResponderEliminar
  23. jejeje, estupendo...a ver si cara a verano y unos días..practico algo..aunque como verás en mis fotos, no retoco nada, ni las corto...son como son..momentos, espontaneos..un abrazo dese Murcia...

    ResponderEliminar
  24. Meu caro; obrigado pela partilha....
    Um abraço

    ResponderEliminar

  25. Uno más. Perfecto, como siempre. Seguro que muchos habrán de encontrarle una aplicación.

    · Un abrazo, Ramón.

    · CR · & · LMA ·

    ResponderEliminar
  26. UN INTERESANTE TUTORIAL CREO QUE ME TENDRA MUCHO PROVECHO.
    UN ABRAZO.

    ResponderEliminar
  27. Hola Ramón. Sin duda un tutorial que servirá para muchos.
    Buen fin de semana y abrazos.

    ResponderEliminar
  28. Magnifico tutorial , gracias Ramón!!
    Un abrazo

    ResponderEliminar