Expression Design – Great vectors, annoying layers, terrible exports and more

I don’t know if my way is the right way but when I design sites I always start with the design itself. In the past I’ve used a combination of Adobe Photoshop and Macromedia (now Adobe) Fireworks to do this but Expression Design seemed to be a good combination of both so I decided to go all out Expression on this one. Here are my experiences:

GREAT VECTORS AND OK EFFECTS
Expression Design is a vector based program and is both intuitive and easy to use in this respect. For those who have fought with vectors in Illustrator (or even worse Photoshop) Expression Design’s way of handling those spline lines is vastly supperior. You have complete control over all elements of the vectors, all the regular tools and it’s easy to change colours, storkes, and gradients. One of the features I found most useful was the gradient transform panel that lets you change just about everything: Center point, gradient size, colour, angle etc etc. It also imports vectors from eps files with ease but not AI or pdf so yo uneed to convert all your stuff to make it work. I guess that makes sense.

Once the vectors have been built and you are satisfied you can apply a range of effects to them. Drop shadow, shines, blurs, fills – the standard Photoshop stuff. The effects library is not as extensive as one would hope but it has most of the stuff you need. When the effects are applied they are non-destructive and can be toggled on and off at will or piled on top of each other. Once the effects are applied the vector graphic turns into a raster graphic – but only for as long as the effect is on. you can toggle it off, change the vector and then toggle it back on again and see the effect change accordingly.

One thing I found very annoying about the effects was that they can only be applied to pre-programmed vectors. They work with standard shapes (ovals, squares, rectangles with and without rounded corners etc) but if you make a custom shape or even alter one of the standard shape vectors to say a spiral the effects panel simply disappears and you can no longer apply anything to the layer. The only way to work around this is to rasterize the vector and then apply the effect which defeats the purpose of the vector in the first place. This lack of functionality will undoubtedly cause a few headaches, especially because the set of “standard” vectors is very limited.

I was wrong on this one. My bad. Check this post for a full explanation.

LAYERS STILL HAVE A WAYS TO GO
I think layers have become standard in almost if not all major graphics programs so it’s no big surprise that Expression Design also incorporates layers. The layers in Design are much like those in Illustrator: Each layer is a parent to several objects or items that you can order within the layer or group into one object. But here the ends the similarities. While you can move objects around within the layer or move them to a different layer you can’t toggle their properties within the layer. For instance; the hide/show layer option is only available for the entire layer with all it’s underlying objects but not each individual object so you can’t just turn off one. You also can’t chose one object from the layers pallet – you can only chose the layer itself. To pick one object you must first chose the layer and then click the object within the actual design itself. There is also no lock/unlock all button which means there is no easy way of making all the elements editable or not – you have to click the pad lock on each layer individually.

The fact that you can’t select objects in the layer pallet also causes a lot of mistakes for people used to using Adobe products: I often delete individual objects under my layers from the pallet, but if you try to do this in Expression Design you end up deleting the entire layer with all it’s objects. The only way to delete individual objects is to select them on the stage and delete them from there.

All in all the layers need a lot more work before they reach their potential.

TERRIBLE EXPORTS
Once you finish your design it’s time to export. In Expression Design you can chose between a variety of different options but those people will use the most are undoubtedly XAML (the proprietory Expression language that interconnects seamlessly with Expression Blend), PNG, GIF and JPG. Seeing as I was designing a website I wanted JPG and gif files. Expression Design gives you a variety of options when exporting of which the crop marks feature really stood out. When exporting you can set crop marks and the program will only export what is within them. This makes it incredibly easy to export things like buttons because all you have to do is hide the layers you don’t want, set the crop marks and export to get just the button state you want and nothing else without messing up your design.

The problem is that even at it’s highest quality setting the JPGs look like crap. Considering they start off as smooth vector graphics the end result is downright appalling. When I exported my first JPG with a quality setting of 8 (which is what I use when exporting from Photoshop) I was stunned by the rastering on rounded corners and artifacts in the drop shadows. Even solid colours were littered with artifacts making the final export useless. I assumed this was because the 8 setting was lower quality than I was used to so I swithced to the highest resolution possible (12+) and tried again only to get a marginally better result. After many more experiments I realized that no matter what you do your exported JPGs will look terrible. The same can be said for GIF files. In the end all my exports ended up being PNG files which are acceptable although they still have ugly rounded corners. At least the PNG’s retain the original colour without adding ghastly artifacts in the process.

Exports to XAML are not surprisingly perfect but the compression of “normal” formats like JPG and GIF is so bad I can’t use the end result. It’s so bad I wonder if there is an actual programming error somewhere that’s causing it because a JPG from Photoshop exported at 3 is still better than one from Expression Design exported at 12.

