Espinda.com

(9 of 11) Slice Lines and Web Output
back to tutorials

Slicing
A template consists of large number of layers that are embedded into a single design giving the look of a single image.
While publishing the template on to the internet, the template needs to be broken down into :

a. Buttons and navigation ( Additional effects can be added such as rollover effects).
b. Graphics ( These might be a single image or multiple images)
c. Text content

Understanding Slices

You can view slices in Photoshop, the Photoshop Save for Web dialog box, and ImageReady. The following characteristics can help you identify and differentiate between slices: Refer to fig 3.13
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, while auto slices have gray symbols.
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 symbols
Indicate whether a user slice has Image or No Image content; if the slice is a layer-based slice ; if the slice is linked ; or if the slice includes a rollover effect.

Figure 3.13

Adding Slices

- Select slice tool from the tool box .
- Choose a style setting in the options bar (Fig 3.14):
- 1. Normal to determine slice proportions by dragging.
2. Fixed Aspect Ratio to set 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.
- 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

(If you don't find options window on top, Click on Windows in top menu and check the "options" menu).

Figure 3.14

Moving and resizing slices
- Select "Slice select tool" from the tool menu.
- To select the tool :
click on slice tool in toolbox, hold the mouse pressed to see the tools present for slicing.
Select "Slice Select Tool" (Fig 3.15)
- To move a slice, move the pointer inside the slice selection border, and drag the slice to a new position. Press Shift to restrict movement to a vertical, horizontal, or 45° diagonal line.
- To resize a slice, grab a side or a corner handle of the slice, and drag to resize the slice (Fig 3.16)


Figure 3.15	Figure 3.16

Outputting files for the web
Photoshop provides automated facility to convert the template into HTML webpage. Graphics and images in the template are converted into GIF, JPEG, PNG and other picture formats.

Figure 3.17

- Select save for web under the file menu. Fig (3.17)
- Click on the save button, select the location to store the files and click ok.
- Go to the location where you have saved the file. You will find a HTML page and images directory containing all the graphics sliced into images, Fig (3.18)

Figure 3.18