Skip to Main Content

Indiana University Indiana University


Create a website with rollovers using Illustrator and Dreamweaver

Knowing the basics of Illustrator and very little Dreamweaver, it has become very easy to create an interesting and fun website, complete with rollovers without knowing any code. Here’s an example of what can be accomplished. I used CS5 on my iMac, but you can use a PC and Adobe versions as old as CS2 just as well.

To Start with, create a new Folder on the Desktop (or wherever you plan to save your website) and title is “website.” This will provide a location where all your files for this particular website will be saved. It is important to keep all web files for one website in one location.

Launch Illustrator and create a New Document: Document Profile: Web (this will assure that your document will be set to a resolution of 72 ppi, optimized for web); document Size: 1024 x 768 (standard web dimensions). Dimensions are set in pixels. Save your new file as “website” in the Illustrator (.ai) file format inside the “website” folder. Saving your original .ai file will allow you to make changes accordingly and easily if needs be.

Designing different states on different layers while maintaing surrounding elements will result in consistency and flow when the site is completed. Under special circumstances you may need to have more than two layers, however, you will definitely need at least two layers to create the rollover effect. Another approach to this process would be to create one bottom layer where the overall design would be placed, with two upper layers that would hold rollover effects. Regardless, designing in layers is VERY important in maintaining exact dimensions when slicing different elements, especially states of rollovers. Keep in mind that you do not need concern yourself with elements that fall outside the artboard as Illustrator will only export what is inside the artboard.

Do add an uppermost layer that will hold guidelines for slicing as well as act as the slicing layer. You will only have to slice your artboard once using this layer. This will be a third layer.

Once the design of your website and states is completed, press and drag Guidelines on the guideline (uppermost) layer. Guidelines work well inside of Illustrator because the slice tool will snap to the guidelines by default which will help you to avoid unnecessary slices. The Slice Tool and Guidelines can only draw straight lines which means your slices will be rectangular in shape. Keep this in mind when placing guidelines where your intended slices will fall.

Once your guidelines are in place, use the Slice tool to begin slicing with only the State One layer and the guidelines layer visible, using the guidelines as guides. Keep in mind: for every one slice made, Illustrator will automatically determine the next slice so the pieces of the artboard remain as a whole. When slicing your page, turn caps lock on for the Slice Tool icon to appear as a cross hair.

After all slices are made, choose Save for Web and Devices under File on the Menu Bar.

In the Save for Web and Devices dialogue box, choose the 2-up tab. From here you will be able to determine the best quality in format and file size taking into consideration download time and optimal visuals. You can save each slice as individual file formats if needs be. It is a good idea to check Interlaced because this will build your image a line of pixels at a time when being viewed in any web browser. Basically, with users who have very slow connections, this will allow them to see that an image is being created rather than requiring them to stare at a blank page as the website loads.

Once each slice is optimized, click the Save button. The Save Optimized As dialogue box will appear. Locate the Folder initially created titled “website” under Location. Under Format, select HTML and Images. Under Slices select All Slices. Click Save.

You will be returned to Illustrator. Illustrator will automatically generate the code required to create an HTML page that you can upload and view online. If you;d like, you can check the “website” folder. You should see inside the folder: website.ai, website.html and an images folder which will contain all slices. If this does not exist, repeat steps starting with Save for Web and Devices, making sure you designate the “website” folder for the location of which your files will be saved.

In the Illustrator window, turn off all other layers except the next visible state (state two). Choose Save for Web and Devices under File on the Menu bar, choosing Two-Up in Save Fore Web and Devices dialogue box.

Unlike the first time, you will need to only optimize secondary states for rollover elements and disregard all slices that remain the same in both initial and secondary states. To do that, hold down Shift to select all slices to be optimized at once. Click Save. In the Save as Optimized dialogue box, locate the “website” folder for location and save as “rollover.” Under Format, choose Images. Under Slice choose Selected Slices Only and click Save.

You will be returned to the Illustrator window. Check the “website” folder to be sure that the “images” folder now contains “rollover” images. If the “rollover” images do not exist, repeat steps.

You are now done with Illustrator! Save and close.

Launch Dreamweaver. In the Dreamweaver welcome screen, under Open, choose “website.html” from inside your “website” folder; “website.html will open.”

Inside of Dreamweaver, choose Classic for interface and then the Design view on the Control panel.

Notice you are able to click on each slice in the Dreamweaver window. Select the first rollover element and locate the Place Image icon on the control panel. Use the drop down menu and select Rollover Image.

The Rollover Image dialogue box will appear. Name the element. Under Original Image locate state one of the rollover element in the “images” folder inside the “website” folder (this may be titled something like “website_01.png”). Under Rollover Image, locate the corresponding rollover image (something like “rollover_01.png”). Note: it is VERY important that all these elements are in the correct locations; without these correct locations, your website will break.

Notice that you have an opportunity to add a link connected with the rollover element. We will not be adding a link in this tutorial. You are also able to add alternate text at this point as well. It is always a good idea to add a description in the alternate text field. Click Okay.

By default, Dreamweaver will place the rollover element aside the original image selected. This will make your website appear broken and may be somewhat alarming. Simply delete the original image. Sometimes you will need to then “refresh” the window to see the changes made. You can do this by changing views on the control panel.

Under File on the Menu bar, choose Preview in Browser. To preview in browser, you will need to Save the file. Click Save. If the rollover effect does not work, chances are that you deleted the rollover image instead of the original image when placing the rollover. This is a common mistake. All you need to do it repeat the steps.

Repeat steps for all other rollover elements. Keep in mind that Dreamweaver, by default, should automatically target the last location used. Be sure that your state one images are named “website” and secondary images are named “rollover.” Preview the site in a browser window by choosing Preview in Browser under File on the Menu bar. Be sure to save often. Once completed, close Dreamweaver.


4 Responses to "Create a website with rollovers using Illustrator and Dreamweaver" to “Create a website with rollovers using Illustrator and Dreamweaver”

  1. jackie @ Toronto Web Depot Says:

    Good post Stephanie.
    I’m sure many new illustrator and dreamwever users will find this helpful.
    If i could add one thing, as i remembered when i first started learning about web design and development, following the tutorials on the internet can be frustrated sometime because the diffrences of software versions and the operating systems. With a better knowledge of the software i’m sure many can figure their way around but for the novice, one slightly diffrence from the tutorial image and from what they are seeing, could cause them to be frustrated. So it is a good practice to let your readers know what version of of the software and what operating system you are using right from the start. Also let them know the diffrences or where to locate the button or function of they a re using a different version that would greatly help to keep them on track and finish your tutorial.
    If i can be any more help, drop me a line at Toronto Web Design and Development, I’ll be glad to hear from you.

  2. Stephanie Watters Flores Says:

    Hey! Thank you for the head’s up! I did not even consider that — and such an important aspect to remember as well. I edited the post accordingly :)

  3. Dustin Says:

    Hello Stephanie! Thanks for the article. I am working on CS3 and using 10.4.11 on a Mac. Lets say that I have all my slices completed and then I need to edit them later, can that be done with the original .ai file or would that have to be done in Dreamweaver? With very little knowledge of DW, I would prefer to edit in .ai unless it’s simple to do in DW. Much thanks!

  4. Stephanie Watters Flores Says:

    That can *and should be) done in Illustrator. As long as you have your original slices, you can just save the images in the same image folder and upload them to your server with the same name as the image you are replacing and voila! That’s it :)

Leave a Reply

Get Training Tips via RSS Subscribe to Entries feed or Read Comments via RSS Subscribe to Comments feed.