OTHER IDIOSYNCRASIES
You encounter idiosyncrasies and weird issues right off the bat when opening Expression Design. One example is that the standard resolution of the artboard is 96pixels/inch. Anyone working with web or television knows that the resolution of all screens is 72pixels/inch so if you build something in 96 you will end up with one of two things: Either the end result is squished down making it smaller on the screen than what was intended or the browser will perform some on-the-spot compression ruining the graphic completely. I’m assuming this is done because Blend uses 96p/i as a standard (just wild guesswork on my end – I haven’t actually checked this) but it makes absolutely no sense from a design perspective.

Even more bizarre: I often use the PrintScreen /paste trick when starting out on a new design to get the right margin proportions in my layouts. For those who don’t know what I’m talking about try for yourself: Push the PrintScrn button on your keyboard, open your favourite graphics program, open a new document and press Ctrl+v (paste). You now have a picture of your screen you can edit. If you do this in Expression Design something unexplainable happens: The pasted image is somehow crushed – smaller than the original. I don’t even understand how this is done because when you zoom in to about 133% the resolution is intact but if you scale the pasted image up by the same degree it is lost. I haven’t yet tried to paste in other graphic elements but I am assuming the same thing would happen. This glitch (it has to be a glitch, there is no way this is intentional from Microsoft unless they’ve gone batshit insane) has to be fixed immediately because it causes endless problems and quite frankly makes me not want to use their program.

I’ll upload samples and illustrations in the near future so check back often.

7 thoughts on “Expression Design – Great vectors, annoying layers, terrible exports and more

  1. Hi Morten,

    Great to hear you are playing with Expression Design. I can’t wait to see the samples and illustrations you’ve done using the tools.

    Recognizing this is the version 1 of the project, we are here to gather feedback, so I really appreciate your comments. I’ve sent your comments to the product team for them to take a close look. Also feel free to post your problems on http://www.microsoft.com/communities/newsgroups/en-us/default.aspx?dg=microsoft.public.expression.graphicdesigner&lang=en&cr=US

    Here are some quick responses from my experience:
    1. applying effect to customized shapes: I tried to alter the path of a rectangle and then apply blur effect. It worked for me.
    2. you can choose an individual object from the layer pallette by expending the layer and then clike on the object. However, you are right that users can only hide or show the entire layer.

    Qixing

  2. Hi Qixing

    I wrote this post on the SkyTrain yesterday and I didn’t have my computer in front of me (thus the severe lack of screen shots and examples). The effects to customized shapes problem might have been misconstrued – I’m going to test it again today and find out what I did that caused the problem (there really is a problem you see, I just don’t remember exactly what I did to cause it). I’ll follow up on it shortly.

    mor10

  3. Hi Morten,

    Love the thoughts…happy to see you taking the time to dig into a new product.

    Re: Terrible exports: I’m getting identical results for quality 8 and quality 12 in Design vs. Photoshop. Would you be interested in sending your files my way and I can have the team take a look? My email is dacook [at] Microsoft [dot] com.

    Re: Seeing the image at actual pixel size: This needs to be fixed. A work around is that you can click on the zoom combo in the bottom left corner of the screen and set the zoom to ‘actual pixels’.

    Re: 72 dpi vs 96 ppi: I find that just working in pixels and ignoring ppi is the best bet for creating bitmap artwork that is intended for the web. For a more indepth discussion of the mess that is resolution, there are a couple of fun essays:
    http://hsivonen.iki.fi/units/
    http://www.webdevelopersjournal.com/columns/ajs_ppi.html

    Blend and WPF use a unique resolution independent ‘pixel’ unit that is defined at 96 ppi. To make conversion between the two apps easier, Design also uses 96 ppi as its default resolution.

    Re: Locking: A couple useful tricks on locking objects
    – As Qixing mentioned, you can expand a layer and click on the objects within. There is a lock toggle next to each object. No eye toggle for hiding though. ?
    – Lock toggles are ‘swipeable’ so you can swipe many simultaneously in one gesture
    – You can lock all but the current layer by alt-clicking on a lock toggle.
    – I’m a keyboard junky, so I use ctrl + 2 to lock my selected objects. Ctrl + shift + 2 unlocks all locked objects in the layer. It’s a great way to get something out of the way temporarily without worrying about digging in the layers palette.

    One thing I can think of on effects not rendering…if your shape is outside of the document bounds, the effects won’t render. Effects only render inside your document.

    Take care
    Danc.

  4. Kitchen layouts deal including all the aspects which
    go into developing a kitchen in detail. Giving measuring of all add-ons works out in detail, each area of the kitchen, from the light,
    along with the sink to the cabinets. There are different in creating their own kitchen cabinets nz designing packages too that
    guide a man. A person make an effort to construct the kitchen as per their layouts and measurements,
    and could also start to see the new kitchen designs design of pals.

Comments are closed.