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

Customer Think

8 Creative Web Design Tips To Boost Your Conversion Rate
Customer Think
Conversion Rate is the percentage of the visitors on your website that completes the desired goal of your business out of the total number of visitors. Any organization desire to have a higher conversion rate for your website, as it is an indicator ...


Boing Boing

Guidelines for brutalist web design
Boing Boing
"Raw content true to its construction" — no hinky web frameworks, no broken javascript soiling itself at the first whiff of interaction the developer didn't design for, no dark patterns, no performance-crushing superficial cleverness, no contempt for ...


American Creative Offers Custom Web Design and Helps Boost Business
Digital Journal
At American Creative, they do extensive research and analysis before initiating any web design project, so that clients can get what has been desired. Not only do they deliver a web design service, but also they provide 100% satisfied customized web ...


Web Design Essentials Every Designer Should Be Aware Of
Promotion World (press release)
No matter how we look at things, there are many different ways in which you can mess up the design of a website. Although there are so many options that are available and technology is highly advanced, some designers fail to understand the need to have ...


Web Design Trends of 2018
Times Square Chronicles (press release)
Web design is constantly evolving, and there is always something new on the horizon to think of. There are lots of trends we are seeing in 2018, which we have shared with you below. Make sure you keep up with the pace, to stay on top of your competition.


mediabistro.com

Night-Side Graphics Designer- NBC Sports Philadelphia
mediabistro.com
Translate the storyboard ideas into animations, using adobe After Effects and or Cinema 4D; Work with the NBC Sports Philadelphia marketing team to design concepts for web banners for various live events and TV shows; Produce still and animated ...


Macworld UK

Best web design software for Mac
Macworld UK
Thankfully, there are plenty of options that make designing and running a site quite simple. In this article we offer a selection of the best web-building software for your Mac. Be sure to also take a look at our How to create a website on a Mac ...


FOX Illinois

Illinois State Police logo design contest winners announced
FOX Illinois
The 100th Anniversary Logo will be used in making commemorative stars, patches, car decals, letterhead, challenge coins, yearbooks, apparel, web design, advertising, and collectible memorabilia. The contest began on November 1, 2017, and ended March ...
Winners of Illinois State Police 100th Anniversary Logo Design Contest announcedRiverBender.com

all 3 news articles »

TechRadar

Best web development tools of 2018
TechRadar
Traditionally, when we think of web development, we picture some coder typing furiously on a keyboard into the wee hours of the night while slurping coffee, sitting in a dark basement next to the flashing LEDs and whirring hard drives of a stack of ...


Hospitality Net

How to Improve Your Hotel UX Web Design (4 Things that Are Important to Your Visitors)
Hospitality Net
Designing a website for optimal user experience (UX) is essential to any business - after all, an effortless user experience clears the path to conversion. But the hospitality industry has taken a more specific turn in the digital era - a hotel website ...

Google News

Web Templates: Replacing Designers?

I've seen articles (and websites) that suggest you can buy... Read More

How to Choose Web Design Company?

Before deciding on which web design company to choose, you... Read More

Tips On Effectively Organizing Your Navigation

Not all links are created equal.While all of your links... Read More

The Brutal Truth

Not too long ago while looking for businesses that do... Read More

Top Ten Ways to Increase Web Sales - Part 1

You have only 10 seconds to impress your potential buyer.... Read More

Web Design for Ecommerce

Your website is your tool for showing the online community... Read More

Increase Your Website Sales Instantly

If there's one thing that I've learnt so far, it's... Read More

How To Shop for a Web Design Firm?

While few companies can boast as we do that our... Read More

Cheap Web Design

If you think it's simply a case of who will... Read More

Top 10 Web Design Mistakes

As a webmaster, you want to keep your visitors content... Read More

Double Ad-Trackers Its Not as Crazy as It Sounds Here Are 7 Reasons Why?

A Double Ad Tracker is an Ad-Tracker that points to... Read More

How To Design A Web Site

I'm not a professional web site designer and openly admit... Read More

Website Design Basic Concepts

So, what's in a website design anyway? And, how do... Read More

Great E-Cover Creation in 5 Steps

There are several graphic software packages available to help you... Read More

Web-Safe Fonts for Your Site

Choosing the right typeface for your website copy is important,... Read More

How to Design a Search Engine Friendly Web Site

Many web site designers don't design their sites for the... Read More

How To Design Your Web Site With CSS

Cascading Style Sheets (CSS) allows you to create fast loading... Read More

14 Ways to Add Content to Your Web Site - Part 1

When I surf the Net, I often see web sites... Read More

Questions to Ask When Designing a Website for Clients

Questions to ask when designing a Web Site for your... Read More

Increasing Conversions Through Action-Oriented Copywriting

I do site reviews. Needless to say, I see a... Read More

Choosing A Web Designer : A Plan to Guide You Through The Minefield

Choosing a web designer can seem like a daunting task.... Read More

.htaccess to Mask Errors on Your Website

The .htaccess file is a control file located in your... Read More

To Hire or Not to Hire a Website Designer

In the early years of the internet the actual design... Read More

Affordable Website Design In Manchester

If you have a business, big or small you may... Read More

5 Ways To Improve Your Website Immediately

If you are reading this, I assume you either have... Read More