Making a Web Set

Let's work on making a background.

Pink Rose Tile

1. Open a new transparent image 200 x 200. Flood fill it with one of you colors, I chose pink.

2. Create a new Raster layer and add whatever image you like and a drop shadow. The drop shadow here can be as offset as you like. I chose a pink rose because the blonde girl is holding a bouquet of them. The only trick here is that if you don't want your image to overlap when it tiles, you need to put it in the center and don't make it too big. I'll show you why. In the first image I sized the rose a little larger and in the second I made a seamless tile out of it.

Now there is absolutely nothing wrong with this tile, in fact it is very beautiful. But lets say you have an image that doesn't look right with the edges merging, then you would make your image more like this:

3. Merge all (flatten) and go to Effects/Image Effects/Seamless Tiling - click OK I have my settings on the default settings.

Title Graphic

Choose whatever image you want to use to match the theme and feel of your page. What we will do with it, is to create a title, the graphic at the top of the page. This is usually a welcome graphic which can be the name of your site or it can just say Welcome. I made mine to say "Making a Web Set".

Since most screens are about 800 pixels wide (some are wider) I try to make my title somewhere between 400 and 600 pixels wide. The height will depend on your graphic and what the text will be.

1. I began by opening a transparent image 450 x 300. You can start larger if you like more room to work in, and then crop later.

2. Choose a lighter and a darker color out of the graphic as a foreground and background color. These will pretty much stay the colors you use throughout.

3. Flood fill with one of your colors. Whatever you prefer as your main background color. I chose the off white of the brunette girls dress which is the color I then used for the tile in this table.

4. Add a new Raster layer and place your graphic here and position where you would like it. I resized my graphic to 60 percent to fit into my canvas. You should have something like this:

5. Now for the drop shadow. If you plan to make a textured background then your drop shadow should not extend too far from the edge of your image. And I'll show you why. Compare my title image at the top with this one:

See how the edge looks around the girls? That is because when you save as a transparent gif later the edge will be as deep as your shadow. If you like the look of a larger, softer shadow, just use a color as the background where your images will be placed instead of a textured tile. These are the settings I used:

6. Create a new Raster layer and add your text. I used the font Victorian because that matches my image. I kept my color palette with the ivory as the foreground and the pink as the background color. I used a border of 1 so that I would have some ivory color around my pink text. I then applied Super Blade Pro preset coconut ice from Meadows Studio and a drop shadow using the same settings as before. But this is where you do whatever would look nice with the graphic & colors you are using.

7. If you would like other touches to your title, such as flowers, sparkles etc, add them on separate layers and use a drop shadow.

8. Merge all layers (flatten). If there is any extra space around your tile, crop it now. The smaller the better so it helps with the download time of your page.

9. Save using GIF Optimizer. Check the box "Areas that match this color" and move your mouse over to the background color on your image that is on your workspace, notice it looks like a dropper now, and click. The background color will now become transparent. Then click "OK" and name and save.

You have now created the main graphic for your set! I like to leave it up on my workspace while I make the other graphics so I can refer back to it.

Onto the next step

Page 2