Major Confusion :: Sharing the FUN with Serif software page footer: Kaptain-Chaos Designs ©2008 Major Confusion :: Sharing the FUN with Serif software Page Header : Kaptain-Chaos Designs ©2008 Major Confusion navbar Links: Kaptain-Chaos Designs ©2008 Major Confusion navbar Contact me: Kaptain-Chaos Designs ©2008 Major Confusion navbar: Kaptain-Chaos Designs ©2008 Major Confusion navbar: Kaptain-Chaos Designs ©2008 Major Confusion navbar Gallery: Kaptain-Chaos Designs ©2008 Major Confusion navbar Tutorials: Kaptain-Chaos Designs ©2008 Major Confusion navbar Home: Kaptain-Chaos Designs ©2008
Kaptain-Chaos Designs

Home

Tutorials

Gallery

Links

Contact

Site map

Privacy Policy

Terms & Conditions

page border - right: Kaptain-Chaos Designs ©2008 page border - left: Kaptain-Chaos Designs ©2008

Creating a web site

Part Three: The Buttons and side panels

This is the third part of a series working through the processes involved when creating a customised graphical web page environment, avoiding the use of a template driven site. The programs involved in this process are Serif DrawPlus, Serif PhotoPlus using Serif WebPlus to bring it all together and publish to our website. If you have not already done so, I suggest you look over the first and second parts of Creating a custom web site.

previous - Web Site Creation Part 2 page: Kaptain-Chaos Designs ©2008 forward to the Web Site Creation Part 4 page button :: Kaptain-Chaos Designs ©2008 back to Web Site Creation Part 2 page button: Kaptain-Chaos Designs ©2008 forward to the Web Site Creation Part 4 page button :: Kaptain-Chaos Designs ©2008 navbar Tutorials: Kaptain-Chaos Designs ©2008 top of page button: Kaptain-Chaos Designs ©2008

Following on from the page setup section of our page design, our next step is to create the buttons that will interact when a mouse rolls over or clicks on them. We will be creating three states for our buttons, a ‘Normal’ state, an 'Over' state for when a mouse rolls over the button and a 'Down' state for when the mouse is pressed to activate the button, the 'Down' state will also be used for our 'we are on this page' button appearance. Although Serif DrawPlus has its own in-built button generation script, we will be creating the buttons without using it this time as we will be exporting them to re-sample and re-size from within PhotoPlus. This is because PhotoPlus utilises the superior Laczos3 algorithms when re-sampling (it is not essential to understand this), it will also provide us with some practice using Serif PhotoPlus.

Step Three: Creating buttons.

To begin with, we will set up ruler guides. Click in the horizontal ruler area above our workspace and drag a red guideline down to 30 pixels – look at the read out along the bottom of the workspace, this provides us with instant feedback. Drag another down to 54 pixels. Next, we need two more dragged from the vertical ruler this time, the first placed at 300 pixels, the second at 800 pixels.


Tip: Zoom in to at least 100%. Look along the bottom left of the workspace, there is a handy ‘live’ read out displaying the current guide position.

Adding a new layer, calling it 'buttons normal', drag a quick rectangle out on the page. Cross over to the Transform tab, check the top centre anchor point and enter the following: x 350, y 30, w 90 and h 24. With the object still selected, we set the colours from our teal tone colour wheel. For the fill swatch, the example uses the centre swatch opposite the darkest section. For the line, either choose a transparent fill or select the no line from the line tab.


We could round off the edges or add a line fill if wanted. For the purpose of this project, we will leave this as created, adding another feature further on.


Still selecting the quick rectangle, go to Tools>Replicate and set the Replicate options to, 5 columns, 1 Row X spacing = 10, Y spacing = 0. We now have an additional four shapes, evenly spaced, spread out in this area. This forms our navigation button base.


Double check the positioning of the four new rectangles. Choosing the top centre anchor point, the x co-ordinate for each should read: 350, 450, 550, 650 and 750. Yes? Now, selecting all five objects, group them, naming this group, ‘buttons’.

Our next step is to add an inner shadow to this group creating the impression that there is a hole in our page where these buttons are. Still selecting this group, open the FX window and check the Inner Shadow box. Make the settings read Multiply, Opacity 75, Blur 6 pt, Intensity 2, Lock the Centre, Distance 5 and angle 45.

The text labels come next. With our headings already chosen it's simply a case of adding Artistic text in the relevant font, colour and place. For this project, we will use Verdana 10 pt (a different font can be chosen if required, providing it is legible), black for the colour but with 80% Opacity, providing a subtle hint of the teal colour to show through. This time, set the anchor to the centre position (both horizontally and vertically) of the transform tab. Set all of the text to y 42. The x reading is as follows: Welcome 350, About Me 450, News 550, Gallery 650 and Contact Me is 750. Group the text, giving it the name... 'text'!

