Slicing Web pages in Photosho

tags : Web slicing tutorials of Photoshop Webpage slicing slice webpage in photoshop devide image in photoshop deviding images

Tutorial of Web page Slicing in photoshop

Slices divide an image into smaller images that are reassembled on a web page using an HTML table or CSS layers. By dividing the image, you can assign different URL links to create page navigation, or optimize each part of an image using its own optimization settings.

You export and optimize a sliced image using the Save For Web & Devices command. Photoshop saves each slice as a separate file and generates the HTML or CSS code needed to display the sliced image.

Web page divided into slices.

When you work with slices, keep these basics in mind:

• You can create a slice by using the Slice tool or by creating layer-based slices.
• After you create a slice, you can select it using the Slice Select tool  and then move, resize, or align it with other slices.
• You can set options for each slice—such as slice type, name, and URL—in the Slice Options dialog box.
• You can optimize each slice using different optimization settings in the Save For Web & Devices dialog box.

Slices are categorized by their content type (Table, Image, No Image) and by the way they are created (user, layer-based, auto).Slice types

Slices created with the Slice tool are called user slices; slices created from a layer are called layer-based slices. When you create a new user slice or layer-based slice, additional auto slices are generated to account for the remaining areas of the image. In other words, auto slices fill the space in the image that is not defined by user slices or layer-based slices. Auto slices are regenerated every time you add or edit user slices or layer‑based slices. You can convert auto slices to user slices.

User slices, layer-based slices, and auto slices look different—user slices and layer-based slices are defined by a solid line, whereas auto slices are defined by a dotted line. In addition, user slices and layer-based slices display a distinct icon. You can choose to show or hide auto slices, which can make your work with user-slices and layer-based slices easier to view.

A subslice is a type of auto slice that is generated when you create overlapping slices. Subslices indicate how the image is divided when you save the optimized file. Although subslices are numbered and display a slice symbol, you cannot select or edit them separately from the underlying slice. Subslices are regenerated every time you arrange the stacking order of slices.

Slices are created using different methods:

• Auto slices are automatically generated.
• User slices are created with the Slice tool.
• Layer-based slices are created with the Layers panel.

You can use the slice tool to draw slice lines directly on an image, or design your graphic using layers, and then create slices based on the layers.Slice a web page

Create a slice with the Slice tool

1. Select the Slice tool . (Press the C key to cycle through tools grouped with the Crop too.)
   Any existing slices automatically appear in the document window.
2. Choose a style setting in the options bar:
   

   Normal

    

   Determines slice proportions as you drag.

   Fixed Aspect Ratio

    

   Sets a height-to-width ratio. Enter whole numbers or decimals for the aspect ratio. For example, to create a slice twice as wide as it is high, enter 2 for the width and 1 for the height.

   Fixed Size

    

   Specifies the slice’s height and width. Enter pixel values in whole numbers.



3. Drag over the area where you want to create a slice. Shift-drag to constrain the slice to a square. Alt-drag (Windows) or Option-drag (Mac OS) to draw from the center. Use View > Snap To to align a new slice to a guide or another slice in the image.

Create slices from guides

1. Add guides to an image.
2. Select the Slice tool, and click Slices From Guides in the options bar.
   When you create slices from guides, any existing slices are deleted.

Create a slice from a layer

A layer-based slice encompasses all the pixel data in the layer. If you move the layer or edit the layer’s content, the slice area automatically adjusts to include the new pixels.

A layer-based slice is updated when the source layer is modified.

Layer-based slices are less flexible than user slices; however, you can convert (“promote”) a layer-based slice to a user slice. See Convert auto and layer-based slices to user slices.

1. Select a layer in the Layers panel.
2. Choose Layer > New Layer-based Slice.

Don’t use a layer-based slice when you plan to move the layer over a large area of the image during an animation, because the slice dimension may exceed a useful size.

A layer-based slice is tied to the pixel content of a layer, so the only way to move, combine, divide, resize, and align it is to edit the layer—unless you convert it to a user slice.Convert auto and layer-based slices to user slices

All auto slices in an image are linked and share the same optimization settings. If you want to set different optimization settings for an auto slice, you need to promote it to a user slice.

1. Using the Slice Select tool , select one or more slices to convert.
2. Click Promote in the options bar.
   You can promote an auto slice in the Save For Web & Devices dialog box by unlinking it.

View slices and slice options

You can view slices in Photoshop and the Save For Web & Devices dialog box. The following characteristics can help you identify and differentiate between slices:

Slice lines

 

Define the boundary of the slice. Solid lines indicate that the slice is a user slice or layer-based slice; dotted lines indicate that the slice is an auto slice.

Slice colors

 

Differentiate user slices and layer‑based slices from auto slices. By default, user slices and layer-based slices have blue symbols, and auto slices have gray symbols.

In addition, the Save For Web & Devices dialog box uses color adjustments to dim unselected slices. These adjustments are for display purposes only and do not affect the color of the final image. By default, the color adjustment for auto slices is twice the amount of that for user slices.

Slice numbers

 

Slices are numbered  from left to right and top to bottom, beginning in the upper-left corner of the image. If you change the arrangement or total number of slices, slice numbers are updated to reflect the new order.

Slice badges

 

The following badges, or icons, indicate certain conditions.

 

User slice has Image content.

 

User slice has No Image content.

 

Slice is layer-based.

Show or hide slice boundaries

 Choose View > Show > Slices. To hide and show slices along with other items, use the Extras command.

Show or hide auto slices

 Do one of the following:

• Select the Slice Select tool , and click Show Auto Slices or Hide Auto Slices in the options bar.
• Choose View > Show > Slices. Auto slices appear with the rest of your slices.

Show or hide slice numbers

1. Do one of the following:
   • In Windows, choose Edit > Preferences > Guides, Grid & Slices.
   • In Mac OS, choose Photoshop > Preferences > Guides, Grid & Slices.
2. Under Slices, click Show Slice Numbers.

Change the color of slice lines

1. In Windows, choose Edit > Preferences > Guides, Grid & Slices; in Mac OS, choose Photoshop > Preferences > Guides, Grid & Slices.
2. Under Slice Lines, choose a color from the Line Color menu.
   After the color change, selected slice lines are automatically displayed in a contrasting color.