Photoshop Slice Tool
Using Slice Tool you can precisely divided an image into small connected pictures that is useful for building websites. You can select the slice area manually or using Slice from Guide button. You can identify the slice tool in the below image:
Using Slice Select Tool you can move, duplicate, divide, delete, align user slices. The advantage of using this tool is that you can save the slices into html file, that include all pieces that are connected as a complete image.
Slices are also advantageous when working with images that contain different types of data. For example, if one area of an image needs to be optimized in GIF format to support an animation, but the rest of the image is better optimized in JPEG format, you can isolate the animation using a slice.
Style (A): Use style to control the proportion of sliced area while select.
- Normal: To determine slice proportions by dragging manually.
- 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.
- Fixed Size: Use this style to specify the slice’s height and width.
Width and Height (B): Enter value of slice width and height for Fixed Aspect Ratio and Fixed Size slice style. As you can see in the image I set with to 200 pixels and height to 100 pixels.
Slice from Guide (C): Click to create slice form guides.
How we create a slice using Slice Tool
- Select Slice Tool
- Choose style settings in the option bar.
- Drag over the area where you want to create a slice. Shift-drag to constrain the slice to a square.
To create slices from guides:
- Add guides to an image.
- Select the Slice tool, and click Slices From Guides in the options bar.
Working with slices
See in the below image how I intended to divide my image using Slice tool:
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 badges: The Web Content palette uses a number of badges, or icons, to indicate certain conditions, and these icons also appear in the document itself:
User slice has Image content
User slice has No Image content
Slice is a layer-based slice
Slice is linked
Slice includes a rollover effect
Slice contains the active rollover state
Slice is a nested table
Slice is a remote trigger
Slice is a remote target
To show or hide slice boundaries: Choose View » Show » Slices. To hide and show slices along with other items, use the Extras command.
To show or hide slice numbers: In Windows, choose Edit » Preferences » Guides, Grid, & Slices. or in Mac OS, choose Photoshop » Preferences » Guides, Grid, & Slices. Under Slices, click Show Slice Numbers.
To change the color of slice lines: In Preferences » Guides, Grid, & Slices. Under Slice Lines, choose a color from the Line Color pop-up menu. Changing the color of slice lines automatically changes the color of selected slice lines to a contrasting color.
Now go to “File/ Save for the Web…“, and you’ll see the “Save for the Web” dialog box. Choose you optimized Settings on the right side of the panel, then Click “Save“. You’ll be prompted to “Save Optimized As” to a location on your computer.
Post a comment
RSS/XML