Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks &
Illustrator Tutorials
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Fireworks Tutorials & Resources > Blur & Overlay Effect   

 

Featured Fireworks & Dreamweaver Template

Business Template 25
Business
$59.95

Image Blur & Overlay Effect in Fireworks

In this tutorial you will learn how to blur an image and blend text with an image using the overlay blend mode in Fireworks.

Blur & Ovelay Effect in Fireworks

Step 1 - Open any image of your choice in Adobe Fireworks CS4.

Image Overlay Effect in Fireworks

Step 2 - You can "blur" the background image using the "Zoom Blur" tool(i.e, There are different types of blur tool, here we use the zooming effect blur tool).  Select the the background image and Go to Filters > Blur > Zoom Blur

Scenery Image

Step 3 - When you click on the "Zoom Blur" tool Option, there will appear a popup window with default values for "Amount" and "Quality". You can set the values as Amount : 30 and Quality : 20.

Scenery Image

Step 4 - The scenery background image will be blurred with zoom effect and looks like the below image.

Blur Effect in Fireworks

Step 5 - Using the " Text Tool " type the text "Entheos" and "Engage. Enable. Enrich" above the scenery background image.

Text Tool Text Tool

Step 6 - You will get the effect as in image with the text in white color. Now we can apply the overlay effect to the text, so that the text will blend with the background image color and reflect its color.

EntheosWeb

Step 7 - Select the text and you will find the Blend mode option as "Normal" on the right side of the properties window. Click over the arrow and you can find many options (i.e. By the selecting the other options you can obtain different effects. You can try this). Here you can choose "Overlay" effect.

Text Tool

Step 8 - This is how the final image will look like with the text overlay effect.

Overlay Effect in Fireworks

Step 9 - You can use different images to get the colorful text overlay effect. Here is the same text overlay effect with other image to give you an idea. If you select the colorful & good images on this topic you will be able to create an amazing text overlay effect.

Overlay Effect in Fireworks


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


awesome website templates

EntheosWeb Design Blog

New Fireworks Tutorials

Learn How to Create a Smart 2D Button in Adobe Fireworks with Rollover Effect

Typography Art in Fireworks

Tracing & Drawing in Fireworks

Overlay Effect in Fireworks

Designing a Website Layout with Curves in Fireworks

Create a beautiful Slideshow Gallery in Fireworks CS4

stunning header collage