Snowy Web Page
Created by: kiss~
Modified by: PSPUG Learning Center

This tutorial will show how to make a web set using layers, gradients and masks. The tutorial is designed for both PSP6 and PSP7. We will start with the planet graphic which you want to download, save to your hard drive and then use in your PSP program. We will then create the individual components (images) you may then use to set up your Snowy Web Page.

STEP 1: Download, unzip the Planet1.jpg graphic and load it to your PSP program. DUPLICATE it (Use Window || Duplicate) to preserve the original. Close the original image.

STEP 2: In the Layer Palette, Create a New Layer
(Click on the New Layer Icon) .

Label the Layer 'Gradient' and Press OK.

STEP 3: Set Foreground and Background Colors

PSP6:

• Foreground = White, Background = Black
• Use the Flood Fill Tool
  • Fill Style = Linear Gradient
  • Blend Mode = Normal
  • Paper Texture = None
  • Match Mode = None
  • Tolerance = n/a (grayed out)
  • Opacity = 100
  • Sample Merged = unchecked

• Click on the Flood Fill Options Tab:
  • Gradient = Foreground-Background
    (Click on Down Arrow to view options,
    scroll to find 'Foreground-Background',
    select it.)
  • Angle = 270
  • Repeats = 0

• Click on the EDIT BUTTON to edit the gradient pattern:
  • In the Gradient Editor, in the Gradient Area,
    set Location = 25
    Either by changing it in the Location Box,
    or, by using the slider and moving it to correct %
  • Then, click on OK

PSP7:

• In the Color Palette:
  • Set Foreground = White, Background = Black
  • In the Styles Box, Click on Right Arrow
  • Then, Click on the GRADIENT Icon (Second from Left)

• In the Gradient Window:
  • Style = Linear Gradient (Top Icon)
  • Click in the Box (top left) and
    Select #1 = Foreground-Background
  • Set Angle = 270
  • Set Repeats = 0

• Click on the EDIT BUTTON to edit the gradient pattern:
  • In the Gradient Editor, in the Gradient Area,
    set Location = 25
    Either by changing it in the Location Box,
    or, by using the slider and moving it to correct %
  • Then, click on OK

STEP 4. Use the FLOOD FILL Tool and flood fill the Gradient Layer.

The Planet Image is now covered over by the black-white gradient pattern.

STEP 5. Use MASKS || NEW || FROM IMAGE

• In SOURCE WINDOW, click on down arrow if needed and select 'THIS WINDOW'
• In CREATE MASK FROM,
  Source Luminance = CHECKED
• Click on OK

Now, you see your planet image as a gradient pattern with a white area now on the right of the image.

STEP 6: Create a New Layer Labeled SNOW

We want to change the background color to a new darker color.

• PSP6:
  • Click on the DROPPER Tool
    (Looks like an eye dropper)
  • Run your cursor over the left side of your image displaying the planet.
  • Watch values in the Color Palette R,G,B Box.
  • Select a darker blue.
  • Values I used are R108, G111, B139.
  • When you have a color you like, then RIGHT CLICK on the mouse button to set that color.

• PSP7:
  • Click on the BACKGROUND COLOR BOX in the Color Palette to bring up the Color Window.
  • Use your Cursor to run over the planet image.
  • The Cursor changes to the Dropper Tool
    (Eye Dropper).
  • Find a Darker Blue Color.
  • Click the Mouse to set it.
  • Then, Click OK to transfer color to the Background Color Box.
  • (Colors I used are R108, G111, B139.)

STEP 7: Now, we want to paint some Snowflakes for our Background Image using this new Snow Layer.

PSP6:

• Create two (2) New Canvas (File || New}: 100 x 100 Transparent, 16M
• In the Tools Palette, Select the PAINT BRUSH
  • Set Opacity = 100
  • Click on the Paint Brush Icon at Right
  • Check the CUSTOM setting
  • In the CUSTOM BRUSH WINDOW select the Snow Flake, (Second Row, Middle)
  • Click on OK
