Create a Drop Capital effect on your web pages

Posted May 5th @ 1:30 am by ma1210




Drop Capitals are frequently used in many newspapers, books and magazines in the world. You will often see the large capital letter sinking down in the first paragraph of articles, stories and chapters in most publications you encounter.

The fall term capital provides a nice closing touch, and really adds a more professional-looking feel.

Online, drop the capital looks as good on web pages as it does in print. The only drawback is that you can easily get the full impact wrong and end up in a less than pleasing results.

Wrong way …

When most people are trying to create a drop capital effect on a Web page, they tend to magnify only the first letter of 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 that stands out above the rest of the paragraph, and just look.

The right way …

There are essentially two parts to create the drop capital effect.

Step # 1 –

You need to create a drop of capital image with the help of some graphic software.

You can use any standard piece of graphic programs that Paint Shop Pro, Fireworks or Photoshop.

The decrease capital picture should preferably be big enough to drop down between 2-4 lines of text, depending on your preference.

You should make sure to save your drop capital picture is level with the beginning of the text next to it. The lower part of the picture should also level with the bottom of the lowest text next to it.

This is really the most difficult part of creating a drop capital effect. It can be very easy to make the picture just a little too much, or a little too small. You may find that it will take some trial and error to make it look just right. But the extra effort will pay off, because the end result will be worth waiting for.

One thing to note: As with an image, a drop of capital picture can slow down a web page on the file size is too large. In order to reduce the file size, you should save it as a “. Gif-image. For even better results, you should try to optimize.” Gif “image, and by reducing the amount of colors used.

Step # 2

This step is the simplest little?

Once you have created drop capital image, all you need to do now is to bring it into your web page. You only need to add the image to the web page in the same way as you would with any other image on your page.

When you place it at the beginning of the paragraph, make sure you remember to remove the first letter of the normal text. Otherwise, you will end up starting point for two of the same letter.

Align the image to the left

Initially you will notice that the drop capital picture just sits on top of the first line, instead of sink into it. Not too long!

All you have to do now is adjust the picture on the left and you will see the drop-down directly to the point.

If you use a web page editor to create your web pages, such as Microsoft FrontPage or Macromedia Dreamweaver, adjust the picture on the left is quite easy.

In FrontPage:

Select drop capital picture on the left click on it once. Then, click Customize to the left short cut icon in the upper menu bar. Alternatively, you can choose Format, since the position from the main menu. In the pop-up window, select the Left under the wrapping.

In Dreamweaver:

Select drop capital picture on the left click on it once. Then in the Properties window, click the arrow next to the drop-down menu and select Customize then Left

If you use a different Web page editor, you should have a similar adaptation options in the menu. Alternatively, you can edit the HTML directly himself. Just add the following command in between brackets in the image tag:

align = “left”

Thats literally all, it!

If you have multiple pages on your site, youll probably will need to create a variety of drop capital images for each letter in the alphabet. The extra effort will be useful as you will have a much more professional-looking website.



1 Comments

  1. ahmet
    June 4, 2008 at 10:34

    cam mlyami yeam

Leave a comment

OpenID Login

Standard Login

Options:

Size

Colors