Download Image Slicing2 - Bath College Moodle

Photoshop
Image Slicing
Reasons to Image Slide
• To create links out of sliced images
• To optimise different areas. (flat areas of colour, such
as logos, normally save best as GIF or PNG8, photos as
JPG)
• To create animated rollover effects, such as rollover
buttons and image swaps
Photoshop
Photoshop images can be sliced and saved as slices
as a web page (File > Save for Web)
Photoshop allows you to create links.
Open the web page with sliced images in
Dreamweaver to develop page further (e.g. add links
if not added)
Example - www.pageboutique.co.uk
Example 1 - Creating Background Slices
• Create a single image slice with a link
• Start Photoshop, then use File > New and select web
page settings as follows:
Example 1
• Insert an image to cover page. Save the file, e.g. beach.psd
• Insert large text and add a drop shadow style (double
click the layer or select Layer > Layer Styles)
• Size the text so it is 140pt font height and 140pt leading
Example 1
• Select the slice tool and draw a box around the text
Example 1
• To toggle slices on/off
click View > Show > Slices.
Leave slices showing
• To select and adjust
slices use the Slice
selection tool
• Double click the slice
corner to add a link to a
page or website.
• Add the URL in the box this can be page or a
website URL
• The URL can also be
added or change in
Dreamweaver later on
Example 1
• Click File > Save for Web
• Explore the various settings. Click in the top slice and
change the setting to GIF. Notice you can click on the
slices and change setting independently
• When done,
click Save
Example 1
• When you save slices, they are automatically saved into a folder
called “images”. This is specified in the settings.
• In the dialogue box use the following settings (HTML and images
creates a web page with the image slices placed in a table):
If you change the Setting to Other then
choose slices in the Output Settings window,
you can choose the page to be created using
the CSS or <DIV> tag option instead of table
“Background image” is the setting used, as
the slices are background slices for now
Example 1
• Locate the web page and image slices.
• Open the page in Dreamweaver. Click on the slices.
• Locate the linked slice with the text, select it and the <A> tag on
the lower left of the screen and you should see the link in the
source code.
• Press F12 to open it in a browser
You can create more complex pages than this one, but this shows
the principle.
Example 2 - animation
• Add an animation effect. Go
back to Photoshop and
duplicate the text layer by
dragging it onto the New
Layer button (this is the
quickest way to do this)
• For the new (top) layer,
change the layer style (double
click to open the layer style
panel) to make it look
different (add outer glow and
colour overlay)
Example 2
• Add an animation effect.
Go back to Photoshop and
duplicate the text layer
by dragging it onto the
New Layer button (this is
the quickest way to do
this)
• For the new (top) layer,
change the layer style
(double click layer to
open the layer style
panel) to make it look
different (add outer glow
and colour overlay)
Example 2
• With the new effect active, click File > Save for Web.
• Make sure the slice is selected in the Save for Web
window (use the select slice tool on the top left, SHIFT
allows multiple slices to be selected, if required)
Example 2
• Whilst in Save for Web, now click Save
• Change the options as shown (only the slice that has changed needs to
be saved, the other slices have not changed).
• When changing settings to Other, an Output Settings window appears.
Add “/over” after the images folder.
• Any slices need to be put into a separate folder to avoid confusion
• Click Save
Example 2
• Name the Setting “Over”,
then click Save again
• Make sure settings show
“Over”
• When the settings are
changed to Over click OK
to apply Output settings
Example 2
• Make sure settings show “Over”
• When you click Save the slice
will be saved in the images
folder, in a subfolder called
“Over”. This avoids the
previous slices being overwritten.
• Locate the folder with the web
page and slices and you should
find an images folder with the
background slices
•
•
•
•
•
•
•
•
Example 2
Open the web page (this will have been over-written) in Dreamweaver.
If already open, you may be prompted with a message saying it has
been changed. Click OK/Continue.
Make sure the middle slice with the link is selected
Locate the Behaviours window (Window > Behaviours)
Click on the add behaviour (+).
In the dropdown menu select Swap image
Click Browse and locate the slice in the Over folder.
Leave the Preload images and Restore selected so slices will be loaded
up before the page loads. Restore allows background image to return
Click OK
Example 2
• In Dreamweaver the Behaviours window will
show a Swap image effect.
• Test the page in a browser, the background
image should swap to the “over” image when the
mouse moves across the text.
• Clicking the text should go to the link
Example 3 - more complexity
• Now you have created an “Over” setting, this will have
been saved to the C drive (if you move to a different
computer this may disappear).
• Use the “Background” setting for the mouse out
state
• Use the “Over” setting for mouse over state
• Create a new Photoshop document as before and add
a new image as the background. Build a more complex
page with about 5 elements to use as link/over slices
Example 3
To apply a Layer Effect
(Style) to multiple layers
• Create the Layer Style
(such as a Stroke, Drop
Shadow, Outer Glow,
etc.)
• Save as a Style by
clicking the “New Style”
option, name and save
• Then, in the Layers
panel, select multiple
layers and click the
desired Style in the
Styles panel to apply
the Style to all selected
layers.
Example 3
• Group layers to organise layers
and allow grouped areas to be
easily switched on and off.
Example 3
•
•
Create the slices
Use File > Save for Web. Remember to use
the settings “Background” to ensure
background slices are stored in the images
folder (see settings below), and “Over” to
ensure over images are stored in the “over”
sub folder (using selected slices only, no
HTML).
Settings for
Background slices
Settings for
“Over” slices
Example 3
• Open the page in Dreamweaver, adding links if these were not added
in Photoshop.
• In Dreamweaver add behaviours to create the effects
Example 3
• Test in browser