Advanced Online Media

 

HOME

SYLLABUS

TOOLS

DESIGN

MULTIMEDIA

WRITING

RESOURCES

Typography

ASSIGNMENTS & CLASS PRACTICE

TECHNIQUES

TERMINOLOGY

EXPERIMENTS WITH WORDS from Thinking With Type
You can express the meaning of a word of an idea through the spacing, size and placement of letters on the page. Designers often think this way when creating logos and headlines. Physical processes such as disruption, expansion and migration are expressed through the spacing and arrangement of letters. The round Os in Futura make it a fun typeface to use for this exercise.

Pick a word from the list below (or find another word). Interpret the meaning of a word by adjusting the spacing, scale and position of letters on a page to express the meaning of that word. You can cut, crop, move, turn, repeat or otherwise transform the letters.

Use the Character palette in Photoshop. Your life will be easier!

  • suspicion         •  doubt                 •  grief              •  worry              •  tension
  • longing            •  conviction           •  sadness        •  desire              •  surprise
  • faith                •  certainty            •  joy                •  anxiety            •  trust
  • disbelief           •  hope                 •  guilt              •  fear                 •  honor

Jump to top

PUTTING A PHOTO UNDER TEXT 1 (enables you to resize photo )

  1. File > New Create a Photoshop document that is 700 x 120 pixels, 72 ppi, RGB.
  2. With the T (Text) tool, type a word in all caps, such as CRONKITE. Make it at least 100 points.
  3. Select a thick typeface, such as Impact.
  4. File > Place, then find a photo. Select Place.
  5. Use handles to drag photo until it fills the frame.
  6. Hit RETURN. The handles will disappear.
  7. While holding the OPTION key down, click BETWEEN the Cronkite layer and the photo layer. A funny-looking icon will appear.
  8. Use the Move tool to position the photo underneath your type. Make sure you have selected the photo layer. (To move the type, select the CRONKITE layer and use the Move tool.)
  9. To add a drop shadow or other effect, select the Cronkite layer. Clink on the f in the circle at the bottom left of the Layers palette. You can use this same technique to add other effects.
  10. To resize the photo, go to Edit > Free Transform.

Jump to top

PUTTING A PHOTO UNDER TEXT 2

  1. File > New Create a Photoshop document that is 700 x 120 pixels, 72 ppi, RGB.
  2. With the T (Text) tool, type a word in all caps, such as CRONKITE. Make it at least 100 points.
  3. Select a thick typeface, such as Impact.
  4. Open a photo in Photoshop.
  5. Click on the Move tool, then drag the photo on top of CRONKITE.
  6. While holding the OPTION key down, click BETWEEN the Cronkite layer and the photo layer. A funny-looking icon will appear.
  7. Use the Move tool to position the photo underneath your type. Make sure you have selected the photo layer. (To move the type, select the CRONKITE layer and use the Move tool.)
  8. To add a drop shadow or other effect, select the Cronkite layer. Clink on the f in the circle at the bottom left of the Layers palette. You can use this same technique to add other effects.
  9. To resize the photo, go to Edit > Free Transform.

Jump to top

TEXT ON A PATH

  1. Select the Pen tool and draw the path you want the text to follow. OR use one of the custom shapes. Make sure it is clicked on Path, which is in the option bar at the top left of the page. The icon is a pen inside a box.
  2. Select the Text tool. Click anywhere on the path, then start typing.
  3. If you want to move or flip the type on the path, use the Path Selection tool (dark arrow). It’s next to the Text tool. It might be hidden underneath the black Arrow tool.
  4. If you want to move the whole thing on your page, use the Move tool.

SWISS CHEESE

  1. Draw a circle with the Elliptical Marquee tool. Hold the SHIFT key to make the circle round. Fill the circle with a color.
  2. Draw another shape somewhere in the same layer.
  3. Use the DELETE key to remove the second shape.
  4. Deselect (right click) or double-click.

Jump to top

KNOCKOUT (Isolate an element by knocking out the background)

  1. Make an additional layer (Apple + j).
  2. If necessary, enlarge the image.
  3. Select the Magnetic Lasso tool. It might be hidden. Outline the object as carefully as possible. Be sure to end at the point where you started so the ants start marching! Don’t worry if you goof.
  4. If you goof, you can fix it.
    a. Select the Lasso tool and add to or subtract from the selection. Use the Shift key to add to the selection or the Option key to subtract from the selection. Circle small areas at a time. Be sure to circle the area completely.
    b. OR click on the Quick Mask (right-hand circle near the bottom of the Toolbar at left). Select the Brush tool. Make sure the paint is black, which will take away unnecessary stuff. If you go too far in, switch the color to white and fill in. Switch back to the left-hand circle to see what you’ve done.
  5. Make sure the object is selected. Make an additional layer (Apple + j).
  6. Click on that layer. Use the Eraser tool to get rid of excess stuff. Use the History Brush tool to replace something you accidentally erased or excluded. The History Brush tool is under the Brush tool.

