Categories
Expression Design

Expression Design 2 Beta – HUGE Improvements

I’ve had a chance to play around with Expression Studio 2 Beta for about a week now and I can tell you there are some huge improvements in the new releases. Today I’m going to limit my scope to Expression Design 2 Beta. It’s only fair considering how harshly I criticized the first release of this program.

I have yet to experiment with the XAML part of this program so these observations are purely based on my experiences with Design 2 as a design program.

Pixel friendly

If you read my other posts on Design you’ll know that the first iteration of the program operated on a pixel-free basis meaning that it allowed you to export bizarre image sizes like 19.325 px and so on. Although this wasn’t a problem if you were designing vector graphics for vector applications, it was a huge pain if you were desiging for export to bitmaps. Well, those days are gone my friend. Design 2 not only works in pixels if you want it to, but it snaps to pixels as well so you avoid exporting white space.

Clean bitmaps

Another big issue I had with Design 1 was the horrendous quality of the bitmap exports from the program. When I first blogged about it, the Expression Design dev team actually contacted me directly because they couldn’t believe their own eyes. But sure enough, the program was mangling bitmaps to such a degree that they were pretty much useless. Well, once again the dev team listened and the new bitmap exports are crystal clear. I’ll post a new set of exports when I find the time but I can tell you right now that they are on par if not better than PhotoShop.

Expression Design 2 Beta - Effects outside the artboardEffects outside the artboard

One weird thing about Design v1 was that the applied effects didn’t function outside the artboard. I guess it makes sense in some ways but for an Illustrator guy like myself it was just damn weird. And it did occasionally lead to problems. In Design 2, the effects are no longer artboard-bound which means you can create elements with effects, store them off the artboard and still see what you’ve done to them without having to drag them back in. You can also make crop areas outside of the artboard and export these elements to bitmap, XAML or whatever you want.

Expression Design 2 Beta - Whole Document exportExpression Design 2 Beta - Selected object exportNew exports

Whereas before you had to tur off the layers you didn’t want to export, you now have several export options in the export window. First off you can export everything visual on the artboard like you could before. The second option is Export Selected which lets you only export the currently selected element on the artboard on a transparent background. The third option is Export Slices which lets you export a series of slices in one click. Simple improvements that save a lot of time.

Expression Design 2 Beta - Sub-layer controlSub-layer control

Coming from PhotoShop and Illustrator I found it incredibly annoying that you had no visibility and locking control on the sub-layers in Design. This has been fixed and you can now toggle visibility and lock on all sub layers independently. Again a sublte improvement that makes a world of difference.

So far the Design 2 experience has been a joyous one for me. I have yet to encounter any bugs and the program is more functional than the original. There are still things it can’t do but the inclusion of proper layered PSD importing makes these shortcomings less of an annoyance. I am currently desigining a new website using only Design 2 Beta and once it’s up and running I’ll give everyone a full run through of the experience.

For now I highly recommend getting the upgrade.

Categories
Expression Design Expression Web Microsoft Expression

NaturesCarpet.com – 2nd Expression project live to the world

Finally, after weeks of designs and redesigns my second Expression-only project went live to the world last week. The site – for Vancouver based carpet retailer Colin Campbell & Sons’ new line called Nature’s Carpet – was entirely designed and coded using Expression Design and Expression Web (apart from the tacky Flash intro which was done in Flash). I think this site is far superior to my first Expression project iZufall.com because this time I knew of some of the pitfalls and I learned some valuable lessons on the way.

You might remember that I had a problem when exporting my Design elements for use in a html environment. Expression Design is a vector based program that does not constrain to true pixels. Coming from a PhotoShop environment I made the stupid mistake of eyeballing my designs when creating iZufall and by the time I discovered my error I was too far in to change things around. As a result there were some whitespace issues with the site.

Not so with Natures Carpet. This time I took the time to set all the margins and sizes using guides before starting on the actual design work. This requires that you know roughly what the site is going to look like but then all my designs start on paper so that’s not too difficult. With all my margins set beforehand it was easy enough to make and export graphical elements that fit snugly in my divs without creating unnecessary white lines where they shouldn’t be.

Unlike the iZufall project I chose to start this one completely from scratch: A blank html doc and a blank css doc. Such an endeavour would have been unthinkable in my pre-Expression days but knowing how powerful the css functionality in the software is I felt comfortable starting from scratch. Setting up all the styles was a tad tedious to start off with but once things got going it was quite pleasant. More than ever before I am now a big fan of anything CSS.

One of the neatest things I built for this site (if I may say so myself) was the nav bar on the left side. As you’ll notice when clicking around the entire nav bar is a simple list with tons of styling. It took me a while to figure out how to make the different levels work properly and how to make the current page appear selected all the time but in the end it all worked really well.