• Click on one of the new canvas and Fill with a White Snowflake (Left Click on Mouse)
• Click on the other new canvas and Fill with a Dark Snowflake (Right click on Mouse)
• Select the White Snow Flake canvas and copy it:
  EDIT || COPY
  • Activate your Main Image and Highlight the Snow Layer
  • Now, using EDIT || PASTE AS A NEW LAYER,
    Paste about 5 or 6 white snowflakes around your image.
    • After each PASTE, use the MOVER TOOL and move the image to where you want it on the canvas.
    • Continue in this fashion for each new snow flake pasted.
• Then, Select the Dark Snow Flake Canvas, and repeat the above steps. Use, EDIT || COPY
  • Activate main canvas, and highlight top layer
  • Use EDIT || PASTE AS A NEW LAYER and paste 5 - 6 Dark Snow Flakes.
    • After each paste, use the MOVER TOOL and move the snow flake to where you want it on the canvas.
    • Continue in this fashion for each new snow flake pasted.
• Next, you can move the snowflakes to get an arrangement wanted. Just use the MOVER TOOL. Click on middle of a snowflake and drag it to where you want. If you inadvertently move a layer, just use EDIT || UNDO and then move again.
• To Change the Size of Some Snow Flakes, first Click on a snowflake which will activate that layer. Then Use IMAGE RESIZE, then Move it.
  • Percent of Original = Checked
  • Resize All Layers = Unchecked
  • Maintain Aspect Ratio = Checked
  • Then set values to 75% or 50%
  • Then click on OK
• Next, Turn off the Bottom two (2) Layers (Background, & Gradient)
• Then, Use LAYERS || MERGE VISIBLE and rename the Merged Layer to 'SNOW'
• Turn on all three layers and view your product.

PSP7:

• In the Color Palette, Click again on the Foreground Color Box for the Gradient Window. Check the Box INVERT GRADIENT. Click on OK.
• In the Tools Palette, Select the PAINT BRUSH
  • Set Opacity = 100
  • Size = 100
  • Click on the Paint Brush Icon at Right
  • Check the CUSTOM setting
  • In the CUSTOM BRUSH WINDOW select the Snow Flake, (Pattern #5)
  • Click on OK
• Now, Paint Snow Flakes on your canvas. Keep all snow flakes within the canvas. Also, Change the size of snowflakes by changing the size value of above using values of 75% and 50% for some of the snow flakes. Use CONTROL+Z or EDIT || UNDO to fix errors or to begin again until you have a canvas to your liking.

STEP 8: Making The Image A Side Border For The Web Page

• Duplicate your Image: Windows || Duplicate
• Save the Original as File || SAVE AS
  'snow-template.psp'
• Close the Original
• In Duplicated Image, use LAYERS || MERGE ALL (Flatten)
• Resize it: IMAGE || RESIZE
  • Percent of Original = Checked
  • Width & Height = 35 %
  • Type of Resize = Pixel Resize (click on down arrow to select)
  • Resize all Layers = Checked
  • Maintain Aspect Ratio = Checked
  • Click on OK
  • Sharpen the Image:
    • PSP6: Image || Sharpen || Sharpen
    • PSP7: Effects || Sharpen || Sharpen
• Set Background Color = White
  • PSP6: Click on Background Box and set to WHITE
  • PSP7: Click on Background Box and Click on ARROW to set to Paint Brush Icon

• Next, IMAGE || CANVAS SIZE
  • New Width = 1280
  • New Height = 134 (or current height)
  • Center Image Horizontally = UNCHECKED
  • Center Image Vertically = UNCHECKED
  • Top = 0
  • Bottom = 0
  • Left = 0
  • Right = 1146 (or click in that area for value)
  • Click on OK

  • If the Star Images are not at left, redo using Edit || Undo and start again.
• Save the image as a gif file for your Web Page.
  • PSP6:
    • File || Export || Transport Gif
    • Click on the USE WIZARD Button and follow the pages to set options. Save as SnowtutBG.gif
  • PSP7:
    • File || Export || GIF Optimizer
    • Click on the USE WIZARD Button and follow the pages to set options. Save as SnowtutBG.gif
• You Background image is now ready for your Web Page

STEP 10: Making Snow Flake Buttons

Next, we will make a snow flake button which may then be reproduced to set up your buttons on the Web Page.

• Open up your snow-template.psp file
• Use the selection tool and select one of the smaller dark snowflakes.
  • Use: Selection Tool
  • Selection Type = Rectangle
  • Feather = 0
• Then, Copy it: Edit || COPY
• Then, Edit || PASTE AS A NEW IMAGE
• Finally, Layers || MERGE ALL (flatten) to get a white background

• To make the snowflake smaller for a button:
  • Use: Image || Resize
  • Percent of Original = 75%
  • Resize all Layers = Checked
  • Maintain Aspect Ration = Checked
  • Click on OK

• Create the Button:
  • Use: Image || Canvas Size
  • New Width = 150
  • New Height = 47 (or your current height)
  • Center Image Horizontally = Unchecked
  • Center Image Vertically = Unchecked
  • Click mouse in each box (Top, Bottom, Left = 0, Right = ~103) to set the correct size in correct box)