Jump to top

9 TECHNIQUES from Spokane Falls Community College

1. Space it out
Use the Character palette in Photoshop to vary the kerning (the space between letters) to achieve a feeling, mood or sense of motion.


2. Add a border
Use the Stroke in Photoshop to add a border or outline to create a feeling or mood. Use contrasting colors.


3. Add contrast
Try contrasting type faces by using a totally different font or using bold and italic or serif and sans serif. The easy way to see what different fonts look like is to highlight the word or letters, then put your cursor in the font box in Photoshop and use the UP/DOWN keys to scroll through the amazing variety of type faces available.

Jump to top

4. Reverse it out
Reverse the type out of a shape that you created in order to have a figure/ground relationship. Or reverse the type.

5. Slide out
Look for shapes inside words that you can cut out and slide up or down, left or right.


6. Distort
Try twisting, turning or pulling parts of the type to gain a different perspective. Put the letter(s) you want to change on a separate layer. Use Edit > Free Transform.


Jump to top

7. Make it disappear
Have the type or shape fade to the background or go away completely to achieve a sense of space or motion.


8. Cut bits off
Look for ways to slice the type and move or delete areas.

9. Pop out
Pick a letter of the alphabet or word—or make a shape. Look for shapes within the letter, word or shape to pop out. This can be the counter of a piece of type or a shape you created.

xxx xxx
xxx xxx

Jump to top

ASSIGNMENT 1: LOGO This assignment has THREE PARTS. This is part 1.

BEFORE CLASS, please put a hard copy (black and white is OK if you don’t have a color printer) in the folder AND electronic copies in your student folder. Work in layers. Save your documents as .psd. Do not compress them into a .jpg.

PURPOSE
Typefaces can be incredibly expressive, even when used in a very simple manner. This assignment asks you to engage in a bit of visual play and experimentation so you’ll develop skills in looking at and using typefaces with an understanding of their importance in creating an effective message. You might even wish to download additional free typefaces to use. If you do this, you have to load the fonts on your computer.

GRADING 25 points

  • 10 points: overall appearance
  • 10 points: expressing meaning with typography
  • 5 points: originality

KEEP IT SIMPLE! Remember that less is usually more!

INSTRUCTIONS
Using ONE page no larger than 600 pixels x 800 pixels (8.5 x 11 inches), use three different techniques to design a logo for the Divided Families Web site. You may use techniques from the list above or try something else. Use a different typeface for each example. Be sure to identify the name of the typeface AND the Photoshop technique(s) you applied (see the example below, but you need to turn in only three examples). Also describe the techniques you used, such as contrast (serif and sans serif, size and/or color), alignment and proximity.

Use only black and white or gray and white.

Work with the words Divided Families.

 

Typefaces

Jump to top

ASSIGNMENT 2: CONTRASTING PAIRS This assignment has THREE PARTS. This is part 2.

BEFORE CLASS, please put a hard copy (black and white is OK if you don’t have a color printer) in the folder AND electronic copies in your student folder. Work in layers. Save your documents as .psd. Do not compress them into .jpg.

Using ONE PAGE no larger than 600 pixels x 800 pixels (8.5 x 11 inches), pick one of the pairs below (or choose something else) and illustrate it ONLY with type and simple visual elements. Use an ampersand (&), not the word “and.” Use ONLY black and white or gray and white. Do NOT include any artwork or shapes—ONLY two words and an ampersand. This demonstrates your first-level creativity.

  • black & white                    • man & woman                   • night & day 
  • hugs & kisses                   • strong & weak                   • wide & narrow
  • begin & end                      • big & little                         • clean & dirty
  • parent & child                   • open & closed                    • push & pull
  • up & down                        • life & death                       • left & right 
  • near & far                         • earth & sky                      • fast & slow
  • light & dark                       • plain & fancy
  • good & evil                       • north & south


Jump to top

ASSIGNMENT 3: CONTRASTING PAIRS (EVEN MORE CREATIVE!) This assignment has THREE PARTS. This is part 3.

