Photoshop cs5 by steve Johnson part 74 pptx

ptg
462 Chapter 19
Photoshop allows you to slice a document into smaller pieces. You
might want to slice an image to create interactive links; however, the
best reason is speed. You gain speed by compressing individual slices
to reduce the image size. There are two types of slices: user-defined
and layer-based. You can draw directly on an image to create a user
slice using the Slice tool, or create a layer and then change it into a
layer-based slice. When you create a slice, Photoshop also creates
auto slices, which fill the space in the image that is not defined by a
user-defined slice. User-defined and layer-based slices are identified
by a solid line with blue symbols, while auto slices are identified by a
dotted line with gray symbols. The slices also are numbered from left to
right and top to bottom. A layer-based slice uses all the data in the
layer to make up the slice. If you want to make changes to the slice,
you need to edit the layer, which makes it a little more difficult to use
than a user slice. When you edit or move the layer contents, the slice is
automatically changed too.
Slicing Images the
Easy Way
Create a User Slice
Open a document.
Select the Slice tool on the
toolbox.
IMPORTANT
To make slicing a
little easier, drag a few guides
from the Ruler bar to help guide
your slicing tool.
Click the Style Setting list arrow
on the Options bar, and then select

the style you want:
◆ Normal. Specifies the slice size
as you drag.
◆ Fixed Aspect Ratio. Specifies a
ratio for the slice height and
width.
◆ Fixed Size. Specifies the slice
height and width in pixels.
Drag and release the slice tool in
the document to create a
rectangular or square slice.
◆ To co nst rain the sl ice to a
square, hold down Shift as you
drag. To create a circle, hold
down Alt (Win) or Option (Mac).
Continue to drag and release until
you have the image correctly
sliced.
5
4
3
2
1
4
User slice
5
2
From the Library of Wow! eBook
ptg
Chapter 19 Designing for the Web and Devices 463

Create a Layer-based Slice
Open a document.
Select the layer you want in the
Layers panel.
Click the Layer menu, and then
click New Layer Based Slice.
3
2
1
2
Layer-based slice
Did You Know?
You can convert an auto or layer-
based slice to a user slice.
Select the
slice using the Slice Select tool, and
then click Promote on the Options bar.
You can create slices from guides.
Add guides to the image, select the
Slice tool on the toolbox, and then click
Slices From Guides on the Options bar.
To cr ea te a new guid e, clic k the Vi ew
menu, click New Guide, click the
Horizontal or Vertical option, specify
the position in inches, and then click
OK.
You can lock guides.
To ke ep a guide
from being moved, click the View
menu, and then click Lock Guides.

You can remove guides.
To re mo ve
guides, click the View menu, and then
click Clear Guides.
You can show and hide guides.
Click
the View menu, point to Show, and
then click Guides. The command
toggles the guides’ visibility on and off.
What’s a Subslice?
The subslice is a type of auto slice that is automatically created when
you create overlapping slices. They are created as a stack, one on
top of the other, which you can rearrange. The subslice shows you
how the image is divided when you save the optimized file. Subslices
appear with a number and a slice symbol. When you make changes
to a slice related to a subslice, the subslice automatically gets
recreated.
For Your Information
From the Library of Wow! eBook
ptg
464 Chapter 19
After you create slices within an image, you can use the Options bar or
the Save For Web & Devices dialog box to work with slices. You can
select options to show or hide slices, select one or more slices, delete
or duplicate slices, and view or change slice settings. If you have an
image with more than one slice, you need to optimize the slices in the
Save For Web & Devices dialog box. You can use the Optimize menu to
link multiple slices together. For linked slices in the GIF and PNG-8
format, Photoshop uses the same color panel and a dithering pattern to
hide the seams between slices.

Working with Slices
Work with Slices in the
Photoshop Window
Open a document with slices.
Use any of the following:
◆ Show or Hide Slices. Click the
View menu, point to Show, and
then click Slices.
◆ Show or Hide Auto Slices.
Select the Slice Select tool, and
then click Show Auto Slices or
Hide Auto Slices in the Options
bar.
◆ Select Slices. Click the Slice
Select tool, and then click the
slice you want. Use Shift+click
or drag to select multiple slices.
◆ Delete Slices. Select the slices,
and then press Delete.
◆ Duplicate Slices. Select the
slices, and then Alt (Win) or
Option (Mac) and drag the
selection.
◆ View Slice Options. Click the
Slice Select tool, and then
double-click the slice you want.
2
1
Slice tools
Auto slice

User slice
Slice Options
See Also
See “Working with Guides, Grid &
Slices” on page 64 for information on
setting preferences to show or hide
slice numbers and change the slice
border color.
From the Library of Wow! eBook
ptg
Chapter 19 Designing for the Web and Devices 465
Work with Slices in the Save
For Web & Devices Dialog Box
Open a document with slices.
Click the File menu, and then click
Save For Web & Devices.
Select the file type you want,
select any options, and then make
any adjustments you want.
◆ Show or Hide Slices. Click the
Toggle Slices Visibility button.
◆ Select Slices. Click the Slice
Select tool, and then click the
slice you want. Use Shift+click
or drag to select multiple slices.
◆ View Slice Options. Click the
Slice Select tool, and then
double-click the slice you want.
◆ Link Slices. Select the slices
you want to link, click the

Optimize menu double-arrow
(Win) or arrow (Mac) button,
and then click Link Slices.
A link icon appears on the
slices.
◆ Unlink Slices. Select the slice,
click the Optimize menu
double-arrow (Win) or arrow
(Mac) button, and then click
Unlink Slice or Unlink All Slices.
When you’re done, click Save to
save the image or click Done to
save your settings.
TIMESAVER
Hold down Ctrl
(Win) or Command (Mac) to switch
between the Slice tool and the
Slice Select tool.
4
3
2
1
To gg l e S l ic e s
Visibility button
Slice Select button
Linked slices
Optimize menu
4
From the Library of Wow! eBook
ptg

