31 August 2008

De Sofá Naranja.

Ho hem d'admetre. L'efecte “reflex al gel/aigua/vidre” és el “bevel & emboss” d'aquesta dècada.

Si alguna vegada t'ha tocat crear-ne un, sabràs que és una mica rotllo.Si a més has d'afegir un reflex a 50 imàtges, hauràs estat al llindar del suïcidi.

Sobre tot si després de la pallissa algú et diu coses com:

• “Hmm… perquè els reflexes no tenen tots la mateixa alçada?”
• “Saps què? Crec que s'haurien de fer els reflexes una mica més petits”
• “Mira… millor canviem-ho tot per un ‘drop shadow’, que torna a estar de moda”

(situacions totalment hipotètiques)

La questió és que, si ets un mandrós professional, aquesta és una d'aquelles vegades a las que penses… “hmmm… automatizació…”

Així que, amb l'ajuda de la terrible documentació de Fireworks CS3, em vaig posar a programar un comandament per fer reflexes.

El resultado és que, amb un sól click, tens un bonic efecte como aquest:

Maco, oi? :)

Per aconseguir aquest glamourós comandament, guarda el següent codi a un fitxer Reflection.jsf a la carpeta ~/Library/Application Support/Adobe/Fireworks CS3/Commands/ (o el seu equivalent a Windows que hauria de ser quelcom com C:/Documents and Settings/usuario/Application Data/Adobe/Fireworks CS3/Commands/), i després sel·lecciona un objete a Fireworks i al menú “Commands” escull l'opció “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);

{multithumb thumb_width=300 thumb_height=200 border_size=0px border_color=#000000 }

Per a fer-lo servir, sel·lecciona un objecte i tria l'opció “Reflection” al menú “Commands”.

Et demanarà que escriguis l'alçada del reflex en pixels (per defecte, 50)

I ja està! :D

Si trobes alguna errada o se t'acudeix alguna millora, deixa un comentari…

I recorda el lema dels "vagos" professionals: “el més important no és treballar més, sinó treballar millor” ;)