TIP 149: Converting Text to Images

GoLive includes the ability to convert HTML text to a Web graphic by combining Adobe's incredible Smart Object and Variables technologies. This is an easy way to create consistent and visually compelling navigation buttons, graphical subheads, and banner ads.

ALT Tags from Variables

Look at the ALT Text field in the Inspector and notice how the variable text data is automagically written into the <alt> attribute.

Here are the steps:

1.	Create a Photoshop file that has a text layer as its topmost layer or use the Image > Variables > Define... command in Photoshop or ImageReady to assign a variable to a layer other than the topmost text layer.
2.	Save the Smart Object Source file in the SmartObjects directory of your Site window.
3.	Select some HTML text in the Layout Editor and choose the Special > Convert > Text to Banner... command (Figure 149a). Figure 149a. Select text in the Layout Editor and choose Special > Convert > Text to Banner.
4.	In the Open dialog, select the Smart Object Source file you want to use and click OK.
5.	Notice that the Variables Settings dialog automatically copies your selected HTML text and applies it to your Topmost Textlayer variable. Change the text variable if you need to and click OK. Bonus Tip See the little red 1 character next to the T icon? That helps you differentiate the topmost text layer from other variable text objects.
6.	Compress the new target file using Save For Web (Figure 149b) and save the graphic in your Site Root folder. Figure 149b. Your HTML will be saved as a beautiful graphic using all the type and layer effects that can't be created with HTML and CSS. Stripping GoLive Data from Media Files Optimization and variables settings data is stored inside the target files (GIF, JPEG, PNG, SWF, and SVG) that you view in a Web browser. That makes the target files a little larger (typically 100 to 300 bytes per image) but doesn't affect their display at all. To get rid of the unwanted size overhead, you can strip out that data on site export/upload/publish by checking the "Strip GoLive data from media files" option. This setting is found under Site > Settings in the Upload/Export category. Bonus Tip GoLive intelligently names the target file using your variable text data.
7.	Your Text-to-Banner conversion is complete. If you need to alter the variable values, just select the image in the Layout Editor and click on the Variables button in the Inspector. Now whenever you need to change the graphic headers or navigation buttons on your Web site, all you have to do is change one Photoshop file (change a color, choose a different font, add a drop shadow, and so on), and all the Smart Objects in your site will be updated automatically.