Web Page Design Funhouse - Adobe Illustrator Tutorial

Jacquelin Vanderwood   1 Open Illustrator. Select New and choose the template 800 x 600. Also name the page. Press OK when done. Open the Swatch library Pantone Process Coated so that we have a variety of colors to choose from. Make sure the Document Color Mode is set to RGB for the web. Open View and choose Hide Page Tiling to get rid of the dotted lines. On the first layer create a large rectangle that encompasses the whole page. Lock that layer. Create a new layer. Make a square. Duplicate that square three more times setting two below and one more above so you. Change their colors. Select them, press Shft+Alt and drag to duplicate. Press Ctrl+D to repeat. Do this twice more or however many times to fill up the top part of your screen. 2 Select all the squares, Ctrl+A. Press Shft and with the Direct Selection tool, bring the square into the main body of the page. 3 Lock the previous layer. Create a new layer. Select the Rectangle Tool and create a bar as shown below. Put a circle at each end as in a curtain rod. Select Pathfinder with all pieces selected and choose Add to shape area. Click Expand. 4 On a new layer with the Pen tool create a simple white curtain. Select the Paintbrush tool and a color like light gray or blue. Paint creases in the curtain. Select all and duplicate. Flip it using the Reflect tool. Save. 5 Create a layer below the last one. Make two rectangles of two different colors. With both of them selected, drag onto the Swatches>Show Pattern Swatches palette to create a pattern.  Delete the two rectangles. Make a larger rectangle and apply the pattern. 6 On a new layer set at the top of all other ones, select the Type tool and type some different text with various fonts. Remember this is a fun site and we don't have to play by the rules. With all the text selected, click on the Horizontal Align button to center all. 7 On a new layer create some stars. Make sure to choose Round Cap to round off the points on the stars 8 On a new layer create some buttons.  9 Create two buttons for each by pressing Ctrl+C then Ctrl+F to paste in front. Change the color of the front button and double click it's path and name it i.e. onaboutjimmy, etc. 10 Add a bug from the brush library entitled Insects in the 'on' position for effect. Complete all the buttons. Turn off the 'on' buttons. Save. Make sure you've named all paths. 11 With the Slice tool, create a square around each off button. Select Slice Options and name it i.e. offaboutjimmy. Do this to all the buttons. Select Save For The Web. If you have trouble saving for the web, save normally and exit Illustrator. Reopen it. Then unhide all the on buttons and bugs we've created, go back into Slice Options and take the 'off' off of each name and replace with 'on'. Save for the web again. 12 Save it as Save Optimized As. Make sure to see if you can reduce the the number of colors in the piece to make the file size smaller. It will save an HTML file with all the off buttons first and then the on buttons, so then you will have both sets.  Once saved, open FrontPage. Select each button and replace with the off buttons we saved in Illustrator. Select each button and follow the DHTML tutorial mentioned above. Make sure the DHTML bar is in view. Select each button, select Mouseover, Swap the Image, and connect it to the 'on' button. When that is complete, right-click the button and hyperlink. You will need separate pages for each button source. What I mean by that is you will have to open a new page, import the graphics, text, and/or whatever will be on that particular page, go into Page Properties, name the page, stipulate what color the background will be and save the page. It's best to use a table for pages. Here is where you then hyperlink to the pages with the buttons. You are done. (Note: Illustrator is not as user friendly as some other programs in slicing and preparing graphics for the web. You will note that there is a jump in the 2 of the buttons which I have tried about five times to fix in Illustrator without success. Photoshop handles the process more professionally.)     Copyright 2003, Jacquelin Vanderwood, All Rights Reserved