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 4 step 6c+d :: Kaptain-Chaos Designs ©2008 page border - right: Kaptain-Chaos Designs ©2008 page border - left: Kaptain-Chaos Designs ©2008

Creating a web site

Part Four: Resizing our buttons

This is the fourth 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, second and third parts of Creating a custom web site.

previous - Web Page Creation Part 3 page: Kaptain-Chaos Designs ©2008 forward to the Web Page Creation Part 5 page button :: Kaptain-Chaos Designs ©2008 back to Web Page Creation Part 3 page button: Kaptain-Chaos Designs ©2008 forward to the Web Page Creation Part 5 page button :: Kaptain-Chaos Designs ©2008 navbar Tutorials: Kaptain-Chaos Designs ©2008 top of page button: Kaptain-Chaos Designs ©2008

Firing up Serif PhotoPlus we will resize and export the side panels, top and bottom page images and button images created in Serif DrawPlus, getting them ready to import into our Serif WebPlus project. Following the suggested route, all of these images are located in the Serif/WebPlus/my website/rough images folder in the user name’s Documents folder. The root ‘My Documents’ directory is slightly different between XP and Vista.

Step Six: Getting images ready in PhotoPlus

The page sides are first up. Opening both page side images (page_left.tif and page_right.tif), selecting one at a time, go to the Image>Image size option in the menu bar. Selecting the Quality end of the Resampling method window, the bottom slide bar reads Lanczos3. Change the Resolution pixels/inch (the dpi we used in setting in DrawPlus) to 96 and click on the width readout.


In this instance, our images are just a bit in between the actual size needed, fluctuating between 71 x 10 and 64 x 9. To get the correct size for these images we need to make some fine adjustments. On the ‘Print Size’ the read out defaults to inches, click on the downward facing triangle and choose ‘percent’ from the drop down list. Set both of these boxes to 100, the ‘Pixel Size’ readout now shows 70 x 9. In this instance we will uncheck the ‘Maintain aspect ratio’ box and enter 70 x 10 in the image size options. (This not something I would normally recommend due to the squashing and stretching that happens, however, as this is a shape that will be stretched on the web page (all will become clear in WebPlus), 70 pixel width is the most important measurement, 10 pixels height provides something to grab onto.


It is important to maintain aspect ratios with most images as this prevents the ugly squashing or stretching - particularly noticeable with people.


Create a new folder in the Serif/WebPlus/my site folder, calling it page_images. Using the ‘Export Optimizer’, export this image as a ‘Portable Network Graphic (png), naming it as page_left.png into this new folder.


Repeat this process for the right page section (size 70x10), exporting as page_right.png. This process is the same for the page_top (size 900x70),the page_bottom (size 900x90)  and both left and right deco images (both 20x24).


Once completed, close these images, choosing not to save the changes.

Open the three button images in Serif PhotoPlus. Selecting each image in turn, resize it from 300 dpi to 96 dpi using the Lanczos3 Window setting. Each one now reads 500 x 24 pixels.


Selecting the ‘Down’ image, right Click the background layer and choose 'Promote to Layer; rename the 'Background Layer to Down. Go to the Normal button, press Ctrl+A followed by Ctrl+C this selects then copies the image. Open the Down button image and press Ctrl+L, this pastes the Normal button into our Down image as a new Layer.  Rename the new Layer 1 to Normal. Open the Over button in the workspace, press Ctrl+A then Ctrl+C as before, opening the Down image in the workspace press Ctrl+L to past the Over state as a new layer. Rename this layer as Over.


Save this image as Buttons.spp in the rough work folder. Close the Normal and Over tiff images but don't save the changes.

With our Buttons.spp file we need to place four layout guides. Zoom in to around 400% and, clicking on the top ruler at 100, 200, 300 and 400 pixels, we will place four ruler guides in just the right place. There is a handy readout running along the bottom left of the workspace. These guidelines make the process of selecting the button shapes precise, and much easier to complete.


Setting the rectangular selection tool to normal, check that the snapping button at the bottom right of our workspace is set to ‘on’. Selecting the 'Over' Layer, drag a selection over the ‘Welcome’ button. Press Ctrl+C followed by Ctrl+V. A new image pops up. Export this image as welcome_over.png using the ‘Export Optimizer’ tool, saving it into the page_images folder as we did with the page_left and page_right. Close this image without saving - we have exported it which was our intent.


Now, with the Welcome button still selected click on the Normal layer, press Ctrl+C followed by Ctrl+V, a new Normal button will pop up. Export this as welcome_normal.png. Do the same with welcome_down. Repeat this process for all the buttons, naming each in turn (about_, news_, gallery_,contact_) with their relative name in lower case along with their state, do not forget the underscore!

This section is now complete, we can move on to Serif WebPlus, bringing all these elements together to create our web page.


Major Confusion Website Tutorial part 4 step 6a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6c+d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6c+d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6c+d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6c+d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6c+d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6c+d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6c+d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6c+d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6e-h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6e-h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6e-h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6e-h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6e-h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6e-h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6e-h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6e-h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6e-h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6f :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6i :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6j :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6j :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6j :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6j :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6j :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6j :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6j :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6j :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 4 step 6j :: Kaptain-Chaos Designs ©2008

Time to make the buttons.