Photoshop & Fireworks Helps & Hints Visual Design for the Web March 2007

Disclaimer Like the CSS lesson, this will be a set of helps & hints—tricks & tips. These are designed to save time as well as provide a visual design technique A whole class could be given on either of these imaging software packages We assume familiarity with the basics of one or the other software package

1. Transparent GIFs Images generally are not transparent, that is, you can not see through them. The GIF format does allow for this –JPEG does not GIF transparency is limited to 1 bit masking Photoshop can actually handle 8 bit masking Larger masking number means rounder edges in the transparency Drop shadows, glows, etc. can look horrible in a transparent image

1. Transparent GIFs Most web designers know you can “fake” transparency by making the background color of your image the same color as the web site background color –This only works for solid colors A true transparent GIF will allow, say, a text image to overlay background tiles on a web page, creating a collage.

1. Transparent GIFs Both Photoshop & Fireworks allow one to create transparent GIFs The trick is to create a transparent background/canvas –For instance, in Fireworks, you Modify Menu >> Canvas >> Canvas Color will bring up a dialog box; you then click the “transparent” button. Put your text or other image on the next layer up

2. Filler Images Tabs are a useful and prominent navigation feature on many web sites Web designers frequently use images to indicate each and every tab in the navigation bar But there is another way to do this: –See:

2. Filler Images At the AAAS web site, you will actually find this image between the tabs: Note the following: –I created the red background, so you can see the image better –The image is just big enough to produce the curved blue tab shape, with the white space in between

2. Filler Images Using the layers features of either Photoshop or Fireworks, this type of image is easy to do –Use a white background –Create the right blue section on one layer –Copy and flip the right section so that it becomes the left side on the next layer up –You will want to keep the space between the two images small: ~5 pixels

3. Fireworks Quick Export Integration of software packages has many advantages –One specific advantage is the ability to import and export files between the integrated packages –Microsoft Office Suite is one such example Create a spreadsheet in Excel and quickly import that into Word

3. Fireworks Quick Export The Adobe/Macromedia products have a similar level of integration Dreamweaver is integrated with Fireworks, Flash, Freehand and Director, not to mention the latest version integrate with Adobe products If you have an image in Fireworks, you can click the “Quick Export” button, located on the upper right, to quickly export image as web ready into Dreamweaver

3. Fireworks Quick Export Another advantage of this is the ability to update an image in Fireworks and then quickly see the effects in Dreamweaver Photoshop can do this as well –Later versions –Because Adobe bought Macromedia

4. Web Safe Colors Both Photoshop and Fireworks provide methods for creating images composed of web safe colors. In Fireworks, you find this in the Optimize pane (usually on right side of screen) –Click the Settings drop down menu, and then choose the web safe system you wish E.g. “GIF WebSnap 256” Now you only work with web safe colors However, most folks now have monitors that handle the millions of colors now available with photographs

5. Batch Processing This is a powerful tool/process Both Photoshop & Fireworks support it I will forgo the specifics here, because it is too long for each piece of software However, let me tell you some of the advantages of using Batch Processing

5. Batch Processing Advantages: –Can convert file types of hundreds of images at one E.g. tiffs to jpegs –Can resize all the images at once Basically, you can create quick thumbnails –The files can be from different folders or from the same folder –Colors can also be changes via Batch Processing E.g. You can create web safe images in batch –You can rename files using pre/suffixes Quick way to have thumbnail file names

Summary Photoshop & Fireworks are powerful tools However, using either/both for simple things can also produce great visual effects on your web site Sometimes, creativity is more important than the perfect image (e.g. AAAS)