This week Microsoft released the January 2011 preview of Expression Design 5. The preview can be downloaded here: http://bit.ly/gPxBMr.
The January 2011 preview contains only two new features:
- EPS import
- Multiple selection in the Layers panel
I’ve found this image in my Image Library.
It’s in .EPS format and I would like to use it in one of my designs. With the new Expression Design preview I can import it directly without having to convert it to another format first.
To do this, go to the “File” menu and select “Import Encapsulated Postscript File…”.
An open-file dialog appears where you can select the .EPS file you would like to open. After hitting “open” a progress bar shows at the bottom right of Expression Design for a moment.
And done. The .EPS file is opened in your .design file.
Multiple selection in layers panel
In the current version of Design, Expression Design 4, it is possible to select multiple layers by holding the Shift key. When doing this you can add layers to the selection.
In the new Expression Design January Preview this process has changed and works in the same way you might be used to in other programs like Windows Explorer for example.
By selecting a layer and pressing the Shift key while selecting another layer you can select a range of layers.
By selecting layers while holding the Control key you can add individual layers to the selection.
Only two features are added in the preview. I hope the Expression Design team will add a lot more features, so the final version of Expression Design 5 can match up to Adobe Illustrator. At least I am glad that Expression Design is still alive.
On June 7th Expression Studio 4 will be launched at the Internet Week in New York. One day later, on June 8th, the Dutch Silverlight and Expression User Group SIXIN organizes the Dutch Community Launch in collaboration with Microsoft and Centric at Centric’s office in IJsselstein. To celebrate the 4 Expression release we have two interesting speakers. In addition, we give three packages Expression Studio and more great gifts away.
The preliminary program for the evening is as follows:
- 5:45 p.m. – Food, drinks and networking
- 6:45 p.m. – Reception and Introduction by Koen Zwikstra, co-founder of SIXIN and Silverlight MVP
- 7:00 p.m. – Building Silverlight applications using the new features of Expression Blend by Loek van den Ouweland, founder and web designer for Toverstudio
- 8:00 p.m. – Break
- 8:30 p.m. – Tour Encoder and Expression Web by Antoni Dol, senior designer at Macaw
- 9:30 p.m. – Networking while enjoying a drink
Ask your question to one of the speakers
If you have a question to one of the speakers, then you can by email (email@example.com) or thru Twitter. Send an email with subject # expression4 or send a tweet @ sixinUG and use it to hashtag # expression4.
To register for this event or to get more information you can go to the SIXIN meetings page here.
Special thanks to our sponsors:
For a long time I’ve been wondering how to create a smoke effect like used in the Silverlight Logo for example. There are some techniques to render smoke by using 3D modeling software. But creating this effect in a tool like Expression Design is easier than it looks. Below is an example of what the end result might look like.
After opening expression Design start by creating a new document.The size of the document isn’t very important as long as you have a bit of space to play with some paths, so at least 1024 x 786 is recommended.
Select the Pen tool from the toolbar and draw a curvy path. Try giving it some space, but don’t be scared to try out different variations with wide curves and even small loops. You’ll probably end up drawing these curves a couple of times. After you’ve learned this little trick, you’ll quickly learn to what works and what doesn’t.
Remove the fill of the path. Give the stroke a light blue color like #74C4FC. and a width of 3. Change the opacity to 25.
Now draw a second curvy path approximately the same as the first, but don’t follow it exactly. Add some different twists and turns. This will cause the smoke effect to twirl and get a smooth feel. Remove the filling for this path also. Change the stroke to the same light blue as the first. Give it a width of 3 also, but set its opacity to 0.
Set the Steps value to 1. This will create a new path, that’s drawn between both paths.
Add this new path to the selection to get all three paths selected. And go to Object, Blend Paths.. again.
This time, set the Steps value to 100. This will create a smooth transaction between the three paths.
Where to go from here? Experiment! Play with different colors, try gradients and see where different curves may lead you. And, for a funny twist, try dashing the curves.
You can download the .design file here.
Tags van Technorati: Silverlight
Today I would like to show you how to create lines like above in Expression Design.
After opening Expression Design, start by creating a new .design document.
Now, zoom in a bit to the upper left corner of the document. Draw a small rectangle and give it some easy numbers. Move the rectangle to 10, 10 and change it width and height to 10 too.
Change the stroke of the rectangle to none, and change the fill color to black.
Copy the black rectangle and move it to position 10,20. Change its color to a medium grey, like #999999.
Create another copy of the rectangle and move it to position 10,30. Give that rectangle a light grey color, #DDDDDD.
Add a fourth copy and move it to 10,40. Fill it with a dark grey #555555.
At this point there should be a stack of 4 squares like this:
Next, the four rectangles have to be turned into a stroke definition to use it for the drawing. Select all four rectangles and go to Object –> Stroke –> New Stroke Definition…
By default there’s some room around the squares. When using the stroke definition like this, there’s going to be some space at the beginning and the end of the line. To fix this, select the stroke definition box from the toolbar.
Drag the stroke definition on the borders of the squares, so that it matches the size.
That’s all. Hit the little cross on the tab to close the stroke definition. Enter a name for the definition in the dialog that pops up. Set the default width to 10.
Hit ok to close the popup.
Because the stroke definition is now stored, the rectangles aren’t needed anymore. Delete them and reset the zoom level to 100%.
Select the Pen tool from the toolbar or hit P on the keyboard. Hold down shift on the keyboard and click on the canvas a few times. Make sure you don’t click and drag because this will create curved lines. By using shift and click all lines will be at 45 degrees to each other.
You don’t need the filling so set that to none. Set the stroke color to a dark red, like #5D0000 and give it a with of 25 pixels. Select ”Retro” Stroke from the dropdown list. The drawing is starting to look like something now.
Repeat the drawing with the pan again to draw a second line. Instead of using a red color, select a dark blue color like #00005D this time.
All the drawing needs now is a little dynamics.
Add new layer to the design and call this “Shadows”.
Draw a new rectangle and give it a width and height of 25.
Set the stroke for the rectangle to none. Fill it with a gradient and set the gradient to go from black with an alpha 50% to black with an alpha 0.
Use the selection tool to rotate the square 45 degrees, use the shift key while rotating to make the rotation snap to the 45 degrees more easily. Move the rectangle over to a crossing between red and blue lines and place it with the dark side toward the blue line, placing it over the red line.
Copy the shadow square, rotate it 180 degrees and move it with its dark side to the blue line again.
clone, rotate 180 degrees and move to other side of the blue line.
To make it look like the blue line is diving below the red, a small portion of the blue line has to be deleted. To do that, select the Add Anchor Point tool from the toolbar.
To make locating the places to add the anchor points a bit easier, add two guides crossing each other where the side of the blue line crosses the center of the red line. Add three points, like shown below.
To finish it off, delete the middle anchor, by hitting delete on the keyboard. Add a bit of shadow by copying the shadow squares and placing them over the blue line this time.
All there’s left to do is repeating the process of placing shadows and moving a blue line “below” the red every now and then.
Tags van Technorati: Silverlight