Web Atelier

In this tutorial you will learn to add water drops on top of the picture with Macromedia Fireworks MX 2004 and above. You can see my final result here »
LEVEL: Beginner
WHAT YOU HAVE TO KNOW: Fireworks basics like add/remove live effects, clone objects, transform objects, paint on mask
SOURCE PNG: water-drops.png

Step 1 - Open image and clone it 2 times (Ctrl+Shift+D)

Step 2 - Now we will make mask for drops. On topmost object add “Hue/Saturation” live effect and adjust Saturation = 0;

Step 3 - Next add “Noise” live effect with this settings (Amount = 400; Color - unchecked)

Step 4 - Add “Motion Blur” live effect with this settings (Angle = 127; Distance = 5)

Step 5 - Add “Gaussian Blur” live effect (Blur radius = 3.3)

Step 6 - Add “Brightness/Contrast” live effect (brightness = -16; contrast = 100) to make object pure B/W. Later when we apply mask white areas will be our water drops. At this stage we can go back and adjust other live effects to change form and size of drops. Try to change motion blur settings to change form or gaussian blur to change size.

Step 7 - When you are happy with drops shapes add “Blur” live fx to smooth border between black and white area.

Step 8 - Flatten object Ctrl+Alt+Shift+Z. Select both this object and object below it (Shift+click in layers panel)

Step 9 - Go to and press Modify»Mask»Group as Mask in Fireworks menus. Now we masked our drops, next we going to add some effects to achieve water look.

Step 10 - Add “Bevel Boss” live effect with this settings (Bevel Width = 9.45, Bevel Height Scale = 45, Smoothness = 38). This will become drops highlight area. You can change them later. Change object blend mode to “Lighten”. The result will look more real if you examine light source in your image and adjust Lighting settings of filter to mach original light direction.

Step 11 - Clone object. Remove all effects. Add “Drop Shadow” live effect - (Width = 2; Opacity = 40; Softness = 3; Angle = opposite of your highlight settings)

Step 12 - are we done? Almost. We can delete the area where we don`t want drops (butterfly wings for example) with eraser tool or mask. Even make some perspective transform and bump up saturation - it is up to you. Here is my result.

Have questions? Always download source PNG files for the tutorial. There are hidden secrets in them ;-) Or use comments below! English is not my native language! I hope you point me to any errors I have. See you next time.

Here is another one of special effects tutorials. It will teach you how to achieve “Volume backlight” effect with Macromedia/Adobe Fireworks. In order to complete this tutorial you will need Macromedia Fireworks MX or above, but the same results can be accomplished with other advanced graphic software, such as Photoshop.
LEVEL: Beginner
WHAT YOU HAVE TO KNOW: Work with objects, Add live effects, Change blend modes
SOURCE PNG: Volume Light.png

Step 1 - Make new file (my is 400×400px), choose dark canvas color, thus we can see the light rays better.

Step 2 - Place your logo at the center of canvas (Tip: you can use “Align” panel for that)

Step 3 - Clone object / Edit » Clone or Ctrl+Shift+D

Step 4 - In Properties Panel » Go to Effects » Noise » Add Noise … with following settings: Amount=400; Color - unchecked

Step 5 - Add Blur » Gaussian Blur: Blur Radius = 2.3

Step 6 - Add Adjust Color » Brightness/Contrast: Brightness = 24; Contrast = 96

Step 7 - Add Blur » Zoom Blur …: Amount=100; Quality=100;
!NOTE! This is very CPU intensive effect. You may want to turn-off preview checkbox on bigger images.

Step 8 - Scale Object with pressing Alt key (for transformation from center of the object)

Step 9 - Change Blend mode to “Screen” and Send Backswords Ctrl+PageDn

Step 10 - Now you can make color of the logo darker and put some white “Glow” live effect

Step 11 (Optional) - To further enhance effect you can check color in the “Noise” live effect

Have questions? Always download source PNG files for the tutorial. There are hidden secrets in them ;-) Or use comments below! English is not my native language! I hope you point me to any errors I have.

Quick tutorial i wrote this morning. How to make blood and coffee stain. The idea came from question on Macromedia Fireworks forum by “runner_28″.You need Macromedia Fireworks MX 2004 and above to finish it. You can see final result here »
LEVEL: Beginner
WHAT YOU HAVE TO KNOW: Make vector objects, Add live effects,
SOURCE PNG: blood cofee stain.png - saved with Fireworks 8

Step 1 - Open image and add ellipse where you want the blood stain.

Step 2 - Change the shape to add some random splat look.

Step 3 - Change fill of object to contour. Make inner color ~70% transparent. Add “Inner Glow” live effect Color=#660000, Softness=15, Opacity=100%, Offset=0

Step 4 - Add “Noise” live effect Amount=22

Step 5 - Add “Gaussian Blur” live effect Blur radius=1.8

Step 6 - Add “Edges” live effect Edge Width=13, Margin=0, Feature Size=3, Edge mode=Lumpy

Step 7 - Add “Inner Bevel” live effect Smooth, Width=10, Contrast=50%, Softness=10, Button preset=Raised

Step 8 - Now the coffee cup stain. Make Ellipse. Fill it with appropriate color. I use contour fill here again. (don`t look at the blood stain in the figure below. I know it is different)

