Expression Lab

Hola a todos, espero que hayan pasado las fiestas deluxe y espero que les vaya muuuy bien en este 2009.
La verdad es que no tenía planeado escribir otro tutorial tan pronto, pero quise aprovechar una ‘chambita’ que tengo que hacer hoy para mostrarles algunas de las cosas que más me gustan de Microsoft Expression Design y que hacen mucho más fácil mi trabajo en web (como dato anecdótico he trabajado en diseño web desde 1998 aprox.).

La siguiente imagen es un diseño que realicé en Expression Design para unos sitios que Microsoft Argentina está dando a estudiantes de varias Universidades y que bueno, creo que sirve como muestra de lo que se puede realizar en Design, no? :) ( a ver si pronto escribo un paso a paso en donde hagamos una landing page o algo por el estilo, les interesaría?).

Lo que realizaremos en este tutorial es la creación de “Slices” basadas en este diseño para después armar el HTML en Microsoft Expression Web. Los requerimientos son los siguientes:
- Microsoft Expression Design (click en el link para descargarlo)
- Microsoft Expression Web (esta parte es opcional, solo aplicable si quieres hacer la integración del HTML, lo cual no trataré en este tutorial).

Para empezar abro el diseño que realicé en Expression Design:

Tal como se puede ver en esta imagen, el documento no está rasterizado y cuenta con todas las capas, así que lo que haremos es exportar cada una de ellas para que el programador las integre posteriormente en HTML.

En este punto es importante mencionar que existen dos formas para exportar las capas de un documento en Design:
- Creando slices y
- Exportando los elementos que tengamos seleccionados en nuestro documento.
En este tutorial cubriré estas dos alternativas y queda en ti utilizar la que consideres mejor (aunque creo que el uso conjunto de ambas es buenísimo).

1.- Como primer paso, empezaré por exportar lo que será el fondo de la Landing Page: Para esto, es importante notar que la fotografía de los dos chicos, el degradado en blanco y las formas azules que se encuentran en la parte inferior son capas diferentes y por lo tanto podríamos pensar que tenemos que exportar cada una por separado. Pues NO, ahora sí que no contábamos con la astucia de Expression Design:

Manteniendo presionado Shift, selecciono las siguientes capas del panel “Layers”:
- Curvas azules
- Degradado blanco
- Máscara fotografía y
- Fondo blanco
que son las diferentes imágenes que componen el fondo de la página que diseñe.
2.- Una vez seleccionadas las 4 capas voy al menú File > Export

