with Fireworks 2004
Photographs (and other JPG images) often appear on webpages in a simple rectangular format. There are a variety of effects that can be added with a bitmap editor, such as Fireworks 2004, that will add pizzaz to otherwise ordinary graphics. This tutorial examines a number of such effects, including drop shadow, inner bevel, border, feathered edge, torn paper edge, and cutout. First, however, one needs to ensure that the background color of the webpage has been noted and that the photo is resized to the dimensions needed for the webpage.
Determining the Webpage Background Color
In Dreamweaver 2004, determine the background color of the page by clicking the Page Properties button.
Identify the 6-digit hexadecimal number that identifies the page color and write it down.
In Fireworks 2004, open the photo file by clicking File and then Open in the menu at the top of the screen, and selecting the file from its folder. Note its current dimensions, which are found at the lower right of the window. Resizing should always be to a smaller size, never to a larger size than the original (otherwise a noticeable deterioration in picture quality will result. If the first number is larger than 300 pixels, then you probably need to resize the photo.
To resize, right-click the photo (or click Modify in the menu at the top of the screen), and then select Transform and Numeric Transform.
In the Numeric Transform window, select Resize.
Enter a number, perhaps between 200 and 300, for the width in pixels. Note that height will adjust automatically. Click OK.
The picture may seem very small. It actually isn't. You just need to set the view at the bottom right to 100% (or just press Ctrl+1).
Finally, with the Select Tool, click anywhere on the checkerboard area that surrounds the picture to change the Properties window to the Canvas property options.
In the Properties window, click on the Fit Canvas button to make the canvas the same size as the picture. (You should no longer see any checkerboard pattern around the picture.) Now you can save the resized photo to your graphics folder by clicking File and the Export from the menu at the top of the screen, or you can add special effects to the photo, as detailed below and then export.
Before adding a drop shadow, you need to expand the canvas slightly to allow for the shadow. The canvas must also be set to the background color of your webpage. To expand the canvas, click anywhere outside the photo (in the gray area) with the Select Tool from the Tool Palette to change the options in the Properties window to those pertaining to the canvas.
In the Properties window, click the Canvas Size button, and then in the popup window increase both width and height by perhaps 100 pixels beyond their current values. When you click OK, you should see a checkered area around your picture.
Using the Select Tool, click on the checkered area around your picture to see the Canvas options in the Properties window. To set the Canvas color to match that of your webpage, click the box with the red diagonal line in the Properties window. This will bring up the color palette. Just enter the hexadecimal number for the color of your webpage and press Enter. You should now see an area around your picture that matches the color of your webpage.
To add a drop shadow, click the resized photo with the Select Tool from the Tool Palette to change the options in the Properties window to those pertaining to the graphic.
In the Properties window, click on the + sign, just to the right of the word Effects, and select Shadow and Glow and then click Drop Shadow from the popup menu. (The other Glow and Shadow options also provide some interesting effects.)
In the parameters window that pops up (which can also be accessed later by clicking the blue i next to the word Drop Shadow), set both the shadow size and the shadow fade to perhaps 10.
Now we are ready to export the modified photo as a JPG graphic for display on a webpage. To export, use the Export Area Tool in the Select section of the Tool Palette (if the Crop Tool is displayed, you may need to click and hold to get the popup menu which gives you the Export Area Tool). Now click and drag a dotted box around the portion of the graphic that you want to save. (You can get fairly close on the sides that do not have a shadow, but avoid coming too close to the drop shadow. You can resize the dotted box dragging its handles. Don't worry about the blue box, if one is visible.)
Now double-click inside the dotted box and the export dialog window will appear. Just click the Export button in the lower righthand corner. In the next window, in the dropdown option next to Save in (at the top), select your network drive (H: drive). Then just below that click on your personal_website folder, and then on your graphics folder (if that is where you are saving your graphics files, or down in your website project folder). Now under File name: give it a descriptive name (lower case, no spaces, and retaining the .jpg at the end). Make sure the format is JPEG and that quality is set to between 85 and 90. Click Save.
Back in Dreamweaver, load the photo with drop shadow into your webpage just like you would any picture.
To add an inner bevel, click the resized photo with the Select Tool from the Tool Palette to change the options in the Properties window to those pertaining to the graphic.
In the Properties window, click on the + sign, just to the right of the word Effects, and select Bevel and Emboss and then click Inner Bevel from the popup menu. (The other options also provide some interesting effects.)
In the parameters window that pops up (which can also be accessed later by clicking the blue i next to the word Drop Shadow), you can choose the type of bevel (e.g., flat, smooth, slope), the height of the bevel (e.g., 15), the intensity of the bevel (e.g., 90%), and a variety of other parameters.
Now you can save the modified photo to your graphics folder by clicking File and the Export from the menu at the top of the screen, or you can add additional special effects (e.g., a drop shadow) to the photo, as detailed elsewhere in this tutorial.
Back in Dreamweaver, load the photo with the inner bevel into your webpage just like you would any picture.
To add a border around the photo, click the resized photo with the Select Tool from the Tool Palette to change the options in the Properties window to those pertaining to the graphic.
In the Properties window, click the Canvas Size button, and then in the popup window increase both width and height by perhaps 100 pixels beyond their current values. When you click OK, you should see a checkered area around your picture.
Using the Select Tool, click on the checkered area around your picture to see the Canvas options in the Properties window. To set the Canvas color to match that of your webpage, click the box with the red diagonal line in the Properties window. This will bring up the color palette. Just enter the hexadecimal number for the color of your webpage and press Enter. You should now see an area around your picture that matches the color of your webpage.
To add a border, click the resized photo with the Select Tool from the Tool Palette to change the options in the Properties window to those pertaining to the graphic.
In the Properties window, click on the + sign, just to the right of the word Effects, and select Bevel and Emboss and then click Outer Bevel from the popup menu.
In the parameters window that pops up (which can also be accessed later by clicking the blue i next to the word Drop Shadow), set the type to Ruffle (the other options are interesting, as well), width to perhaps 15, and choose an appropriate color.
To size the canvas to the framed picture, click on the colored canvas beyond the frame to set the Properties area to the canvas attributes. Now click the Fit Canvas button. The canvas should automatically resize to the picture frame with only the corner showing the canvas color.
Now we are ready to export the modified photo as a JPG graphic for display on a webpage. From the File menu, click Export. In the next window, in the dropdown option next to Save in (at the top), select your network drive (H: drive). Then just below that click on your personal_website folder, and then on your graphics folder (if that is where you are saving your graphics files, or down in your website project folder). Now under File name: give it a descriptive name (lower case, no spaces, and retaining the .jpg at the end). Make sure the format is JPEG and that quality is set to between 85 and 90. Click Save.
Back in Dreamweaver, load the framed photo into your webpage just like you would any picture.
To add a feathered edge to a photo, we will use the Oval Selection Tool from the Tool Palette to select a portion of the picture. (If the Rectangular Selection Tool is displayed, you may need to click and hold until a popup menu appears that will allow you to activate the Oval Selection Tool.)
Down in the Properties Window, set Edge to Feather and the feathered width to perhaps 20 pixels.
Now use the Oval Selection Tool to select the portion of the photo that you wish to retain. Do this by clicking and dragging. A crawling marquee will appear around your selection. (If you did not select exactly what you wanted on the first try, do not try to move the marquee. Click outside the marquee to make it disappear, and then click and drag again.)
In the menu at the top of the screen, click on Select, and then Select Inverse. Now press Delete. You should see just the feathered oval on the canvas. If your canvas color is the same as your webpage, you can proceed directly to the Export Area section. If, on the other hand, you see the checkerboard background outside the oval, click on Select and then Deselect in the menu at the top of the screen. Now with the Select Tool from the Tool Palette click anywhere on the checkerboard area to change the Properties window to the canvas options.
To set the Canvas color to match that of your webpage, click the box with the red diagonal line in the Properties window. This will bring up the color palette. Just enter the hexadecimal number for the color of your webpage and press Enter. You should now see that the area around your feathered oval matches the color of your webpage.
Now we are ready to export the modified photo as a JPG graphic for display on a webpage. To export, use the Export Area Tool in the Select section of the Tool Palette (if the Crop Tool is displayed, you may need to click and hold to get the popup menu which gives you the Export Area Tool). Now click and drag a dotted box around the feathered oval. (Be careful about getting too close to the feathered edge. You can resize the dotted box dragging its handles. Don't worry about the blue box, if one is visible.)
Now double-click inside the dotted box and the export dialog window will appear. Just click the Export button in the lower righthand corner. In the next window, in the dropdown option next to Save in (at the top), select your network drive (H: drive). Then just below that click on your personal_website folder, and then on your graphics folder (if that is where you are saving your graphics files, or down in your website project folder). Now under File name: give it a descriptive name (lower case, no spaces, and retaining the .jpg at the end). Make sure the format is JPEG and that quality is set to between 85 and 90. Click Save.
Back in Dreamweaver, load the feathered photo into your webpage just like you would any picture.
Before adding a torn paper edge, it is a good idea to expand the canvas slightly to allow for the effect (particularly if you will add a drop shadow afterwards). The canvas must also be set to the background color of your webpage. To expand the canvas, click anywhere outside the photo (in the gray area) with the Select Tool from the Tool Palette to change the options in the Properties window to those pertaining to the canvas.
In the Properties window, click the Canvas Size button, and then in the popup window increase both width and height by perhaps 100 pixels beyond their current values. When you click OK, you should see a checkered area around your picture.
Using the Select Tool, click on the checkered area around your picture to see the Canvas options in the Properties window. To set the Canvas color to match that of your webpage, click the box with the red diagonal line in the Properties window. This will bring up the color palette. Just enter the hexadecimal number for the color of your webpage and press Enter. You should now see an area around your picture that matches the color of your webpage.
To add a torn paper edge, click the resized photo with the Select Tool from the Tool Palette to change the options in the Properties window to those pertaining to the graphic.
In the Properties window, click on the + sign, just to the right of the word Effects, and select Alien Skin Splat LE and then click Edges... from the popup menu.
In the parameters window that pops up (which can also be accessed later by clicking the blue i next to the word Edges), set the Edge Mode to Torn Paper and be sure that Transparent Fill is checked. If you want to see other torn paper options, click the Random Seed button until you find one that you like, and then click OK.
If you would also like to add a drop shadow, now is the time to do it. To export the modified photo as a JPG graphic for display on a webpage, use the Export Area Tool in the Select section of the Tool Palette (if the Crop Tool is displayed, you may need to click and hold to get the popup menu which gives you the Export Area Tool). Now click and drag a dotted box around the portion of the graphic that you want to save. (You can get fairly close on the sides that do not have a shadow, but avoid coming too close to the drop shadow if you have one. You can resize the dotted box dragging its handles. Don't worry about the blue box, if one is visible.)
Now double-click inside the dotted box and the export dialog window will appear. Just click the Export button in the lower righthand corner. In the next window, in the dropdown option next to Save in (at the top), select your network drive (H: drive). Then just below that click on your personal_website folder, and then on your graphics folder (if that is where you are saving your graphics files, or down in your website project folder). Now under File name: give it a descriptive name (lower case, no spaces, and retaining the .jpg at the end). Make sure the format is JPEG and that quality is set to between 85 and 90. Click Save.
Back in Dreamweaver, load the photo with torn paper edge into your webpage just like you would any picture.
To make a cutout from a photo, we will use the Lasso Tool from the Tool Palette to select the portion of the picture that you will retain. (If necessary, adjust the view % at the bottom right of the picture, so that all of the portion that you will retain is visible. Alternatively, you may want to resize the photo to its final size before making the cutout, although it is often easier to make a nice edge on the cutout if you do the resizing afterwards.)
Down in the Properties Window, set Edge to Feather and the feathered width to perhaps 5 pixels.
Now use the Lasso Tool to select the portion of the photo that you wish to retain. Do this by clicking and dragging around the periphery, like you would use a pencil to outline that area. (You should cut in a little bit into the selection.) A crawling marquee will appear around your selection. (If you did not select exactly what you wanted on the first try, do not try to move the marquee. Click outside the marquee to make it disappear, and then click and drag again. Alternatively, you can hold down the Alt key while using the Lasso Tool to remove areas from the selection, and the Shift key to add areas. But it takes a bit of practice to use this effectively.)
In the menu at the top of the screen, click on Select, and then Select Inverse. Now press Delete. You should see just the feathered oval on the canvas. If your canvas color is the same as your webpage, you can proceed directly to the Export Area section. If, on the other hand, you see the checkerboard background outside the oval, click on Select and then Deselect in the menu at the top of the screen. Now with the Select Tool from the Tool Palette click anywhere on the checkerboard area to change the Properties window to the canvas options.
To set the Canvas color to match that of your webpage, click the box with the red diagonal line in the Properties window. This will bring up the color palette. Just enter the hexadecimal number for the color of your webpage and press Enter. You should now see that the area around your feathered oval matches the color of your webpage.
Now we are ready to export the modified photo as a JPG graphic for display on a webpage. To export, use the Export Area Tool in the Select section of the Tool Palette (if the Crop Tool is displayed, you may need to click and hold to get the popup menu which gives you the Export Area Tool). Now click and drag a dotted box around the feathered oval. (Be careful about getting too close to the feathered edge. You can resize the dotted box dragging its handles. Don't worry about the blue box, if one is visible.)
Now double-click inside the dotted box and the export dialog window will appear. Just click the Export button in the lower righthand corner. In the next window, in the dropdown option next to Save in (at the top), select your network drive (H: drive). Then just below that click on your personal_website folder, and then on your graphics folder (if that is where you are saving your graphics files, or down in your website project folder). Now under File name: give it a descriptive name (lower case, no spaces, and retaining the .jpg at the end). Make sure the format is JPEG and that quality is set to between 85 and 90. Click Save.
Back in Dreamweaver, load the cutout photo into your webpage just like you would any picture.
© 2004 by John Wesley Taylor V