Due to lack of PHP and .NET support on the server side the site remains straight html at the moment but I designed the css code to be compatible with future database implementation so that any transition will be pain free.

I’ll post some examples of how I made the nav bar and current page selections work later on when I am in front of my own computer. For now take a trip around the site and see what you think. I’d love some feedback.

NaturesCarpet.com

Categories
Expression Design Expression Media Encoder Expression Web Microsoft Expression Video Tutorials

Video Tutorial: Editing and Uploading the Zufall Side Buttons


Click here for a full screen version of this video.
Here (finally) is my second video in the Zufall series. It was meant to be a walk-through of the implementation process but then I ran across a small problem and decided to make a video about how I fixed it instead. Zufall part II about Expression Web is still on it’s way but this should tide you over.

In this video I demonstrate how I created the side buttons using Expression Design and how to do some quick alterations to the site in Expression Web using the fantastic CSS features. It’s quick and dirty but should give you a small glimpse of how to do things.

The reason why it’s taken so long for me to post a new video? Expression Media Encoder is damn near impossible to use! I’ll be ragging on this in a separate post once my head cools but just to give you a small taste it took 17 tries to get the video above to export to below the magic 22mb that is required for Silverlight streaming. And it wasn’t for lack of trying. But like I said, more on that later. For now I hope you get something out of my most recent video and be sure to check back for more.

Categories
Expression Design Microsoft Expression Silverlight Video Tutorials

iZufall Project – From Concept to Design using Expression Design


It took way too long but now it’s here: My first video tutorial covering the overall design process of the iZufall.com website using Microsoft Expression Design. In the video I cover the overall design idea, how to import vectorized graphics form Adobe Illustrator and some other neat little things in the program.

Staying true to the Microsoft Expression experience the video is a Silverlight application hosted on Microsoft Silverlight Streaming. As you can see from my previous post I had some difficulties actually creating, uploading and posting the application but then a little bird tipped me off to this article that explains how to post Silverlight Streaming apps using iFrames and now it works splendidly.

So, without further ado, here is the first video. If you want a larger version to see all the small intricacies click here to openn a separate window. I advise you to do so so you can see what I’m doing.

Just a note: You’ll need to install the Silverlight RC plug-in to be able to play my video. It’s a small 2mb download that is completely safe, free and platform independent. You can download Silverlight by clicking here.

Categories
Expression Design Expression Web Microsoft Expression

Zufall is Live! First project using only Microsoft Expression Suite is on line

iZufall.com

When I promised Microsoft I was going to use their new Expression Suite exclusively when designing my next project I wasn’t really sure what I was getting myself into. A colleague put it quite bluntly: “Are you a masochist?” I don’t think so and after finishing the Zufall project I have to say my early fears were largely unfounded.

I will blog more extensively on the experience in using Expression Design and Expression Web to create this site (which by the way is for a neat little game called Zufall which is like a Magic 8-ball for your life) and create a couple of videos of the process so you can really see how these programs work and how I use them, but for now I’ll just leave you with some basic comments.

The entire site is based on a style sheet built from scratch using Expression Web. This is quite a milestone for me. In the past I’ve shied away from the CSS and often altered existing scripts rather than startig my own. But Expression Web’s ingenious live CSS functionalities make style sheet building a breeze and the result is rock solid (I hope). I had some issues with the classic Internet Explorer vs. the rest of the browsers when it came to margins, borders and such but I found a way of working around this using divs (something that is surprisingly easy in this program).

Bad edgesAs I’ve mentioned before there are some issues with exporting from Expression Design. The bad edges and artifacting problem is persistent and as a result all the graphics on the page are huge lumbering PNG files rather than small nimble JPGs (thus the slow load speeds). I managed to work my way around the worst of it by putting some lines behind the logo (see image) but you can still see the rough edges if you look closely. It is worth noting that upon hearing of my exporting problems Microsoft contacted me and asked for my files to see if they could reproduce them. The are currently working on fixing the exporting problems and it will be interesting to see if they are able to solve them for the next build of Expression Design.

top lineAnother problem I’ve mentioned before is that Expression Design lets you export ridiculous sizes that don’t actually exist. Because Design is a vector based program it doesn’t conform to standard pixel widths and that means that if you’re not careful (i.e. if you do what I did) you end up designing a page with graphics that don’t really fit. This causes some annoying problems that will anger picky people like me best illustrated by the two grabs I’ve attached here. Notice how there is a small line between the curve graphic and the rest of the page? Button lineOr the line between the button and the white area? These were both caused by Design exporting graphics that were for instance 124.39 pixels wide. Of course the .39 does not compute in any rational sense when it comes to the web so lines appear. To remedy this problem one has to be very careful when laying out the designs so everything works on a pixel-by-pixel basis (or design the whole thing for Silverlight).