La siguiente ventana me presenta las capas que he elegido del panel Layers así como diferentes opciones:
- Whole document (por si quiero exportar todo el documento como una sola imagen)
- Selected objects (la opción que estamos utilizando ahora, seleccionando solo algunas capas)
- Slices (se encuentra desactivado ahora pues no hemos creado ninguna slice).
- Export Properties (donde elegiremos el formato de nuestras imágenes, configuración de color, tamaño, etc.

3.- Debido a que en el paso anterior hemos seleccionado las 4 capas, Expression Design selecciona “Selected Objects” automáticamente y también elige PNG como el formato para la imagen, pero por motivos de peso y tiempo de carga, cambio el formato a JPEG ya que el PNG termina pesando 490kb y con JPEG podemos bajar hasta los 65kb utilizando 80% de calidad.

Una vez que he definido el formato y calidad de la imagen, escribo el nombre que tendrá el archivo en el campo “File name”, debajo del cual elijo la carpeta a la que se exportará el archivo con el que estoy trabajando.

Lo que hago a continuación es presionar el botón Export All y regreso a la ventana principal de Expression Design.

4.- Ahora continúo exportando las imágenes restantes, con las cuales usaré Slices para enseñar lo fácil que es trabajar con ellas:

Selecciono primero el logotipo que se encuentra en la parte superior izquierda de mi composición y presiono el botón derecho del mouse sobre él para desplegar el menú de opciones, en el que selecciono la segunda opción: Create Slice from Selection, que crea una Slice del tamaño del elemento (en este caso el logotipo).

Una vez creada la Slice y mientras está seleccionada, se nos presenta un Menú del lado derecho, dentro de Propiedades, que se titula “Edit Slice” y que es donde podemos definir las propiedades que tendrá la imagen a la cual le hemos creado la Slice, tales como nombre de la imagen, formato, propiedades de color, transparencia, ancho y alto (de la Slice, no de la imagen).

Las Slices y este menú en particular (Edit Slice) son muy útiles cuando trabajamos con varios tipos de imagen en mismo documento, ya que podemos definir sus propiedades individualmente y exportar todo en un solo paso sin perder las propiedades individuales que hemos definido para cada uno de los elementos que forman parte de la composición (ya que los formatos dependerán de la imagen, por ejemplo una fotografía sería JPEG, un botón GIF y una imagen con transparencia PNG).

Una vez que he definido las propiedades de la Slice para el logotipo, puedo exportar la imagen haciendo click con el botón derecho sobre la imagen y seleccionando la opción Export o bien, yendo al menú File > Export, tal como se muestra en las siguientes imágenes:

El cuadro de diálogo será similar al del paso 3 pero con la diferencia de que el nombre del archivo aparece en el panel del lado izquierdo y en la parte inferior izquierda se nos presenta la opción de elegir dónde será contenida la imagen: XAML Silverlight Canvas, XAML WPF Resource Dictionary, XAML WPF Canvas o HTML & Images, pero en este momento no profundizaremos en esta parte.

Ya que exporté la imagen con el logotipo, procederé a exportar las tres imágenes restantes: “Powered by Microsoft Silverlight” y los dos logotipos que se encuentran en la parte inferior de la composición.

5.- Como los dos logotipos de la parte inferior se encuentran sobre la capa “Curvas azules” necesitaré que sus fondos sean transparentes, ya que de otra manera tendrían una plasta de color blanco alrededor que haría ver todo HORRIBLE.

Por lo tanto, selecciono primero el logotipo de la derecha y repito el paso número 4, creando una Slice del mismo tamaño del logotipo y defino sus propiedades en el panel Edit Slice. En él defino PNG como el formato de la imagen y me aseguro que “Transparency” esté habilitado.

Ya que he definido las propiedades de la imagen, selecciono el otro logotipo, el que se encuentra en la parte inferior izquierda de la composición, y creo una Slice basada en esa capa tal como lo realicé en el paso 4 (sí, ya sé, es molesto repetir un paso tantas veces pero algunas personas a veces……….)

Teniendo la nueva Slice seleccionada, defino sus propiedades en el panel Edit Slice:

Ya definidas las propiedades de la imagen, procedo a exportar la imagen, haciendo click con el botón derecho sobre ella y eligiendo la opción Exportar, lo cual nos lleva a la ventana Export y CHISPAS! En la ventana de preview no solo se nos presenta la slice que hemos creado ahora, si no también la del logotipo anterior, pues Expression Design nos permite seleccionar qué Slice (s) queremos exportar sin tener que rompernos la cabeza haciendo Zoom de 30000% para ‘atinarle’ a las Slices que queremos exportar tal como sucede con algunos software que seguro conoces (especialmente cuando se trabaja con imágenes de tamaños reducidos).

Pero bueno, siguiendo con nuestro proceso, procedo a exportar la imagen (que por supuesto, viene seleccionada por defecto), y para procesar solo la que tengo seleccionada, en el siguiente botón, presiono la flechita que se encuentra en su costado derecho y selecciono la opción “ Export Selected Slice(S), ya que de otra manera se exportarían todas las que haya creado en mi composición. Hecho esto, ya tengo la lista para ser integrada en el HTML.

Por cierto, al final de este tutorial presento un Tip sobre cómo manejar PNG’s transparentes en versiones anteriores de Internet Explorer que no reconocen las transparencias y ‘tiran’ un fondo gris en vez de dejar los fondos transparentes.

6.- Como último paso, creo una Slice para la imagen de “Powered by Microsoft Siverlight” que se encuentra en la parte superior derecha.

La diferencia en este caso es que utilizaré propiedades diferentes en el panel Edit Slice, ya que esta imagen se encuentra sobre un fondo común, de color blanco y por lo tanto puede ser un GIF, con tal de evitar un peso excesivo de la imagen (en verdad la diferencia de peso entre este GIF y la misma imagen en PNG podría ser de 2kb, pero bueno, siempre, mientras más se pueda optimizar, mejor).

Defino el nombre que tendrá mi imagen, powered_by_silverlight.gif y defino las propiedades de la imagen (el GIF podría ser transparente pero en este caso no lo considero necesario). Una vez que terminé con esto, hago click con el botón derecho sobre la imagen de Silverlight y seleccióno Export.

En la ventana Export se me presentan las Slices que existen en mi documento y la de Silverlight, que es donde estaba trabajando, es la que está seleccionada por defecto.

Selecciono la opción Export Selected Slice(s):

Y finalmente ya tengo todas las imágenes de mi diseño para Landing Page exportadas y listas para ser integradas en HTML o por qué no, en Silverlight, usando Expression Blend.

Espero que este tutorial te sea útil y que la próxima vez que necesites preparar archivos de diseño para web, no pensarás dos veces cuál es la manera más práctica y sencilla de hacerlo.

Saludos!

Tip: Seguramente tú cuentas con las últimas versiones de Internet Explorer para navegar por internet y los sitios que hacen se ven espectaculares… pero siempre hay que tener en mente que un gran número de personas sigue usando la versión 6 o anteriores, en las cuales el soporte para PNG’s con trasparencia no es el mejor. Para solucionar esto, te sugiero utilizar la siguiente solución:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=elNombreDeTuImagen.png’, sizingMethod=’scale’);

la cual permite que los PNG’s presenten sus trasparencias correctamente sin aquellos fondos grises que terminan destruyendo un buen trabajo de diseño. (Te recomiendo visitar este link )

Feliz 2009!