Our Collection Of Articles
Slicing & What to do with Those Slices
Written By:
The slicing process is different for everyone. Some people prefer Fireworks; but for this tutorial, I'm sticking with Photoshop and Image Ready. Fireworks performs similarly to Image Ready and is pretty easy to learn. One of the simplest ways to slice that I've heard was, while in Photoshop, select and copy the area marked out in guides to be exported, and paste into a new file (Ctrl N), go to File » Save for Web (Alt+Shft+Ctrl+S). And then do your optimizing in the subsequent dialogue. Again, your PSD will need to be flat to copy all layers.
Otherwise, you can crop the slice, File » Save for Web then optimize; then File » Revert back to the full sized mockup. And continue on until you are done exporting your graphics.
Still, if you want to save yourself a lot of time and you have a version of Photoshop that includes Image Ready, then you can optimize your graphics in the mockup and export the whole page using Image Ready.
To switch from Photoshop to Image Ready, click this icon at the bottom of your tool bar and when the program has loaded with your file, go to Slices » Create Slices from Guides.
What to do with Those Slices
At this point you will find there are slices in the places where you don't need graphics. To select them, use this slice select tool from the tool bar and, in the Slice window, change Type to "No Image" where you would otherwise have text or nested tables. Then you can enter the text or HTML for this area, otherwise an external image (in HTML) or even a server-side include.
Now, if you want a more ambitious layout with complex tables, you may have to combine slices to achieve this. But if you're new at this, try not to be too ambitious or you'll be pulling your hair out-and I speak from experience. To combine slices, hold Shift and click on the slices, and then go to Slices » Combine Slices. In the Slice window under Image, you can name your images, choose a background for transparency, and assign a URL and target. If you're using the slice for a rollover, it must have a name. Otherwise, Image Ready does it for you; and names each slice based on the PSD filename.
Incidentally, for rollovers, you click on the Rollover tab, then this icon at the bottom, to create a new frame for your rollover. Here's basically what the rollover states mean:
Normal: The first is the image, as it would normally appear.
Over: The mouse cursor is over the button and the image changes in some way.
Down: The mouse button is being pushed down.
Click: Mouse button is clicked and a related event is called (opens new page, etc.)
Out: This is usually the same as "normal" -the mouseover has not occurred, or mouse has left the active area.
Up: Usually the same as "Over," only after mouse button is clicked and the cursor is still over the active area.
You don't need all of these but you must have a minimum of 2 to make your rollover work. A lot of designers would prefer to use their own code; in which case, this is still a quick way to optimize and export those rollover graphics.
|