Orange Commands v1.4.0

Anuncio rápido: ya tienes disponible la nueva y mejorada versión de Orange Commands.

Novedades de esta versión respecto a la anterior (v1.3.0):

  • Fallos corregidos:
    • El comando ‘Set Size’ ya no peta cuando le das a ‘Esc’ para cerrarlo sin cambiar el tamaño de un objeto.
    • Corregido un bug con los comandos de redimensionado que hacía que Fireworks se volviera loco después de redimensionar un grupo de objetos.
  • Nuevos comandos
    • Export » All Pages as PNG 24, que exporta todas las páginas del documento en PNG 24
    • Set Page Name, para cambiar los nombres de las páginas sin usar la interfaz demencial de Fireworks
    • Dos comandos de texto: Join y Join With… para fusionar cajas de texto
    • Dos comandos de páginas: Vertical Trim y Vertical Trim All Pages, que recortan las páginas verticalmente al tamaño de los elementos que haya en la página.

Postdata: estoy en proceso de actualizar el sistema que genera la documentación, y de momento la versión en castellano está un poco por detrás de la versión en inglés. Si quieres ver la documentación más reciente, la tienes disponible (en inglés) en http://bit.ly/PcTSMV

Presentando OrangeCommands

Orange Commands es una colección de comandos para Fireworks CS3 y CS4 que sirven, esencialmente, para hacer más fácil la vida del diseñador web.

Si eres lector habitual de este blog, ya sabrás cual es, en mi opinión, uno de los pilares de la productividad y la innovación.

En la línea habitual de “haz más haciendo menos”, Orange Commands surge de la imperiosa necesidad de perder menos tiempo haciendo cosas aburridas en Fireworks, para poder dedicarlo a menesteres mucho más interesantes.

La segunda motivación para Orange Commands es que me gusta trabajar a pantalla completa sin ninguna paleta abierta. ¿Las razones?:

  • Porque uno es así de raro.
  • Porque la interfaz de Fireworks es tan lenta que cuando ocultas las paletas va mucho más rápido.
  • Porque la interfaz de Fireworks es fea.

Vale, suena bien… ¿qué hace Orange Commands exactamente?

Pues empezó haciendo retículas (y llamándose Reticulator), y a día de hoy (que vamos por la versión 1.3) hace todas estas cosas (y alguna más, abajo tienes la lista completa):

  • Redimensionar objetos con el teclado. El por qué Adobe no ha puesto esto de serie en Fireworks continúa siendo un misterio…

    Si piensas que no necesitas redimensionar objetos con el teclado (que es lo mismo que pensé yo cuando Keko me pidió que le programara estos comandos) es porque todavía no lo has hecho. Si sólo me tuviera que quedar con una cosa de Orange Commands, sería esto…

  • Cambiar la transparencia de objetos con el teclado, que es algo que Photoshop tiene (mas o menos) pero Fireworks no tenía. Otra cosa que piensas que no vas a necesitar hasta que un día te sorprendes no pudiendo vivir sin ella.

  • Cambiar el color de relleno, de línea y de fondo de documento con el teclado, que es algo esencial si no quieres tener abiertas mil paletas (¿he dicho ya que Fireworks funciona mucho más rápido con las paletas ocultas?)

  • Exportar la página actual como un PNG a 24 bits con un sólo atajo de teclado, sin abrir la ventana de previsualización (¿adivinas por qué? porque es lenta de cojones) y sin tener que cambiar opciones en ninguna parte. Con este comando puedes tardar entre 1 y 5 segundos en mandarle a alguien por email un pantallazo de lo que estés haciendo :)

  • Reticulator, nuestro viejo conocido, ahora tiene un atajo de teclado para la retícula más habitual (la 960-16-9).

  • Rodear de guías una selección con el teclado. Selecciona lo-que-sea, dale a key_control.pngPlusShiftPlusW, y tendrás cuatro guías enmarcando tu selección. Esto debo usarlo unas 400 veces al día, y la inspiración (y el atajo de teclado :) vienen directamente de TextMate.

  • Posicionar elementos con el teclado. ¿He dicho que Fireworks es lento?

  • Y más cosillas…

¡Cáspita!, ¡Zapateta!, ¡Repámpanos!… ¡Lo quiero!

Estás de suerte, porque Orange Commands es gratis total. No sólo es Software Por La Patilla™, sino que es código abierto (a modo de homenaje a todas esas almas caritativas que han sembrado el mundo de software libre molón del que nos aprovechamos todos los días y que incluso nos da de comer)

Si eres de esa gente rara que quiere ver el código fuente, lo tienes disponible en http://github.com/bomberstudios/fireworks (por si quieres asegurarte de que los comandos no ejecutan nada raro, ni se beben tu cerveza, ni te levantan a la novia por la espalda sin avisar)

Si eres gente normal, tienes los comandos para descargar, y toda su documentación, en la página de Orange Commands

¡Feliz semana!

Atajos de teclado en Fireworks

Ya he comentado en alguna ocasión que en la Gran Corporación somos fans de Fireworks. Tengo pendiente un post más detallado explicando por qué, pero de momento aquí va un pequeño adelanto : )

Independientemente del software que utilices, ya sabrás que los atajos de teclado son el mejor aliado de la productividad y la vagancia.

Lo que a lo mejor no sabes es que los atajos de teclado de Fireworks, además de ser personalizables de una forma bastante sencilla, pueden asignarse a tus propios comandos.

Para personalizar los atajos de teclado, abre el menú Fireworks » Keyboard Shortcuts…

Panel de asignación de atajos de teclado de Fireworks

Puedes seleccionar varios grupos de atajos por defecto (Illustrator, Freehand, Photoshop…) para que no tengas que reaprender lo que ya sabes, y puedes guardar tu propio set personalizado (ideal para transportarlo de un equipo a otro si usas varios ordenadores)

