February 25th, 2009

Expanding the colour palette in Expression Design and Blend

Silverlight Blend Tutorials, Silverlight News, by Gavin Wignall.

Kuler is an Adobe site allowing you to set up and save your own colour palettes.

So… “Surely Adobe is not producing something for Microsoft Silverlight?” I hear you say…

Well, no. But, the good guys at Codeplex have developed a set of tools called ‘Colorful‘ that allow you to get the Kuler colour palettes inside the Microsoft Expression Design and Blend interface. Once you download the tools and go through a couple of steps that I will explain shortly, you end up with an additional window inside Design and Blend that looks like this;

Installation

Step 1; Download the tools from Codeplex here.

Step 2; Unzip the files and copy the dll files into the required locations – there are 2 dll files for your Expression Design folder and 2 dll files for your Expression Blend folder.

Step 3; Edit the shortcut you use to load your Expression Design application and your Expression Blend application in the following way. 

For Expression Design – Right click on the shortcut you use to launch Design (not the actual Application), select ‘Properties’. Inside the popup window that opens edit the Target field by adding the following after the existing text “ /addin:Colorful.Design.AddIn.dll“. (A key point to make here is that the Codeplex site uses ‘-’ instead of ‘/’. This worked for Expression Design for me but not for Expression Blend, let me know if you find otherwise).

For Expression Blend – Right click on the shortcut you use to launch Blend (not the actual Application), select ‘Properties’. Inside the popup window that opens edit the Target field by adding the following after the existing text “ /addin:Colorful.Blend.AddIn.dll“. (A key point to make here is that the Codeplex site uses ‘-’ instead of ‘/’. This worked for Expression Design for me but not for Expression Blend, let me know if you find otherwise).

Now you can load up either package and explore the additional tools available to you. To leverage the maximum gain from this you will want to head over to the Kuler site and sign up for an account – free of charge.

Once you have an account you can start creating your own colour swatches – but beware, you will be required to use Adobe’s Flash plugin, just be sure to repent for your sins afterwards.

Once you have created your swatches, named, saved and shared them with the community, you can access them inside Expression Design and Expression Blend. You can use the Search field to find your swatches. The example at the top of this post shows a return for the Search ‘Microsoft’, the example below shows a search result for a colleague of mine, whom has a collection of Microsoft colours setup up already.

The first way to use the access the colours for your project is to simply use the eye dropper tool and click on the colour required. Failing that you can click on the ‘#’ button underneath the Colour set.

This will copy the colours into your pasteboard temporarily, simple paste onto your design area and 5 boxes will appear each containing a colour from that palette.

If you are in Blend then doing this will also automatically add the 5 colours as ‘Local Brush Resources’.

The second button in under the Colour swatch allows you to output the palette as a Expression Design swatch. You can then import this in by clicking the ‘More Swatches’ button in the ‘Appearance’ tool set.

Finally the third button is a link to the Kuler site.

Be sure to report any feedback to Codeplex and suggestions for what you would like to see on future updates.

Back Top

Responses to “Expanding the colour palette in Expression Design and Blend”

  1. I think I will try to recommend this post to my friends and family, cuz it’s really helpful.

  2. Aw, this was a really quality post. In theory I’d like to write like this too – taking time and real effort to make a good article… but what can I say… I procrastinate alot and never seem to get something done.

Leave a Reply

Back Top