Decided to make some changes to my template. I added some js files, fixed blocks for IE6, replaced an old background with a new abstract “blend paths”.

You can unpack a new template to Microsoft Expression\Web 3\en\WEBS folder. After that you’ll see a template in general list:

redstyle.tem.zip (130.84 kb)

Let’s talk about abstract background image. Find out how to create one of them with a small dot and some interesting operations in Expression Design.

And so, what do we need? Create a New Document 800x600 px and add a Rectangle of the same size. Fill the shape with a gradient - from the rich dark color to the light and bright.

For example, somehow like this.

I chose two gradient colors: #65fef6 and #008a7c. After filling, lock this shape in order not to shift it accidentally. You can do this in the Layers panel by clicking the padlock icon.

Dot.The dot is a small circle, a circle is an ellipse and ellipse is a ...  So, don’t worry and just choose Ellipse tool for drawing. And create a small dot with sizes 10х10 pixels and fill it with a white color (Don’t be afraid of sizes on a screenshot. This dot is really small, I just used Zoom to change the scale).

Another dot . It’s not a problem for you to make another dot. Simply Copy and Paste this shape. Also increase the size twice - this dot needs to be 20x20 pixels.

Dot the i's. Place dots at the great distance from each other, the small dot on the top of the artboard and the big one at the bottom.

Align horizontal centers. Now it is important to align objects with each other. Choose Selection tool and select both dots or just press CTRL + A (in our case we select only dots, because the background is locked). And in the Action Bar panel from the Arrange menu, point to Align, and then click Horizontal Centers. Now the center-points of both dots are aligned.

Blend paths. Don’t cancel the selection of objects.  In the Object menu, click Blend Paths. In the Steps field of the opened dialog box, enter the number 22 (from 20 to 30 – depending on distance between your dots). Make a choice after simple calculations: after applying the operation Blend Paths, bottom dots must touch each other a little bit, and top dots must be at a greater distance, as in this example.

After the previous operation there is a new group of objects in the Layers panel.

 
Press CTRL + A to select all objects. (Two our dots and a new group) From the Path menu of the Action Bar apply command Unite.

 
This command combines all the selected shapes into one compound object. (We've done this to simplify our future work).

Repeat. Now we are going to do the similar operation as stated above, but only in horizontal way. Move the object to the left edge of the background, Copy (CTRL +C) and Paste in Front (or press CTRL+F). Click the mouse, and begin to drag the object horizontally to the right edge while holding down the SHIFT key for precise horizontal alignment.

Select our two objects again and perform the operation Blend Paths. The number of steps is 45 (choose by the same principle as above).

We’ve got the picture:

Then, press CTRL + A again to select all objects (two objects - left and right and a new group).  From the Path menu of the Action Bar apply command Unite.

Fill. Now we are going to apply a gradient fill. You can select the same color as for background and experiment with Gradient Transform tool

OR you can select for gradient two white colors and make one of them a fully transparent and another one - completely opaque.

Then use Gradient Transform tool to set the direction from top to bottom. And as a result there is a nice transition of dots. Remember, we had only one at the beginning :)

The result is in the attached file.

dots.zip (76.68 kb)