• Buttonize it:
  • PSP6: Image || Effects || Buttonize
  • PSP7: Effects || 3D Effects || Buttonize
  • Height & Width = 10
  • Opacity = 100
  • Click on OK

• Save it as a psp template: File || Save As snowbuttontemplate.psp

• To use as a button on your Web Page, use the button template, add text, and then save as a GIF file using the Wizard as above.

STEP 11: Creating a Snow Bar for the Web Page

In a similar fashion as in making the button, we will make a snow bar that may be used at top of a web page or at its bottom or both.

• Open up your snow-template.psp file
• Use the selection tool and select one of the smaller dark snowflakes.
  • Use: Selection Tool
  • Selection Type = Rectangle
  • Feather = 0
• Then, Copy it: Edit || COPY
• Then, Edit || PASTE AS A NEW IMAGE
• Then, Layers || MERGE ALL (flatten) to get a white background.
• Then, duplicate it: Windows || Duplicate
• Then, Resize it: Image || Resize use same settings as for button.
• Then, Use: Image || Canvas Size
  • Change New Width = 450
  • Click mouse in Bottom Box to set its value.
  • click on Ok

To Create the Snow Flakes on the Bar:

• PSP6:
  • Click on Flood Fill Tab and
    Set the Fill Style = PATTERN
  • Click on the Flood Fill Options Tab and
    Click on the Down Arrow and look for the snow flake image created before duplicating it above.
    Select that image
  • In the Bar Canvas, Click to Flood Fill with that image

• PSP7:
  • In Color Palette: Styles Foreground = White
  • Click on right arrow in color box to set TEXTURES (Third Icon from left)
  • Click on the Color Box for the Pattern Window
  • In the Pattern Window click on the Down Arrow for the patterns and Select the Image with the Snow Flake.
  • Make sure the Scale = 100%
    and Angle = 0
  • Use the Flood Fill Tool
  • In the Bar Canvas Image, Click to Flood Fill with that image

• If there is a partial snowflake image at the right, just crop the canvas to remove the partial image.
  • The most precise way to crop is to use the Selection Tool
  • Double Click on the Selection Tool
  • In the Right Box, enter a value less that 450, such as 430 and make sure CUSTOM SIZE and POSITION is checked.
  • Click on OK.
  • If the selection is not correct, just double click on the Selection Tool again and adjust the Right Box Value until you get the selection wanted.
  • Finally, Click on
    IMAGE || CROP TO SELECTION and you have your bar.

Now, just save this Image as an exported Gif File. Name it snowflakebar.gif.

Now, just save this Image as an exported Gif File. Name it snowflakebar.gif.

You now have all the elements to create your Web Page:

• The Side Border Background Image.
• The Button
• The Bar

-- Enjoy --