http://members.tripod.com/~d-hicks/Signatures/babies01.gif
Hello, friends. Tonight we will make two kinds of
image backgrounds with copies of the same
image:
Let's do the hardest one first. It is hard because the image, although labeled .gif is really a .jpg and because it has many shades of black in its background. That is the first one, "babies01.gif"
Note: This is an update. After this class was taught, it was discovered that backgrounds can be made transparent at ImageMagick by selecting "matte", "floodfill" and entering "9999" (without the quotes) into "blur". Then click on the black background. That will get rid of all the different shades of black without going through the process of changing it to a gif and repeated black section selections. Try it!
Continuing with the original class for historical record,
Load it into the tool that makes the background transparent, TransWeb, at: http://www.mit.edu:8001/tweb/map.html by viewing the image and then clicking on Owens4 Tools and scrolling almost to the bottom of his Image Tools to TransWeb. The URL of the image will be in the box. Click on the "load" button and you will see the image with the yellow cursor all around it and an arrow at the lower right corner, ready to be clicked, like an image map. What we want to do is make the background transparent, but when we click "return" to get the arrow in the black and click again, we see a message that the image is a .jpg and must be converted to a .gif! Try that and then we will continue with part 2. Don't try to make the black transparent, because it won't work. [End Part 1]
Now we have to make babies01.gif REALLY a gif at
GifBot, again on Owens4 Tools.
I picked 24
colors at GifBot (it reduces the size of images
by eliminating colors) which is a size saving of
only 5%, but eliminating more colors makes the
image look terrible, as you can see by scrolling
down to the more reduced images provided by
GifBot. Anyway, I clicked on the 24 color image
and transloaded it to my file:
Now comes the tedious part: eliminating part of
the black each time we load it in TransWeb. Load
babies01a to TransWeb, put the arrow in the
black, click, and transload the result to your
file as babies01b. Reload babies01b to get 01c,
01d and finally 01e. They are all in my file if you want to
see the progression, but you should actually do
it. When I tried to eliminate more of the black
near the baby's shoulder and around the edges,
the eyes disappeared, too -- they were the same
shade, so I left the little black remaining where
it is, ending up with:
The next step is to
make the image less colorful, so it will blend in
and be part of the background and not jump out at
you and so text will be visible over it, but so
it still has some color and is pretty. There are
two ways to do this: one at GifWorks called
"fade" and the other at Image Magick called
"brightness". We will try "fade" first,
after you get rid of the black from
that .gif we just made at GifBot. Let me know
when you are ready to "fade " the image. [End of
Part 3]
As an aside, if we had selected an image with a transparent background (as most of them have) we would have been able to start the class at this point. Removing all the black is usually not necessary.
OK -- Take the image without the black background
to GifWorks and the first thing we will do is
crop the bottle out of the picture. Select "Edit"
and "crop". We have to tell the cropping program
the part of the picture we want to KEEP, so leave
x=1 and y=1 as the upper left corner. and on the
next frame, enter x=288 (the whole width of the
image as shown in the box at the bottom of the
page) and, by trial and error (hit back to
correct an error), find and enter y=288 and click
the enter lower right corner button. The next
frame will show the babies with no bottle and
will be 288x288 pixels. Just so we will be able
to put the image on a 200x200 background, we will
resize it to 175x175. Select "Edit" and "resize",
enter 175 for the width and 176 will come up
automatically for the height. Click on "resize".
After the next screen comes up, select
"File" and "Save As..", enter the name of your
server, your user name, password, sub-directory
(if any) and transload the resized image as
"babies01f.gif". This is the image we will use to
be "faded" and "debrightened":
Now to "fade" the image: Load "babies01f.gif"
into GifWorks. Select "effects" and "fade". In
the next frame enter 60 as the fade amount. Less
than 60 appeared to be too bright and more than
60 appeared all washed out -- no detail and very
little color, so we pick 60. On the next page,
click "File" and "Save As..." and transload to
your file as "babies01g.gif". We will use this
image to make one of the background tiles:
Do all that (or as much as you want to) and let
me know when you are ready to go to Image Magick
to adjust the brightness. [End of Part 4]
This part will deal with adjusting the brightness at ImageMagick. Take "babies01e.gif to ImageMagick either directly or by using Owens4 Tools -- he calls ImageMagick "Mogrify" for some reason. Maybe that was its name in a prior life? Or it was a product of a Calvin and Hobbes comic strip? Anyway, once you are in, click on the "Enhance" Tab.
On the next screen light the "brightness" function and try some different numbers in the box. Hit your "back" button after looking at the result until you find an image you are happy with. You can enter the % sign if you wish -- it works both ways. I found 40% about right -- still some color, but not too bright to dominate a screen when used as a background. I saved the output:
When you have a satisfactory image, select the "Output" tab, enter "gif", "single image" and hit the "output" button. Click on the thumbnail image with the "O" under it and transload to your file. Try the "enhance brightness" function and let me know when you are done. We will composite both tiles next.[End of Part 5]
Moving a little bit faster now, here are the steps to composite the image on a background to make a "tile" that will be repeated all over a page when it is specified as a background for a web page or an e-mail:
1. Take the black square:
Here they are:
< >< > 
Whew! The next part of tonight's class will be making a bordered background and buttons to match. It won't take nearly as long -- promise! [End of Part 6]
Our next job is to make a bordered background. The gif we choose for this should be between 75-99 pixels high, so it will look good when repeated down the side of a page. The one we have fits the bill nicely, so here we go!
This will go faster since we have already done these procedures. Only the gifs and numbers will change.
1. Load the black square, "black.gif" into ImageMagick.
2. Resize it to 560 x 100! (don't forget the !)
3. Recolor it to powderblue
4. Select the "Composite" tab
5. Enter "http://members.tripod.com/~d-hicks/Signatures/baby11.gif" in the URL box (the lower box)
6. Select "west", leave "over" hit the "composite" button
7. Select "output" tab
8. Enter "gif", "single image", and "output"
9. Click on thumbnail and transload to your file
-- you have made the bordered background tile! I saved mine as "baby11back.gif" The thing we have won't work on e-mail because of the sidebar on the left of the e-mail page, so to make a bordered background for e-mail (not advisable) enter +125+0 in the parameter box and still select "west" during the "composite" procedure. It looks great on a web page, though. Do all that and let me know when you're ready to make matching buttons -- our last project for the night. [End of Part 7]
Now to make coordinated buttons for our baby11 background. Take "baby11.gif" image to GifWorks (on Owens4 Tools), select "Effects" and "Buttonize". On the page that comes up, select bevel direction "up", button height "1" (that is the depth of the bevel around the button), then border "yes", drop shadow blank and "OK".
On the next screen, select "File" and "Save As .." Then transload to your file. We have just made the blank button to be used for "mail", "back", "next", "home" and all the other nice things to have on a web page.
We will make ONE of those buttons using GifWorks. Take the button you just saved to GifWorks and select "Edit" and "Insert Text". Select color "#000033" (very dark blue -- for a boy, remember) Font: "Comic" Size "20" Style "Bold Italic" Text: enter "BACK" Placement: x=61 y=60 (just below center). Press "Insert Text".
On the next screen select "File" and "Save As .."; transload to your file.
DONE, FINISHED, END OF CLASS! The bordered background and buttons are here.
Take a look -- you did it also (I hope)
-