Font poem

Thanks to Prabu David, Ohio State University, for his wonderful idea, inspiration and examples.

Objective
Examples
Image size
Getting started
Saving and naming your files
Selecting your background color
Adding type
History palette
Evolution of a font poem

Objective
Creating a font poem will refine your Photoshop skills and give you a chance to visualize words with fonts.

Some things to remember
1. Your font poem should demonstrate creative use of typography.

2. Minimize the use of special effects; concentrate instead on different fonts, font sizes, spacing and word arrangement.

3. Start out with black and white. Add some color later.

Optional: If you’re intrigued by typography, go to the cool Counter Space site. Be sure to click on the "classification" link and look at how fonts have evolved.

Optional: Another neat site about typography is ThinkingWithType.com.

Jump to top

Finished project
Below is a basic poem, which was created by Adam Reiss based on a similar idea in a book by Amy Arnston. This is a simple illustration of what you can do with fonts in Photoshop. Of course, the only limit is your imagination.

Here’s another example:

Jump to top

Once you’ve finished your font poem, please write no more than one page double-spaced explaining:
a. why you chose that particular poem or saying
b. why you chose the fonts (include the name of each font)
c. why you arranged the words the way you did.

Along with your font poem, submit this write-up at our next class. See the example below from a visual communication design student at Ohio State:

You owe it to yourself to be the best you can be—in baseball and in life. — Pete Rose

I selected this quote because it directly relates to a concept that my dad instilled in my when I was young: If you are going to do something, do it to the best of your ability. Everything you do is a reflection of who you are, and therefore you owe it to yourself to put forth your best effort, not just in sports, but in everything you do. I took this advice to heart and have always tried my hardest in every aspect of my life.

For this assignment, I started by setting the canvas color to black. I then placed the quote on the canvas in white text. From there I started manipulating each word by selecting different fonts and different sizes. While doing this, I began to lay the words on the canvas in numerous ways and eventually came to the final layout that is depicted above. After I had the words in the place I wanted them, I began to transform them. I used the stretch, skew, and distort tools to do this.

Once I finished the alterations to the text, I decided to add something unique to the last line. I copied the text and then flipped it vertically to give it a mirrored effect. I changed the color to red and faded it out so that it is noticeable but does not overshadow the rest of my work. I chose red partly because it contrasts well with black and also because Pete Rose played for the Cincinnati Reds during his Major League baseball career.

Looking at my font poem, I notice one thing right away that was very important to my design. While no two lines consist of the same exact font, sizing, or transformation, somehow the text as a whole appears symmetrical. This was my goal. While developing this font poem, I wanted to mix up the fonts and use as many different styles as possible but in the end have everything come together and look balanced. I believe I accomplished this by having all the text emanate from the center and the word “you” either horizontally or vertically and also by providing each object with another comparable object. For example, complementary text appears in the top left-hand and bottom right-hand corners. Also, the two cases of the word “to” are stretched in and then out around the word “yourself,” and similar text appears down the center of the poem.

Evolution of a font poem
At the bottom of this page is an example of how one font poem evolved, along with the write-up.

Jump to top

Image size

Create a blank document at a conservative 640x480-pixel size (and a resolution of 72 ppi). It’ll fit inside a browser’s window on a 640x480 display. (Don’t fret over the inch equivalent for pixels. On-screen imagery is measured in pixels.)

Web page graphics that exceed the width dimension of small monitors will inconvenience many viewers by forcing them to scroll both horizontally and vertically to see the full page. It’s bad enough to have to scroll in one (vertical) direction; having to scroll in two directions is a pain.

Pages with lots of text should be designed to print properly because most users will print those pages to read them more comfortably. If the layout is too wide, readers will lose several words from each line of text down the right margin.

The image resolution needs to be just a mere 72 ppi. On a computer monitor, image resolution is measured as ppi (pixels per inch). The acronym dpi (dots per inch) is really an output term referring to how many dots of tones or silver are used to create (or resolve) printed images on paper or film. You might have a 72 ppi image on your web page. When you print it to your laser printer, those 72 ppi are printed onto the paper at a resolution of 600 dots per inch, which doesn’t make it look any better on paper because the image is still created with only 72 pixels per inch of color. (Your monitor is divided into tiny pixels, or picture elements.)

Jump to top

Photoshop tools (click on this for a refresher)

For the font poem we’ll use the following tools:
    • Color Picker (set foreground color)
    • Paint Bucket
    • Type
    • Move
    • Gradient

Getting started

1. Open Photoshop (icon with the green pencil)
2. File>New
    Name: carol_font1 (all lowercase; no spaces)
    Width: 640 pixels (NOT inches)
    Height: 480 pixels (NOT inches)
    Resolution: 72 pixels/inch
    Mode: RGB Color
    Contents: White
3. OK

Saving and naming your files
    • File>Save OR APPLE + s
    • You can save your files to the desktop while working on them, but be sure to back them up on your hard drive
    • All lowercase letters
    • Only letters or numbers—no funny characters except tilde (~), underscore (_), hyphen (-) or period (.)
    • No spaces
    • As short as possible

Foreground and background colors (Don’t worry about Screen Modes and Image Ready.)

Selecting your background color
1. Highlight bottom layer (background) in Layers palette
    If your Layers palette isn’t visible, go to Window>Layers
2. Double-click to unlock Background layer.
3. Set foreground color (top box) using Color Picker in toolbar
4. Click color you want (use slider bar to move up and down the spectrum) in big box
5. OK

