Slicing and Roll-overs

Slicing in photoshop CS3
This exercise is designed to give you some experience in slicing an image in photoshop CS2 or CS3.
Advantages of slicing:
1. Smaller images load faster
2. You can optimize each slice, also mix gif, jpg and png.
3. Creating rollovers
4. Creating "hotspots" to click
5. Add animation
In this exercise, you'll complete the following tasks:
IMPORTANT: read both Create slices from guides and Create slices from the slice tool BEFORE you begin, then choose whichever method is more appropriate.
Create guides
Create slices from guides

Create slices using the slice tool

Create guides
1. open the file you have chosen in Photoshop
2. if not visible, select View>Rulers or Ctrl-r (pc) cmd-r (mac)
3. right-click the ruler and set the units to pixels
4. drag from the ruler to create guides around the areas where you want to create slices
Create slices from guides

This method is only recommended if you have only a few areas that you want to slice. Otherwise, as in the example below, you get more slices than you need. In that case, you will need to combine and delete slices to get the desired effect.

1. select the slice tool

slice tool

2. click slices from guides

slices from guides

3. if you have a complex layout, you will end up with more slices than you need... in this case, I ended up with over 80 slices

80 slices

4. select the slice select tool (underneath the slice tool)
5. shift select the slices you want to combine, then right-click and select combine slices or delete slices as needed
6. your image should now look something like this

note: I only have slices where needed, around navigation elements, images, and text areas:
slices

7. if there are any areas that you would like to designate to use html text instead of image text, double-click the slice and select the no image option from the drop down menu in the slice options window
8. select File>Save

note: be sure to save your file as a PSD to preserve the layers, that way you can always go back and make changes.
no image slice

why use html text vs image text?

1. html text loads quicker
2. html text is easier to edit (you don't need to open the file in photoshop to edit)
3. search engines can find it easi

Create slices with the slice tool

This is the most flexible method for slicing images. The slice tool allows you to draw your own slices, then auto generates the slices it needs. If you have the Snap option selected, when you draw the slice, it will "snap to" your guides making it easier to get them perfectly aligned.

1. select View>Snap To>Guides (make sure that there is a check mark in front of Guides)

snap

2. select the slice tool

slice tool

3. click and drag diagonally in between guides to draw slices
4. select the slice select tool (underneath the slice tool) to edit or resize slices

draw slices

5. if there are any areas that you would like to designate to use html text instead of image text, double-click the slice and select the no image option from the drop down menu in the slice options window.
6. select File>Save

Note: be sure to save your file as a PSD to preserve the layers, that way you can always go back and make changes
no image slice

why use html text vs image text?

1. html text loads quicker
2. html text is easier to edit (you don't need to open the file in photoshop to edit)
3. search engines can find it easier

Export html and images for the web

Now, we will save the file in a format that can be used to create a web page from. Photoshop CS2 & CS3 generate html and images in tables and CSS. Tables have been the standard for a number of years, but now that CSS is supported by most browsers reliably, many web designers are taking advantage of the greater flexiblity that CSS posesses.

1. select File>Save for Web
2. in the save for web window, select Preset: JPEG High

jpeg preset

3. click the options button and select Edit Output Settings...

output options

3. select Generate Table or Generate CSS use the default settings for both
4. click OK

table or CSS

5. click Save, the Save Optimized As window will open
6. click the Save as type: drop-down menu, select HTML and Images (*.html)
7. name the file index.html
8. browse to your web site folder
9. click Save

save as

6. if you did it correctly, you should end up with a folder titled images and a file titled index.html

Creating rollovers in Adobe Photoshop and exporting rollover images for the web
This exercise is designed to give you some experience in creating image rollovers in photoshop.
Image rollovers add a dynamic and interactive element to your web pages. They work like this, as the user moves the cursor over an image that uses a rollover script, the image will be swapped for another image.
You will need to create two sets of images in order to create the rollover effect. One set for the static mode or state and another set for the dynamic or rollover state.
You will then export the sliced photoshop images to be used in Adobe Dreamweaver.
In this exercise, you'll complete the following tasks:
Create rollover images using layer effects
Create rollover images using new layers
Export rollover images for the web


Create rollover images using layer effects

This is a very simple method of creating rollover effects using text layer effects. By simply turning the layer effect visiblily on and off, we can create the two sets of images necessary to put together our rollovers in Dreamweaver.

1. open your completed comp in photoshop, make sure that this is your original PSD file

complete comp

2. select the text layer where you want to create a rollover effect (in this example, I have selected the About the Rally text layer)

selected layer

3. at the bottom of the layers palette, click the fx icon and the layer effects pop-up menu appears
4. select a layer effect (in this example, I choose Outer Glow)
5. repeat steps 2, 3 and 4 for each text layer you want to create the effect for
6. when you are finished, your layers pallete should look something like this:

note: Effects and Outer Glow has been added underneath each text layer
select fx

7. you should now see the effects you created on your image.

note: the text in the leftside navigation bar now glows

Here is an example of the effect

Create rollover images using new layers

With this method, you will create new layers where you want to create the rollover effect. Again, we will create the two sets of images necessary to put together our rollovers in Dreamweaver.

1. open your completed comp in photoshop, make sure that this is your original PSD file

complete comp

2. make sure that your slices or guides are visible, then use the rectangular marquee to draw a selection around the slice where you wish to create the rollover (you must do this for each rollover, so you will need to move or redraw the marquee for each one)



3. you will now create new layers that contain your rollover images (in this example, I placed them in a layer group titled background)
4. there are tons of different ways to do this, I will give you two examples:
1. use part of the images and change it using adjustments, filters, etc (in this example, I selected the layer that contained the nav bar image)
1. using the rectangular marquee, select the pixels you want to copy and then paste in to new layers.
2. with the new layer selected, add a filter, adjustment, etc
3. make sure you leave the visibility for these layers turned on
2. fill the selection with a color, pattern or a gradient (you must create a separate layer for each rollover)
3. when you are finished, your layers pallete should look something like this:

note: I have a separate layer for each of my rollovers: about, gallery, and contact


7. you should now see the effects you created on your image

note: I added a chalk and charcoal filter to the layers

Export rollover images for the web

Now that you have created the rollover effects, you will save them as new images in you web site folder

1. select File>Save for web and devices...
2. in the dialogue window, select the slice select tool (circled)
3. double click one of the slices that you created a layer effect for





4. in the Slice Options window, rename the slice with a "_down" added to it (or something similar)
5. click OK
6. repeat steps 9 - 11 for the remaining slices your created layer effects for




7. holding down the shift key, select the slices you created layer effects for
8. select JPEG high in the presets and click Save



9. in the Save Optimized As window, select the following:
1. Format: Images Only
2. Settings: Default Settings
3. Slices: Selected Slices
10. make sure you have your root folder selected(the one that contains your html and images files)
11. click save

note: if the files were not saved in the images folder, you neen to drag them into that folder. If you had your images folder selected when you saved, there will be a new images folder in your original images folder.