Use Photoshop/Image Ready to Build HTML Code

How To Render Cars In Photoshop

Learn Photo Editing

Get Instant Access

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?

0 0
Photoshop Secrets

Photoshop Secrets

Are You Frustrated Because Your Graphics Are Not Looking Professional? Have You Been Slaving Over Your Projects, But Find Yourself Not Getting What You Want From Your Generic Graphic Software? Well, youre about to learn some of the secrets and tips to enhance your images, photos and other projects that you are trying to create and make look professional.

Get My Free Ebook


Post a comment