Create An Interactive Graphic On Your Website

Create an Interactive Graphic on Your Website

When you are building a new website you will want to make it as interesting for visitors as possible. The site’s appearance is one part of this, but it is also good to move beyond standard navigation buttons by turning graphics into clickable hyperlinks. These links can take the visitor on a tour of the site, or to a video explaining it. To make your graphics clickable you will need Adobe Photoshop and a web editing program like Expression Web that can create layers.


1. Load the graphic you want to use onto your computer either by scanning it in or transferring from a storage media like a CD, SD card, flash drive or digital camera.

2. Open Photoshop. Select “File” and click “Open.” In the dialog box browse to the graphic you loaded and open it.

3. Select the “Slice” from the toolbar and begin slicing your graphic into clickable sections. Name each slice, even the ones you don’t plan to make clickable hyperlinks.

4. Select “File” and click “Save for Web or Devices.” In the dialog that opens name your file, select a location to save to and save the slices as JPEG files.

5. Open Expression Web. Select “File” and click “Recent Web.” Select the website you want to work on and open it.

6. Select the particular page you want to add the graphic to from those listed.

7. In the “Layers” panel click on the “Add Layers” icon. Click inside the layer. Go to “Insert” and browse to the images you created. Select one and it will be inserted inside the layer. Place it where you want it. Repeat this to add the other parts of the design.

READ  Import A Mesh From Maya To Photoshop

8. Right-click on each slice that you want to create a hyperlink for. In the dialog select the page, graphic or file you want to link to. Save your work.