Slice pictures with Photoshop

[Dharmesh Arora]

Hey Guys,

I would like to know that how do i slice a picture with Photoshop, so that i can easily link each slice to a different page. Can any body tell me that how can i do so? Kindly provide me the correct logical solution for doing it. Would be grateful to you if any body helps me out.

Thanks in advance.

[Eric B]

We need to slice the layout to save the necessay images in web format and use them in html. Click here to view the layout we are using on our 4 part tutorial on creating a website. Follow these steps to slice your layout.

1. Open the file you want to slice clicking on File>Open. You can open the above layout.
Important : You have to organize your layout in such a way that you should be able to put them into rows and columns in a table in Dreamweaver. You can write down how you are going to slice your layout to get the idea. Anything that is text and backround colors can be done easily in Dreamweaver. Only images and graphis have to be sliced in Photoshop.
2. Here we will slice only 3 images i.e. the logo, banner and the graphics on the right. Now you can start to slice your layout. Select the slice tool and draw a box to define the area you want to slice. We will first create a slice for the logo. Next, use the slice tool again to drag across the banner and create the next slice. Repeat for the graphics found on the right with the dotted line. Create one slice for all the 3 images. View the completed layout to check the slices.
3. Next, we will name the slices. Go to the slice tool in the menu palette and select the Slice Select Tool. Now double click on the slice. A screen named Slice Options will come. Enter the type of the slice, as an image and name of the slice. For the logo slice, give the name logo. Repeat this step to name the banner slice and the graphics slice. You can name them banner and pic_right.
4. Go to File--> Save for web. A screen named Save for web will come. Select the logo slice and choose gif from the drop down menu. next, select the banner and pic_right slices and select JPEG and maximum from the drop-down menus.
Tip : Remember photographs should always be exported as JPEG and solid colors can be exported in .GIF formats Adaptive Colors 256.
5. Now the slices are ready to be exported. Select the 3 sliced images in the save for web pop-up box by using the shift key. Click on Save.
6. A screen named Saved Optimized As will appear. Save your slices in your website folder. Make sure your image file is in the same path as your work file. Choose the following options for the rest of the options:

• Save as type: Choose Images Only
• Slices: Choose selected slices.

Now click on Save. Check that the 3 images have been saved in the images folder in your web site folder.

[Glenny]

Using the Slice and Slice Select Tools.

• Select the slice tool in the toolbox.
• Click and drag over the area you wish to make into a slice.
• Release the mouse button - Photoshop automatically creates the necessary number of slices, with the active slice highlighted.
• Using the slice select tool, you can move and resize slices by dragging inside a slice, or by dragging the handles.

Note: To export the separate images, choose File--> Save for Web from the Photoshop menu. When you save the file you will have the option to save the images and/or a new HTML page to contain the images.

[JonathanD]

Here's a quick tour to using Slices:

1. Open a Photoshop document that you want to slice up.
2. Click the Slice tool in the toolbox, and click and drag into your document to draw a rectangular slice. Photoshop automatically numbers your slice and creates a brown slice outline around the area you selected.
3. Adjust the handlebars on the Slice to make it the right size.
4. Click and drag to define a second Slice.
5. Outlined in blue will be Slices that you are not currently working on. To edit another Slice, select the Slice Selection tool (*) in the toolbox (you can access it by clicking and holding the Slice Tool in the toolbox) and then click the Slice you want to edit.
6. If you plan to export HTML as well as images, you can double-click on a Slice to open the Slice Options window, which allows you to set certain HTML settings and give the image a file name. You can also resize the image using the Slice Options window.
7. When you have defined all your Slices and set up your Slice options, choose Save for Web from the File menu.
8. You can select each Slice individually and give it a setting from the settings menu. (For more help on Saving for Web, see the section titled Creating Web-formatted images.
9. When you are finished, click Save. (Notice the options available at the bottom of the Save box. Set these to save HTML and images or only the images from your file. You can also set Photoshop to save only Slices you selected in the Save for Web window or to save All Slices.)
10. Click Save. Unless you changed the settings, Photoshop saves the images in an HTML file that contains the code to build the document and the images in a separate folder. Open this up in your HTML editor to make any necessary tweaks.