Step 9 - Make another ellipse and scale it down

Step10 - Select two ellipses and go to Modify » Combine Paths » Punch

Step 11 - Add “Edges” live effect Edge Width=10, Margin=0, Feature Size=11, Edge mode=Rough

Step12 - Add “Inner Glow” live effect Color=#A9782E, Width=2, Softness=3, Opacity=90%, Offset=0

Step 13 -Duplicate Stains, move them and lower the opacity to achieve better looking results

Have questions? Always download source PNG files for the tutorial. There are hidden secrets in them ;-) Or use comments below! English is not my native language! I hope you point me to any errors I have. See you next time.

Quick and easy technique to put believable rope in your compositions through Macromedia/Adobe Fireworks. In order to complete this tutorial, you will need Macromedia Fireworks MX or above.
LEVEL: Beginner
WHAT YOU HAVE TO KNOW: Make new documents, Work with Text and Paths, Add live effects, Change blend modes
SOURCE PNG: Rope.png

Step 1 - Make new file (my is 400×400px)

Step 2 - Make path with Pen tool (find Pen tool here). This will be our rope.

Step 3 - Grab Text tool (find Text tool here) and type some dots Tahoma 20px Crisp Anti-alias

Step 4- Make kerning (-25)

Step 5 - Attach text to path: Select both path and the text objects -Go to menu Text » Attach to path

Step 6- Change Fill to Linear gradient (#D1C098 - #E9E1CF) Texture “Grain” 40% and Stroke to 1px./soft #CDC7BC

Step 7- Add “Inner Bevel” live effect Edge - Smooth, Width=7, Contrast=70%, Softness=2, Angle=108, Button preset - Raised

Step 8- Add “Sharpen” and “Curves” live effects. See Figure below for Curves settings.

Step 9- We are ready! Now try to add shadow and further enhance composition. With Fireworks 8 you can change the shape of rope at any time. Remember to have fun and experiment. My main goal is to teach you powerful and useful techniques, which you can develop further to achieve different (in most cases better) results. Please put links to your compositions in comments below! Thanks for reading!

Have questions? Always download source PNG files for the tutorial. There are hidden secrets in them ;-) Or use comments below! English is not my native language! I hope you point me to any errors I have.

Next fast step-by-step tutorial - Resizable Pixel Map. Here we will use new feature in Fireworks 8 called “Convert Marquee to Path”. In order to finish this tutorial you will need Macromedia Fireworks 8. You can see my final result here »
LEVEL: Beginner
WHAT YOU HAVE TO KNOW: Change brightness and contrast of image, Magic wand selection, Change path attributes (fill)
SOURCE PNG: resizable-pixel-map.png

