1 Open a template in Illustrator and name it. Press OK. Open the Swatch library Pantone Process Coated. Set the Document Colour Mode to RGB for the web. Open View and pick Hide Page Tiling to remove the dotted lines. On the first layer make a large rectangle that covers the whole page. Lock that layer. Make a new layer.
Form a square. Duplicate it three times setting two below and one above. Change their colours. Choose them, press Shft+Alt, and drag to duplicate. Press Ctrl+D to repeat. Do this twice or as many times to fill up the top part of the screen.
2 Choose all the squares with Ctrl+A. Press Shift and with the Direct Selection tool, bring the square into the main body of the page.
3 Lock the previous layer. Open a new layer. Choose the Rectangle Tool and make a bar. Put a circle at each end as in a curtain rod. Open Pathfinder with all pieces selected and select Add to shape area. Click Expand.
4 With the Pen tool create a simple white curtain on a new layer. Choose the Paintbrush tool and a colour. Paint creases in the curtain. Select all and duplicate. Flip it using the Reflect tool. Save.
7 Open a new layer. Form some stars. Make sure to pick Round Cap to round off the points on the stars
8 Create some buttons on a new layer.
9 Make two buttons for each by pressing Ctrl+C and Ctrl+F to paste in front. Change the colour of the front button. Double click its path and name it.
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 Using the Slice tool, form a square around each off button. Choose Slice Options and name it. Do this to all the buttons. Select Save For The Web. You can also save normally and then exit Illustrator. Reopen it. Then unhide all the on buttons and bugs, 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. You can reduce the number of colours 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.
Open FrontPage. Choose each button and replace it with the off buttons.. Pick each button and follow the DHTML tutorial mentioned above. Make sure the DHTML bar is in view. Choose each button, select Mouseover, Swap the Image, and connect it to the 'on' button. Right-click the button and hyperlink. You will need separate pages for each button source. You will have to open a new page, import the graphics or text, go into Page Properties, name the page, stipulate what colour 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. Photoshop handles the process more professionally.)
|
|
|
|
|