|
Drop Capitals are frequently
used in many newspapers, books and magazines in the
offline world. You will frequently see the large
capital letter sinking down into the first paragraph of
articles, stories and chapters in the majority of
publications you come across.
The drop capital gives the
page a nice finishing touch, and certainly adds a more
professional looking feel.
Online, the drop capital
looks just as good on web pages as it does in print. The
only drawback is that you can easily get the whole effect
wrong, and end up with a less than appealing result.
The wrong way...
When most people attempt to
create a drop capital effect on a web page, they usually
just enlarge the first letter by a few font sizes and make
it bold.
If you do this on your own
web page, you will notice that instead of a 'drop' capital
effect, you end up with an odd looking letter which sticks
up above the rest of the paragraph, and just looks out of
place.
The right way...
There are essentially, two
parts to creating the drop capital effect.
Step #1 -
You need to create a drop
capital image using some graphic software.
You can use any standard
piece of graphic software like Paint Shop Pro, Fireworks,
or Photoshop.
The drop capital image
should ideally be big enough to drop down between 2-4
lines of text, depending on your preference.
You should ensure that the
top of your drop capital image is level with the top of
the text next to it. The bottom of the image should also
be level with the bottom of the lowest text next to it.
This is really the hardest
part of creating a drop capital effect. It can be
very easy to make the image just a bit too big, or a bit
too small. You may find that it will take a bit of trial
and error to make it look just right. However, the extra
effort will pay off, as the end result will be worth
waiting for.
One thing to note: As with
any image, a drop capital image can slow a web page if the
file size is too big. To help reduce the file size
you should save it as a '.gif' image. For even
better results you should try to optimize the '.gif' image
as well by reducing the amount of colors being used.
Step #2
This step is the easiest
bit…
Once you have created the
drop capital image, all you have to do now is to insert it
into your web page. You just add the image to the
web page in the same way that you would with any other
image on your page.
When you place it at the
beginning of the paragraph, make sure you remember to
delete the first letter of the normal text.
Otherwise you will end up starting the paragraph with two
of the same letter.
Align the image to the left
Initially, you will notice
that the drop capital image just sits on top of the first
line, instead of dropping down into it. Not for
long!
All you have to do now, is
align the image to the left, and you will see it drop down
instantly into the paragraph.
If you are using a web page
editor to create your web pages like Microsoft FrontPage
or Macromedias Dreamweaver, aligning the image to the left
is pretty easy.
In FrontPage:
Select the drop capital
image by left clicking it once. Then click on the align to
the left short cut icon in the top menu bar.
Alternatively, you can select Format, then Position from
the top menu. In the pop up window, select Align Left
under Wrapping Style.
In Dreamweaver:
Select the drop capital
image by left clicking it once. Then in the properties
window, click on the arrow in the drop down menu next to
Align, then select Left
If you are using a
different web page editor, you should have a similar align
option in the menu area. Alternatively, you edit the
HTML code directly yourself. Just add the following
command in between the brackets of the image tag:
align="left"
Thats literally all there
is to it!
If you have multiple pages
on your website, youll probably going to need to create a
number of different drop capital images for each letter of
the alphabet. The extra effort will be worthwhile as
you will end up with a much more professional looking
website.
Copyright © 2004 Jason
Lewis
|
About
The Author
Jason
Lewis provides ready-made professionally
designed drop capital images, as an
instant solution for the busy website
owner. Each design is available for
immediate download and can be added to a
website within a few minutes. To
find out more: http://www.dropcapitals.com/cmd.asp?ad=93481 |
|
|
