Slicing a Graphical Interface, Page 2

After you have placed the guides, you once again want to be sure that snap to guides is on. Then select the rectangular marquee tool, and select the sliced areas one by one. Here is what you are going to do step by step.

Once you have placed your guides, determine where your going to divide them. Here is the way I did it.

Be sure your image is only one layer at this point or the following steps will not work correctly. ( Click on "layer" and "flatten image" ) Also note that the below buttons have no default text for labels on the buttons. You may want to do it differently.

The blue lines indicate the original guides..the white lines indicate where I plan on making the slices over the guides.

1. Select the rectangular marquee tool.

2. Drag around an area between the guides that you want to slice. For example, here is the "TV" part of the interface that I wanted to use.

3. Now with the area highlighted, click on "edit", then "copy". Or just hit CTRL+C to copy it to the clipboard.

4. Next hit "file" then "new", then click on OK. Or just press CTRL+N. This will open a new blank image the size of the one you copied to the clipboard in step 3.

5. Now select "edit" then "paste". Or hit CTRL+V. This will paste your image in the clipboard into your new document.

6. Now save this image. I suggest starting to work from the top left of your slices, and do one by one, and name them in a numbering system that you will remember. So that way when you go to insert them into your HTML, it will be easier for you.

Next Page:::

Return to the Photoshop tutorial index