The tutorial demonstrates how to create rollover buttons for the home page of an imaginary website for children.
Choose Start New Drawing from the Startup Wizard. Select a page size of your choice and click Finish.
From the QuickShape menu select the QuickRectangle and draw a rectangle approximately 200 x 100 pixels. To set pixels as the unit of measurement, choose Options from the Tools menu and on the Layout tab select Ruler Units: pixels. Check the dimensions as you draw the rectangle on the Hintline toolbar at the bottom of the screen. Click on the rectangle and change the radius of the corners by dragging the slider. Choose a colour from the Colour Window and None on the Line menu.
From the Gallery, select the ShapeArt section and then the Splats category, then drag a splat onto the page. Choose a fill colour and a line colour from the Colour tab. Adjust the width of the outline on the Line tab. Right-click on the splat and choose Filter Effects from the context dialog box. Check the Bevel and Emboss option and add a Drop Shadow too if you wish.
OCR Level 2 National Certificate in Information Technology Unit 21 Creating computer graphics
Click on the Text tool and then on the page, before choosing a suitable font and point size. Type your
button label e.g. Craft. The example uses a font called Kids.
[A] To add a drop shadow, right-click on the text and again select Filter Effects from the window. Check the Drop Shadow effect and experiment with different settings. The example also uses an Outer Glow in black to define the edges of the text. Click OK when satisfied. [B] Position all three button elements and align them centrally by choosing Align Items from the Arrange menu. Save your work.
[A] [B]
The other three buttons are constructed in the same way using different QuickShapes.
The house icon on the Home button is a combination of shapes: draw rectangles for the house base, door, window and chimney with the QuickBox tool; use the QuickPolygon tool to draw the roof, then customise it to form a triangle by changing the number of sides to 3. Arrange the base, roof and chimney as in [1] and select all the objects with the Pointer. Now click on the Add button on the Standard Toolbar to combine the three shapes.[2] Fill the new shape, adding text and other effects as before.[4] [5]
OCR Level 2 National Certificate in Information Technology Unit 21 Creating computer graphics
Align the group of buttons to the left and space them out evenly: Arrange > Align Items > OK. Save your work.
Now that the buttons are finished, rollover states can be added so that your mouse pointer triggers certain events as it rolls over or clicks on a button graphic – in this case the colour of the button will change from yellow (normal state), to pink (mouseover state) as the pointer moves over it, to green (down state) when it is clicked on. DrawPlus automatically generates the JavaScript code to perform these actions.
Click on the View menu and select Show/Hide Web Objects button. Select the first button by selecting it with the Pointer, right-click and choose Inset Slice Object. Blue slice lines appear, identifying the buttons as web objects. Repeat this for each button. Change the size of the slices so that they are all the same size. Right-click on the blue highlighting for the first button and choose Properties.
You can define the different actions and states for a rollover button in the Properties dialog box. Type the hyperlink target page address into the URL box; add a tip or explanatory comment in the Text box – this will pop up when the mouse rolls over the button; choose how many active states you want for the button in the Rollover Details section. The first three states are the most commonly used:
Normal – this is the default state of the button before any event is triggered; Over – the state of the button when the mouse pointer moves over the button; Down – the state when the button is clicked; Down + Over – the state of the button after being clicked would change again if the mouse moved over it subsequently.
OCR Level 2 National Certificate in Information Technology Unit 21 Creating computer graphics
When you select any of these states new layers are added to the document: the original layer is the Normal state, whereas the Over, Down and Down + Over layers allow you to edit the graphic to create a different appearance for the other active states: in this example the button changes colour.
To create these alternative states, toggle off the Show/Hide Web Objects from the View
toolbar, as it is not needed at present. Select all of your buttons with the Pointer, and click the Copy icon on the Standard toolbar. Click on the Over tab to switch to that layer, and then Paste. The copy will have the exact registration of the original buttons. Deselect the objects by clicking in a space well outside the active area, and make any changes. Click on the Down layer and paste the buttons again. Make more changes. In this example we have changed the colour of the background for each different state.
OCR Level 2 National Certificate in Information Technology Unit 21 Creating computer graphics
Select Preview in Browser from the File menu to preview the rollover effect. Save your work.
To export the rollover buttons to a web page, it is advisable to create a dedicated folder for them inside your web graphics folder and within your main website folder. Make sure that Web Objects are visible (toggle the Show/Hide Web Objects on), tick the Image Slices box and choose Export then Export as Image from the File menu. Select a file type and other settings in the Export Optimizer dialog box. Check the download time with the Estimate Download Time button. Finally, click Export and save your rollover buttons to the new buttons folder you have created.
DrawPlus will export all the slices and each state as a separate image. It will also create an html file containing all the code to make it work as a rollover in your chosen website.
OCR Level 2 National Certificate in Information Technology Unit 21 Creating computer graphics
Serif WebPlus will let you import this file directly into your website page. To do this first open the website you have been creating in WebPlus. From the Insert menu, select Web Object, and then DrawPlus Rollover. Navigate to the buttons folder where you saved your graphics earlier, and select the html file that DrawPlus produced when you exported the files. Click on Open.
Drag a rectangle onto the page to the required size. WebPlus will show a placeholder for the navigation buttons. You can view how the buttons will look on your finished page by clicking on the File menu and previewing it in a window or in a browser.
