The
lesson of the day may sound culinary or even fiendishly medical
but in actual fact we are going to discuss the dissection of images
in web pages. Sound tasty? It is.
why.the.operation.is.necessary
This topic covers the combo use of graphics and tables in order
for you to be able to separate an image into bits and pieces. Why
would you want to do this crazy thing? There are a few good reasons.
Really, there are. Listen up.
- Gif? Jpeg? Jpeg? Gif? Sometimes it's a conundrum which format
to use - graphics can be a mix of flat colored areas and finely
detailed photographic bits. You know if you compress it as a jpeg
those flat bits can look a little weird - kinda smudgy. What can
you do? You can do the dice-o-rama that's what. It's easy to split
the pic up - save the giffy bits as gifs and the jpeggy bits as
jpegs. Then it's easy to put it back together on the web page,
sneakily appearing as though it had had no surgery at all. We'll
be showing you how to do that.
- Another similar reason would be if you wanted to allow some
part of an image to animate - if the whole image is not animated
there is no need to prepare it all as an animated gif - this is
being heavy on file size for no good reason. Better to section
out the animated portion, whack it back together in a table and
an illusion is created.
- Javascript rollovers fit into this category too - you can break
a large graphic into pieces in order for the buttons to be 'rolled
over', or swap to alternate images.
- Be sneaky and create a fake imagemap - by breaking a graphic
into smaller pieces you can specify a different hyperlink for
each 'piece'. Unless visitors realised this was a table, they
would be tricked into thinking you were very clever and had made
an imagemap.
- Straight lines are useful, but we often like to experiment with
curvy bits - for instance , how could we make the borders of this
table rounded? We can't with html, but can with a graphic. If
we created this entire table as one big graphic with all
the text included - well that would be plain silly. Too big, wouldn't
look nice at all, would take ages to load. No, what we do is create
the curvy bits by themselves, slice them up, put them back into
a table ... Our example will show you how it works. The top navigation
element appears to be in a nice rounded box. It could have been
created as a big graphic, but we plan to add more buttons over
time and we don't want to have to create a new image every time
this occurs, do we children?
In actual fact it's made of quite a few different pieces. Here's
how.
pre-med
First things first. (Stupid saying - how could it be otherwise?)
You need to make a pretty picture. So, you need to have some idea
of what you are doing, how to get around a program like Paintshop
Pro, Photopaint or Photoshop. If you don't, then kindly leave the
room. On second thoughts, sit in and watch anyway, it'll do you
good.
Here's
one we prepared earlier which will open in a pop up window. POP!.
Looks
like a big gif doesn't it? Well it's not. POP
- this time we have turned the border of the table on by specifying
table border="1". Now you get the truth of the matter.
It's clear that each piece is in a single table cell. There's a
few things you need to know about that, but meanwhile lets see how
to cut up the graphic. Mmmmm, SCALPEL NURSE!
scrubbing.up
Go ahead, make a graphic. Here's ours as a screen shot in Photopaint
- you'll find these instructions will suit most other programs.
Try
to keep the original in the format you created it in - cpt for Photopaint,
psd for Photoshop etc. And don't 'flatten' it. We aren't recommending
against taking a hammer to it - we simply mean don't combine all
the bits and pieces - objects or layers - with the background. By
keeping this 'working' copy you can always change something - a
color, a piece of text, a placement - easily without having to remake
the whole thing - most tedious! Besides if you really stuff up the
next few steps you can safely start again.
Our
original consists of the background, the rounded box, and the wholesome
couple ready for a vacation. We blended off Mr and Mrs Ideal's edges
using a brush tool set to a soft big circle with lots of transparency,
combined with a mask of the rounded box to get the shape of the
edge correct, and then wiggled them into position over the border
of the box. Nothing too fancy here.
Now,
save your graphic in it's original format like we told you (say,
holidayoriginal.cpt) flatten it and save as holiday.cpt. This is
the version we will be chopping up.
preparing.the.patient
In photopaint (or similar) select View > Rulers. You'll now see
some rulers (funny 'bout that) along the edge of your working area.
Decide where you want to chop, and drag some ruler guidelines to
mark these areas. You do this by clicking on the ruler edge and
dragging right or down - move them where you want, and drag out
more as you need them. Take a look at our happy couple - they've
been fenced off from the riff-raff neighbours. (We're being a little
more obvious here so you can grasp the concept - we would normally
aim to keep as close to the edges as possible to give us minimum
file size, maximum centre space)
You'll
notice you now have 9 areas marked out but we only need to use 8
of them - 8 images to be put back together again - just like a puzzle.
The middle piece in this case does not need to be a graphic as we
can specify the cell color in our final table to be this color -
no point adding file size for no reason, besides we will want to
put other stuff in there. So decide now what you are going to individually
call them all. Betty, Bobby and Susie are not good names. Try numbering
from top left to bottom right - ie img1, img2 and so on. Or be a
little more pedantic if you think you might get muddled - ie topleft,
topmiddle, topright and so on. Whatever works for you.
Now
we will use some masks - and not one of Zorro's either.
mask.please.nurse
Make
sure you have selected the option to snap to guidelines - View >
Snap To Guidelines or similar. This means that when you make a mask,
it will snaplock itself to the edges of any guidelines it finds
in the neighbourhood - just like it is being pulled by a magnet.
Start
with the first section marked out by the guidelines - top left.
Select the rectangular mask tool and draw a mask around that area
only - your mask should snap to the guidelines - if it snaps to
too many guidelines, just try again.
We've
colored the masked-off area to make it a little clearer for you.
You'll also notice that the rectangular mask button is depressed
(we tried to cheer it up, but you know...) and the normal mask pointer
is selected. Just thought we'd mention it. This area is now selected,
ready for action. We will be doing the same thing to each and every
section.
Now
choose Edit > Copy Visible. This will copy only the selected
area. Right-click anywhere outside of your entire graphic - you
may have to minimise it to get it out of the way - and select New
from Clipboard. A new graphic will appear in it's own workspace
- identical to the masked-off area of the big graphic. Cool. Do
the same thing with every section, and you'll end up with a bunch
of seperate images, all jostling on the page. Oh, and you can close
the holiday.cpt.
suturing
Now
run away and get a pencil and paper. Hurry! Oh, back so soon? What
you need to do is take a note of the dimensions of each little graphic,
convert them to gif format (or jpeg if required) and save them with
an appropriate name. For instance our topleft.gif is 148 x 45 pixels.
This will help us construct a table later. All done? Good. Next
step is the table and putting the puzzle back together.
Back
to our example with borders turned
on. We added up the widths and heights of our images - because we
used the guidelines, each row will be the same width and height
and so we knew we had to make a table that was 607 by 131 pixels
- we don't want any space between our graphics at all or bad things
will happen. To ensure this, we specify the table with cellpadding="0"
cellspacing="0" and border="0" ... you might
like to turn the borders on at first until you are confident of
putting everything in it's place, but don't forget to turn them
off again later. Go back to table remedial
school if you have forgotten how to make one. We need to specify
these zeros because browsers like to generously add little bits
of space around images and tables unless told not to. Kind of them
we're sure but a little presumptious.
Our
table also requires 3 columns and 3 rows - creating 9 cells in all.
In some cases you might have to think about row spanning or column
spanning but not this time. It's all pretty simple today. Okay,
now start popping your graphics into the correct cells. If you are
coding by hand, this can be a little time-consuming. If you are
using something like Dreamweaver or Homesite or Frontpage or Hot
Dog it's pretty simple - just make sure you specify, for each image,
border=0, vspace=0 hspace=0 ... again only because of the generosity
of browsers. And if any section should be a link to somewhere else
- as in our fake image map scenario - specify that too (border="0"
will stop the automatic link borders from appearing). POP!
And here's a screenshot from Dreamweaver.
Now
you should have a happy result... if a piece does not line up correctly,
check that there are no stray <div> or tags hanging
about in the cells - they can cause trouble. You can see you have
a nice big blank cell in the middle - we have set the background
color of the table to be the same as that of the graphic and page
background. This space can now be home to our buttons, another image,
or some text. Whatever. This was our reason for making the table
in the first place - so we could alter and change the centre whenever
we liked - remember?
surgery.success!
And that's about all there is to it - a bit of fiddling about but
not that hard really, was it? Of course if all this is ho hum, you
can always use a utility that does the process for you - such as
Picture
Dicer (freeware). But where's the fun in that? Til next time
when retrogrrl gets cut up about something else.
next pod
