How to Hyperlink With Text in Illustrator

By Darrin Koltow

Plain hyperlinked text enables Web visitors to navigate your site, but can't set your site apart from competitors the way stylized text can. Your best choice for creating such text is a program dedicated to design, such as Illustrator. Though Illustrator's focus is visual design and not Web development, it still has two key hyperlinking features. One is the Attributes panel, which associates a URL with any graphic object, including rasterized text. Another feature is the Slice Options command, which associates a URL with a selected slice.

Attributes Panel

Create a new Illustrator document, then click the "T" icon on the Tools panel to run the Type tool. Type some text that you'd like to create a hyperlink for, and then click the black arrow on the Tools panel to run the Selection tool.

Drag the handles on the bounding box surrounding the text to size the text as needed. Click the Window menu's "Attributes" command to display the Attributes panel. Click the "Rectangle" item from the Image Map control to enable you to assign a URL to the text. Type the hyperlink's URL in the URL text box.

Click the File menu's "Save for Web" command to display the dialog box for saving Web images. Click the "Preview" button to open a page with your system's default Web browser. The page displays your text and the HTML codes for a complete Web page that contains the hyperlinked text.

Select the HTML codes, then press "Ctrl-C" to copy them to the clipboard. Open Notepad, and then paste the codes into this program. Save the document with an .htm extension, then close Notepad and return to Illustrator.

Click the "Save" button, then navigate to the folder in which you saved the Notepad document. Enter a file name in the "File Name" text box, then click "Save" to save your text image. In your Web browser, open the HTML document that you created in Notepad. The browser displays the text you created in Illustrator. Click the text to navigate to the link you specified.

Slice Options

Create a new Illustrator document, and then press "T" to run the Type tool. Type some text that you'd like to create a hyperlink for, then click the knife-shaped "Slice" tool from the Tools panel. Click and drag a selection region that includes only a portion of the text. For example, click and drag to surround only the first letter of a word with two or more letters.

Click the Object menu's "Slice" submenu, then click the "Slice Options" command. Type in the URL text box the URL to which the text should link. Click "OK" to close the dialog box.

Click the File menu's "Save for Web" command, and then click the "All Slices" option of the Export control. Click "Preview" to display a Web page that shows your text.

Move your mouse across the text, and observe that the mouse pointer changes to the hand-shaped hyperlink pointer only on the portion you created a slice for. Click that portion to navigate to the URL you associated with the slice.


Information in this article applies to Illustrator CS6. It may vary slightly or significantly with other versions or products.