---------------------
---------------------
---------------------
---------------------
---------------------
Art 444 Lecture Notes
Creating Graphic Tables with PhotoshopTo create complex graphic layouts or interactive graphic-based navigation systems you will need to create a series of "sliced" images that are cut apart from a single image into individual images in order to reassemble them inside an HTML table. This slicing technique you to insert rollover or animated graphics into a larger graphic.
We will use Photoshop to create our series of sliced images.
Below is an example of a graphic table that was created with Photoshop. The interactive functions were created with Dreamweaver. Rollover the graphic to see the Image Swaps in action.
 |
 |
 |
Note: It is important to understand the concept of HTML Tables before you begin this exercise.
Creating a sliced image with Photoshop:
First, you will need to create a graphic in Photoshop to slice (Illustrator users please read note below*). If you are creating a navigation bar for the top of the page with multiple linked areas, make the entire graphic no longer than 750 pixels wide (targeted for users with 800 x 600 monitor resolutions). Try to keep the graphic no taller than 100 pixels. For lefthand navigation, it is suggested that you keep the width of the entire graphic within 150 pixels for the 800 x 600 target browser. Keep all text in it's editable state on separate layers so you'll be able to make easy editing changes later. To change the color of text for a rollover state simply duplicate the layer, select the text and change it's color. This way the text will be perfectly aligned during a rollover. Applying Layer Effects in PS is a way to add interesting rollover interactivity. Turn the effects on/off as you are creating slices for image swaps.
* If you are working in Illustrator make sure you are in RGB mode (File> Document Color Mode). When you are ready to bring the graphic into Photoshop, go to File> Export and select the Photoshop (PSD) option from the format pull-down menu. Click 'export'. A window will be presented with several options. Select the color model: RGB mode, resolution: 72 dpi, options: anti-alias and write to layers. Make sure you've named your file differently from your original Illustrator file to avoid overwrites. Click OK and Illustrator will write a layered Photoshop file.
Set your Guides in PS with the "Snap to Guide Option" selected. You will use these to later create slices with the Slice Tool. Try to place your guides in a manner that creates "clean" tables, otherwise the HTML table that Photoshop generates may not fit the images back together properly. Also remember that any changes to your graphic must happen BETWEEN the guides or your rollover graphic will be clipped. For your first set of slices, only show layers for the off or null state for your rollover graphic.
Using the Slice tool (the little knife in the toolbar) and click and drag from guide to guide to create a slice or use the Slice from Guides option. Each slice will be numbered as you go. Slice your entire graphic in this manner making sure you slice one row at a time.
After creating the slices select Save for web... from the File Menu and optimize each slice individually (use the hand to move to part of the graphic displaying outside of the optimize window). Click 'Save' and select the HTML and images in the Format pull-down menu. Click 'Save' again. Photoshop will now slice the graphic into separate images placing them in a folder called "images" and will also create a HTML table that reconstructs the individual images into a seamless graphic in a file named with your filename plus the .html extension. The file can be edited in Dreamweaver (drag & drop this file onto Dreamweaver rather than double clicking otherwise it will open in the browser).
Creating rollover states from a sliced image with Photoshop:
Now you are ready to Optimize your second set (the 'on' or rollover states). Note that it is best to save your null or off set of rollover images first with the HTML file. On the second set (the 'on' rollover state) save images only and change the name to image_ON to avoid copying over the first set of images now in your image folder. Use the slice option (with the slice selection tool) to select Slice Type to 'No image' option for slices that do not have a rollover state before you optimize in Save for web. Follow the steps to create an Image Swap with Dreamweaver's Behavior functions to make your sliced graphic interactive.