Make a Simple Layout Background
This tutorial is with use of Paint Shop Pro 8. If you don't already have PSP8, you may download a trial of the latest version at corel.com. It is a useful program to buy if you are going to get into web graphic design. Remember that this is the way that I make layouts and there are many other techniques that you can use.
I originally wrote this tutorial for neopets explaining how to create a "blog" styled after their shop blogs. It can be easily adapted to create web layouts.
Step One: Prepare the Image
I found this image on a google search:
The first thing I'm going to do with the picture is crop out the white border. Select the crop tool, click anywhere on the image and drag. If you miss one edge, you can always adjust the rectangle. The area outside the crop lines will be deleted. In addition to cropping, you may also want to add other image effects such as blur or sharpen or use brushes. Basically, make the image how you want it to look. In this case, I did not add any extra effects.
Step Two: Adding the Text Box
Since pink is already the image's border, the red from her dress will make a nice contrast. Click on the top color in materials and let the box pop up, then click somewhere on her red dress to make that the active color. Make sure that no color is selected for the secondary box.
Select the preset shape tool . If you click the rectangular box at the top, you will see there are a lot of different shapes to choose from. For the outline of boxes, I usually use rectangle or rounded rectangle. Make sure that "Anti-alias" and "Create as vector" are checked, line style is solid, join is miter join, and that miter limit is at 15. The width I set to 4, because I want it to be thick and stand out, but you can make that as small or as large as you want.
Go to your image and click and drag your rectangle. It is similar to the crop tool where you can alter each side individually once you have it on the image. I lined mine up at the white & pink border and had it be slightly next to her ear on the left side. This is my result:
Step Three: Fading the Box
Select the flood fill tool . Set match mode to RGB Value, Tolerance to 100, blend mode to lighten, and opacity to 65. In the materials box, change the red color to white. Click in the rectangle on the picture. A pop up will come up and ask you to convert the layer. Click ok. You will then have to click within the rectangle again. Notice how the entire rectangle now looks faded. This allows the text in that box to be read easier.
You can also experiment with different colors to fill the rectangle. The tolerance changes how much of an area is filled. When set at 200, it covers the entire picture. The opacity changes how much you see. You can also experiment with that to see how faded you want the image to look.
Step Four: Adding Text
Select the text tool . Click on the image around where you want the text to appear. You can put it at the top or bottom of the text box. I am going to put my text at the bottom. Once you click, a box called "text entry" will pop up. This is where you put the text you want to appear on the image. I'm going to write "Welcome!" but don't click apply just yet.
The color of the text is the second color in the materials box. You may change that at any time. I'm going to use the pink from the picture, so I click on the second box, click on the picture's border to get pink, click ok, and now the text is pink. The primary color may be deselected if you like the text how it is. You can outline the text, which I think looks very nice. I selected the red from the border as the primary color. At the top where it says "stroke width (pixels)" I changed it to 1.0. The text should now be outlined. If it isn't outlined, you probably need to select a different font, as not all fonts will outline well.
At the top, you can also choose the font, size, style, and alignment. Alignment really serves no purpose, since you can move the text around later. Unless you know what you're doing, leave the line style, join, miter and kearning alone. Make sure anti-alias is checked. I'm going to use a font called Floralies at size 30.
Now that the text looks how I want it to look on the picture, I click apply in the pop-up box. Now the text is surrounded by dotted lines. If you click in the middle of those lines, you can position the text wherever you want it. I centered my text at the bottom of the box slightly above the line.
Step Five: Save the Image
To save, select file > export > JPEG Optimizer. If you know what you're doing, you can change the default settings, otherwise, just click ok and save your picture! Here is my finished product. Yours should look very similar:
For an example of how I used this image for a website, see my layout page. I hope you found this tutorial useful. You can do a number of different things in creating layouts or blogs, this is just meant as a helpful start. Good luck!