Working with layers

Painting the layer
1. Edit>Fill
Use: Foreground color
OK
OR
2. Click on paint bucket in right column of toolbar
    • If the Gradient tool is showing, hold down the little black triangle in lower right corner and select Paint Bucket tool. Click on your canvas
OR
3. Use the keyboard shortcut OPTION + DELETE (Mac)
ALT + BACKSPACE (PC)

Jump to top

Adding type
1. Click on the T (Type tool) in right column of toolbar
2. Click on your canvas
3. Type in a word or two of your font poem

IMPORTANT! Make sure the color of the type is different from your background color; otherwise, you can’t see it

4. Change the color of the type by clicking on the T tool, clicking in the Layers palette with the type and dragging your cursor across your word(s) on the canvas.
OR
Double-click on the big T in the Layers palette.

5. Click on the color box toward the right side of the top toolbar. Select your color.
6. Use the Move tool to position your word(s)
7. Return to the T (Text tool) and type in another word or two.

Note: Each word you want to move around needs to be in a separate layer.

If your Layers palette isn’t visible, go to Window>Layers.
    • Your first word(s) appears on one layer in the Layers palette.
    • Your second word(s) appears on another layer in the Layers palette.
    • Text layers will automatically be named in the Layers palette.
    • You can rename other types of layers by double-clicking on the name, such as Layer 3, and typing in the new name.

Typography for your font poem
1. Highlight your first word(s) by clicking on the appropriate layer and double-clicking the bigT.

Important! Make sure the correct layer is highlighted in the Layers palette.

Important! If you accidentally create a new layer, such as Layer 3, delete it by clicking on the trash can at the bottom right of the Layers palette.

To add a new layer, click the icon (looks like a turn-up piece of paper) to the left of the trash can in the Layers palette.

To activate the Character (typography) palette, click on the T tool, then click on the icon at the far right of the tool bar at the top of the page.
OR
Window>Character

Have fun! Experiment with the fonts and sizes, but please work in black and white for now. Uou can change to color later.

Jump to top

Warp text—click on box that’s second from the right in the toolbar at the top of your screen

Edit>Free Transform to stretch, scale, distort, or rotate your type
    • CANCEL = escape
    • OK = return or double-click inside box

Gradient tool
1. If the Gradient tool doesn’t show up in your toolbar, hold down the little black triangle in the lower right corner of the Paint Bucket tool.
2. Click on the background layer.
3. Click on the canvas and draw a line.
4. Change the pattern in the bar at the top.

Styles palette
1. If the Styles palette doesn’t show up, pull down Window>Styles.
2. Click on the Text tool.
3. Type in a letter and make it a large size, such as 150 points (although the pulldown only goes up to 72 points, you can type in larger numbers).
4. Click on the Styles palette.
5. Select a pattern.

Special effects
1. For special effects, click on the fx in the circle at the bottom of the Layers palette OR double-click the shaded blue area to the right of the name on the Layers palette.
2. To activate the sliders, click on the name of the special effect, such as Drop Shadow. Do NOT just click the box

File>Save OR APPLE + s
Be sure to back your document as a .psd, not a .jpg.

History palette
    • If your History palette isn’t visible, go to Window>History.
    • Lists the most recent states (edits) you made, with the bottommost state being the most recent.
    • Clicking on a prior state restores the image to that stage of editing.
    • You can undo up to 1,000 previous stages of a work session.

Jump to top

Evolution of a font poem

BODY OF WORDS

I am a body of words
REPEAT
of words
Said and Unsaid
Never heard.
I am the child calling in the dark
head thrown from her heart
A hand that slapped and did not stop
faces fly into Treetops, disembodied.
I am the reason without the need
a want you can never feed
the angry bitch,
the angry bitch.
Freeing the words with rage
stitching the flesh of my neck
pumping the blood to my head
a body of words a body of words
Said and Unsaid
Never heard.

“BODY OF WORDS” FONT POEM DESIGN
I used my own poem, “Body of Words,” which expresses my private reasons for writing and the universal struggle of women to be heard in patriarchal societies. I was raised partly in a rigid, fundamentalist Baptist farm community in the Deep South, where the biblical admonition, "spare the rod, spoil the child" was used by many as an excuse to vent violent emotions on children. The poem speaks to my childhood retreat into the world of words to escape physical abuse and isolation, and the liberation I found in books and diaries. It speaks to our society’s portrayal of women as bodies without minds, and the liberation many women find through writing. I use the poem to declare myself a thinking being with both a body and ideas. By becoming a professional writer, I am further freeing myself from a world of silence. My font poem announces and commemorates that intention.

I chose the dark blue background to represent the dark mood of abuse and the unenlightened space of the unspoken. I placed a version of the entire poem in the background, peeking through, the way my thoughts tried and failed for so many years to peek through the darkness. I chose white letters for both the hidden poem and the font poem to represent the light shining through the dark: words are a source of clarity, a light that shines from within us.

I outlined the body of a woman in dark red, representing both my personal wounds and those parts of women that patriarchal societies want to repress. I used a sensual style in the woman’s outline and some of the fonts to illustrate that a woman can claim her intelligence and self-expression through words without rejecting the sensuality of her body. I am both a sensual body and a body of words (a mind). I chose to blur the text “never heard” to symbolize visually the experience of speaking and not being heard with words that are written but not quite seen.

Jump to top