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 -

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 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 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 over- written. 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