Admitámoslo. El efecto “reflejo en hielo/agua/cristal” es el “bevel & emboss” de esta década.
Si alguna vez te ha tocado crear uno, sabrás que es un pelín coñazo. Si además tienes que añadir un reflejo a 50 imágenes, habrás estado al borde del suicidio.
Sobre todo si después de la paliza alguien te dice cosas como:
- “Hmm… ¿por qué los reflejos no tienen todos la misma altura?”
- “¿Sabes qué? Creo que habría que hacer los reflejos un poco más pequeños”
- “Mira… mejor vamos a cambiarlo todo por un ‘drop shadow’, que vuelve a estar de moda”
(situaciones estas totalmente hipotéticas)
La cuestión es que, si eres un vago profesional, esta es una de esas veces en las que piensas… “hmmm… automatización…”
Así que, con ayuda de la terrible documentación de Fireworks CS3, me puse a programar un comando para hacer reflejos.
El resultado es que, con un sólo click, tienes un bonito efecto como este:
Bonito, ¿verdad? :)
Para conseguir este glamouroso comando, guarda el siguiente código en un fichero Reflection.jsf en la carpeta ~/Library/Application Support/Adobe/Fireworks CS3/Commands/ (o su equivalente en Windows que debería ser algo como C:/Documents and Settings/usuario/Application Data/Adobe/Fireworks CS3/Commands/), y luego selecciona un objeto en Fireworks y en el menú “Commands” elige la opción “Reflection”.
// Reflection Command 1.0
// Ale Muñoz <http://bomberstudios.com>
// Ask for shadow height:
shadow_height = prompt("Reflection Height","50");
// Get the original object
original = fw.selection[0];
original.name = "original";
// Clone, reflect and move original
fw.getDocumentDOM().cloneSelection();
fw.getDocumentDOM().reflectSelection(false, true, "autoTrimImages transformAttributes");
fw.getDocumentDOM().moveSelectionBy({x:0, y:original.height + 5}, false, false);
// Get the cloned object
copy = fw.selection[0]; // Current selection is now the copy
copy.name = "copy";
// Create the mask
fw.getDocumentDOM().addNewRectanglePrimitive({left:copy.left - 2, top:copy.top - 2, right:copy.width + copy.left + 2, bottom:copy.height + copy.top + 2}, 0);
// White to black gradient
fw.getDocumentDOM().setFill({ category:"fc_Linear", ditherColors:[ "#000000", "#000000" ], edgeType:"antialiased", feather:0, gradient:{ name:"cn_Custom", nodes:[ { color:"#ffffff", isOpacityNode:false, position:0 }, { color:"#000000", isOpacityNode:false, position:1 } ], opacityNodes:[ { color:"#000000", isOpacityNode:true, position:0 }, { color:"#000000", isOpacityNode:true, position:1 } ] }, name:"Linear Smooth", pattern:null, shape:"linear", stampingMode:"blend", textureBlend:0, webDitherTransparent:false });
// Reposition gradient
fw.getDocumentDOM().moveFillVectorHandleBy({x:0, y:shadow_height}, "end1", true, false);
// Get the mask
mask = fw.selection[0];
mask.name = "mask";
// Remove mask's stroke
fw.getDocumentDOM().removeBrush();
// Apply the mask to the cloned object
fw.selection = [copy, mask];
fw.getDocumentDOM().group("mask to image");
// Finally, set opacity to 30 so it looks like a reflection
fw.getDocumentDOM().setOpacity(30);
Para usarlo, selecciona un objeto y elige la opción “Reflection” del menú “Commands”.
Te pedirá que introduzcas la altura del reflejo en píxels (por defecto, 50)
Y ya está! :D
Si encuentras algún fallo o se te ocurre alguna mejora, deja un comentario…
Y recuerda el lema de los vagos profesionales: “lo importante no es trabajar más, sino trabajar mejor” ;)
Peasso comando!! Qué bueno! Nos vendrá bien mientras dure esta moda de los reflejos 2.0. Gracias por el curro, y por compartirlo.
Salú.
Muchas gracias, Ale! Después de tu clase de retículas del viernes y haber usado reticulator este finde, lo que me faltaba era esto para empezar el lunes…el efecto es muy bonito. :)
Me quito el sombrero, una vez más
De verdad eres un genio Dios te bendiga, y este mismo efecto no se puede hacer en GIMP??? Digo por Linux!…
Freddy » Un poco exagerado, pero gracias! :D
No uso GIMP, pero aparentemente deberías poder hacer lo mismo usando Scheme o Python.
Por lo que he visto parece un pelín farragoso, pero todo es ponerse…
En serio que eres de lo mejor eh!! en mi antigua version de fireworks mx me daba un error pero aun asi cumplia el objetivo de hacer el efecto y es genial. gracias
Hola, lo he probado en fireworks 8 y funciona perfectamente!
Genial, gracias por la aportación.
Que tal poner overflow: auto; en la sección ‘pre code’ del css?
Wow!!! mis mas sincero agradecimiento.
he tenido problemas para ejecutar el comando en fireworks8, sale el siguiente aviso “imposible ejecutar el archivo de comandos. se ha producido un error”. por favor ayudenme a resolverlo mi version es 8.0.0.777 gracias
WAAAW!! PEEERFECTO me ahorraste un buen de tiempo muchas gracias… DE LUXO
Gracias, me has ayudado mucho con esto :)
Saludos
muy bueno, mis felicitaciones! me has aydado mucho con esto, me has resuelto el 80 por ciento de mi problema
hola, tengo problemas con el script, ya lo habia usado antes sin problemas en Win Xp con FW cs3 pero ahora que lo corro desde un imac con leopard me sale un aviso que se ha generado un error, agradezco me colabores!!!!!!
igual antes cuando lo usaba me parecia super!!!!!!
gracias
@camilo le echo un vistazo cuando tenga un rato, gracias por el aviso : )
A mi tambien me da problema “imposible ejecutar el archivo de comandos. se ha producido un error”, el mismo que le sale a Juan Manuel Valderrama . Tengo una version portatil (v9.0.0.1188)
El problema de “imposible ejecutar el archivo de comandos. se ha producido un error” es posible que se deba a que al copiar el codigo directamente desde esta pagina a un editor de texto, las comillas no se interpreten correctamente. Asegurate de que antes de guardar el archivo JSF las comillas estan escritas correctamente.
Gracias te has pasado, el comando es muy util!!!
XCELENTE!!!! es exactamente lo que estaba buscando, gracias por tu tiempo y por compartirlo con nosotros, si en algo podemos ayudarte, solo avisanos, gracias!
Hola que tal… probe el comando reflections y funciona muy bien..
Gracias por el aporte y por compartir tus conocimientos…
Excelente, lo probé en fireworks mx (un poco antiguo) y funciono de maravillas. Muchas gracias.
Gracias!!! It works beautifully!!
Gracias!!!
que buena, gracias funcionando en Fireworks 8
Excelente, los diseños que he realizado quedan perfectos, sin duda alguna es la mejor opción que existe par realizar los refloejos de una forma sencilla y rápida.
Hasta ahora lo he probado en Fireworks CS4 en Windows XP, Vista y Seven, funciona perfecto. Para quienes usen Windows Vista/Seven, la carpeta donde se debe copiar el archivo es… C:\\Program Files\\Adobe\\Adobe Fireworks CS4\\Configuration\\Commands. Saludos.
Muchas gracias, el efecto funciona de lujo, excelente
BUEEEEEEENISIMO!!! eh! Muchas gracias, me ahorraras mucho tiempo!! Lo probe en Fireworks 8 y de MARAVILLA!!
gracias por kompartirlo;) ke estes bien, saludos!
Tremendo aporte, muchas gracias por compartir tus conocimientos…
(probado en FW CS4)
Eso!
Muy fuerte, funciona perfectamente, no tenia ni idea que se pudiesen programar estas cosas.
Gracias.