Creating Web Images Using Adobe Fireworks

Fireworks is part of the Adobe Creative Suite (note: not included in all versions). While Photoshop is the industry standard for editing photographs for print, Fireworks is designed just for the web and produces files optimized for faster download times.

Videos on this page:

youtube controls tip

TIP: Having a hard time seeing the details? We recommend turning on the highest video quality possible and making the video full screen. Both of these controls are visible at the bottom right corner of the player after the video has been started.

 


Fireworks Basics: Make an Image Ready for the Web

Follow the process of optimizing a large photo for web use and exporting it from start to finish.

Topics covered:
0:00 intro
0:22 why use Fireworks? (file size compression better than Photoshop)
0:48 image dimensions (pixels) vs. magnification
1:37 how to change the dimensions of the image
1:50 resolution/dpi (always use 72 dpi for web)
2:30 changing the image size (good general size is 375x250)
3:00 saving vs. exporting (save original at full size, export smaller web size)
3:25 using the Image Preview export
3:38 optimizing file sizes for best performance (try to keep under 100k for most images)
4:00 adjusting the quality to keep file sizes small
4:55 exporting and file name tips (no spaces in filenames!)

 


Cropping & Resizing Images with Fireworks

Learn how to take a large photo, crop out what you don't want and then resize for web use.

Topics covered:
0:00 intro
0:40 actual pixel dimensions vs on-screen magnification
1:18 how to crop out unwanted parts of the photo using the marquee tool
2:17 making the image smaller using Image Size
2:40 make sure your proportions are constrained to avoid distortion
3:00 choosing your dimension sizes
3:42 change view to 100% magnification to see actual size on screen
3:58 use Canvas Size tool to crop to exact dimensions
4:08 difference between Canvas Size (crops photo) Image Size (resizes photo)
4:48 using Canvas Size anchors to choose what side of image gets cropped


 


Fireworks Image Adjustment Controls

Learn how to adjust the appearance of your image using filters.

Topics covered:
0:00 intro
0:20 Fireworks vs. Photoshop
0:38 selecting the image
1:05 using Auto Levels color correction
1:50 adjusting Brightness manually
2:28 adjusting Contrast manually
3:00 adjusting Hue manually
4:00 adjusting Saturation manually
4:35 adjusting Lightness levels manually
4:50 using Sharpen to enhance contrast along edges
5:30 when to avoid using the Sharpen tool (people's faces, very busy photos)