Adobe Fireworks is a powerful software program. It is used for website images. In this document, we provide tips for using Adobe Fireworks, beginning with rounding corners of images and continuing with resampling images.
This page contains tips for using Adobe Fireworks to create web graphics.
As a reminder, rounded corners enhance the appearance of images. There isn't an easy way to automatically add rounded corners. We will create a new rounded rectangle shape in Fireworks CS3 and then use Paste Inside to frame the image.
Get started. First find the image you want to put rounded corners around. Open it directly in Adobe Fireworks. Here's the image I will put rounded corners on.
Create new rounded rectangle. Click on the shape tool in the palette on the left. Select Rounded Rectangle. Now swipe the mouse from the top left corner of the image to the bottom right. A rounded rectangle will cover your picture. The rounded rectangle may be a different color than shown. The color doesn't matter here.
Select Bitmap and cut. In the Layers pane on the right, select the bitmap picture thumbnail. Blue bars will appear around your image. Select Edit -> Cut.
Paste Inside the rectangle. Now select the Rounded Rectangle layer. Go to Edit -> Paste Inside. Your image will now be contained in the Rounded Rectangle, giving it curved borders.
Adjust roundness. Click on the Rounded Rectangle icon in the Layers pane. Now open Window -> Auto Shape Properties. You will see the way to change how round the corners are.
Summary. We saw how you can apply rounded corners to images in Adobe Fireworks. Fireworks has excellent routines to make the corners look smooth. The finished images will not have any jaggies. Programs like Paint.NET do not have a good way to do this.
When resampling images in Adobe Fireworks CS3, we have four options to choose from: Bicubic, Bilinear, Soft and Nearest Neighbor. Here we compare file sizes and output quality of these choices as we resample a single image with different options in Fireworks CS3.
Examples. First, the term resampling means you are physically changing the number of pixels in your image, which is what we are doing here. Next, here is an 800 x 600 pixel image resized to 600 x 450 using Bicubic resampling.
Next, we see Bilinear resampling. This image is also 600 x 450 pixels, and is smaller in byte size. Detailed byte sizes are shown after the images.
Third, we see Soft resampling, which is the third option in the drop-down item in Fireworks or Photoshop. This image is larger in byte size than the previous.
Finally, we see Nearest Neighbor image resampling, which has the lowest quality and also the smaller byte size. This is not a reasonable option for most sites and images.
Here is the table containing the sizes. This table shows the dimensions, which are the same for the four images, and also the size in bytes after the images are converted to 64 adaptive colors and after maximum lossless PNG optimization is applied.
Bicubic
19.1 KB (19,621 bytes)
Bilinear
14.3 KB (14,657 bytes)
Soft
17.4 KB (17,898 bytes)
Nearest Neighbor
8.83 KB (9,052 bytes)
Summary. For the simple screenshot resized from 800 x 600 pixels, to 600 x 450 pixels, Nearest Neighbor resulted in the smallest file size, but had unacceptable quality. Bilinear resampling produced very good results and the file size was substantially smaller than Bicubic and Soft.
We saw tips for using Adobe Fireworks in a way that is efficient and leads to quality images. Though these tips just scratch the surface of Adobe Fireworks, they have proven useful to me—and may be so to you as well.