Making waves about ripples

willbu — Fri, 09 Nov 2007 00:31:00 GMT

Let's do some more special effects. Today's blog post will discuss how we can take some ordinary circles and turn them into a nice looking ripple-on-water effect. So go ahead and open Expression Design and create a new project. It can be any size but just for the sake of completeness I'll give you the dimensions of the document I'm opening - it's 1280w x 1024h, resolution at 96. Now draw a circle in your workspace. Remember to hold the SHIFT key when drawing the circle so we get a nice, round shape. In the pic below I'm using no stroke and a fill color of #9D97CD. In the layers window, give this circle a name of MainCircle:

Now draw another, much smaller circle with no stroke and a linear gradient fill. Again, use the SHIFT key to make it nice and round. Place the smaller circle right in the middle of the large circle. I got a helpful comment on centering (thanks, Fred C!) circles inside one another. A way to do this is to copy (CTRL+C) the main circle, delete it from your artboard, and then paste it back (CTRL+F). Do the same with the smaller circle and when pasted, it should appear in the center of the larger circle. If you paste and it doesn't appear, check which layer you have selected and make sure it's listed above the main circle in the layers window.

On the gradient fill, use two colors on the slider. I am using #9D97CD as the left color on the gradient slider and #494663 as the right color. Drag the left slider to the right, inward so the percentage on the tool tip shows 22.37% or roughly that percentage. As for the right slider, drag it to the left to the tool tip percentage reads 81.74% or roughly that percentage. If you want to be picky, go ahead and subtract 22.37 from 100 and try to match that percentage. Set the stop alpha for the left color at 100% and the stop alpha for the right color at 55%. In the layers window, name the circle CenterCircle. The below image is what you should end up with:

From this point on, we'll be drawing circles that don't use any fills, but they will have strokes. Also, the circles we create will all be perfectly round, so be sure to use the SHIFT key when drawing them. Go ahead and draw another circle and center it in the main circle. Remember, no fill, but give the stroke a gradient color and set the gradient type to linear. Also, set the stroke width at 15px. The left gradient color on the gradient slider will be #9D97CD and the right gradient slider will be #494663. The stop alpha for the left color is 100% and the stop alpha for the right color is 0%. And this time don't worry about dragging the color sliders inward. Leave them at their outermost positions. Here's what we have so far:

At this point I'm going to turn you loose to draw a few more circles just the way you did in the last paragraph - just be sure they are all perfectly round. Make them various sizes, larger than the CenterCircle but smaller than your MainCircle. You will want to vary the stroke widths as well. Also, try moving the left and right sliders inward on the gradient fill. Just have fun and make a few circles. In addition, you can try varying the rotation of each of the circles. This is what I ended up with:

Are you tired of making circles yet? Okay, have patience just a bit longer. Here's where it gets interesting. With the Selection pointer, drag a box around all of the circles. When you release the left mouse button, all of your circles are selected. Right click any of the circles and left click Group.

They should all now be grouped into one object. You can confirm this by looking at the layer window. Using the Skew Angle window at the bottom of the user interface, set the skew to 55.0 degrees. Almost done - hold down the ALT key and click and drag the bottom center selection handle upward, but just a little.

When you click outside of the image, your final work looks something like this:

You've made a ripple that looks like you're looking at it from an angle!

Reflecting on reflections

willbu — Wed, 31 Oct 2007 01:15:00 GMT

Let's take a moment to ponder a banner image.

It's kind of bland. And not too much going on. By the way, that font I'm using is called 'Pupcat'. Let's do a couple of things to spice the banner up a bit and make it more appealing. We will add a texture to the background and also do some reflection off the larger letters on the bottom. Feel free to use any font you want.

Create a new Design document, 800px by 200px. Draw a rectangle the length of the document and give it a fill color. The above blue fill color is #230FD2. In my image I've rounded off the corners of the rectangle by setting my corner radius to 43px. You can find this setting under the 'Edit Rectangle' window to the right of the design area (by default).

In your layers window you might want to name the current layer "Background". I like to do this to keep my project organized so I know what's what. You will want to add a new layer that is above the 'Background' layer. I named this layer "Text_Main". The smaller text for the word Microsoft is also in this layer, but that won't matter. Center your text in the rectangle. At this point I would save what I'm working on just so there are no uh oh's. So what you have is pretty much what I do above. Sure, it's plain and simple and follows the old designer's addage KISS or Keep It Simple, Stupid. But what if I want to pretty it up a bit? ED lets you apply a lot of different customizations, but I'm only interested in a couple of them right now. First let's work on spicing up the background.

Select the rectangle in the Background layer. In the Effects window add the live effect 'sponge' which is in the 'paint' category. Leave the numbers at their default settings. Now let's add another live effect, the 'crosshatch' effect under the 'sketch' category. Set the stroke length at 50 and the sharpness at 20. Leave the strength at 1. Okay, not bad. This is what you have now.

That's a little better. But let's do some more. Add another layer in between Background and Text_Main and call this one Reflection. Select the text "expression design" or whatever text you are working with. We don't want to select the smaller text near the top of the banner, just the larger text at the bottom. Hit CTRL+C to copy or go to Edit, Copy. Select the new Reflection layer then click CTRL+V or go to Edit, Paste. So now you have two text lines cluttering up the project. Right click on the text you just created and select Transform, Reflect Vertical. Now the text is upside down. Move this text down to the bottom so that half of it falls off the edge of the border and alight it directly underneath the main text with just a hairline of space between the two. This is what you should end up with.

Next, we need make the reflection look more real. Select the upside down text and set the opacity to 30%. Not quite done yet. You can stop here if you want, but there's a little bit more we can do to make this look even better. Add another layer and call it Background2. This layer needs to be on top of the Background layer but under the Reflection layer in your layers window. Draw another rectangle with a while fill (#FFFFFF), corner radius set to 43px and opacity at 30%. We're going to position this one to where the top is just above the right-side-up text and bleeds off the edge of the rounded rectangle. It won't matter that it bleeds over because the rectangle and the background are both white, so it doesn't show up. Now use the Direct Selection arrow (the white one) to select the new rounded rectangle and move the top handle points so that they meet the edge of the banner, like this:

You will notice that there is a bit of bleed off the edge as far as the selection is concerned, but again because the rectangle is white and the background is white, it won't make a difference. Even if the bleed was a noticeable color, when you export the image what's beyond the border doesn't show. Now we're almost done. Select the lighter rectangle and apply both a sponge live effect with default settings and a crosshatch live effect with stroke length set to 50, sharpness set to 20 and strength set to 1. We're done! This is what you end up with:

The Official Microsoft Expression Design Support Team Blog : effect

Making waves about ripples

Reflecting on reflections