Step 1 - Find high contrast map picture. You can use Google image search or download my source image. Change Contrast to make good silhouette image like this. If you want to make detailed map try to find bigger image.

Step 2 - Choose Magic Wand Tool [W] and click somewhere on the continents. Go to Select » Select Similar from file menu (Select Similar can be accessed via context menu when working with any selection tool)

Step 3 - Go to Select » Convert Marquee to Path from file menu (or choose Convert to Path in Modify Marquee submenu in context menu when working with any selection tool). Tadaa - we have nice world silouette vector path!

Step 4 - Now it is time to make pixels. In Properties panel remove any strokes. Fill the path with appropriate color or gradient. Make edges hard. For Texture Name choose “Grid1″ , Amount of texture 100% and check Transparent

Step 5 - We are ready! For more “cool” minimalistic pixel effect make path much smaller. The good news here is that when resize path you don`t loose pixel look. Try to change the texture - you can achieve some great effects.

Have questions? Always download source PNG files for the tutorial. There are hidden secrets in them ;-) Or use comments below! English is not my native language! I hope you point me to any errors I have.

In this tutorial you will learn how to achieve “Old Photo” effect from regular image with Macromedia Fireworks MX 2004 and above. You can see my final result here »
LEVEL: Intermediate
WHAT YOU HAVE TO KNOW: Fireworks basics like add/remove live effects, clone objects, adjust curves
SOURCE PNG: old-photo-source.png

Step 1 - Let`s begin - Open image

Step 2 - Add “Noise” live effect with this settings (Amount = 4; Color - unchecked)

Step 3 - Next add “Hue/Saturation” live effect and adjust settings (Hue = 35; Saturation = 18; Lightness = 0; colorize - checked)

Step 4 - Add “Curves” live effect and adjust curves on RGB channel like on the figure below

Step 5 - Add “Alien Skin Edges” live effect (Edge Width = 12; Margin = 0; Feature size = 14; Edge Mode = Torn Paper; Transparent Fill = checked)

Step 6 - Add “Inner Glow” live effect with this settings (Width = 2; Opacity = 30%; Softness = 14; Offset = 0; Color = #4A4134)

Step 7 - Add “Drop Shadow” live effect (Width = 2; Opacity = 51; Softness = 3; Angle = 315)

Step 8 - Clone object (Ctrl+Shift+D), remove all live effects, add “Alien Skin Marble” live effect (Vein Size = 12; Vein Coverage = 15%; Vein Thickness = 1; Vein Roughness = 27)

Step 9 - Add “Hue/Saturation” live effect and adjust it like this (Hue = 44; Saturation = 53; Lightness = 14; colorize - checked), set object opacity to 50% and blend mode to multiply

Step 10 - Clone object (Ctrl+Shift+D) and remove all live effects. Set object blend mode to Screen and opacity to 30%

Step 11 - add “Alien Skin Marble” live effect (Vein Size = 13; Vein Coverage = 100%; Vein Thickness = 0; Vein Roughness = 6)

Step 12 - add “Brightness/Contrast” live effect (brightness = -100; contrast = 50)

Last Step - and I think the most important - experiment ;-)

I hope you find this tutorial useful. This is my first attempt to write tutorial for Fireworks, so any comments, questions or suggestions are welcome. English is not my native language! I hope you point me to any errors I have. Stay tuned next will be better ;-)

Update - now you can download source png and study ahead.

