Pegado a ti
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).
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 :)
Publicado el 26.11.2005 @ 21:27 | 
Categorías: 
ZOrba
26.11.2005 @ 22:00
“el mejor programa de edición digital para la Web que jamás ha existido” Francotirador.
y no es naa chiste cabrito al menos con varios amigos(diseñadores y productores de sitios web) la otra vez lo conversamos y sin duda es el mejor “depurador” por decirlo así más que editor ya que puedes pasar a herir a algún Nazi de Photoshop.
salu2
PD:bueno el tutorial para el que no sabía ;).
Max Villegas
26.11.2005 @ 22:20
Buen mini tutorial o lo que sea…. pero sólo como sugerencia (esto porque actualmente uso el photoshop y tengo quejas con adobe) podrías extenderte más en las bondades de Macromedia Fireworks… porfa.
Verónica
26.11.2005 @ 23:18
Yo amo Fireworks!
Es lo mejor, top de lo top.
Genial el tutorial que has hecho, explicas
muy bien y de forma clara los pasos a seguir.
Eres casi una guía para ciegos, je! :)
Un abrazo.-
Francotirador
27.11.2005 @ 00:09
Gracias y claro, es que los photoshoperos suelen mirar a Fireworks con desprecio, como si de eso dependiera la calidad de tus resultados (¿te acuerdas Franco cuando la Andrea me miró con tentación de risa cuando le dije que yo usaba Fireworks?).
De todas formas esa resistencia individual se convirtió en orgullo colectivo cuando supe que el gran Alberto usaba Fireworks para crear sus diseños. Photoshoperos: in ya face!
Omar
27.11.2005 @ 01:04
Alguien dijo algo de guía para ciegos?, pues bueno, yo soy de esos.
Gracias y salu2.
alpha_demon
27.11.2005 @ 01:44
La verdad que soy un photoshopero, pero de vez en cuando uso fireworks.
¿Alguno de ustedes conoce la palabra “sinergia”?.
Lo peor es negarle la oportunidad a los demás.
Francotirador, recuerda que hay muchos que te siguen, y solo por esos comentarios, que yo sé que los dijiste con una gota de humor, vas a influenciar a mas de una persona a una negación total a Photoshop. Solo porque Francotirador lo insinuo, digamos por su espiritu Monopolista(Estructura de mercado, en la que una única empresa ofrece una mercancía que no tiene sustituto)por las negociaciones de las que yá en muchos lados se está comentando.
Francotirador
27.11.2005 @ 02:18
Jeje… tranquilo, Alpha. No tengo nada contra Photoshop, es sólo que Fireworks me es más cómodo para trabajar y me agiliza el trabajo, sobre todo considerando que mi PC es un tarrito.
Ahora, y como me han dicho todos los que saben, no es la herramienta la que hace al experto, sino tus resultados. Si usando Paint logras lo que querías en el tiempo esperado, genial. Si lo haces con Photoshop, Corel, Paint Shop Pro o Fireworks, poca diferencia hace (salvo los precios de la licencia).
A ver si le doy en el gusto a Max y explico un poco mejor mi favoritismo por Fireworks.
(Por cierto, yo también ocupaba harto Photoshop antes en conjunto con Fireworks… pero ya no recuerdo para qué era, jeje).
Omar
27.11.2005 @ 02:46
Christian, acabo de probar el fireworks y es la primera vez que puedo hacer un truco en forma tan rápida y fácil, con el Photoshop es, por lo menos para mi, un poco más complicado, digamos que pasé varios malos ratos.
Salu2.
Francotirador
27.11.2005 @ 02:52
Justamente es eso, Omar. Fireworks está mejor adaptado al trabajo ágil y se especializa en gráficos para la Web, siendo muy amigable con los usuarios neófitos. Ahora, si tienes que hacer trabajos para imprenta, Photoshop sigue liderando el campo.
andrés
27.11.2005 @ 08:39
Mantener un blog con tanto detalle de diseño ¿no se vuelve difícil y lento?
Ricardo
27.11.2005 @ 11:41
Acompaño a Andrés, si es que quieres decirlo, ¿cuánto tiempo dedicas a tu bitácora? Aunque supongo que ya lo haces con más pericia.
Francotirador
27.11.2005 @ 13:01
Andrés y Ricardo: Nunca me he puesto a pensar cuánto tiempo dedico a mi bitácora pero es menos del que imaginan. De hecho, esta semana me he esforzado por mantenerla actualizada luego de un periodo en que escribí bastante poco. Todo depende de cómo anden las cosas en la pega.
Pero aún cuando me exija la hora de almuerzo, quedarme un viernes en la noche o perder algo de sueño, se justifica porque este espacio es importante para mí por dos razones. Por un lado es mi forma de expresión y – tal como me dijo una vez el colega Emiliano Aguayo – “cuando uno de verdad es periodista, aúnque trabaje de mozo va a escribir en las servilletas”.
Lo otro es que sin dudas Francotirador es una llave profesional. Me permitió venir a trabajar a Santiago y espero que en el futuro me abra muchas puertas más.
Y sobre lo de los detalles del diseño… en realidad es lo de menos. En Fireworks se trabaja muy rápido y armar cada imagen no me toma más que un par de minutos ;)
felipe.lavin
27.11.2005 @ 19:46
Otra fuente buena para obtener imágenes no sujetas a copyright es el mismísimo Flickr; especialmente el buscador que tienen que separa las imágenes de acuerdo a la licencia Creative Commons que uno decida: http://www.flickr.com/creativecommons/
Francotirador
27.11.2005 @ 20:29
Excelente dato, Felipe. ¡Gracias! :)
juque
27.11.2005 @ 20:56
¡vaya vaya!, interesante giro de tuerca le haz dado a tu blog Francotirador. Me gusta este matiz y de paso dar un buen dato para personalizar la presentación de imágenes.
Un dato “amiguis”, no lo he averiguado pero por ahí debe haber alguna extensión para FW para agilizar un poco más el efecto.
Le felicito por el dato.
Nelson Alvarez
28.11.2005 @ 00:03
El dato de flickr es muy bueno, incluso ustedes mismos cuando suban fotos pueden licenciarlas con Creative Commons para que los demás puedan usarlas.
Además flickr permite bloggear directamente desde tu cuenta, es decir si estás registrado (gratis o pagado) haces click en “blog this” sobre cualquier foto y la pones altiro en tu blog. Esto requiere una configuración tan básica como agregar el blog, usuario y clave una sola vez.
Con respecto a fireworks, gran valor, es lo más fácil de aprender… aunque yo ahora uso The Gimp por el tema de las licencias. (es Open Source)
Carlos
28.11.2005 @ 05:10
¿Porque el gusto de comparar Fireworks con Photoshop? :S si ya bien lo dijiste Fireworks especializado en diseño web (de eso trata el tema) y Photoshop para imprenta (que no quita que se pueda usar para web). Pero si Photoshop estuviera compitiendo con Fireworks para que Adobe incluye el Software ImageReady (que a mi gusto es una imitación a Fireworks) :P
Oliver
28.11.2005 @ 11:21
FW, es el software que mas le saco el jugo, es excelente y la version 8 esta increible
María Pastora
28.11.2005 @ 19:45
Mmmmm… yo no uso Fireworks… pero aprenderé ;)
Gracias, amigo, por tu excelente explicación :D
Roberto
28.11.2005 @ 21:24
Hace mucho tiempo, leí en esta bitácora sobre las burlas por usar Fireworks. Una tontera.
Por mi parte sigo fiel a photoshop, de macromedia solo dw y flashshshshs…
Wen tutorial x)
Nelson Alvarez
28.11.2005 @ 22:46
Un dato para medir los pixeles de sus blogs… o de cualquier página.
Hay una extensión para firefox llamada Measurelt que permite dibujar una regla para medir en una web al visitarla.
hyoga
29.11.2005 @ 20:26
¡Ya llegó el talibán! (ese soy yo)
Yo no uso Fireworks, pero uso algo bastante similar y -desde mi humilde opinión-, mejor: The GIMP.
Es algo más engorroso de manejar, pero por el precio mejor no digo nada.
Ya que propones utilizar imágenes con licencia abierta, ¿por qué no pasamos el aviso completo y usamos un editor libre?
Pretoriano
01.12.2005 @ 10:12
En Flickr hay una opción para asignar una licencia Creative Commons a las fotos que uno sube, pero cual fuera mi decepción al notar que no sirve para las fotos que ya subí, sino que para las que subiré a futuro.
Personalmente opino que en Flickr, salvo excepciones, el copyright es letra muerta, ya que gente común y corriente talvez no está ni ahí con el uso que se pueda hacer de sus fotos (y ni siquiera se lo han cuestionado).
Las licencias Creative Commons debieran estar “por default” asociadas a las fotos en Flickr, como era en un comienzo.
hyoga
02.12.2005 @ 19:29
Te cuento, mi estimado Pretoriano, que puedes editar la licencia de las imágenes en forma individual, en el caso que no hayas activado CC antes de subir la imagen.
Abres la página de la imagen y presionas en “Change License”. Y listo: una linda licencia Creative Commons para tu imagen sin licencia.
Charles Queen
04.12.2005 @ 22:16
Hola a Tod@s, perdon, es que estaba navegando y encontre este interesante sitio, he leido mucho de lo que han escrito y me parece que todo es muy interesante y en relacion al tema de photoshop y fireworks… pues me gustaria proponerles el siguiente tema y haber que les parece.
Adobe compra macromedia en $3,400 millones… que tal? imaginense… parece que tus miedos de que adobe nos obligue a todos a usar photoshop se volveran una realidad. bueno espero sus comentarios. para mas informacion entren a nuestro sitio de http://www.adobe.com
saludos!!!
Esteban
07.12.2005 @ 16:01
Alguien nombra a Emiliano Aguayo. Les cuento que acaba de lanzar un libro con Jorge Gonzalez el de Los Prisioneros. Creo que está rebueno según el blog de Marisol García
Juan Pablo
07.12.2005 @ 22:12
Demonios… lo lograron…
…bajando Fireworks!!!
claudio
13.04.2006 @ 11:31
Buena ayuda !
felicitaciones.
tienes mas tutoriales?
atte.
gcol-zyos
13.10.2006 @ 22:20
amigo la verdad bno tienes un tutorial que sea sobre como personalizar las lketras de fireworks