466 Chapter 19
Moving and resizing objects in Photoshop is a common task. You can
move or resize slices in the same basic way you do other objects. In
addition to moving slices, you can also align them along an edge or to
the middle, and evenly distribute them horizontally or vertically. When
you align and distribute slices, you can reduce the amount of unneces-
sary auto slices, thereby creating smaller files and faster load times.
When you have slices overlapping each other, you can change the
stacking order to move them up or down in the order. For example, if
you have one slice behind another, you can bring the slice forward one
level at a time or to the top (front).
Arranging Slices
Move or Resize Slices
Open a document with slices.
Select the slices you want to move
or resize.
To mo ve a slic e selection, drag th e
slice to a new location. You can
press Shift to constrain movement
up, down, or diagonally.
To re siz e a sl ice, drag th e side or
corner handle of the slice. When
you select adjacent slices with
common edges, the slices resize
together.
◆ You can also click Options in
the Options bar to set exact
slice position or size.
4
3

2
1
2
4
Options button
Did You Know?
You can copy and paste a slice.
You
can copy and paste a slice like any
other object using the Copy and Paste
commands. If you copy a slice from
Dreamweaver, it retains information
from the original file in Photoshop.
You can snap slices to a guide, user
slice, or other object.
Click the View
menu, point to Snap To, and then select
the elements you want. Click the View
menu, and then click Snap to display a
check mark. When you move a slice
toward an element, the slice snaps to
the elements within 4 pixels.
From the Library of Wow! eBook
ptg
Chapter 19 Designing for the Web and Devices 467
Align, Distribute, or Stack Slices
Open a document with slices.
Select the slices you want to
arrange.
To al ign slices, select th e

alignment button on the Options
bar you want: Top, Vertical
Centers, Bottom, Left, Horizontal
Centers, or Right.
To ev enl y distribute slices, select
the distribute button on the
Options bar you want: Top, Vertical
Centers, Bottom, Left, Horizontal
Centers, or Right.
To ch ang e the sl ic e stacking order,
select the stack button on the
Options bar you want: Bring To
Front, Bring Forward, Send
Backward, or Send To Back.
5
4
3
2
1
2
5
3 4
Did You Know?
You can combine user and auto slices.
Right-click the selected slices, and
then click Combine Slices.
You can divide user and auto slices.
Select the slice using the Slice Select
tool, and then click Divide on the
Options bar. In the Divide Slice dialog

box, select options to divide the slice
horizontally or vertically, up or down in
equal parts, or enter an exact size in
pixels, and then click OK.
From the Library of Wow! eBook
ptg
468 Chapter 19
After you create slices within an image, you can export and optimize
each slice using the Save For Web & Devices command, which saves
each slice as a separate file and creates the code to display them on a
web page. After you click Save in the Save For Web & Devices dialog
box, the Save Optimized As dialog box appears. You can use this dialog
box to access the Output Settings dialog box and set output options to
control the format of HTML files, the names of files and slices, and the
way Photoshop saves background images.
Saving a Sliced
Image for the Web
Save a Slice for the Web
Open a document with the slice
you want to save.
Click the File menu, and then click
Save For Web & Devices.
Select the file type you want,
select any options, and then make
any adjustments you want.
Click Save.
Click the Save as Type (Win) or
Format (Mac) list arrow, and then
select whether to save the images
in HTML and Images, Images Only,

or HTML Only.
Click the Settings list arrow, and
then select the output settings you
want. Default Settings is
recommended for normal use.
See the next page for details about
selecting output settings.
Click the Slices list arrow, and
then click All Slices, All User
Slices, or Selected Slices.
Click Save.
8
7
6
5
4
3
2
1
1
5
87
6
From the Library of Wow! eBook
ptg
Chapter 19 Designing for the Web and Devices 469
Set Output Options for Slices
Open a document with the slice
you want to save.
Click the File menu, and then click

Save For Web & Devices.
Click Save.
Click the Save as Type (Win) or
Format list arrow, and then select
the format you want.
Click the Settings list arrow, and
then click Other.
Click the Output Type list arrow,
and then click Slices.
Select the following options:
◆ Generate Table. Uses an HTML
table to display slices.
◆ Empty Cells. Specifies the way
to convert empty slices to table
cells.
◆ TD W&H. Specifies whether to
include width and height for
table data.
◆ Spacer Cells. Specifies when
to add empty spacer cells.
◆ Generate CSS. Creates a
Cascading Style Sheet (CSS) to
display the slices.
◆ Referenced. Specifies how to
reference slice positions using
CSS.
◆ Default Slice Naming. From the
list menus, select the options to
specify a slice naming scheme.
Click OK.

Click the Slices list arrow, and
then select the slices option you
want.
Click Save.
10
9
8
7
6
5
4
3
2
1
6
8
7
Saving Output Settings for Future Use
If you frequently use the same settings to save a file, you can save
your output settings as a preset for future use. In the Output Settings
dialog box, specify the settings you want to save for HTML, Slices,
Background, or Saving Files, click Save, type a name, use the default
folder location (the Optimized Output Settings folder), and then click
Save. The Output Setting file is saved with the ".iros" file extension. By
saving the Output Settings files in the Optimized Output Settings
folder, you can quickly select the custom output setting file from the
Save Optimized As dialog box. If you didn't store the Output Settings
file in the default folder, you can also use the Load button in the
Output Settings dialog box to find it.
For Your Information

From the Library of Wow! eBook