BEFORE CLASS, please put a hard copy (black and white is OK if you don’t have a color printer) in the folder AND electronic copies in your student folder. Work in layers. Save your documents as .psd. Do not compress them into .jpg.

Using ONE PAGE no larger than 600 pixels x 800 pixels (8.5 x 11 inches), make a clear, interesting and effective illustration of the SAME phrase you chose for ASSIGNMENT 2. Show us your second-level creativity.

  • Use only the two words and an ampersand or “and.”
  • You may repeat either or both words as many times as you want.
  • You may use up to three typefaces to express your ideas, but no more than three.
  • You may use up to seven of the following graphic elements—lines, shapes, boxes (simple rectangles). For example, you could use two lines (below left) OR six lines and one rectangle (below right) OR three boxes along with your phrase.
  • Take into account the space that holds your illustration. Does it seem to float? Should you establish a horizon of some sort? If you use a frame to hold all or part of your phrase, that frame does NOT count as one of the three items listed immediately above.
  • You may use spot color, but only one color in addition to black. You may apply it to the type, shapes, lines, etc.

Jump to top

WHAT’S IN A NAME?

outdoors
sunset
bluegold
blackball
rocks
balls
black
bronze
bronzeplain
cactus
cactussun
skyline
yelloworange
muscleman1
muscleman2

Jump to top

TERMS TO KNOW
• Typeface: A style of lettering, such as Helvetica, Comic Sans, Times New Roman, Papyrus, Apple Chancery, Sand, Lucida Calligraphy

• Type family: A group of similar typefaces, such as Interstate light, Interstate Light Compressed, Interstate Bold, and Interstate Black

Source: http://www.thinkingwithtype.com/

• Font: A complete set of characters (A-Z, plus numbers, symbols) of one specific size, style, and weight of a typeface

• Reverse type: The type is white; the background is black or some other color

• Outline type: white type outlined in a color

• ALL UPPERCASE: same as ALL CAPS

• Boldface: darker type

• Italic: Type slants to the right

• lowercase = younger audience

• UPPER CASE = SHOUTS

• upper and lower case = traditional

Jump to top

ANATOMY OF TYPE
• Ascender: The part of a letter that extends above the body (b, d, h, k, etc.)

• Descender: The part of a letter that drops below the body (on g, p, y)

• Counter: The empty spaces in letters, such as b, o, p, and g

Source: http://www.thinkingwithtype.com/

Jump to top

CLASSIFYING TYPE BY STYLE
Only three type styles are safe to use with today’s Web browsers (“safe” means you can expect them to work consistently on different browsers on different platforms). For the body text (photo captions, navigation links, main text), choose one style. Sans-serif is the easiest to read on a computer screen (while serif is easiest to read in printed material).

For each classification, specify two or three backup fonts plus the generic to make sure users don’t see an ugly page (which may happen when their system is forced to substitute a typeface if you failed to name one that they have). Make sure the typefaces you choose match the generic, such as verdana, arial, sans-serif or georgia, palatino, serif.

• Serif: This is Times New Roman, one of the most common serif typefaces; in print, serif type is easier to read

• Sans serif: This is Verdana, a sans serif typeface; on a computer screen, sans serif type is easier to read (no serifs, therefore cleaner letters)

• Monospace: This is Courier, which looks like old-fashioned typewriting. Each character takes up the same amount of space.

Jump to top

CLASSIFYING TYPE BY SIZE
• Type is measured in points (72 points in an inch)


Source: http://www.thinkingwithtype.com/

• Body type: Type used for the text or “body” of articles (10 to 12 points online)

• Display type: Type that is larger than body type, such as titles and subheads

RELATIVE SIZES OF TYPE
• x-height: The height of a lowercase x

• Fonts with tall x-heights, such as Scala, look bigger than those with short x-heights, such as Bodoni, even when they’re the same size

Source: http://www.thinkingwithtype.com/

Jump to top

WEB FONTS
• Renowned type designer Matthew Carter took two years to design two screen-based font families: Verdana and Georgia

• The space between characters is much looser, making it easier to scan quickly on the computer screen


Source: http://www.thinkingwithtype.com/

Jump to top

CHARACTERISTICS OF DIFFERENT TYPEFACES (these will load only if they’re on your computer)


The computer is a tool . . .
• . . . to help you create your site

• The important ingredients are the content and your creativity!

Jump to top
© 2008 Carol B. Schwalbe