|
|
Now we will be making backgrounds. Its nice to be able to make your own backgrounds for your web pages. They can be plain or as fancy as you like. The only real problems that backgrounds have is when you want to use a large picture as the background. These backgrounds take so long to download to someones computer that they will more than likely go on to the next page than wait for the page to load. You can make a really small gif into a background but then sometimes text is hard to see. Generally using a gif of about 100 pixels by 100 pixels is good for making backgrounds. If your browser knows the picture is a background then it will replicate it as many times as needed to fill the page.
Here is an example that took me 5 minutes to make. I took a picture of Pegasus that i had, reduced the size to 63 x 50 pixels. then starting with a blank image sized 700 x 50 pixels, I used the blue in the picture for the background color. Then i moved the picture over to the blank image and positioned it where I wanted it. Clicking the text button let me put the pegasus text on the lmage and after promoting the text to a layer i faded the text to where i liked it. Instant background that people will look at . Want to see what it looks like on a page? Click on the image below and you will see it.
I have made the above image smaller to fit the page better. It is half the real size that goes on as a background for a web page. Now the details on how to do this.
First I made a blank image by clicking the white page icon at the upper left corner. A window opens up that says New Image. Type in 700 pixels width and 50 pixels height, set the resolution at 72 pixels per inch. set the background to white, and colors to 16.7 million colors. Then click OK. Next you must select the image you want to use like the pegasus i picked. This pegasus picture i found on a web page was only 102 pixels wide and 81 pixels high, so it was easy to reduce to the size i wanted which was 63 pixels wide and 50 pixels high. When you are reducing a picture in size but want to keep the same proportions, check the maintain aspect ratio at the bottom of the resize window. The picture wont distort that way. I let the width resize itself because i was only concerned with the height.
Now I wanted a background color for the page to match up with the picture. So I clicked on the eyedropper button
in the left column, moved the curser over the pegasus picture till i found a color i liked, then left clicked on it. This changed the color pallette foreground in the right hand column to that color. Now highlight the blank image by clicking on the titlebar, go over to the left hand tools column and click on the paint bucket button
. Make sure that the tool control for Fill is set like the picture below.
Click this button to show
fill settings at right.
Now left click in the middle of the blank image to change the color to what you picked. To add the picture to the image, highlight the pegasus picture,
then go up and click Edit then Copy (shortcut is ctrl + a, then crtl + c). You will see a moving dotted line around the picture. Now highlight the background image by clicking on its titlebar, then go up and click Edit then Paste (shortcut is crtl + l). This will copy the picture to the the background. Now click and hold your curser in the middle of the pegasus picture and drag it to where you like it in the background.Then to add the letters I used a font called alfred heavy hollow, changed the foreground color to white, typed the word in and , while it still had the dotted moving lines around the letters , left clicked in the middle of the letters and moved them in the position i wanted. I wanted to fade the letters more into the background so i had to change what is called the floating selection (the letters) into a LAYER. This is accomplished by clicking "selections" at the top then clicking "promote to layer". If you show your layers control palette by clicking on the red and blue button
at the top, you can adjust the transparency of that of that layer. In the middle of the layer information is a little line with a button and the number 100 next to it
. Click on the button and move it to the left to adjust it where you want it.
Save the file as a gif or jpg and you have your background made for a page. Playing around with PSP you can make just about any kind of background that you can think of. Now we will move on to adjusting and resizing pictures for web pages.
On toAdjusting Pictures
Back to Titles and Letters Page
Back to PSP Basics Page
