Use Photoshop/Image Ready to Build HTML Code

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

QUICK TIP

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.

Learn Photoshop Now

Learn Photoshop Now

This first volume will guide you through the basics of Photoshop. Well start at the beginning and slowly be working our way through to the more advanced stuff but dont worry its all aimed at the total newbie.

Get My Free Ebook


Responses

Post a comment