Take a moment and visit the site (www.izufall.com) to see how it looks on your computer and drop me a comment if you find anything you like / wonder about / hate / think doesn’t work.

More to come…

Categories
Expression Design Microsoft Expression

Color Picker / Dropper Issues Resolved, Kinda

NOTE: I’m going to start saying Color Dropper instead of Color Picker.

After the email I got from Dan at Microsoft I went back to retest the color dropper issue I found yesterday. Here are my results:

Dan told me that while the color dropper in the normal tools panel is an “object colour picker” the one in the bottom corner of the swatch area is a “screen colour picker” and that my problem probably occurred while using the latter one. This is because the screen color dropper uses the native colour profile of the computer rather than a forced one like Adobe’s software does. Some testing proved this to be true: When I used the color dropper in the tools panel the colours matched while when I used the one in the swatch panel they caused the same problems as before. I take this to mean that since I use the Pantone Huey and therefore have a properly calibrated monitor the screen colours Expression Design perceives are off from the originals. That makes absolutely no sense to me but at least we now know the reason for the problem.

But this, as my old philosophy professor used to say, begs a question: If screen calibration equipment and their colour profiles cause Expression Design to misinterpret colours what is the point of having the swatch color dropper at all? One would assume that this software is directed primarily towards professionals and a lot of us use calibration equipment to avoid colour problems in our projects. This “feature” if that is what it is makes the color dropper useless. I also noticed something else that is even more confusing: In the Options pane you can actually force your tools panel color dropper to use that same useless screen colour rather than the actual colour.

At the end of the day (literally – it’s 7:43pm) I am left with one burning question: What exactly am I supposed to use the screen colour for? Especially when I have the option of picking the true colour with the tool panel color dropper?

A side note: It took me a couple of seconds to figure out how to use the tool panel color dropper because it doesn’t work like what I was used to nor as the swatch color dropper. While the ‘norm’ is to select the item you want to change the colour of and then use the color dropper to pick the colour the tool panel color dropper works quite literally like a dropper: You go to whatever object contains the colour you want, click and hold the mouse to “suck up” the colour and “drop” it into the object you want to change the colour of. If you just click on the original colour nothing happens. Confusing as hell.

I’ll write a post on this and other non-standard button and object functions later on when the list grows large enough to warrant one. In the meantime be advised that Design does not work like other programs.

Categories
Expression Design Microsoft Expression

Corrections, Corrections, Corrections (even a genious makes mistakes)

Last week I posted an article where I complained about a few things in Expression Design. Some of my claims were questioned by Microsoft and I’ve found that on one count I was actually wrong (well, sort of wrong anyway). I’m a stickler for details and I think it’s important that everything said here is correct so here goes:

Vector Effects
In my post I claimed that the effects didn’t always work when you started messing around with the vectors. I stand by the fact that when I was working with the program I experienced this exact problem but I have been unable to reproduce the issue so therefore I say I was wrong pending further investigation. I have altered my original post to reflect this new development.

Deleting Sub-Layers

I also described an annoying issue caused by the inability to select individual objects under a layer through the layers pallet. I realize I was not clear in my description of the problem I was experiencing so let me clarify: Yes, you can select individual objects through the layers pallet but there are two vital functions that are not available but need to be:

1. You can’t toggle each object visible/invisible – this function is only available per layer. In my case this forces me to make new layers for each object and kind of defeats the purpose of the sub layers. Might be just me being old school but that’s the way it is.

2. You can’t select an object under a layer and delete it using the trash can function. If you do you end up deleting the whole layer. To delete one object alone you have to select it and then use the Del button. I find this very annoying, probably because I’m used to being able to delete objects individually from Adobe Illustrator.

These two features should be added to the program simply to make it easier to use and accommodate old Illustrator geezers like myself.

Categories
Expression Design Microsoft Expression

Color Picker Issues – Possible Explanations

After my post on the color picker issue last night I got an email from Dan at Microsoft with a possible explanation:

I have a couple of questions that might help narrow down the issue:
– Are you using the “Color eyedropper” on the color picker? This one picks the screen color. There is another “Color dropper” on the tool bar that picks the object color and is likely to give you better color fidelity in color correct environments.
– Are you using a system color profile? On Vista, under Control Panels, there is a control panel called Color Management. Could you check if you are using a custom profile other than sRGB?
The drawing surface of Expression Design uses the system color profile by default. Programs like Adobe Photoshop or Illustrator ignore the system color profile unless you specifically turn on proofing.
There is also another known bug with the Color eyedropper where it records colors by one digit (so 255, 0, 0 would be recorded as 254, 0, 0). This however, does not seem to be what you are seeing.

