webset8print

Making A Web Set

This tutorial shows you how to make a simple four layer web set for the Welcome page on your new MSN group.

I used PSP 8 to make my web set.

OK, this is how I make my web sets.

MAKING THE TILES

First I find an image I want to use for either the welcome header or the main image of the page. I've chosen a Knuddelkids tube and I'm going to use it on the welcome header.

Open your image in PSP. Press Shift and D to make a duplicate copy and close the original so you can use it again.

Open a new canvas Use the following settings.

This is for our background tile. We need to make 3 tiles so press Shift and D at the same time. This will duplicate the new canvas so you now have 2. Repeat so you have 3 new canvases.

Now click on the Dropper tool

We're going to choose a dark colour from the tube to make our first tile. Move the dropper over the tube. You will see a little box appear. This box shows the colour the dropper is moving over.

When you find a colour you like, left click once and this colour will go into the top stroke box. (Note: make sure you have the top stroke box set to solid colour. To do this, click on the solid black circle under the style box This is the solid colour)

Now click on the Flood fill tool and flood fill one of the new canvases with your solid colour.

We need a lighter for our top tile so the content is shown easily. To get a colour that matches your first tile, click on the top styles box so the colour palette options opens.

Now click on the little circle on the colour wheel and move it until you find a lighter shade of your original colour.

Now flood fill one of the bank canvases with your light colour

Our final canvas is going to be flood filled with a gradient, choose one that compliments your first 2 tiles. On the gradient options make sure angle is set to 0 and repeats to 1. This makes sure we don't have to use the seamless tiling effect because it's already done.

We now we have the start of our web set :o)

OK, we're now going to decorate the first tile.

I decided to use a piece of my tube to do this. I liked the strawberry which is hanging off her hat.

Click on the magic wand tool

and use the following settings

I zoomed in on my picture to make it easier to see the strawberry.

Holding down the shift key, click on the strawberry (or which ever part of your tube you are using) and keep clicking until the whole area you want is selected.

Now click on the copy icon then the Paste As New Image icon and you will have your strawberry on a new image.

Now click on the dark tile to make it active and go to Edit > Paste As New Layer

Your strawberry will now be in the middle of the canvas.

I duplicated the strawberry layer (right click on the layer and click duplicate) 4 more times and moved the strawberries around on the tile.

Now it's time to make the tile seamless. Go to Effects > Image Effects > Seamless Tiling

Choose your own settings, here's what I used

You can click on Show tiling preview to see what the finished tile effect will look like. If you don't like, try different settings.

When you're happy with your tile, save it as a .jpg file.

On the light tile I just added a texture.

Go to Effects > Texture Effects > Texture. I used the old paper texture with the default settings

Save your tile as a .jpg file. You can also save your gradient tile as we don't need to do anything to that.

OK, we've got all our tiles.

We now need to make our header, buttons and divider.

MAKING THE HEADER

Open a new canvas 500x500 Transparent. (I always make my canvas big so I have room to play, we're going to crop it later)

Flood fill the canvas with your light tile by loading it into the textures box.

Now click on the image you're using, in my case, it's the knuddelkid. Click on Copy then click on your new canvas to make it active. Go to Edit > Paste As New Layer.

Add a new layer for the text.

Choose your text colour and click on the text tool. Choose your text size and font and create as Floating. Click on your canvas to make your text box open, type in your text and click OK.

Move the text to where want it and if you like you can add an inner bevel and a drop shadow

When you've added everything you want to your header you can crop away the excess canvas.

To crop, go to your layer palette and turn off the visibility of the bottom layer

Merge visible the top 2 layers

Now click on the crop tool and on the tool options, click on Snap Crop Rectangle to Layer Opaque

You will now have a box around your image

Double click on the canvas, outside of the box and it will be cropped. Cropping this way makes sure you don't cut off any drop shadow etc.

Now you've done your welcome header :o)

MAKING THE BUTTONS AND DIVIDER

Open a new canvas 300x300 Transparent.

Flood fill the canvas with your light tile by loading it into the textures box.

Press shift and d to make a copy so you have one for your divider and one for your button.

First we're going to do the divider. A divider can be made in a number of different ways. For this one I'm going to use the preset shapes tool but I very often use a ding bat font or some part of the main picture. The fun is experimenting with different creations :o)

Click on the pre set shapes tool and choose rounded rectangle.

Click on one of your flood filled canvases and add a new layer.

Now draw out a thin line (the colour of your line will be decided by the colours, patterns or gradients you've got in your stroke and fill boxes. I tend to use the same colour that I used for my text on the header. I have this colour in the background stroke box and have the foreground stroke box set to transparent)

Add an inner bevel and if you like you can add a drop shadow.

Now go to your layer palette and duplicate the shapes layer

Use the mover tool to move the duplicated line down and to the right of the original line.

I then added the strawberry as a decoration but this time I copied and pasted the strawberry stem as well.

Turn off the visibility of the bottom layer and merge the top 2 layers like we did before on the header then crop.

Merge all layers and save as a .jpg file.

You now have a divider :o)

MAKING THE BUTTONS

Using your other canvas we're going to make the buttons.

I used the preset shapes tool again and this time I set it to Ellipse. This time I put the colour in the foreground stroke box and left the background stroke box on transparent. To do this, click on the little arrow under the top stroke box and it will swap them over.

Add a new layer to your canvas and draw out a small oval shape.

Add an Inner Bevel and a drop shadow if you want to. Now click on the strawberry to make it active and click on the copy icon. Click back on the button canvas and go to Edit > Paste As New Layer

Position the strawberry and crop the image the same way as before.

I always save this button blank so I can make copies of it to add my text. To make a copy, press shift and d.

Add you text and when you've done save your buttons as /jpg files.

Guess what....you're done!!!

Time to upload it to your group album :o)