Third part of “Curves” tutorial. In today`s episode: Increase contrast, remove color cast, curves reference.
LEVEL: Beginner who wants to be a Pro ;-)
WHAT YOU HAVE TO KNOW: Add live effects, work with objects
REFERENCE: DPS Curves Reference

If you didn’t read first two parts, find them here » Basics and Shadows / highlights

First - quick look at contrast. Here is rather dull image. To increase contrast we must lighten bright areas and darken shadows.

Here are curves snapshot and result image. This is enough for the contrast.

Now for the color cast. Here is my example picture (facade of great building by Antonio Gaudi in Barcelona). Notice the green-yellow tint? With a little help from “Curves” filter we will return the balance to the image colors.

Add Curves live effect and go to green channel. Green color cast is most obvious in the dark area of the image, so our first step is to correct this. Make adjustments in green channel like in the illustration below:

OK. This is good! But let’s go further and reduce green in the highlights too. See the curves and result below:

Now it is time for Blues. Select Blue channel and boost dark blue area, as shown below.

Lest’s see Reds. They are OK, but here is example of what the result will be, if we boost dark red a little. Maybe you prefer that.

Are you confused with so many different curves shapes? Here is DPS Curves Reference file » download it and use it as a reference every time you need. This is Fireworks PNG source file.

“Curves” also can be used for making objects look like they are made from metal, but the net is full of tutorials on that matter. Example - below:

In this tutorial you will learn how to colorize black and white photo with Macromedia Fireworks MX 2004 and above. You can see my final result here »
LEVEL: Intermediate/Advanced
WHAT YOU HAVE TO KNOW: Clone objects, Change blend mode, Make complex selections
SOURCE PNG: colorize-bw-photo.png

Introduction - Have you seen those dull attempts to add color to B/W photo by putting some plain color spots and setting blend mode to “color”? I try to find better solution and this is the result. It is simple technique, but is requires more time to complete. It is better if you have tablet, but you can complete the tutorial with mouse as well.

Step 1 - Find color image with appropriate colors to reference from it. Google is right place to start. Open images.

Step 2 - Clone B/W image (Ctrl+Shift+D) and mask skin part. Like below. Name masked object - “skin mask”. (It is not goal of this tutorial to teach you how to create masks/selections. If you want to learn that, try great tutorials from Joyce Evans here or from Cbtcafe here)

Step 3 - Clone masked skin part and set blend mode to “Luminosity” and opacity to “~40%”. This step is necessary for producing more realistic results later. I will name that object “luma”.

Step 4 - Select brush tool and change it`s settings to opacity “~50%”, blend mode to “Tint”.

Step 5 - Careful select colors from color reference picture (hold down Alt while working with brush tool) and paint to B/W image (”skin mask”) with it.

Trick is to choose right appropriate color and paint small parts of image with it. Do not make big spots with same color. This add life to drawing. The brush we choose is soft and low opacity to make brush strokes unnoticeable, so paint bravely ;-)

Step 7 - Do the same thing with hair part

Step 8 - You can play with opacity, saturation or levels of “skin mask” object to achieve more vivid results, but be careful. Do not overdo it.

Have questions? Always download source PNG files for the tutorial. There are hidden secrets in them ;-) Or use comments below! English is not my native language! I hope you point me to any errors I have. See you next time.

Step 1 - make new file , dark canvas color so we can see the light and place your logo at the bottom

Step 2 - Duplicate logo and flatten it, so it becomes bitmap object
Step 3 - Select Smudge tool with pressure about 40-60 an start attentively draw fire flames

Step 4 - Continue to smudge with various pressure and size until you achieve something like this

Step 5 -go to effexts and add “Hue/Saturation…” Hue=40; Saturation=100; Lightness = -53

Step 6 - Duplicate flames and change effect » Hue=19; Saturation=94; Lightness=-39. Add effect glow (color=#DF0000; width=0; opacity=57%; Softness=19;Ofset=0) . Set blend mode to Screen

Step 7 - Duplicate again adjust curves like on the figure. Set blend mode to screen and opacity=91

Step 8 - Show real logo above and put some effects: inner glow (width=2; color=#FAD7A6; opacity=100%; Softness=9; Offset=0) and glow(width=0 color=#D49442; opacity=100%; Softness=12; Offset=0)

Step 9 - Put some dots, make copy of fire and put it above logo

Здравей! Тук нама нищо интересно още.