If you need to quickly translate a Photoshop design into HTML code, Photoshop and ImageReady are capable of doing just that for you. However, before allowing either program to output HTML code for you, keep the following things in mind:
• Name your slices. If you don't, the program generates somewhat random names that may or may not be appropriate in all cases.
• Specify which slices should be saved as images and which should not. If you don't, the program saves all slices as images—even autoslices generated by the program to fill the space around any slices you created.
• Provide alternative text for images, in case they can't be displayed by the browser for whatever reason.
• In areas where you want the program to output text, enter that text (and HTML if necessary).
• Specify the URLs for linked images.
• Specify the background colors (or images) for areas.
To perform each of these tasks, double-click each slice with the Slice Select tool and fill in the appropriate information.
TRY IT To automatically build the HTML code for a sliced web design, perform one of the following, according to the program you're using, before continuing:
• In Photoshop choose File I Save For Web. Use the Slice Select tool to select each slice, and adjust the optimization settings on the right accordingly. When you've successfully edited the optimization settings for all slices, click Save.
• In ImageReady choose the Optimize tab at the top of the image window. Use the Slice Select tool to select each slice, and adjust the settings in the Optimize palette. When you've successfully edited the optimization settings for all slices, choose File I Save Optimized As.
In the Save dialog box, specify the Format. To output all the optimized images as well as the corresponding HTML code, In ImageReady, you can choose File I Update choose HTML And Images. To output only
HTML to update the HTML after making changes to a web design file. To accomplish the same task in Photoshop, choose File I Save For Web, click Save, and choose HTML Only as the Format.
the HTML, choose HTML Only. To customize the type of HTML code the program will write, select Other from the Settings menu and edit the HTML settings as needed.
Was this article helpful?
Adobe Photoshop can be a complex tool only because you can do so much with it, however for in this video series, we're going to keep it as simple as possible. In fact, in this video you'll see an overview of the few tools and Adobe Photoshop features we will use. When you see this video, you'll see how you can do so much with so few features, but you'll learn how to use them in depth in the future videos.