Next, we use the Frames palette to specify the images that will be swapped on rollover. After you have drawn out the slices, assigned URLs, and made other edits to their individual properties, it is time to make frames in preparation for image swapping. interesting namesįor these slices that don't exactly make it easy to make modifications later. This will very likely make the HTML table code and JavaScript more legible. Also consider turning off the Auto-Name Slices option and entering your own name. You can also enter any text you like for the "alt" attribute of the image tag. The slicing part is done by a front-end developer where he slice up the design to. The Object palette is also where you will assign what kind of image the piece will be, GIF or JPEG, and what quality you will use (the example has a custom setting of 7-bit, adaptive palette-sorry, but I don't hold much stock in the whole "web palette" thing). In simple words slicing is to publish your PSD designs using HTML and CSS. Slices that are not buttons, such as the screen and title bar in this example, do not need to have URLs assigned to them.įigure 3. The Objects palette is where you need to type in the URLs for each button. When you draw out a slice with the Slice tool it shows up on the Web Layer in the Layers palette and the Object palette displays the editable options for the slice. Figure 3 shows the Object palette for a slice object. You can see the final results of the example for this tutorial at Eyeland. The selected slice object (the top Portfolio button in Figure 2) is outlined in blue (although this may be adjusted The slice objects are transparent green boxes. The green lines are the guidelines, and the red lines indicate how Fireworks will slice or cut up the overall image according to the current slice object. Once you lay down a series of guidelines, it becomes very easy to generate a series of precisely positioned slices. Using guidelines helps to ensure consistency. If you eyeball your slices, the pieces will likely end up uneven and Fireworks will be forced to create a bunch of unnecessary It helps to start by laying down some guidelines. In Fireworks 2, you define how an image is sliced by drawing a rectangle around the area using the Slice tool (the bottom right tool on the toolbar). Multimedia Developer Step 1: Designating the Slicesįireworks 2 Tutorial: Disjointed Rollovers Web Review: Step 1: Designating the Slices
0 Comments
Leave a Reply. |