Creating the 'Down' state buttons is easy. Create a new layer called 'buttons down'. Simply select both groups on the ‘buttons normal' Layer, copy and paste into the new ‘buttons 'down' layer. Now, selecting the 'button' group (just left click on the group name in the layer tab), choose a slightly lighter tone, for the example it is the second from the outside swatch in the same section (opposite the darkest section). Now for the text, selecting the text group, choose the darkest centre swatch - no transparency.

Step Five: Selecting and exporting.

Last but not least, the 'Over' state buttons. Create a new layer called 'buttons over', copy and paste the 'Normal' state buttons into this new layer. With the button group selected, using the colour picker, select the section below the lightest section, choosing the second swatch in from the outermost one (R120, G147, B147). This colour is slightly lighter than the 'on page' colour providing a semi-lit effect. To aid this effect we make our text white by clicking on the white swatch, adding an 80% Opacity.

To enhance the lit up effect further we will add a simple light to our 'over' buttons on this same ‘button over’ layer.


Choosing the lightest swatch on the Teal tone colour wheel, create a new ellipse anywhere on the page and any size (ensure there is no line either by choosing a transparent line swatch or ‘None’ from the drop down box on the line tab). With the ellipse still selected, make the anchor points in the transform tab top, centre. Enter the following into the transform tab, x 350, y 18, w 90 and h 28. Now open the transparency tab and choose 'Ellipse' from the drop down list, selecting the last one (Ellipse 26).


In the context toolbar, above the workspace, there are two readouts for the transparency settings, one at 100% the other at 0%. Change the 100% to read 80%, did you notice the slightly over the top colour tone down to a slightly less obtrusive ellipse? With it still selected choose Tools>Replicate, it should still be reading the amounts added before, simply click ok. Double check the top centre anchor position of the new ellipses, they should read, 350, 450, 550, 650 and 750.


Selecting all of these lights, group them, calling them 'lights'. Do not worry that some of the light spills out over the top of the buttons; we will correct this on the next step. Take a look at the example button in the left panel.


Save our progress!

Buttons area completed, time to turn our attention to exporting our page so that we can use it in WebPlus. We will do this in a roundabout way, instead of using the 'Export' straight into the final format and size, we will export selections as high quality tif format images, open them in PhotoPlus, to carry out some minor adjustments in its superior bitmap image handling before exporting it finally into the format for Serif WebPlus to use.

Create a new layer, calling it Selections; move it below our background layer. Our first ‘selection’ is the button group. Create a new quick shape rectangle to go over our buttons called... ‘buttons’! Make sure that there is no line, no transparency and no fill (do not use the transparent swatch for the line this time, it must be the None option in the line tab). On the transform tab, anchor at ‘top, centre’, set this object to x 550, y 30, w 500 and h 24.


With this still selected choose ‘File>Export>Export as Image’. Choose Tiff as the format then click on the settings tab, set the dpi to 300 and check the ‘Selected region’ (DPX2) or ‘Selected Area’ (DPX3) radio button. Click the Export button and choose your ‘Destination’. Following my suggestion earlier this will be to the relevant user name folder in the Documents and settings folder -  ‘/Serif/WebPlus/my website/rough work. Save this image as buttons _over.tiff.


Back on our layers tab, click on the eye and printer icons on our ‘buttons over’ tab to turn them off, ensure our ‘buttons’ object is still selected and repeat the export process, this time calling our image buttons_down.tiff. Now hide the eye and printer icons of the ‘buttons down tab and export the ‘buttons_normal.tiff.


Note: It is not necessary to turn off the eye icon when exporting the image, only the printer icon affects what is being exported, we turned off the eye for our own clarity - what was on the screen is what we were exporting.

With the button area completed we can concentrate on the page. This comprises two shapes, one small quick shape rectangle placed over a portion of our page side then repositioned on the other side and the another for the top and bottom of the page covering the whole width of our page. The sides will be stretched on the main pages because these may vary in height. Importing them into Serif WebPlus and stretching will create the appearance we have on our DrawPlus mock up.

This is our work in Serif DrawPlus completed.  We will discover more regarding our exported graphics in the next step.


Remember to save the work. We can always return to this file and carry out adjustments or additions later if required without messing up our web site.


Now we turn our attention to Serif PhotoPlus.

Create a new layer above the Page layer called ‘elements’, add a quick rectangle. In the Transform tab, anchor the top left, setting X 280, Y 34, W 8, H 16. In the toolbar set the radius to 100% and for the colour, using the orange colour wheel, select the outermost swatch of the section opposite the darkest section. Select either ‘None’ for the line or a transparent swatch. Click on the Fx button.


