How to make Personalized Backgrounds

Site hosted by Angelfire.com: Build your free website today!

How to make
PERSONALIZED BACKGROUNDS

Hi, glad you dropped in. So you want to learn how to make your very own personalized backgrounds? Well, lets get started.

First of all, you will need to have your own webpage to store your background on and know how to transload if you are on WebTv.

UPDATE: I have figured out a new quicker and much easier way to make personalized backgrounds.
It would still be a good idea for you to learn how to do backgrounds this way because here, you will learn how to do cropping. Once you get more advanced in making your own graphics, you will see where cropping will be very useful to you.
However, I understand that some of you are just anxious to get your own personalized background on your pages.
Click this link to go directly to the NEW VERSION but please come back to this page one day and learn to do cropping. You will be glad that you did!!

SUGGESTION: It might be a good idea for you to bookmark my MAIN PAGE instead of each individual page. Not only will it save room in your favorties, but sometimes I post new versions of some things, but I am not always the best at remembering to place an update on the old versions. Sorry, I do try. <grin>

Next, you will need to make a "banner". The site I usually use is The Banner Generator. This is a really great site! It has tons of great fonts and is pretty simple to use. If you get stuck, just click on the purple ? and it will explain that section for you.

Here is the banner that i made to use as a teaching example.

438 wide x 338 high

     Pretty big huh? Well there is a good reason for that and you will understand why as we go along.

The settings that i used for this banner are:
  Image Format: gif
  Font Size: 40
  Border Size: 150x150
  Quality: Low
  Interlace: yes
  Font: ZapfChancery Oblique

     Now we are down to selecting our foreground and background colors. The Banner Generator has a drop down menu with a small selection of colors, as well as, a color list. If the color you would like is not on their drop down list--select rgb. Then to the right of that is a box to type in your color number. You can get the color number from their color list. Do this for both the foreground and background colors.

The settings that I used for the colors are:
  Foreground color: rgb--rgb #996600
  Background color: white
  Transparency: none

     Voila! You can now click on "Submit Banner". See that wasn't too hard. After you view your banner and everything is just the way you like it, copy the addy of the banner. If you are going to go straight to the next step it is not necessary to transload the banner yet. It will stay on The Banner Generator's server for a few hours.

     Are you sure that the banner looks just the way you want it to? If not, just hit your back button and change whatever you want to.

     Ready? Ok, on to the next step.

     We now need to take the URL of our banner to ImageMagick Studio. Enter the banner URL and click "view".

     Now you will see your banner displayed. At the top of the page, click on "transform". In the box enter -30 and select rotate. This will rotate your banner -30 degrees. Here is an example.

548x512

     Whoa!!! It got bigger. Don't panic, it was supposed to. Now this is the part where things begin to come together.

     This is the part where you will have to listen carefully. It is not hard so relax. We need to select "Transform" again, but this time we will be reducing the size of the banner by a method called "crop".

     Here we will be entering the coordinates for cropping. To get a better idea of how to figure out the coordinates, get a sheet of paper and draw a square. Now on the left side draw a + (plus) sign. On the right a - (minus) sign. Put a + at the top of the square and a - at the bottom. Now lets figure the coordinates:

     I like to end up with a gif that is 150(width)x150(height). To figure out how much we need to take off of each of the 4 sides we take the size of our rotated gif and subtract 150 from the width and 150 from the height. In this example, I figured it this way:

  (width) 548-150=398. We need to "crop" 398 pixels from the width. Since we want the name to stay centered, we need to take half off of the left side and half off of the right. Therefore, we need to divide 398 by 2. 398 divided by 2=199. So we will be taking off 199 from the left side and 199 from the right side.

  (height) 512-150=362. Divide 362 by 2 and that equals 181. So we will be taking off 181 from the top and 181 from the bottom.

     Now to enter the coordinates. Let's begin by taking off 199 from the left and 181 from the top. Enter this into the box +199+181. Don't put any spaces here. Select "crop" and then transform your gif.

  (note: these coordinates are the ones I used for the example. Your gif will be different, so you will have to figure the coordinates for your individual banner using the same method.)

Here is how the example looks now.

349x331

     Now we are getting somewhere. The banner is getting smaller and we only have one more step to go and then it is on to the transloader.

     Okay, so far we have taken 199 from the left and 181 from the top. Now let's take 199 from the right side and 181 from the bottom. Select "transform" again and enter this into the box: -199-181 (again, no spaces here).

     This is the finished background.

150x150

     Now you have finished making you background. Select "output" at the top and then select: gif and single file.

     Race ya to the transloader. Here we go!!!

     You can use StarBoulevard Transloader. It is now a pay service except for small files. Becareful when using the free StarBoulevard Service because if the file you try to transload exceeds the maximum size alloted, you will get nothing but an empty box when you try to view your file.

Now Image Magick has an uploader on the "output results" page for you to upload the images that you create on their site. And now there are 3 new "freeloaders" available to us thanks to some very brilliant WebTv users. These sites are Domania Freeloader, Prodigal Son's Freeloader, and Mimes Freeloader.

     Well, thats it. I hope that I have made this easy for you to understand. If you have any questions, you can email me here. ladyfeline

     To put the background in your email or on your webpage use this tag--(body background="http://URLhere"). Be sure to replace the parenthesis with the left and right arrows. To see and example of how this looks as a background click here.

     Now that you have a great looking background, check out some of my other pages and please sign my guestbook.

take care -- lady :)

Click here to tell someone about this site!

Sign My Guestbook View My Guestbook