Saving Photoshop Slices for the Web
Chapter 16 introduced a number of great features that Photoshop has for the Web designer. Where it left off, we will continue here with a lesson on how to take your sliced Photoshop mockups and actually create Web pages from then.
You can see images of a number of real-life Photoshop mockups I created for clients in the gallery.
Better yet, you can see my multi-layer Photoshop files in all their glory in the Outbox (Photoshop mockups folder).
Saving a Mockup for the Web, the Basics
Here are the steps for saving a Photoshop file for the Web once you've created slices and customized the slice names and destinations.
- Open up the Save for Web & Devices dialog box (File > Save for Web & Devices).
- Select each of the slices you defined and select whether it is best saved as a GIF or JPG file.
- Click Save.
- Select "HTML and images" from the "Save as type" dropdown.
- Give the .html file an appropriate name.
- Locate your Web site folder.
- Click Save.
Saving a Mockup for the Web, in Detail
- Create a fodler in My Documents called lastnamefirstinitial_global.
- Copy global_skin_design_3.psd from the Outbox (PEDERSEN\web design\Photoshop mockups\ globaltitle) and paste it into your lastnamefirstinitial_global folder.
- Rename the Photoshop file index.psd.
- Open index.psd. If you get a warning, click No.
- Select the Slice Select tool from the toolbox on the left side of the screen.
- We're going to rename some of the existing slices and give them URL destinations. Double-click on a slice with the Slice Select tool to enter this information for the specified slices. See the table below.
No. |
Name |
URL |
Alt Tag |
---|---|---|---|
3 |
button-home |
index.html |
Home |
6 |
button-login |
login.html |
Log In |
7 |
button-services |
services.html |
Services |
8 |
button-partners |
partners.html |
Partners |
9 |
button-about |
about.html |
About Us |
10 |
button-contact |
contact.html |
Contact Us |
- Some slices are empty patches of white or color. For these an images is not necessary. To tell Photoshop not to create an image for a given slice, do the following:
- Double-click on the slice with the Slice Select tool.
- Change the Slice Type to "No Image".
- Click OK.
- Save the Photoshop file (Ctrl+S).
- Now Save for Web & Devices (Ctrl-Shift-Alt+S).
- Make sure the Slice Select tool is highlighted in the small tools panel on the left.
- Click on each slice on turn to assign it the appropriate file type. Use the table below:
No. |
Preset |
---|---|
3 |
JPG High |
6 |
JPG High |
7 |
JPG High |
8 |
JPG High |
9 |
JPG High |
10 |
JPG High |
Don't worry about slices 1, 2, 4 and 12; remember, these will not result in images.
- Click on Save.
- Select "HTML and images" from the "Save as type" dropdown.
- Name the file index.html.
- Locate your lastnamefirstinitial_global folder.
- Click Save.
- Save the Photoshop file (Ctrl+S).
- Locate and double-click on the index.html file in your lastnamefirstinitial_global folder.
- Click on the images for which you created links. The menu items will have broken links, but that's okay for this lesson.
- If we're out of time, turn your lastnamefirstinitial_global folder into the Inbox. If not, move on to the next section on creating button rollovers.
Rollover Images (if there's time)
The Photoshop file you just worked with actually had rollover layers available for each of the menu buttons. We can use these to create rollover images and then code the rollovers in Dreamweaver.*
We're going to create the rollover images for this mockup and then code the rollovers in Dreamweaver.
- Save the Photoshop file as rollovers.psd (File > Save As...)
- Turn off the following layers by clicking the eyeball icon on the left of their layers:
- LOG IN
- SERVICES
- PARTNERS
- ABOUT US
- CONTACT US
- Turn on the following layers by clicking the black space where the eye icon goes on the left of their layers:
- LOG IN copy
- SERVICES copy
- PARTNERS copy
- ABOUT US copy
- CONTACT US copy
- For each of the slices below, double-click on it and change the Names as follows:
No. |
Name |
---|---|
6 |
button-down-login |
7 |
button-down-services |
8 |
button-down-partners |
9 |
button-down-about |
10 |
button-down-contact |
- Save the Photoshop file (Ctrl+S).
- Time to save for Web again! File > Sae for Web & Devices (Ctrl-Shift-Alt+S).
- Photoshop remembers the file types that each slice should be. Click Save.
- Change the "Save as Type" dropdown to "Images Only".
- You will see a Replace Files dialog box. You do not want to replace any of the existing images, just create the new ones (for slices 6 - 10 as above). Uncheck each of the files in the list. You can do this quickly by clicking-and-dragging from the top straight down through the checkmarks.
- Click Replace. Your rollover images have been created!
- Now we need to create the code for the rollover action. Start Dreamweaver.
- Open our new index.html file (File > Open).
- Click on the image for Log In. Hit the Delete key on your keyboard to remove it. We need to start from scratch for each button in order to create the rollovers.
- On the Insert Bar, make sure that Common is displayed.
- Click the dropdown arrow for Images and select Rollover image.
- Enter the data as shown below for the Log In button:
Button Image |
Image name: |
Original image: |
Rollover image: |
Alternate text: |
URL: |
---|---|---|---|---|---|
"Log In" |
login |
button- |
button- |
login |
login.html |
- Complete steps 15 & 16 for each of the remaining menu buttons.
Button Image |
Image name: |
Original image: |
Rollover image: |
Alternate text: |
URL: |
---|---|---|---|---|---|
"Services" |
services |
button- |
button- |
services |
services. |
"Partners" |
partners |
button- |
button- |
partners |
partners. |
"About Us" |
about |
button- |
button- |
about |
about. |
"Contact Us" |
contact |
button- |
button- |
contact |
contact. |
- Save index.html (Ctrl+S).
- Press F12 to test the file in a browser. Verify that each of your rollovers works.
- Turn your lastnamefirstinitial_global folder into the Inbox.
* In earlier versions of Photoshop, it was bundled together with a program called ImageReady which was used for creating graphics for the Web. It was used to create simple animations and could even code rollover actions without the use of Dreamweaver. ImageReady no longer exists. Our version of Photoshop (CS3) now offers animation capabilities, but the rollover coding feature is no more.