• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Making the Cut

Once you've got the guidelines in place and a flat image, you can begin to cut up the image.

USING PHOTOSHOP TO MAKE THE CUT

1.
Click on the Slice tool (see Figure 7-6).

Figure 7-6. The Photoshop Slice tool


2.
Drag the Slice tool (like the Marquee) from the upper-left edge to the bottom right of the first area to be cut.

3.
Do that for each section you want broken apart. When you have all the sections it will have strange rectangles with many strange markings in them (see see Figure 7-7).

Figure 7-7. Your image with slice markings on it.


4.
If you make a mistake go to the Slice tool in the tool box and hold it down. You will see a Slice Select tool. Use that tool to move the slice edges around.

5.
Each of those slices tells you something about the content of that slice (see Figures 7-8 through 7-12).

Figure 7-8. This slice is an image.


Figure 7-12. This slice is linked.


Figure 7-9. This slice has no image.


Figure 7-10. This slice is Layer-based.


Figure 7-11. This slice has a rollover effect in it.


6.
Each of the slices we're using for this example is an image slice.

7.
Once you have all the slices you want, select File>Save For Web.

8.
The Save For Web options box that you are now familiar with should be up.

9.
Click the Output Options box in the upper right (see Figure 7-13).

Figure 7-13. Select the Output Options button.


10.
We won't explore this area right now. But you should know it's where all the options for the HTML, the slices, and naming conventions are (see Figure 7-14).

Figure 7-14. The Output Options dialog box


11.
Click Save.

12.
Select a location for the HTML page and all the slices that will be created.

13.
Click OK.

14.
Now go to where you save the index.html file and drag it on to an open Web browser.

15.
You will see that the entire page is now in a Web browser as an HTML page (see Figure 7-15). We're not going to worry about the background color yet. We're just trying to learn to slice for now.

Figure 7-15. Your Home page in HTML in a Web browser. You did it.



PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint