Make Your Own Drop Cap Artwork

ABOUT THESE

DROPspaceCAPS

We’ve provided a free download of our own complete A-Z set of simple upper-case “drop caps” with drop shadow, suitable for use in most content creation apps. In desktop publishing, the first letter of a paragraph that is enlarged to “drop” down two or more lines, is called a “drop cap.” It has nothing to do with the “drop shadow,” a separate effect also sometimes used, as I have. .For those of you who just want these Caps, the download is Summitlake’s own .zip file from this website, and is safe if downloaded from my site. The download link is just below. For those of you interested in learning more, or creating your own Drop Caps, our longer article with ample illustration, pointers and resources follows. Click “Continue Reading” to see the full post.

SHORT DESCRIPTION

These FREE caps were created in Microsoft Word, in font  “Lucida Handwriting,” 48 point. A screen shot of this was then opened in Adobe Photoshop Essentials (PSE), where a drop shadow displacement layer was added in gray. I flattened the resulting image, and sliced and diced it into individual letters. I created individual JPG images using the “Save for web” option.

USAGE:

There are many elaborately ornamented clip art fonts. I wanted to create something in a simpler modern script, with a little more than we can get in a large-font MS Word drop cap. I admit I was reasonably pleased with my result, a first effort. I’ve put them into my book project.

I’m offering these free for download, in the public domain, meaning I’ll accept no money for them, and no credit or attribution is needed. You may have applications and ideas of your own. So I’ve shared the process, below, so you can design your own font artwork with your own adaptation of the method following.

LONG DESCRIPTION

LETTERING: We can create alphabetic font sets in any case, style and size meeting our needs. For vertical and horizontal spacing that would be uniform from the start of the project, I used Tables in Word, creating a 5×6 table with no lines and hidden paragraph marks. I filled it with letters A-Z in my chosen font using blue coloring.

When image size is important to control project file size, I prefer to create or resize images to the size actually needed for the project, rather than create higher resolution oversize images and then scale them down on the fly. For one photo, this rarely matters any more; for collections, it can add up to a big difference in file size or page load time. If we create and save our originals in Adobe PSD or similar uncompressed formats supporting layers, we still have the freedom to create different sets from those.

I used a WHITE page background in the original MS Word table. If I were to do it again, I might have created the letter matrix in Photoshop using a transparent background, or in Illustrator if I had it. Today, it is very rare to see a page background in any color except white, so Word works fine.

DROP SHADOW: Opening a screen capture of the original character set in PSE, the tricky next step was creating drop shadows for each individual letter. I wanted to apply the drop shadow to all letters in the screen print uniformly and at once, rather than attempting it on each of the 26 individual images one at a time! So I created a new “layer copy” (on a bigger transparent background). I changed that layer’s lettering color to a medium gray, to which I applied Blur. A bigger enclosing transparent background allowed me to slide the gray shadow image layer down and to the right about 4 pixels in a single move that applies to all 26 letters at once. I then applied a 60% opacity to the blue top layer, so I could then see both layers in about the right opacities. The shadows looked correct. I saved that work as a new PSD.and on that I flattened both layers into one layer.

HORIZONTAL SLICING: The next step is slicing each row horizontally. Be careful to make each “slice bar” height identical, which requires a little planning. Letters R and Q have lower descenders, for example. I used a Selection preset in a fixed 400Wx60H rectangle, copied and pasted each slice into a new window, and saved each off as PSD again: A=E.PSD, and so forth. I repeat, this step is very important to preserve accurate vertical spacing for each letter in the slice, just as originally typed on the page.

VERTICAL DICING: We now have six “letter bars” of five letters each, A-E, F-J … U-Y, and a final bar with only the final letter Z. Cutting out individual letters requires custom widths for most letters. Letters like M and W are widest, with letter ‘I’ being narrowest. I used fixed widths of 50 px for most of my letters, but adjusting the rest from 36 to 58 px for off sizes.

We want both left and right whitespace margins to be as uniform as possible. The left image border will control the drop cap’s offset to the left page margin; the right border will control whether or not we need a typed space between our drop cap and the first regular page “body” font of your text.

INDIVIDUAL LETTERS: Here is another point where a little planning paid off. As I selected and copied my individual A-Z letters to the clipboard, I opened up new windows entitled ‘A.PSD’, ‘B.PSD’ and so forth, but I did not save the PSD’s. I used “Save for Web …” to save each individual letter as a JPG image, deleting the parent PSD as I worked my way through the alphabet. This part took about 16 minutes.

USING THESE DROP CAPS: Now we have a complete A-Z alphabet of individual letters. which can be embedded in HTML, WordPress, Pages, or just about any other content creation application.

“Drop shadow” is a separate and unrelated process offering the illusion of dimensionality. We have to nudge all drop cap images to a pleasing vertical position, either by inserting code, or by adjusting built-in application image placement controls. We need to find a setting for displacing the text font to the right. In Pages, I settled on 1 pixel. In my book project, I have not yet found a drop cap letter that needed a space separator from the body text. You’ll see later it was not this simple in WordPress.

Of course, we could just do the whole thing in Microsoft Word, and export to HTML or several other formats. But then we get to use unadorned standard fonts in about 48 point with no drop shadow. If going to the trouble of extracting individual letters, I hope we’ll agree that being a little more creative here mat be worth the effort. A further venefit is that our results are re-usable and portable.

WORDPRESS: I thought WordPress supported precise image positioning at one time, but as of release 3.9.2 it appears it doesn’t. I needed to add a style to my stylesheet to make this work.

CSS:

This is really a lot easier to do than to describe., You do need to be an administrator and on a hosted server. If you are hosted on WordPress.org, or do not have FTP access to the site file structure, you can try HTML in Post Editor, or fabricate one-of-a-kind pages in an application like Dreamweaver, but we can’t get into that here. In either event, you can still use my drop caps.

For CSS, you should know what a WordPress child theme is, and how to use it.  If you customize your WP installation’s  site files at all, a major release installation will overwrite your customization during the update. You need a protected child theme folder for your theme’s custom files. If a style has the same name in the parent and child theme folders, the style in the child folder will be invoked.  It is easier to put all your custom files in the child folder. I use twentyeleven theme. So, my custom folder is named ‘twentyeleven-child.’

If you don’t already have a child style sheet, create a file style.css (following WP’s instructions) and then add this into it:

@import url('../twentyeleven/style.css');
/* imports all standards css styles; adds custom styles to that  */

.border-drop-cap {
    float:left;
    padding: 0px;
    margin-top:-20px;
    margin-right:0px;
}

You can experiment by tweaking the CSS values. The values above worked for my font. You must preview your changes in an external window to see exactly how the published page will present itself to the reader; the WP Editor is not completely WYSIWTG.

The name of our style is border-drop-cap. You can add the style to the image in ADVANCED OPTIONS/image CSS, or add the image tag manually. In the text editor. Tthe tag I used for my “WordPress” paragraph (for letter ‘W’) needs to look like this:

<a href=”http://summitlake.com/wp_1computers/files/2014/08/W.jpg”><img class=”border-drop-cap alignleft size-full wp-image-360″ src=”http://summitlake.com/wp_1computers/files/2014/08/W.jpg” alt=”W” width=”57″ height=”60″ /></a><strong>ORDPRESS:</strong> I thought WordPress supported …

Once we have the tag for a letter, we can simple copy and paste to add drop caps.

CONCLUSION:

I found formatting for Pages for Mac infinitely simpler than formatting for WordPress and for this article. OK, developing and tweaking my new style for my own custom stylesheet  was a royal pain in the ass. Mind you, I was expecting to “nudge” the image.. The benefit or upside is that this work is now “portable;” I have only to do this once. Having created and tested the style, I can use it anywhere on my site whenever I fancy using a drop cap.

LBNA_M_Cany of us of admire the highly ornamented, embellished script font artwork plates available to us as clip art, miniature standalone works of art that can bring magic to a folk tale, poem, or certain themes and styles of artistic prose. For ordinary text and nonfiction, I find over-ornamentation may actually detract.

But for more examples of creative drop caps, you can do a term search for “drop cap” at Google Images or Bing.

My personal preference is actually for few or no drop caps in my documents (I deliberately over-ornamented this page as a demo sheet). In my book, I’m only drop-capping the first letter in each chapter.

Below is a screen capture example of how my Drop Cap looks in Mac Pages:

BIO-Pages-Drop-Cap

 

ADDENDA

To fit your browser page, the following Example images may not be properly scaled. The linked images are true size, but may not give you the same resolution as Word originals. For best results, I suggest making your own Word templates. The link to the .zip file contains ALL the font JPG’s, and is provided (again) below.

Example MS Word Lettering Table:
FONT-CAPS
Example Word Gray Scale Drop Shadow stock:
Gray-Layer

If you didn’t do so at the beginning of this article, you can save the complete A-Z JPG collection as a zipped file to your download folder:

DROP CAPS ZIP FILE DOWNLOAD LINK

Enjoy!

Alex

1,136 total views, 1 views today

Leave a Reply

Your email address will not be published. Required fields are marked *

*