Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in /home/a26f9f83/public_html/articles/includes/config.php on line 159
How To Create A Stunning Drop Capital Effect On Your Web Pages > NetSparsh - Viral Content you Love & Share

How To Create A Stunning Drop Capital Effect On Your Web Pages

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

In The News:

This RSS feed URL is deprecated, please update. New URLs can be found in the footers at https://news.google.com/news

Project6 Receives 2018 WebAward for Outstanding Achievement in Web Design and Development for CrossFit Games
Markets Insider
EMERYVILLE, Calif., Oct. 18, 2018 /PRNewswire-PRWeb/ -- San Francisco Bay Areawebsite design and development company Project6 is proud to announce that it has been awarded the 2018 WebAward for Outstanding Achievement in Web Design and ...

and more »

Web Design Company, Lounge Lizard, Shares an Effective 7-Step UX Testing Plan
PR Newswire (press release)
NEW YORK, Oct. 18, 2018 /PRNewswire/ -- Lounge Lizard is globally recognized as a top Web Design Company within the web design and development industry. Lounge Lizard's brand tenders are creative, tech-savvy, and passionate in developing ...

and more »

Wicked Local

Westford Academy senior starts web design business
Wicked Local
For Westford Academy senior and aspiring filmmaker John Stapp, 17, having 2018 and part of 2019 to see the world is something he felt was important before jumping into college. His parents only had one stipulation -- pay for it yourself.s. So this ...


Born2Invest

How web design trends translate to business success
Born2Invest
New and exciting features intrigue consumers and capture their attention, so by featuring the latest and most exciting features in web design, there is a higher likelihood they will stay and return to experience more. This infographic about the ...


Fast Company

The future of web design is less, not more
Fast Company
The internet is a system that demands more: more engagement, more clicks, more ads, more content, more code, more servers, and more devices. The size of a typical web page has increased exponentially in recent years. Thirty-nine percent of young ...


Franklin County School Board must pay $11000 to web design firm
Roanoke Times
In its initial filing, HD Web Design sought $17,332.44, or half of the total project cost. But after Maddy filed a motion for summary judgment, the complaint was amended to seek $11,252.75 for the work that had been completed at the time of cancellation.

and more »

Adweek

This New Tool Makes Eye-Tracking Tech More Accessible to Web Designers
Adweek
At least that's the premise of an increasingly popular practice among web designers and advertisers: the use of biometric technology to track and test consumer's eyes as they roam around a screen. Proponents say these devices, which range from infrared ...


TG Daily (blog)

Growth-Driven Web Design: What You Need to Know
TG Daily (blog)
In the online age, your website essentially acts as your business card, your opportunity to present your business to the public. For almost all businesses nowadays, the first place your clients will find you is by through your website, which gives them ...


Web Design Company, Lounge Lizard, talks about 5 ways Great Web Design enhances your CX
PR Newswire (press release)
Great web design also directly influences conversions, which is a very important part of the customer experience. Why does a customer go to any website? The answer is to solve a problem or fulfill a need. If your site is not converting visitors ...


Web Design St Louis Service Launched By Vinnie Mac
Digital Journal
Vinnie Mac, a digital marketing agency based out of Glen Carbon, IL, is proud to announce the launch of their web design services for the St. Louis area. Representatives for the company say the service is aimed at local businesses in that area looking ...

Google News

How Do We Know When Its Time To Redesign Our Web Site?

A question we frequently get asked is, "how do we... Read More

How To Start An Internet Business ? Designing For Usefulness

The first step to starting any Internet business is conducting... Read More

What to Ask Your Web Designer

If you need a web designer, but have no clue... Read More

How To Rescue Your Graphic Design Project When All Else Fails

Whether you're giving a critical sales presentation to a client,... Read More

How to Convince Your Visitors to Return Often

One visit does not make a sale. Be sure to... Read More

Free Website Design Tips

In this article I will give a few tips of... Read More

Website Design: Color Me Blue

Chris, a new consulting client, asked me to help him... Read More

6 Reasons Why Web Templates Are Todays Trend

As the Internet blooms at an alarming rate, so as... Read More

Does Your Homepage Work?

All websites have a homepage. It is the most important... Read More

What Does Your Website Say About Your Business?

QUESTION: My business is very small, just me and... Read More

How To Boost Your Sales Dramatically Using Dynamic Back-end Strategies

Getting a customer is not easy.Getting a visitor to decide... Read More

Website Polls For You And Your Visitors

Setting up a survey on your site is extremely simple... Read More

Choosing Form Over Function Kills Your Site

Never put form over function. Why? Because it's crucial that... Read More

Don?t Put Your Slogan in the Title Tag - Optimize Your Web Pages

Don't just put your slogan in the title tag when... Read More

Using Graphic Design on Your Website

Almost everything is available on the web? products, services, e-books,... Read More

Top Ten Fonts for Website Design

The top ten fonts for website design might change in... Read More

Choosing A Color Scheme

When you begin the design of your Web site, one... Read More

Does Your Website Induce Seizures?

QUESTION: We promote our web site in all our... Read More

File Types For Icons Explained

An application is not ready for use unless you have... Read More

Wording Up Your Website

Back to basics. Forget funky design, good copywriting is the... Read More

Some Useful Common Site Ideas

In my web surfing adventures, I've found a few site... Read More

Quality Website Design At An Affordable Price

I always have people asking me if I know of... Read More

Imitation, The Smartest Form Of Flattery

Unless you are an inventor, most likely you are selling... Read More

Using CCS to Eliminate Tables

CSS or Cascading Style Sheets has opened up tremendous possibilities... Read More

Make Your Site Quick To Load!

The time it takes to load your site can make... Read More