LESSON 10 – LAYOUT TECHNIQUE – IMAGE SLICING

WORK – CREATING AN INTERACTIVE INTERFACE

Find a neat interface image on the web. Use image slicing, graphic editing and then mouseover code to make it an interacting interface.

SUMMARY

1- Find a cool image to work with on the Internet.

2- Using Fireworks, slice the image up into pieces. Export.

3- Using Photoshop, make alterations to copies of images that will be mouseovers.

4- Add mouseover code.

DETAILED STEPS

STEP 1 - SEARCHING

Find a neat graphic interface on the internet. Save it as a single image. (You can simply capture the screen to do this.)

Here are a few ideas that might inspire you.

STEP 2 - SLICING

A) Using Fireworks MX (or any other software that you prefer), split the image into several parts.

B) Add links (and alt text) for hotspots by using select each slice and adding the information at the bottom.

C) Export your work.

STEP 3 - PHOTOSHOP

A) Make a copy of the files that contain images that will be links. Be consistent with your file naming.

B) Open each copy of such file in Photoshop and alter that image in whichever way you want.

C) Save the file. Save it in a format that can be supported by the web. Not PSD!

STEP 4 – MOUSEOVER

A) Open the html document.

B) For each desired mouseover, find the img tag.

C) Add the mouseover code.