Expression Lab

ColourLovers.com, una comunidad muy buena cuyo propósito es que compartamos nuestra pasión sobre el color, paletas y patrones, ha agregado una opción de download para las herramientas de Microsoft Expression.

Microsoft Expression es una familia de herramientas para diseñadores y desarrolladores profesionales que les permite crear experiencias ricas con Windows Presentation Foundation (WPF) para aplicaciones de Windows y con Silverlight para crear experiencias interactivas ricas basadas en web que corren en cualquier plataforma.Ahora, ColourLovers te permite bajar los siguientes formatos de paleta de colores:

· Expression Design Swatch

· WPF Resource Dictionary

· Silverlight XAML Resources

A continuación describiré los pasos a seguir para poder empezar a utilizar las paletas de ColourLovers en tus proyectos WPF y Silverlight.

Usando las paletas de ColourLovers en Expression Design

1. Visita ColourLovers.com, entra a la sección “Palettes”, busca entre las paletas disponibles y elige la que te guste más.

2. Una vez que hayas encontrado una paleta que te guste, haz click en ella para abrir la página de detalles.

3. Estando en la página de detalles, selecciona el formato para Microsoft Expression que necesites. Lee la Parte II de este tutorial para aprender más acerca de los formatos disponibles. En este caso selecciona el botón “Design” para bajar la paleta compatible con Expression Design.

4. Cuando aparezca la ventaja de diálogo para la descarga, elige Guardar el archivo y dirígete al folder Swatches dentro del directorio donde tienes instalado Expression Design, que comúnmente es: c:\Program Files\Microsoft Expression\Design 2\en\Swatches\ y guarda el archivo. Nota: Es posible que la ruta a tu folder de Swatches sea algo diferente pero seguramente lo encontrarás.

5. La paleta de colores de ColourLovers es un XML que es interpretado por Expression Design.

6. Para agregar esta nueva paleta a Expression Design, sigue estos pasos. Es importante mencionar que en Expression Design las paletas son llamadas “ Color Swatches”.

7. Abre Expression Design y expande el panel Color Swatches. Selecciona Import Color Swatch Library.

8. Abre el folder Swatches y selecciona la paleta que acabas de bajar en ColourLovers y presiona Open/Abrir. Con esto, la nueva paleta de colores estará disponible dentro de Expression Design.

9. Para empezar a usar los colores que son parte de tu paleta, crea un nuevo objeto en Expression Design, podría ser un círculo, selecciónalo, expande el panel Color Swatch y selecciona alguno de los colores que se encuentran dentro de la paleta que acabas de crear para que sea aplicado a tu objeto.

10. Visita Microsoft.com/video para acceder a más videos relacionados a Expression Design.

Usando paletas de ColourLovers.com en proyectos WPF dentro de Expression Blend

Estos son los pasos a seguir para usar una paleta de ColourLovers en un projecto WPF dentro de Expression Blend (leer la siguiente parte para proyectos en Silverlight):

1. Visita ColourLovers.com, entra a la sección “Palettes”, busca entre las paletas disponibles y elige la que te guste más.

2. Una vez que hayas encontrado una paleta que te guste, haz click en ella para abrir la página de detalles.

3. Estando en la página de detalles, selecciona el formato para Microsoft Expression que necesites. Lee la Parte II de este tutorial para aprender más acerca de los formatos disponibles. En este caso selecciona el botón “WPF” para descargar la paleta de colores como un WPF Resource Dictionary, que viene en un archivo con extensión .xaml.

4. Cuando aparezca la ventaja de diálogo para la descarga, elige la opción de Guardar como y decide en dónde quieres almacenar el archivo (puede ser en cualquier carpeta).

5. Abre Expression Blend y crea un proyecto WPF nuevo.

6. En el panel Project, haz click con el botón derecho del mouse sobre “Project” y selecciona “Add Existing ítem”. Esto careará una copia del archivo en este folder de proyecto WPF. También podrías seleccionar la opción “Link to Existing ítem”, la cual simplemente vincularía tu projecto con ese archivo, el cual podría estar en cualquier folder sin tener que realizar una copia del mismo.

7. Habiendo seguido cualquiera de los dos pasos anteriores, selecciona el archivo .xaml, que contiene una librería de recursos (la paleta de colores) y presiona Open.8. La paleta de color está ahora disponible en Expression Blend. Para utilizarla dirígete al panel Resources y expande la librería de recursos / paleta de colores que acabas de agregar; ahí se te mostrarán los diferentes colores disponibles dentro de la paleta que bajaste de ColourLovers.com.

