|Commands||Styles||Textures||Libraries||Patterns||Auto-Shapes||Rich Symbols||Swatches||Plugins||All Extensions|
One of the usual designs around Web 2.0 includes having texts or images to appear reflected as if they are on a shiny-clean surface. This tutorial has been created with Fireworks CS3.In this tutorial you learn how to:
To give you an idea of how things will look like by the end of this tutorial, here is the completed image.
Now let's get started! The first step when creating your mirror image effect is to choose what you want to reflect. For this tutorial we will show you how to do it with text on a white background but you may choose another color.
To start with, create a new document, with a white background and type out a line of text with the Text Tool. In our example, we will use the 'Adobe Fireworks' text and make a reflection from that. You should have something looking like this:
The next step is to clone your layer and flip it vertically. This gives you the first step towards constructing the actual reflection effect. To do these all you need is to clone the text layer by a right-click on the text then Edit > Clone. You should have two layers of the same text now. Select the second layer
The next step is to flip the text vertically. In order to do this you must go to the top menu and select either Edit > Transform > Flip Vertically or click on the Flip Vertical icon (see Figure 3).
With the duplicated text still selected, press the Down arrow on your keyboard until you can see the flipped text. You should end up with a canvas that looks like this:
Keep on pressing the Down arrow on your keyboard so that the top of that layer is 1 pixel away from the bottom of the original text layer.
We are going to fade out the bottom part of the flipped text. To do this we need the Fade Image command that can do the fade out for you. Select the flipped text and Commands > Creative > Fade Image. A new dialogue box will popup giving you options of where you want the image to be faded out; either top, bottom, sides, etc. We want to fade out the bottom part, choose the right option.
Now it should look like this:
To have a better understanding of what happened, the Fade Image command applied a vector mask on the picture. When a vector mask is selected (see Figure 8) the Property Inspector (see Figure 9) displays information about how the mask is applied. The bottom half of the Property inspector displays additional properties that allow you to edit the mask object's stroke and fill.
Now, if you want to see the vector mask. Do as follows.
Due to a bug affecting the Fade Image command in Fireworks 8 and CS3 you cannot use rectangle, square or circle with a stroke.
The exact same principles can be applied to an image, logo, do not worry about any differences in approach as there are none!
|You can comment or ask your questions about this tutorial Contact|
Become an author
Sponsored LinksAddiction Recovery
Copyright © 2013 Fireworks Zone
Fireworks is a registered trademark of Adobe