Si te fijas en el panel verás que aparece el menú “Commands”, que es donde se encuentran cosas como Reticulator y otros comandos personalizados:

Panel de atajos con teclas personalizadas

Si seleccionas un item de menú podrás asignarle la combinación de teclas que más rabia te de, y lo mejor es que el atajo funcionará siempre (ahora veremos por qué esto es importante)

Un ejemplo práctico (al menos para mi : )

Una cosa que siempre me ha molestado de Fireworks (y de Illustrator, y de Freehand, y de…) es que no es fácil cambiar el color de una selección sin hacer malabarismos con el ratón. Tienes que moverlo a donde tengas la paleta de colores, seleccionar el color, y luego volver a donde estabas. Si además tienes las paletas ocultas la operación es un coñazo. Y en el caso de Fireworks, si tienes un texto seleccionado el 90% de las veces te lo acabarás cargando al darle a TAB para mostrar las paletas.

Solución: un comando de Fireworks, claro : )

Guarda el fichero Show Color Picker.jsf en tu carpeta de comandos (en Mac es ~/Library/Application Support/Adobe/Fireworks CS3/Commands/) y asígnale un atajo de teclado (yo he usado Ctrl + Shift + C). A partir de ahora, cuando quieras cambiar el color de cualquier cosa sólo tienes que pulsar el atajo de teclas, y un bello selector de color aparecerá en la posición donde tengas el ratón:

Show Color Picker en acción

Aún tengo que arreglar un par de bugs, a saber:

  • si el objeto seleccionado no tiene relleno, inexplicablemente no funciona con el color #FFFFFF (con todos los demás si). Esto parece un bug de Fireworks, pero tengo que confirmarlo. Bug corregido! Es un fallo de Fireworks, pero he encontrado un bonito “workaround” :P
  • si usas el comando con una selección de texto se colorea toda la caja de texto y no sólo la selección. Más que un bug es un “así funciona Fireworks”, pero ya tengo más o menos claro cómo resolverlo, sólo es cuestión de tiempo.

Espero que os sea útil!

Reticulator v1.6.9

Acabo de subir una actualización de Reticulator (versión 1.6.9) con las siguientes novedades:

  • el comando “Reticulator 960-16-9″ pasa a llamarse “Reticulator 951-16-9″ (por consistencia con lo que hace en realidad : )
  • Añadidos un puñadito de comandos para trabajar con guías:
    • Around Selection: Crea 4 guías alrededor del objeto que tengas seleccionado.
    • Clear All: Elimina todas las guías de la página actual.
    • Clear Horizontal/Vertical: Elimina todas las guías horizontales/verticales de la página actual.
    • Copy from Page: Copia las guías de cualquier página a la página actual (tremendamente útil si eres usuario de Windows, donde el comando “Duplicar Página” no duplica las guías…)
    • Copy to Page: Copia las guías de la página actual a cualquier página.

Además de esto hay una serie de modificaciones no visibles (i.e: de código) que me permitirán ir desarrollando más comandos útiles (o no :) sin demasiado esfuerzo.

Pues eso… dirijan sus navegadores a la página de Reticulator y descarguen!

Nueva versión de Reticulator

A petición de David Alonso (nuestro nuevo fichaje :) he añadido a Reticulator la posibilidad de crear retículas horizontales.

Además, he cambiado el fichero de instalación para que sea compatible con Fireworks MX. No he podido probarlo en esa versión, así que te agradecería que pusieras en los comentarios si funciona o no :)

Descárguenlo en la sección “Reticulator” de Sofá Naranja (que, por cierto, estrena URL): http://sofanaranja.com/reticulator/

Update: Acabo de subir la versión 1.6.1, que corrige un bug que lo hacía incompatible con Fireworks MX 2004.

Reflection, un comando para Fireworks

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:

Reflection, baby

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

Reflection Code Reflection

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” ;)

Reticulator, un creador de retículas para Fireworks

Una de las herramientas esenciales en el diseño de webs (aparte de un café decente y cantidades industriales de música) es la retícula o grid.

Si trabajas asiduamente con retículas y Fireworks, habrás querido asesinar más de una vez al equipo de programadores que decidió que las guías en Fireworks no podían copiarse.

Si eres del Club del Vago™, quizá tengas plantillas para tus retículas habituales.

Pero si quieres entrar en el Club de los Realmente Vagos™, no hay nada como programar tus propios comandos.

Reticulator es un comando para Fireworks 8 o superior (Windows y Mac) que te permitirá crear guías siguiendo una retícula en cuestión de segundos. Desde que empecé a usarlo me ha ahorrado montañas de trabajo, y hoy te lo ofrezco a ti, diseñador estresado, para que dediques tu escaso tiempo a diseñar en vez de a mover guías.

Cómo funciona Reticulator

La cosa es fácil:

  • Lo instalas con Adobe Extension Manager
  • Creas un documento nuevo
  • Seleccionas Commands » Grids » Reticulator
  • Rellenas los datos que te pide el comando (a saber: ancho de la retícula, número de columnas y espacio entre columnas)
  • Te maravillas de la tecnología moderna

Bola extra: si tienes un objeto seleccionado, la retícula se creará a partir de la posición X de dicho objeto.

Bola extra 2: si (como yo) casi siempre usas una retícula de 960 pixels, 16 columnas y 9 pixels entre columna, tienes un comando que genera esa retícula sin que tengas que introducir los datos.

Reticulator es gratis total, pero se admiten invitaciones a cerveza si acabas usándolo para algo productivo.

Sin más dilación, aquí lo tienes:

Reticulator 1.5.4