I was using the Color eyedropper when the error described in my earlier post occurred. But even if this dropper picks the screen colour it is still very inaccurate because the colour picked doesn’t match the screen colour either.

I am using a system color profile generated by Pantone’s Huey device.

I am not at my regular computer at the moment but I will check all of the above later on today to get to the bottom of this. Stay tuned …

Categories
Expression Design Microsoft Expression

Color Picker Issues

The color picker in Expression Design is so inaccurate it’s pretty much useless!

Now that I got your attention let me explain: I was working on the Zufall project when I discovered that the colours of several of my elements didn’t match. I found this to be very odd as I had made a sort of colour pallet to start off with and used the colour picker to match all the colours to one another. Upon closer inspection I was mortified to discover that the colour picker wasn’t matching colours at all. It was generating seemingly random shades (or in some cases hues) of the colour I was picking. I tested it with several different colours and found that there are only two colours that stay the same when “picked”: black and white. All other colours are violated in some way or other.

Testing the Problem
To figure out what was going on I created a project with a table like set of boxes: Original colours on the left, picked colours on the right. I chose all the original colours from the standard colour swatch in Expression Design, copied the box and put the copy to it’s right and picked the colour from the original box. As you can see from the graphic below (exported as a PNG to avoid the artifacting problem I’ve discussed earlier in the blog) There is a distinct difference between the original colours and the picked ones. The reds and yellows seem to get “weaker” while the blues change all together. You’ll notice that the picked version of the dark/indigo blue looks more like the original purple than it’s parent. And no, I didn’t accidentally pick the wrong colour here. This is the result you get every time.

My Theory
It seems to me that the colour picker has a tendency of leaning to the left in the colour spectrum so that reds become oranges, oranges become yellow, yellows become green, greens become blue, blues become indigos, indigos become violets, and violets become red. Why this is happening is beyond me but regardless it is a problem that must be addressed. With a dysfunctional colour picker the whole program is in big big trouble.

The Proof

Bad Colour Picker

Categories
Expression Design Microsoft Expression

Expression Design follow up – Answering questions from Microsoft

So I wake up this morning to discover that Microsoft has taken an interest in my blog (undoubtedly because I posted this blog on one of their forums). Anyway, they responded with some pointers, questions and disagreements. I realized that some of what I had said required some backing up in the form of actual screen grabs and examples so I’ve spent some time making illustrations to prove my point.

The biggest and most annoying issue I found when working with Expression Design was the poor quality of the exports. This was questioned by people from Microsoft so I’ve compiled some exports for your viewing pleasure. These images were all exported with whatever settings are listed underneath, then opened in Adobe Photoshop (where the strokes and text were added) and exported again from Photoshop using quality 12 and Standard compression. The graphic in question is the logo I’m currently working with for a web project. The logo (vector graphic) was imported as an EPS into Expression and resized to fit the frame. The bad rasterization is prevalent no matter what size the graphic is.

A series of exports side by side with no compression or re-sizing:

Export examples side-by-side

At normal resolution you can clearly see the stepped or frayed edges on all the Expression Design exports, especially pronounced along the horizontal elements in the ‘Z’ and the bottom left hand curve of the ‘u’. You’ll also notice that the green in the three top images seems slightly muddied and the white has a yellow tint to it. This is caused by the artifacts. The Adobe Photoshop exports are much better even at lower qualities.

To really show what the problem consists of I’ve blown up each of the above:

Expression Design JPG quality 8
Expression Design JPG quality 10
Expression Design JPG quality 12
Expression Design PNG
Adobe Photoshop JPG compression 10
Adobe Photoshop JPG compression 12

It’s quite obvious even to an untrained eye that the JPG compression from Expression – even at full resolution – is quite bad. Notice in particular the artifacts in the green and white areas of the quality 12 image. Likewise the edge-stepping is very pronounced making it hard to use the graphics. The difference in quality between Expression Design JPG at quality 12 and Adobe Photoshop JPG at quality 10 is also staggering, especially when it comes to artifacts around the edges and in the white. The artifact problem becomes even more pronounced when using gradients rendering the exported JPGs virtually useless.

I guess one could argue that the JPG compression is better using Photoshop because Adobe has been in the business longer and has had more time to perfect the science of compression. But that is beside the point. Microsoft intends to take over at least some of the market currently dominated by Adobe so it is vital that they get “simple” issues like this right right away.

Categories
Expression Design Microsoft Expression

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.