Taller de Adobe Photoshop: creación de una botonera interactiva

¡Hola, mis queridos alumnos del Taller de Adobe Photoshop! ¡Por fin hemos llegado a otra clase de práctica, con lo lindas y divertidas que son ^_^! Hoy pondremos en práctica los conocimientos aprendidos en lo que va del taller (¿estudiaron? ¡saquen una hoja! jaja).

Hablando en serio, hoy veremos cómo crear rápidamente una botonera interactiva. ¿Por qué interactiva? Porque crearemos los dos estados de cada botón, el “encendido” y “apagado”. Cuando apliquemos la botonera en nuestro sitio web el estado de cada botón deberá cambiar cuando el mouse pase por encima de la imagen.

Para comenzar, debemos tener asignado el lugar donde irá la botonera dentro del layout de nuestro sitio web. Si han venido siguiendo las clases ya tendrán la maqueta armada, así que yo usaré un ejemplo de 500 píxeles de ancho por 50 de alto. Ustedes pueden elegir el tamaño que más les parezca.

Ya vimos que para definir nuestra plantilla usamos las reglas, pues bien, ahora dividiremos la botonera en tantas partes como botones vayamos a tener. Recuerden que no es bueno poner 1.000 botones en un espacio chico.

Para ayudarnos podemos usar las reglas (si hacemos clic derecho sobre una de ellas podremos elegir la medida en píxeles o porcentaje para ir tirando las guías justo por donde queremos que corte cada botón.

Yo en este ejemplo voy a mostrarles cómo hacer una botonera con pestañas, pero uds. pueden hacer lo que quieran. Al efecto de que me queden alineadas las pestañas he tirado una guía más, horizontal, donde apoyaré mi diseño.

Ahora con la herramienta rectángulo de puntas redondeadas voy a crear la primer solapa.

Con la primer solapa seleccionada, mantengo presionada la tecla ALT mientras presiono UNA SOLA VEZ una flecha del teclado. Esto hará que se duplique la capa con la pestaña. Lo recomendable es tocar la flecha derecha [ -> ] para no desalinear las capas. Luego, soltando alt, muevo la solapa hasta la posición del segundo botón (ahora tengo 2 solapas) y así sucesivamente voy duplicando y moviendo las capas hasta completar la botonera.

Una vez tengo todo listo, puedo seleccionar todas las solapas y acoplar las capas que les corresponden. Luego a esa capa con todas las solapas le aplicamos un estilo que nos guste (yo usé un rollover).

Luego guardamos esta instancia del archivo que será el botón “apagado” o como se verá en el sitio si no pasamos el mouse por encima de él. Podemos entonces cambiar el color, el estilo, etc; como para que se diferencien ahora los botones de la instancia anterior (estos serán los botones “encendidos”).

Encendidos

Apagados

En cualquier momento podemos elegir si queremos agregarle un texto como imagen o dejarlos en blanco para situarlos con CSS.

Por último haremos clic en el botón “sectores” y dentro del menú de opciones en “sectores a partir de guías”.

Aquí veremos que cada sector separado por guías se ha convertido en un sector aparte. ¿Para qué nos sirve esto? Principalmente porque hay una función de guardado de archivos que recorta cada sector como una imagen aparte, que se llama “Guardar para la web”. Esto lo veremos con más profundidad en la clase que viene, pero ya podemos usarlo:

Vayamos a Archivo->Guardar para la web.

Vemos que aparecen todos los sectores de la imagen que dividimos. Vamos a guardar, elegimos que guarde las imágenes y elegimos una carpeta.

¡Voila! ya tenemos los botones de nuestra botonera divididos en partes listas para usar.

En realidad podríamos haber usado una buena tipografía, una imagen más elaborada de fondo, pero el sistema es siempre el mismo. ¡Prueba con tus propios diseños!

La próxima clase veremos más sobre la opción “Guardar para la web”.