1. Previamente creamos los dibujos de los botones o los sacamos directamente de los muchos clip-art que circulan. Los dibujos deben estar en blanco y negro (en nuestro ejemplo ha sido éste). Una vez que tengamos el definitivo lo abriremos en nuestro programa de edición digital en modo RGB y una resolución de 150ppp. A partir de aquí vamos a comenzar estableciendo la base de trabajo para conseguir el aspecto que queramos a nuestros botones

2. En el panel de Canales creamos tres copias idénticas del canal AZUL. Los renombraremos como canal 4, canal 5 y canal 6

3. Seleccionamos el Canal 4 y eliminamos los iconos (pintando de blanco o con la tecla SUPR pero el fondo de los cuadros ha de quedar blanco)

4. Seleccionamos el Canal 5 y eliminamos todo menos los iconos

5. Seleccionamos el Canal 6 y vamos a desenfocar el panel pero no los iconos. Cogemos la selección del Canal 4 (CTRL+pinchar en la miniar¡tura del canal), la invertimos y la ensanchamos desde el menú Selección -->Modificar -->Expandir y le damos un valor de 8 px. Ahora lo desenfocamos con Filtro -->Desenfocar -->Desenfoque Gaussiano con un valor de 3px (Nota: los anteriores valores son aproximados y corresponden a este ejercicio, en otros casos será necesario adoptar otros valores)

6. Ahora ya tenemos todo preparado para hacer todos los ajustes de volumen, textura y dar el aspecto que tenemos pensado para nuestro panel. Comenzaremos por darle volumen a los botones. Activamos la Capa 1 y la rellenamos de blanco por completo

7. Desde Filtro -->Interpretar -->Efectos de Iluminación ponemos los valores que queramos pero siempre utilizando el Canal de textura 6 y sin la opción de luminancia. Así obtendrás el relieve deseado. Nosotros hemos utilizado estos valores:

8. Ahora vamos a dejar solo los botones. Duplicamos la Capa 1 y cogemos la selección del Canal 4 que invertiremos. Suprimimos lo seleccionado y deseleccionamos

9. Vamos a animar los botones con un efecto destello. (Esto tiene su utilidad en una página web para destacar el botón que se ha seleccionado, diferenciándolo de los demás (más información pinchando aquí). Creamos una nueva capa que colocamos sobre todas las demás

10. Cogemos la selección del Canal 5 y rellenamos esta selección de negro

11. Creamos otra capa en la que irá el efecto destello. Nuevamente cargamos la selección del Canal 5 y la invertimos. Expandimos la selección con Selección -->Modificar -->Expandir con un valor entre 2 y 5px. Ahora calamos la selección con Selección -->Calar con valor entre 2 y 3px. Por último rellena la selección con un color vivo (en nuestro ejemplo el color es R=0, G=252 y B=255) y deselecciona todo

12. Aumentamos la luminosidad repitiendo igual todos los pasos anteriores excepto Expandir y Rellenar que lo haremos con el tono de color seleccionado pero más claro (en nuestro ejemplo R=196, G=254 y B=255). Movemos la Capa 3 bajo la Capa 2 y cambiamos la opacidad de ésta entre un 20 y un 30%

(NOTA: Puedes acentuar más el efecto si desde la Capa 3 y ocultando todas las demás ajustas el contraste con Niveles dándole un valor de entrada de 0, 1 y 194 aproximadamente)

13. Ahora que tenemos los botones vamos a integrarlos al panel. Desde Canales hacemos una copia del Canal 4 que llamaremos Canal 7. A este Canal le damos un Desenfoque Gaussiano de 5 px aproximadamente.

14. Ocultamos todas las capas excepto la Capa 1 que rellenaremos de blanco. Aplicamos ahora un nuevo efecto de iluminación (como en el paso 7) cambiando solamente las opciones de relieve de luminancia y el canal de textura que eligiremos el Canal 7. Nuestros valores han sido estos:

Para ver lo obtenido activamos todas las capas y el resultado será similar al que sigue:

Este resultado ya nos vale para cualquier documento para imprimir, con resolución y tamaños adecuados. Lo que sigue es una daptación del truco para su uso en una página web. Antes de continuar debemos darle los valores adecuados y definitivos de tamaño, proporciones y resolución que necesitamos para nuestra página. Guardamos una copia del trabajo realizado hasta ahora

15. Combinar las capas 2, 1 copia y 1 ocultando previamente la 3

16. Duplicamos la imagen con la opción "sólo capas combinadas" activada. Con esto logramos la primer imagen

17. Para hacer las imágenes de los botones activados (con el destello) procedemos de l amisma manera, seleccionando y copiando uno de los destellos de la Capa 3 en una nueva capa. Repetiremos el proceso hasta completar las cuatro copias (cinco con el original del paso 16):

El trabajo en nuestro programa digital ya está finalizado, ahora ya sólo depende de la creación de la página web (un método para realizarlo pinchando aquí). Ten en cuenta la finalidad de los botones. Si está destinado a cuatricomía los colores deben ser lo más vivos posibles y no olvides que ciertos colores como el naranja resultan "sucios" en impresión a cutricomía

Tutorķa

Si tienes dudas y quieres preguntarnos sobre el contenido de este curso. O si quieres ver las respuestas que se han dado a otras consultas visita nuestro foro.