Selecting the Bevel and Emboss check box, uncheck the ‘scale with object’ option box, selecting ‘Inner bevel’ from the drop down box. Adjust the settings to read Blur 3, depth 100, Soften 0.  Name it in the layers tab as left deco small


With left deco small selected, press Ctrl+C followed by Ctrl+V to copy and paste this copy in place. In the layers tab, select the top version, change the name to left deco tall. With this shape selected on the transform tab, set X 292, Y 30, W 8, H 24.


Now we need to copy and paste these two objects again, one at a time. The new small deco name right deco small with anchored top left reading X 812. The new large deco name right deco large, anchored at the top left reading X 800.


Now group the left shapes naming the group ‘deco left’, then group the right shapes naming this group ‘deco right’. The ‘deco’ groups can be used in several places to create continuity and contrast to our web page.

Step Four: Adding some contrast to the page

If you wanted to create some more on page elements like ‘Next’ or ‘Previous’ buttons, wait until we have completed the next step and exported our buttons first. Then it is simply a case of changing the text in two of the existing buttons (in all states) and exporting (under a new name). This process of exporting is described below.


Other elements, for example, a logo or some added lines, could be created on this page and exported in the same way to Serif PhotoPlus (as an example, the four line ‘flash’ running along the bottom of the page here was created in Serif DrawPlus first - as was the entire page!).


Remember, this is only one way of creating the graphics for a web site, much graphic work can be carried out solely in Web Plus. This project is aimed at creating more familiarity in Serif DrawPlus, Serif PhotoPlus and Serif WebPlus as a package.

For the two ‘deco’ sections, click on the elements layer to select it. Now, selecting each group in turn, export as a 300 dpi tiff, naming the left group deco_left.tiff, and the right, deco_right.tiff. Export these to the same ‘rough_work’ folder - DrawPlus automatically selects this folder.

Serif DrawPlus X2 graphic Serif PhotoPlus X2 graphic Major Confusion Website Tutorial part 3 step 3a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part part 3 step 3a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3b+c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3b+c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3b+c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3b+c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3b+c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part part 3 step 3b+c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3b+c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3b+c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part part 3 step 3d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part part 3 step 3e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3f+g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3f+g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3f+g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3f+g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3f+g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3f+g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3f+g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3f+g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3f+g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3f :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part part 3 step 3h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3f+g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3f+g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3f+g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3f+g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3f+g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3f+g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3f+g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3f+g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3f+g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3i :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5j :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5e-g :: Kaptain-Chaos Designs ©2008

Try rolling the mouse and clicking on this example button. This is how the navigation buttons will look on our web site.

Major Confusion Website Tutorial part 3 step 4a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 4a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 4a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 4a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 4a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 4a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 4a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 4a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 4a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 4c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 4b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 4a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 4a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 4a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 4a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 4a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 4a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 4a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 4a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5a :: Kaptain-Chaos Designs ©2008

First, create one rectangle anywhere on the page naming it sides, ensure the line is set to none. In the transform tab set the anchor to top left with the following settings, X 0, Y 70, W 70, H 10. With this selected, Export as before saving this as page_left.tiff.


Second, with the rectangle still selected, leaving the anchor in the transform tab, enter X 830, leaving the rest untouched. Now export saving this as page_right.tiff.

Thirdly, for the top of our page, ensure the printer icon is off for each of the button layers and the elements layer - this will prevent them from being exported along with the top of our page. One new quick shape rectangle as before, making sure the line is set to none, top left anchor, with these settings: X 0, Y 0, W 900, H 70. Name this as page t+b. Export ththe image as page_top.tiff


Lastly, the bottom of our page.  Set the rectangle as Y 560 and H 90 - this is deeper than the page top, lining up with the bottom page margin. With this selected export as page_bttm.tiff.

Of course, it’s quite easy to ignore the top and bottom page sections and just use the sides with a straight top and bottom of the page, but this means, unless your pages are all going to be between 1000 and 1200 pixels high, there will be a cut off line that looks wrong. At the very least, use the bottom section as described - it is very useful to use this (it will be covered later) - however, the choice is yours! Remember, if Next and Previous buttons are wanted, change the text in all states, exporting the buttons under a new name.

Major Confusion Website Tutorial part 3 step 5c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 5c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 3 step 3e :: Kaptain-Chaos Designs ©2008

To provide some visual interest to our page, we will add a little contrast to either end of our navigation buttons.

For a look at what we are aiming towards in DrawPlus, please click on this link for a full sized preview of the page with normal buttons in a  DrawPlus window.