pixelcreation.fr - amoureux de l'image

  • > Abonnez-vous à notre newsletter

Expression Design

La gamme Microsoft Expression

> La gamme Microsoft Expression  > Le langage XAML et le WPF  > Créer un player (1) : création de la base  > Créer un player (2) : utilisation des clones  > Créer un player (3) : exporter en XAML

La version 2 de la suite Expression Design de Microsoft ne devrait plus tarder (rentrée 2008?). Raison de plus pour se familiariser avec la version 1 : c'est ce que vous propose le livre Prendre en main Microsoft Expression Design de Marc-André Francart et Cyril Bourgeois, DA à l'agence i-breed. Avec l'autorisation de l'éditeur Dunod, nous vous en proposons ici quelques "bonnes feuilles", avec en particulier un tutoriel pour créer un player pour votre site web.

Couverture du livre Prendre en main Expression Design de Marc-André Francart et Cyril Bourgeois, paru chez Dunod

Microsoft propose déjà dans son catalogue des outils orientés graphisme ou destinés à la création de sites web. Avec l’arrivé de Vista et plus précisément d’une couche nommée WPF (Windows Presentation Foundation) dans le framework .NET, Microsoft a décidé de concevoir une suite réellement destinée aux professionnels du graphisme dont l’objectif est de concevoir des applications riches et interactives. Ces produits doivent favoriser la collaboration entre graphistes et développeurs.


Microsoft Expression Studio est composé de quatre produits distincts :
Expression Design qui est un éditeur de dessin vectoriel. C’est l’outil dédié à l’expression de sa créativité visuelle. Il est destiné aux directeurs artistiques et aux graphistes ayant besoin de concevoir des visuels statiques ou vectoriels. Dans le cas d’un dessin vectoriel, il est alors possible de générer directement des dessins compatibles avec WPF.
Expression Web qui est un éditeur HTML basé sur une utilisation avancée des CSS. C’est l’outil dédié à la création de sites web statiques et dynamiques. Très proche des standards HTML, l’outil autorise la création de sites professionnels et leur maintenance. Bien qu’étant un outil de dessin vectoriel, Expression Design est un compagnon idéal pour la conception des logos et visuels utilisés dans une page HTML.
Expression Blend : c’est l’outil pensé pour la conception d’applications riches et interactives reposant sur WPF. De par sa nature, l’outil oscille entre deux frontières : il peut aussi bien être utilisé par un graphiste pour concevoir un visuel pour WPF que par un développeur qui souhaite créer une application. Cette ambiguïté nous amène souvent à définir un nouveau rôle pour cet outil : l’intégrateur WPF. Une ressource à la fois graphique et technique.
Expression Media : c’est une application de gestion de documents numériques. Il s’agit de la nouvelle version de iView acquise par Microsoft. Cet outil supporte plus d’une centaine de formats de fichiers allant des formats images, vidéos en passant par les documents Word. Son utilisation première est de cataloguer ces contenus. Mais il offre aussi la possibilité d’appliquer des traitements en lots sur ces contenus. Les photographes l’utilisent pour normaliser les photos d’une prise de vue avant son archivage.
Expression Media dispose également d’un outil annexe : Expression Media Encoder. Il s’agit d’un nouvel outil qui permet d’encoder des fichiers vidéo en format WMV et VC-1 qui sont supportés par Silverlight (le plug-in riche média cross navigateur de Microsoft). D’ailleurs, ce produit se distingue de Windows Media Encoder par le fait de pouvoir directement générer des applications vidéo Silverlight disposant de la notion de chapitrage et de sous-titrage.
Microsoft a mis en place un site destiné aux graphistes :
www.microsoft.com/design/
Les versions d’évaluation des produits de la gamme Expression sont disponibles en téléchargement :
http://www.microsoft.com/france/expression/expression-studio/free-trial.mspx

 

Expression Design dans la gamme Microsoft Expression
L’outil Expression Design est un outil de dessin vectoriel. Il peut être utilisé dans toutes les phases de design et ce à n’importe quel niveau du processus de création : de la conception graphique pure à la finalisation. Il est particulièrement adapté pour la création de graphismes devant être redimensionnables et réutilisables sous plusieurs configurations et ce sans déperdition de qualité : interface, logotype, illustration, icône, etc.
L’outil offre de multiples possibilités de création et peut répondre à toutes les exigences graphiques. Sa prise en main est très facile pour le designer habitué à ce type d’outil : Expression Design propose les fonctionnalités classiques ainsi que de réelles innovations faciles à appréhender. Le « débutant », quant à lui, pourra rapidement tirer partie des multiples fonctionnalités et possibilités du logiciel.

NDLR : pour la gamme Expression Design, voir aussi notre dossier de présentation dans cette même rubrique

Le format vectoriel et ses avantages
Expression Design est un éditeur de dessin vectoriel. Il génère des objets, des dessins, des tracés composés exclusivement de courbes dites de Bézier.
« Le dessin vectoriel est une représentation composée d’objets géométriques fermés (lignes, points, polygones, courbes…) ayant des attributs de forme, de position, et de couleur permettant de produire une image. Il se différencie des images matricielles (bitmap) constituées de pixels. » Définition extraite du site Wikipedia.
Par nature, un dessin vectoriel se construit de façon mathématique : l’utilisateur indique un point de départ et un point d’arrivée. L’application se charge de dessiner un vecteur entre ces deux points. L’intérêt est de pouvoir redimensionner l’image à volonté sans aucune perte d’informations, ni de qualité (couleurs, formes, typographies…). L’inconvénient est que pour atteindre une qualité photo réaliste, il faut pouvoir créer et additionner un très grand nombre de formes. De fait, il faut disposer d’une puissance de calcul importante (et donc d’une mémoire informatique adaptée).
Le principe de base du dessin vectoriel consiste à décrire des formes géométriques simples (arcs de cercle ou d’ellipse, segments de droite, courbes de Bézier…), auxquelles on peut appliquer différentes transformations : rotation, écrasement, mise à l’échelle… À celles-ci s’ajoutent des effets spéciaux permettant une grande souplesse (extrusion, effet miroir, dégradé de formes, interpolation…) ainsi qu’un certain nombre d’attributs (couleur de fond, de contour et dégradé de couleurs…). Pour « bien » utiliser le dessin vectoriel, il ne faut donc pas hésiter à ramener chaque composant de ses créations à des formes géométriques simples que l’on peut ensuite « complexifier » en les démultipliant…
L’avantage d’une représentation vectorielle est la précision des tracés. Avec un peu d’expérience, il est possible de modifier chaque ligne très rapidement en agissant très simplement sur un de ses points de contrôle (une coordonnée du vecteur). En effet, il suffit de deux points pour faire une droite, de trois pour faire un triangle, de quatre pour faire un cercle, un carré ou un rectangle. De plus, à chaque changement de dimension de l’image (zoom), le tracé reste précis car l’ordinateur recalcule les coordonnées en fonction de l’échelle demandée (alors que pour une représentation bitmap, le zoom augmente en proportion la taille des pixels).

> La gamme Microsoft Expression  > Le langage XAML et le WPF  > Créer un player (1) : création de la base  > Créer un player (2) : utilisation des clones  > Créer un player (3) : exporter en XAML