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

Major Confusion Website Tutorial part 2 step 2a+b :: Kaptain-Chaos Designs ©2008 page border - right: Kaptain-Chaos Designs ©2008 page border - left: Kaptain-Chaos Designs ©2008 previous - Web Site Creation Part 1 page: Kaptain-Chaos Designs ©2008 forward to the Web Site Creation Part 3 page button :: Kaptain-Chaos Designs ©2008 back to Web Site Creation Part 1 page button: Kaptain-Chaos Designs ©2008 forward to the Web Site Creation Part 3 page button :: Kaptain-Chaos Designs ©2008 navbar Tutorials: Kaptain-Chaos Designs ©2008 top of page button: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1c-f :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1c-f :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1c-f :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1c-f :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1c-f :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1c-f :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1c-f :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1c-f :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 1cf :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 2 step 2a :: Kaptain-Chaos Designs ©2008

One last thing to do: adding a bit of depth.


With our page quick shape still selected, choose the FX button, checking the ‘Drop shadow’ box. Set this to read, Opacity 75; Blur 30 pt; Intensity 10; leave the colour at the default black; Lock Centre; Distance 3pt and Angle 45. Now, with our page having its basic look, it is time to turn our attention to the buttons.

The other two colours will be contrasting colours using the tint colour wheel. Let's click and drag this colour wheel onto our workspace, resizing it to w 400 pixels x h 400 pixels. Do the same with a new instance of the 'shade' colour wheel. There will now be three colour wheels on our workspace: one teal tones, one RGB tint and the other an RGB shade wheel.


With the tint colour wheel selected, drag the colour picker to the shade colour wheel and pick the centre swatch of the 'orange' section - the one opposite the teal section. Click on the swatch in the colour tab and the 'tint' colour wheel changes to tones of the orange shade. Delete the RGB 'shade' colour wheel; we have no further use for it.


Select the page quick shape, click on the Line tab, set the options to 4 pt behind fill (see screenshot above). Now, with the colour picker tool, click on the outermost swatch in the section that is opposite the darkest section (R213, G166, B151). We will return to this new colour wheel once we have completed our buttons.

Selecting the ‘Shade’ colour wheel, with the left mouse button held down, drag the eyedropper tool from the ‘Colour tab and across the pasteboard to the second to darkest shade of teal. With the cross hair of the cursor placed in the centre of the swatch, let go of the mouse button. The picked colour swatch in the Colour tab now shows our teal shade. With the shade colour wheel still selected, click on this swatch and our shade colour wheel changes from RGB to a selection of tones of teal. Magic!


Select the background quick shape. Now take the eyedropper, select the outer most swatch of the darkest tone and click on the picked colour swatch. Our black background has changed to the teal colour tone just selected.


Now, clicking on the ‘+’ sign of the page layer, selecting the quick rectangle, go to the opposite section of the teal toned colour wheel, choosing the second swatch in from the outer edge. Make this the new colour for the page object. Already we can see our web page forming.

Step Two: Choosing a colour scheme.

With these two in place, it is time to go about a colour scheme. Drag a copy of the shade colour wheel across from the ‘My Designs’ in the ‘Gallery’ tab, placing it on the pasteboard. Reduce down to w 400 x h 400 pixels using the Transform tab. For the example, we are going to use a teal based theme. We will use a light page colour on a darker background providing definition, by using tones of the same colour. This is very simple to do, even though our colour wheels combined show only nine tones of teal, we will be creating a wide choice from just one shade.

Rename Layer 1 to ‘background’ and create a Quick shape rectangle on the page. Opening the Transform tab, lock the anchor to the top left of the quick shape and type in 920 for the width, 670 for the height and both x and y set to -10 (negative 10). With the shape still selected, remove the line, either by choosing ‘None’ in drop down box of the ‘Line’ tab, or selecting the line in the ‘Swatches’ tab choose the transparent swatch. Now make the fill of the shape black, we will set the correct colour property later.


Creating a new Layer above called ‘page’, add another quick shape rectangle, using the Transform tab set the anchor to top left, then this object’s settings to x 50, y 10, width to 800 and the height to 600. Selecting this object, again, make the fill white. Finally,on the context toolbar, set the radius to 7%. We have now begun to set up our Background and On Page appearance.


Save the project. My suggestion is to create a new folder to keep all of the rough work in, like this DrawPlus file and subsequent, original art work for the web page. Here’s a suggestion:


Under our name in the ‘my documents’ folder create a ‘Serif’ folder, now create a new WebPlus folder. Inside this folder create a new folder called My Website (or the project name). Finally, inside this folder create a ‘rough work’ folder, saving the DrawPlus file here as My WebPage. This will help keep all relevant files together in one place, it’s very useful to do this. I’ll explain this in more detail later.

Now we can set our page dimensions. In the Page Setup dialogue window set the width to 900 pixels and the height to 650 pixels. “900 pixels? I thought you said 800 pixels was the ideal size.” Someone asks. Correct! We will be keeping our content within the 800-pixel width, but we will add a bit of extra width to the page to create some more interest in the page appearance for those with a wider view. The height of the page is not as important as we can have a shallow ‘Master Page’, creating the taller pages on our website on an ‘as needed’ basis. All will be revealed as we progress. The other part in this window to set are the page margins, set left, right and top to 70 pixels each, setting the bottom to 90 pixels.

With a new blank page before us, we need to set up our page dimensions. The first place to go to is not the obvious ‘Page Setup’ dialogue, but the less obvious ‘Drawing scale’ options found in the toolbar. Open up the ‘Drawing Scale’ options window and set the Drawing scale distance to one pixel and the Ruler Distance to one pixel. What this does is a) tell DrawPlus that this is not a scale drawing b) automatically sets the ruler settings to pixels and c) enables us to set a pixel size in the Page Setup options (without having done this, the Page size options would have been stuck on cm or inches). Set both horizontal and vertical snapping options to one pixel. Finally, in the Layout section, check that the nudge distance is also set to one pixel. This way we will be working in whole pixel measurements throughout the project and the cursor keys will nudge selected objects one whole pixel at a time, should we need to.

Step One: Page set up.

This is the second 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 web site. If you have not already done so, I suggest you look over the first part of Creating a custom web site.


Okay, let the fun begin! We will start by firing up our copy of Serif DrawPlus. Select ‘New Drawing’ from the start up wizard, any page size will do, as we will be customising it in the first step.

Part Two: The Page

Creating a web site