Web Graphic Design Ideas using Macromedia Fireworks
Tool(s) Required:
Graphics Editor: Fireworks 4 or above
Recommended: Adobe Fireworks CS3
Curves
One neat graphic design idea is to use curves. Look at the example below. You will see how we can step by step create a uniform curve.
|
Take a look at these ready made professional web site templates that use curves: Template 7 - Beauty, Template 9 - Business, Template 20 - Hi-Tech
![]() |
Image FeatheringWhile using pictures in designing we often don't require certain parts of a picture to be seen, or else, just need a particular part of a picture. For this we can use the Feather effect of Macromedia Fireworks. Basically feather removes the otherwise jagged finish to an edited image by giving it a fading in pixel radius. This cool effect makes your pictures stand out and look really professional. Learn how to use Fireworks Feather |
|
Drop Shadow
Drop-Shadow is a Graphic Effect found in the Effects Panel of the Properties Window. To give a drop shadow to any graphic element:
- Select the graphic and click the (+) button under Effects.
- In the list of options go to Shadow and Glow > Drop Shadow and the shadow appears.
- In the shadow properties the default value for distance is 7 px and softness is 4. We usually give distance as 2 px and softness as 5 for a soft shadow effect (example 1) and distance as 3 px and softness as 4 for a crisp shadow effect (example 2).
Paste Inside
You can paste any graphic (image or vector) inside a vector shape, so that it appears to be inside it. All you need to do is:
- Place the graphic over the vector shape.
- Selecting only the graphic press Ctrl+x (cut it).
- Now select the vector shape and press Ctrl+Shift+v (paste inside).
- We recommend that the vector shape be given a stroke (outline) and a shadow using the drop-shadow effect so that the overall look is stunning.
Advanced Vector Shapes
Macromedia MX 2004 has come out with a stunning range of advanced vector shapes. Take a look at some of the examples below (pie, rounded rectangle, advanced polygon, spiral, advanced star and many more).
|
We love the fact that these auto shapes have special handles (the yellow points) that help change their properties proportionally (This overcomes the difficulty of changing the dimensions of a rounded rectangle in Fireworks 4 after the corners have been set).
![]() |
Take a look at the Star Auto Shape vector shown on your left. Create a similar one in Fireworks MX 2004 and try dragging the yellow property handles. Tip: You can create advanced shapes like the star shown in example 2, clove like shapes, flower shapes, etc. when just experimenting with this tool. Have Fun! |
| You can create a dome like vector shape using the rounded rectangle vector. See how we have done it step by step. Pull the top two handles towards each other till the center and pull the bottom two handles away from each other till the sides. Tip: Use Alt+Drag for changing the properties of individual corners. |
![]() |
Absolutely FREE Web Templates
Check out these quality free web templates and download them without any registration or sign-up!
FREE Flash Actionscript & Animation Guide
Learn Flash the easy way using these easy-to-follow tutorials! Get your basics right or learn advanced flash actionscript!
Quality Dreamweaver Templates
Professional quality dreamweaver templates in over 20 categories, starting at just $9.95! Instant download & easy customization
This page is part of the SmartWebby's Free Web Design Guide, a collection of free web design tutorials, articles, tips and guidelines on effective web site design. From web design tips and ideas to HTML, CSS Styles, Fireworks and Dreamweaver you'll find all you need to know about web design right here!
SmartWebby.com provides top-quality web design & web programming services globally. Since January 2001, we have successfully built more than 200 professional web sites for clients from all over the world (USA, UK, Canada, Australia, India, Greece, Denmark, Singapore, etc.). By creating highly professional W3C Standard compliant and load-time optimized websites at extremely affordable prices, we leave our competition far behind in terms of "value for money". We specialize in Rapid Web Design using Adobe Tools, ASP.net/ASP/PHP web programming, W3C Standard compliant CSS & HTML programming, high quality Flash Animation and Interactive Flash Programming. No matter what your requirements are, our team is capable of delivering a website that's over & above your expectations. Check out our popular Web Design Packages today!













