El jueves, María Pastora me preguntó si podía donarle el código con que las imágenes de esta bitácora parecen pegadas a la pantalla con cinta adhesiva. Como no tenía idea de que estuviera usando un código, le dije que lo buscara y aprovechara de avisarme cuando lo encontrara… mientras, les enseñaré a hacerlo en forma manual usando [inserte aquí intento de polémica barata] el mejor programa de edición digital para la Web que jamás ha existido: Macromedia Fireworks.

INGREDIENTES

• Cualquier versión reciente de Macromedia Fireworks (si no lo tienes, apúrate en descargar una copia de evaluación desde el sitio de Macromedia antes que Adobe nos obligue a todos a usar Photoshop).
• Una imagen.
• Una bitácora.
• Una computador.
• Una mano y dos ojos (opcional).

IMPORTANTE: Antes de comenzar, debes conocer cuánto es el ancho máximo que el diseño de tu bitácora permite para desplegar imágenes. Si crees que HTML o CSS son siglas de alguna filial de la ONU, es mejor que hagas una captura de pantalla pulsando IMPR PANT y luego medirla pegándola en Fireworks.

En mi caso son 460 pixeles y es la medida que tendré a consideración en el ejemplo.

(Mis agradecimientos a la señorita Minogue por modelar para nosotros)

Primero decidamos, ¿publicaremos la foto en grande al centro de la bitácora o estará alineada a un lado del texto? Si es este último caso, el ancho de la imagen final no debe superar la mitad del espacio que tenemos disponible, o sea, 230 pixeles. De todas formas siempre debemos dejar unos pixeles de margen para dar cabida al efecto, por lo que reduciré a la señorita Minogue a 180 pixeles de ancho. Con eso será suficiente.

Modificar > Lienzo > Tamaño de la Imagen (Modifiy > Canvas > Image Size)

(NOTA: Si la imagen que elegiste tiene una resolución mayor a 72 pixeles por pulgada (pixels/inch), aprovecha de reducirla. Los monitores no pueden mostrar más de 72 ppp, por lo que mantener una resolución superior es aumentar el peso innecesariamente).

Ahora necesitamos espacio para trabajar. Aumentemos el borde a un tamaño que nos deje maniobrar con libertad, digamos… 300×350 pixeles. No importa que por ahora exceda los límites que nos habíamos fijado. Ya los recortaremos.

Modificar > Lienzo > Tamaño del Lienzo (Modify > Canvas > Canvas Size)

Si el fondo aparece transparente (con cuadros gris y blanco), cambiémoslo a blanco – o el que tengas de fondo en tu bitácora – desde:

Modificar > Lienzo > Color del Lienzo (Modify > Canvas > Canvas Color)

Okey. Comienza lo bueno. Vamos a curvar muy levemente la foto para dar la impresión que fue pegada sobre la pantalla. Para ello la seleccionamos con la herramienta Escala (Scale) y pondremos el puntero junto a las esquinas hasta que se transforme en una flecha circular de la que podremos tirar. Prueba a hacerlo alejándote de la imagen para que los ángulos sean más sutiles.

Para darle profundidad apliquemos un efecto de sombra. Con la imagen seleccionada vamos al inspector de propiedades (barra inferior) y pulsemos el signo ‘más’ bajo el rótulo Efectos (Effects). Esto es algo que adoro de Fireworks, porque nos permite crear una sombra rápidamente (no como otros).

Efectos > Sombrear e Iluminar > Sombra (Effects > Shadow and Glow > Drop Shadow)

La mayor parte de las opciones por defecto en el cuadro de diálogo estarán bien. Sólo asegurémonos de aplicar sombra negra y cambiar la Distancia (la flechita con cuatro puntas) de 7 a 1, para que no dé la sensación de estar muy lejos. También pueden dejarla en 2 si prefieren darle una pequeña inclinación hacia el lado.

Ya va tomando forma, ¿no? Bien, es hora de agregar la cinta adhesiva. Para eso dibujaremos en los extremos de la foto dos o tres rectángulos de relleno tono gris medio (#999999) y sin borde. Pueden ser cuatro rectángulos, pero no suelen quedar bien salvo que la foto sea muy grande.

Respecto a las medidas, es bueno que los rectángulos tengan un ancho variable para que sean más realistas, pero el alto debe ser siempre el mismo. En mi caso, los hago de 25 pixeles.

Pongamos los rectángulos en posición arrastrándolos con el puntero y girándolos de la mismas forma que hicimos antes con la foto. Eso sí, los rectángulos debieran estar más inclinados por razones obvias. Prueba distintos ángulos hasta obtener un resultado que te satisfaga.

Finalmente, selecciona todos los rectángulos al mismo tiempo (mantén pulsado SHIFT) y en el inspector de propiedades baja la Opacidad (rectángulo con cuadritos grises y blancos) de 100% a 50%. Inmediatamente, agrégales sombra siguiendo el mismo procedimiento anterior pero cuidando que la distancia sea 0 (cero) para que se difumine en forma pareja.

¡Y ya estamos listos! Ahora sólo elimina los bordes sobrantes con el comando de recorte…

Modificar > Lienzo > Recortar el lienzo (Modify > Canvas > Trim Canvas)

Por último, aún cuando no es imprescindible para el efecto, un detalle importante del que me convencieron los chicos de Derechos Digitales es el de mencionar la fuente de la fotografía. Sí, puede que el derecho a cita de imágenes no exista en Chile, pero si vas a vulnerarlo, lo mínimo es decir de quién te estás aprovechando.

Para el caso, utilizo una letra Trebuchet MS, en gris medio y tamaño 9, dejando el Suavizado (Anti-Alias) en Suavizado de Sistema (System Anti-Alias) para que se vea con más nitidez (opción disponible sólo desde Fireworks MX 2004). En este modo, recuerda quitar la casilla de Ajuste Automático (Auto-Kern) para evitar que las letras se aglomeren.

… And everyone say hi to Miss Minogue! Si algo no quedó claro, por favor usen los comentarios :)