9. Para utilizar uno de los colores, selecciona alguna forma en tu documento– un círculo por ejemplo – y arrastra el recurso (color), que quieres aplicarle y suéltalo cuando el cursor se encuentre sobre la figura. Expression Blend te pedirá que selecciones la propiedad de ese objeto a la cual quieras vincular. En este caso seleccionamos “Fill” para que rellene el objeto con el color que arrastramos hacia el objeto, aunque podríamos haber seleccionado Stroke o alguna otra propiedad del mismo.

10. Toma en cuenta de que siempre puedes agregar nuevos colores a tu paleta o modificar los ya existents. Usar Librerías de Recursos (Resources Dictionary), les permite a ti y a tu equipo compartir una librería simple de colores para asegurar que todos estén usando las mismas especificaciones en uno o varios proyectos.

Utilizando las paletas de ColourLovers en proyectos Silverlight dentro de Expression Blend

Estos son los pasos a seguir para incorporar una paleta de ColourLovers en un proyecto Silverlight dentro de Expression Blend :

1. Visita ColourLovers.com, entra a la sección “Palettes”, busca entre las paletas disponibles y elige la que te guste más.

2. Una vez que hayas encontrado una paleta que te guste, haz click en ella para abrir la página de detalles.

3. Estando en la página de detalles, selecciona el formato para Microsoft Expression que necesites. En este caso selecciona el botón “XAML” para descargar un archivo de texto, que incluye una colección de recursos de brushes (colores). Este archivo tendrá una extensión .txt.

4. Cuando aparezca la ventaja de diálogo para la descarga, selecciona la opción de Guardar como y elige en dónde quieres almacenar el archivo (puede ser en cualquier carpeta).

5. Abre Expression Blend y crea un proyecto nuevo de Silverlight (al momento de escribir este artículo seleccionarías Silverlight 2, pero selecciona la última versión disponible de Silverlight cuando leas esto).

6. Fuera de Expression Blend, abre el archivo de texto que bajaste de ColourLovers. El archivo se abriría normalmente en Notepad o cualquier otro editor de texto.

7. Copia el texto, que viene el archivo y contiene la información de los colores y abre Expression Blend. En el panel Project, haz click con el botón derecho del mouse sobre App.xaml y selecciona “Open” (al haber seleccionado App.xaml en vez de otros archivos como podría ser Page.xaml, los colores estarán disponibles en toda la aplicación y no solamente una parte de la misma). Haz click en la pestaña XAML que se encuentra a un costado de tu documento para cambiar a la vista de código.

8. Ubica el tag “Application.Resources” y pega el texto que copiaste del archivo bajado de ColourLovers.com dentro de esa tag.

<Application.Resources>

<!– Resources scoped at the Application level should be defined here.–>

<Paste your color palette text here>

</Application.Resources>

El resultado sera algo parecido a esto:

<Application.Resources>

<SolidColorBrush x:Key=”Brush1″ Color=”#FF281930″ />

<SolidColorBrush x:Key=”Brush2″ Color=”#FF312F3D” />

<SolidColorBrush x:Key=”Brush3″ Color=”#FF195E55″ />

<SolidColorBrush x:Key=”Brush4″ Color=”#FFF7B00A” />

<SolidColorBrush x:Key=”Brush5″ Color=”#FFF37D2C” />

</Application.Resources>

9. Los colores que descargaste de Colourlovers ahora están listos para ser utilizados en tu proyecto Silverlight. Expande el Archivo App.xaml y verás que aparecerán los colores disponibles.

10. Selecciona uno de los colores/recursos y arrástralo sobre algún objeto – en este caso un círculo. Cuando liberas el color sobre el objeto, Expression Blend te pedirá seleccionar una propiedad del círculo a la cual quieras aplicarle el color. Por ejemplo, si seleccionas Fill, llenarás el objeto con el color que has elegido. Si seleccionas Stroke, harás que el borde del círculo tome el color que elegiste, etc.

11. Por supuesto, siempre puedes agregar o modificar los colores que se encuentran dentro de Resources. Eso sí, ten en cuenta que si cambias un color que está siendo utilizado por algún objeto, el color del objeto cambiará también.

A bajar colores!
Gracias

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!