Working with Photos
March 30, 2000
You can get some pretty cool effects with photo's. Yeah, sure....
but where do you get photos that aren't copyrighted and don't
cost an arm and a leg? The secret to that question is in knowing
where to look. Check out
Art, Pictures, and Photographs. Other options are to use
your own photos, (so get those cameras out), or to create a
photo-quality image in a 3d graphics program.
Remember, when working with photo's you're going to have to make a
choice. If you want crystal clear text you'll need to
save the image as a gif, but that can tend to make the
file size rather large. So you save as a jpg only to discover
your text is now mottled.
There is however a third option. You can cut your banner in
half; make the left half a gif and the right a jpg. Pull the
banner together again through the use of
TABLEs.
<TABLE
border = 0
cellspacing = 0
cellpadding = 0><TR>
<TD>
<IMG SRC = "images/cove_left02.gif"
WIDTH = 200
HEIGHT = 60
ALT = ""
BORDER = "0"></TD>
<TD>
<IMG SRC = "images/cove_rt.jpg"
WIDTH = 200
HEIGHT = 60
ALT = ""
BORDER = "0"></TD>
</TR>
</TABLE>
|
|
You have to be careful with your markup. A space between the
closing IMG tag and the closing TD tag will result in a space
between the left and right sides of your banner.
| |
<IMG SRC="left.gif"></TD>
not
<IMG SRC="left.gif"> </TD>
|
Our original banner, saved as a gif file was 14kb. Saved as a
jpg it was only 5kb. The spliced banner gives us the best of
both worlds, clearer text and a file size of 6kb.
Nobody said banners have to be 400 x 60, or any other set
size, for that matter. You can get some interesting effects
and save file size by combining a smaller image with text
within a table. My example is a little large, mainly because
the image I used is one I had at hand. Feel free to use a smaller
image for even more savings on your file size.
The Pet Palace
Fine sweaters, mittens and boots
for your furred friends.
1654 West End Drive
San Diego, California
|
When you put your table together use cellspacing to
keep the text from butting right up next to the image. Cellpadding
will put a space around the image as well, which may not be
desirable, depending on the effect you want to create. The use
of can be used to hold the text off of the extreme
right hand edge.
<TABLE border=0 cellspacing=5 cellpadding=0 bgcolor="#958EA0">
<TR><TD align=left>
<IMG SRC = "images/friendship.jpg"
ALIGN = "left"
WIDTH = 233
HEIGHT = 165
ALT = ""
BORDER = "0">
<P align=center>
<FONT SIZE="+2">The Pet Palace</FONT>
<BR><B>Fine sweaters, mittens and boots
<BR> for your furred friend.</B>
<P align=right><BR>
1654 West End Drive <BR>
San Diego, California <BR>
</TD>
</TR></TABLE>
Shadows and opacity can be used to create stunning effects. Take a
look at the example to the left. You could use a filter to get
the 'fade to background' effect, but what if you don't ~have~ a
filter, or the time to go find one? And your boss is waiting... he
wanted the finished product yesterday!? Calm down, it's not as
bad as it seems. The image to the left was not created with the
use of a third party filter.
Most graphics programs come with a "shape" selection tool and a
feather option. Using the shape of your choice, select
an area in the center of your image. Invert the selection and hit
the delete key on your keyboard. Instant fade! For softer edges
with a more gradual fade adjust the feather setting to a higher
number.
Create warm fuzzies with drop shadows. Text created
as a selection (text appears as a moving marquee rather
than solid text), with a drop shadow applied to make it
show has a softer appearance.
Compare this text with the text on the Cove Retreat banner
above.
If you're set in the 400 x 60 banner mode, feel free to
stretch your image prior to applying the text. To eliminate
as much distortion as possible crop as much of the top and
bottom of the image as you can without destroying the image. I
chose to crop the area above the Rotty's head and below the
Pom's chin, leaving my dogs intact but removing the excess areas.
You'll notice there is some distortion, but not enough to be
objectionable or to make the subjects unrecognizable.
Adding Text to your Banner
Banner Beginnings
Transparencies
|
