Crayon Effect in Fireworks

Step 1

Paste an image on the canvas.

Step 2

Click on Filters>Noise>Add Noise.

Step 3

The Add Noise window is displayed as below. Give the Noise Amount value as 25. You can try different values, tick the checkbox Color option, tick the Preview option so that you can view the live effects.

Here's the final image!

Read more »

make cool frame in fireworks

Open a new page of 500x500 canvas size. Paste an image on the canvas.Select the image and click on Filters>Alien Skin Splat LE>Edges The Alien Skin window will be displayed. Select an option from Edge Mode. Play around with the other settings and view the result. If you need a transparent fill for the image, check the option Transparent Fill, which will deselect the color option and the image has a white background. Try out the various settings for different edges.

	Rough Edged Frame Settings: Edge Mode - Rough, Edge Width - 38, Margin - 0, Feature size - 5, and Random Seed - 10. Adjust the Edge Width, Margin and FeatureSize sliders
	Dot Edged Frame Settings: Edge Mode - Halftone dots, adjust the Edge Width, Margin and Feature Size sliders. The values used here are: Edge Width - 55, Margin - 0, Feature size - 71, Direction - 90 and Random Seed - 20.
	Line Edged Frame Settings: Edge Mode - Halftone Lines, Edge Width - 42, Margin - 0, Feature size - 63, Direction - 317. Adjust the Edge Width, Margin andFeature Size .
	Lumpy Edged Frame Settings: Edge Mode - Lumpy, Edge Width - 29, Margin - 0, Feature size - 13, and Random Seed - 20. Adjust the edge width, margin and feature according to your choice.
	Line Edged Frame Settings: Adjust the Edge Width, Margin and Feature Size sliders. Edge Width - 33, Margin - 0, Feature size - 40, Direction - 302 and Random Seed - 20.s
	Ripped Edge Frame Settings: Edge Mode - Torn Paper, Edge Width - 15, Margin - 3, Feature Size - 8, Random Seed - 2

Read more »

Extract a part of an image with Adobe Fireworks CS3 or below

METHOD 1: MAGIC WAND TOOL

In this method you are going to feather an image using the Magic Wand Tool. This method is helpful when the image background is almost consistent and the part needed stands out. In the below example the background color is black so we easily seperate the picture of the girl from it. Basically we will remove the unwanted parts of the image with the magic wand tool and then smooth out the jagged finish with the eraser tool. This cool effect makes your pictures stand out and look really professional.

• Open a new Fireworks file and go to File >> Import (Ctrl+R) the image you would like to place in the design. Our example is shown below:



• Select the background black area that you would like to delete using the Magic Wand tool  and adjust the Tolerance level as 9 andEdge as Anti-alias. Tolerance represents the tonal range of colors that are select when you click a pixel with the magic wand tool. The Tolerance level is displayed in the Properties Inspector (Window >> Properties). After selecting the area satisfactorily, delete it. See the illustration below that will show how to set the tolerance level:



• Once you have deleted the unwanted area you should get an image similar to the one shown below, the edges will be jagged and uneven.



• Now we need to smooth the edges using the Eraser Tool . Use the round eraser with some opacity (e.g. 50) and edge softness (e.g.10). The image above shows how the edges are smoothened with the eraser tool and the final smooth edges image is shown below.

See how we have used this image in our CSS website design tutorial.

Handy Tips:

• Clean the image at a higher resolution than you need. This will ensure that the effect looks sharp when you reduce its size.
• Always save your neatly extracted images for future use or reference.

METHOD 2: CONVERT PATH TO MARQUEE TECHNIQUE

In this method you are going to learn how to feather an image using theConvert Path to Marquee method. The steps are given below:

• Step 1: In Fireworks, Import (Ctrl+R) an image you would like to edit. Our example is shown below:



• Step 2: Using Pen Tool  select/draw the particular object that you like to edit. In the above image we are going to edit the family. See the illustration below that will show how the family is selected using the pen tool:



• Step 3: Click on the path, then go to Modify >> Convert Path to Marquee and select the Edge as Anti-alias. The marquee will look as below:



• Step 4: Once you have drawn/selected the area, check if the selection is what you want deleted. If not, that is, the selected area is what you would like to keep, then right click the area, from the list select Modify Marquee >> Select Inverse (Ctrl+Shift+I). Now delete the selected area. The image will look as below:

METHOD 3: LASSO TOOL TECHNIQUE

Let us see another method of image extraction: using the Lasso Tool. Follow the steps given below:

• Step 1: In your Fireworks PNG file, ready the original image you would like to edit. Our example is shown below:



• Step 2: Select the area that you would like to feather using one or more of the Bitmap Tools (the 4 shown below and the yellow magic wand below the marquee tool). The Lasso tool and the magic wand (selects one colored section it is clicked on) are very useful for fine tuning your outline.



Note: Keep the shift button pressed if you want to do multiple selections within the image and keep the Alt button pressed if you want to subtract the selections within the image.
• Step 3: Once you have drawn/selected the feather area, check if the selection is what you want deleted. If not, that is, the selected area is what you would like to keep, then right click the area, from the list selectModify Marquee >> Select Inverse (Ctrl+Shift+I).
• Step 4: Now you are ready to apply the feather. Right click on the selection once again, and from the pop-up list select Modify Marquee >> Feather. Give the feather radius in pixels (less for sharper feather and more for increased fading). Take a look at the screen-shot below to see this step:



• Step 5: Now click delete to remove the unwanted (selected) area and your remaining required picture will be feathered nicely.

  

Handy Tips:

• For a sharper finish give a feather radius 5 and click delete twice.
• For extra fade (useful in collages) try a feather radius 30.

Read more »

Animated Gifs

Step 1: The first step is to design your animation. Decide how you would like your animation and place each object in a different frame. Let me explain that. In the template animation seen on top you will notice that first one template appears then the next and then the next. So what I do, is place each template image in a different frame. I place template 1 in a frame called Template1, template 2 in a Frame called Frame 2 etc. etc. Open the Frames panel from Windows/Frames and start inserting your images on different frames. A screenshot of the different frames is shown below.

You can now preview your animation by using the play button found on the bottom left side of the screen. You will find that the animation is quite fast. You can change this by double-clicking on the default value '7' near the frame name. You can change this to 100 or a higher number suitable for the animation (100 is one sec).

Step 3: The last step is to optimize and export the image. Open the Optimize panel and choose Animated Gif from the drop down options. Next Export the animated gif by clicking File/Export. Export the image to the appropriate folder. Open Internet Explorer and browse to find the image you have exported. The animation should work fine.
You have successfully created an animated gif. Congratulations!

Read more »

Designing Swap Images in Fireworks

Step 1
Create the following layers.
structure - The common elements for the page are put in this layer.
links - This layer consists of the links. In this tutorial the rollover buttons i.e. image 1, image 2 and image 3 are placed in this layer. (position it exactly the way you want it.)
rollovers - This is a duplicate copy of the links layer with the button and text color changed for the rollover effect.
swap - The first swap image is placed in this layer. (position it in the exact place)
Step 2
Goto the Frames window, you can see a single frame named 'Frame 1'. Select this and drag the mouse to 'Duplicate Frame ' at the bottom of the panel. A duplicated 'Frame 2' is created.

Step 3

Select 'Frame 2', you'll notice that it has the similar contents of frame1. Make sure you have selected the swap layer and you are in frame 2, now you have to delete only the image and paste in the second image. Position it in the same place as the previous image, do not drag and position the image as it might not be the exact position, instead, give the same x and y position (in the properties window) of the first image.

Step 4

Repeat Step 3. (Duplicate the frames and insert the images) Finally there has to be 4 frames. In this tutorial 4 swap images were used, a default image will be displayed when the browser opens and when you rollover the three links, three different swap images will be displayed.

Step 5

Now for the rollover effect. Select 'Frame 1', goto layers panel, close the eye for 'rollover' layer and the links layer should have the eye open. Next select 'Frame 2', goto layers panel, close the eye for 'links' layer and the rollover layer should have the eye open.

Step 6

The next step is to slice up the images as seen in the image below. Slice the images and name it appropriately for easy reference.

Step 7

Right click on the first rollover slice (Image 1), from the popup menu select 'Add Simple Rollover Behavior' as in the image below. Repeat this step for the next two rollovers buttons. Now we've finished with the rollovers.

Step 8

The next step is to link the swap images. Go back to the first rollover slice, click on it, you will see a small circle in the center of the slice (see in the image below), move the mouse pointer over it and you will notice a hand icon, click on it, the icon changes to a folded fist and a blue line appears (as seen in the image below, circled in red), drag this line to the swap image slice. What you're doing now is, linking the rollover to the swap image. The Swap Image window opens as seen in the image below, select the frame which has the image you want to link to and click on OK. Repeat these steps for the next two rollovers. In this tutorial, the rollover 'Image 1' is linked to Frame 2, 'Image 2' -> Frame 3 and 'Image 3' -> Frame 4.

Step 9
Now, in the layers panel remove the eye in the web layer and preview the file.

Step 10

The last step is to export the entire file. Fireworks will automatically convert the swaps to javascript and html. You don't have do any programming, its automatically done for you when you export the file. This is why you'll love Fireworks. You just need to focus on design and Fireworks takes care of all the boring programming for you. Sorry I got carried away with the wonders of Fireworks. Ok, when you export the file see that you give settings as in the screen shot below.

Read more »

Fireworks Patterns

Step 1

Create a pattern using the fireworks tools.

Step 2

Slice the pattern and save it as a gif or jpeg.

Step 3

Open a new canvas in fireworks. Draw a rectangle to which you wish to apply the pattern which you created.

Step 4

Go to the Properties at the bottom of the page and click on Fill Category>Pattern>Other... as you see in the image on the right. Select the pattern which you created. The rectangle gets filled with this pattern.

Read more »

Create Border Styles in Fireworks

Step 1

With the brush tool selected click on the rectangle shape. Goto the properties and select the stroke category and check out the various other attributes such as fill category, texture, size of brush, etc. As I am creating borders I have given the fill color as white.

Step 2

Draw a rectangle on the canvas. The properties for the vector will also be displayed. Now you can give some effects such as drop-shadow, glow, etc. to the rectangle.

Step 3

Now to save it as a style, scale the vector shape to 100 px 100 px. (with the vector selected) Goto the Styles Panel, if the Styles Panel is not visible, click on Window>Styles. Click on the styles drop-down menu and select New Style. Enter a name for the style and check the attributes which you like to save.

Step 4

You can also export the style and save it on your machine as a .stl file. To do this, select the style you created (Shift-click to select multiple styles) and click on Export Styles, enter a name and location. Click Save.

Step 5

To import styles into the styles panel choose Import Styles select a style or a styles document to import.

Read more »