Thursday, March 29, 2012

New Assignment: Hand Lettering

Hello Students,
Your next assignment will help you become familiar with letterforms. Your assignment is to hand letter your own name. You will sketch each letter and then scan the sketch and trace with Adobe Illustrator, add color and final touches before turning in.

Hand Lettering Assignment:
Use all the skills you have learned regarding color theory, typography and the principals and elements of design to create your own illustrated hand-lettering.

  • Start by how your name looks in different fonts. Use Illustrator to make a few versions and think of an original way to modify or design your own letters
  • Start sketching with pencil and paper, start with some small versions then try sketching each letter almost as big as the piece of paper
  • Sketch out each letter and scan them, copy the scans to your computer and use the File Menu>Place function to bring them into Adobe Illustrator
  • Trace the letters with the pen or pencil tools. Remember to close your paths to fill with color correctly
  • Assemble your final letters in order to spell out your name
  • Apply color and backgrounds
  • Post to your blog when complete
  • For inspiration check out Letter Cult





Tuesday, March 27, 2012

New Assignment: Helvetica The Movie

Hello Students,
Today we will be watching the documentary film: Helvetica, which is about the origin, uses and influence of the typeface Helvetica. Watch the film closely and take notes to use for your writing assignment.

Helvetica The Movie Watching / Writing Assignment:
  1. Where does Helvetica originate from? What country?
  2. What does the original name mean? What is it's translation?
  3. What year was Helvetica created?
  4. Name 4 Designers that appear in the film. Look them up and show examples of their work, research and provide links to websites and any biographical information about them.
  5. Where can examples of Helvetica be seen? Can you spot some examples on our own campus? If so list where. If you have one, use your camera and take a picture of a few examples and include in your blog post.
  6. What is the design style that Helvetica brought to popularity? Show one example of that design being used, find an image and post it, make sure to credit the source.
  7. List the names of 3 different design styles or design movements that are discussed in the film.
  8. Write about some of the insight about design you have taken away from the film. You can provide quotes if you like.

Sunday, March 25, 2012

New Project: Create a Portrait or Image from Type

Hello Students,
I apologize but we must reschedule our viewing of "Helvetica The Movie" another day as I have personal matter to attend to, so we have a new fun assignment in it's place. Watch this short clip below as a preview to tide you over:


New Assignment: Create a "Type Face":
In this assignment your goal is to use elements of typefaces/fonts to create an illustration. The technique for this works well with a photograph. You can create many type objects and use them to fill in the dark areas in a photo, then remove the photo and you are left with an image. You could also get creative and create an object or portrait without a photo, just use your imagination.

  • Find a photo to use a reference, if you change the photo to black and white with photoshop it will be easier for your process in Illustrator
  • Launch Adobe Illustrator, make a new document
  • Use the File>Place function to bring in your reference photo
  • Use the text tool to create different characters, use different fonts as well
  • Select your text and go to Type>Create Outlines
  • Ungroup your text objects to manipulate them individually, avoid distorting your characters, use alt-shift while scaling objects
  • Arrange them into your drawing or use them to fill in the dark areas of your photo
  • Remove the photo or hide it to see your progress
  • Check out the examples below for inspiration, all those drawings were made from fonts!










Have fun!

- Mr.W

Monday, March 19, 2012

Introduction to Typography


Students,

Typography is an important element to design, communication and information delivery. It is everywhere yet we rarely recognize it. After todays lecture read through this page and scroll down to see your assignment...



THE 19 RULES OF TYPOGRAPHY
(From the book: Digital Color and Type, Rob Carter. Rotovision 2002)
Remember, rules must first be understood before they can be broken. Once you have a good foundation of these rules, you can freely journey into unconventional terrain.
Rule 1: For optimum legibility, choose classical, time-tested typefaces. These typefaces should be drawn and crafted with consistency among characters, and exhibit highly legible proportions. Examples include: Baskerville, Bembo, Bodoni, Caslon, Centaur, Franklin Gothic, Frutiger, Futura, Garamond, Gill Sans, Goudy Old Style, Helvetica, News Gothic, Palatino, Perpetua, Sabon, Times New Roman, and Univers.

Rule 2: Be mindful not to use too many different typefaces at any one time. The main reason for using more than one typeface is to create emphasis or to separate one part of the text from another. When too many different typefaces are used, the reader is unable to determine what is and what is not important.
Rule 3: Avoid combining typefaces that are too similar in appearance. If the reason for combining typefaces is to create emphasis, it is important to avoid the ambiguity caused by combining types that are too similar in appearance.
Rule 4: Text set in all capital letters severely retards reading. Use upper and lower case letter for optimum readability. Ascender and descenders provide the necessary visual cues to make text more readable. Text set entirely in upper-case letters form monotonous, rectangular shapes. Upper-case letters can successfully be used in display type (headlines; type above 16 points).
Rule 5: For text type, use sizes that, according to legibility studies, prove most readable. These sizes generally range from 8 to 12 points for text that is read from an average distance of 12 to 14 inches. Be sure to remember that sizes (based on the x-height of letters) appear different from one typeface to another.
Rule 6: Avoid using too many different type sizes and weights at the same time. Some experts recommend using no more than two sizes, one for display titles and one for text type.
Rule 7: Use text types of book weight. Avoid typefaces appearing too heavy or too light. Text typefaces that are too light cannot easily be distinguished from their backgrounds. In typefaces that are too heavy, counter forms diminish in size, making them less legible.
Rule 8: Use typefaces of medium width. Avoid typefaces that appear extremely wide or narrow in width. Rather than distorting text by stretching or squeezing the text width, use type families that include condensed and extended faces that fall within accepted proportional norms.
Rule 9: For text type, use consistent letter and word spacing to produce an even, uninterrupted texture. Letters should flow gracefully and naturally into words, and words into lines. This means that word spacing should increase proportionally as letter spacing increases.
Rule 10: Use appropriate line lengths. Lines that are too short or too long disrupt the reading process. As the eye travels along overly long lines, negotiating the next line becomes difficult. Reading overly short lines creates choppy eye movements that tire and annoy the reader. When working with text type, a maximum of about 70 charters (10 to 12 words) per line is thought to be most acceptable.
Rule 11: For text type, use line spacing that easily carries the eye from one line to the next. Lines of type with too little space between them slow the reading process; the eye is forced to take in several lines at one. By adding one to four points of space between lines of type (depending on the specific typeface), readability can be improved.
Rule 12: For optimum readability, use a flush left, ragged right type alignment. Although in special situations, other type alignments (flush right, ragged left; centered, and justified) are acceptable, the tradeoff is always a loss, however slight, in readability.
Rule 13: Strive for consistent, rhythmic rags (the rag is the right edge of your left-justified paragraph). The purpose of effective rags is not only to achieve aesthetic beauty, but to enable readers to move gently and effortlessly down a text column. Effective rags consist of lines establishing an informal but consistent pattern of line endings.
Rule 14: Clearly indicate paragraphs, but be careful not to upset the integrity and visual consistency of the text. The two most common ways of indicating paragraphs are by indenting and inserting additional space between paragraphs.
Rule 15: Avoid widows and orphans whenever possible. A widow is a word or very short line at either the beginning or end of a paragraph. An orphan is a single syllable at the end of a paragraph.
Rule 16: Emphasize elements within the text with discretion and without disturbing the flow of reading. You can use italics, underlined type, color type, different typeface, small capitals, capitals, bold type within light type, light type within bold type, larger type, and outline type to emphasize elements but never overdo it. Use minimum means for maximum results.

Rule 17: Always maintain the integrity of type. Avoid arbitrarily stretching letters. Well designed typefaces exhibit visual qualities that make them readable. Arbitrarily distorting them compromises their integrity.
Rule 18: Always align letters and words on the baseline. Letters are designed to coexist side-by-side on an invisible baseline.
Rule 19: When working with type and color, ensure that sufficient contrast exists between type and its background. Too little contrast in hue, value or saturation, or a combination of these factors, can result in type that is difficult, if not impossible, to read. Be careful when using photos or texture behind text.

Typography Assignment:
Create a cool typographic poster using a favorite quote, like the posters below
  1. Search for a short quote about one of your favorite subjects or from a favorite author or artist, or make up your own.
  2. Set up an 11X17 document in Illustrator
  3. Create a poster using nothing but text, you can manipulate the text to illustrate your quote
  4. Make a cool background for your poster, keep it subtle
  5. Use colors that are easy to read and create impact
  6. Think BIG! Big text, big message!
  7. You should have 2 fonts maximum
  8. You should show variance in size/color etc...






Tuesday, March 13, 2012

New Assignment: Making an animated Gif

Hello Students,
Your new assignment is an introduction to making animated Gifs, and then harnessing your skills to create a more elaborate gif, or a cinemagraph style gif if you want.

What is an animated Gif? A Gif file is a web safe file format that has a cool feature, it can have different frames like a video, you can also change the playback speed and duration per frame. Unfortunately they can't have sound. You can do some really cool stuff with Gif's, for instance check out Chaz's animated blog banner.

What is a Cinemagraph? A Cinemagraph is just a fancy digital photography term for an animated Gif that has the appearance of a still image (graph) with small portions of the image appearing to be moving or appear to be animated (cinema). Some Cinemagraphs will loop the animation constantly, some repeat with a delay to give the viewer a surprise when the photo they are looking at suddenly turns and looks back at them or blinks.

This cinemagraph is made from the frames of a movie and has a very short loop of just the eyes blinking...

Gif Assignment:
Part A
  • Create an animated gif, you can use photographs to make a timed slideshow, or a short animation with sequential drawings
  • Follow the instructions below as a rough guide only. There are several ways to make animated gifs in photoshop
  • This is just a quick project to get you used to creating gifs. The final gif must display on your blog full size in order for animation to work, so make sure the image size is small enough
  • This Gif should have at least 4 frames of animation or images

Part B
  • Create a longer animation this time. Try creating a character and animating them, you can use photos or cartoons or draw your own
  • You can use photos. Use the Continuous Shooting mode on a camera for rapid fire shooting of frames. A Video camera on a tripod may also be used, photoshop can read some video files
  • tor a Cinegraph style animation Try to create an effect where just one part of the image is moving, such as eyes moving/blinking or the head turns and looks at the camera.
  • Check out http://anaestheticdiscourse.com/?p=1011 and http://fernandojbaez.com/cinemagraph-tutorial/ for tips on making cinemagraph style images.
  • See more examples here: http://fromme-toyou.tumblr.com/tagged/gif

How to make an animated Gif with Photoshop CS5:
  • Launch Photoshop
  • FILE / OPEN a new document at your desired size, I made mine at 200X180 Pixels. It's a good idea not to make Gif files too large, otherwise they can take along time to load over an internet connection.
  • Your animation can be a series of images, photos etc. You can hand draw each frame the animation also. The key is to set up separate layers that you will turn into frames of animation. Im using some pictures I took of my dog.





  • Click your top Layer, then while holding SHIFT click on your bottom Layer to select all layers
  • On your Animation Palette Sub-Menu select Make Frames From Layers
  • If you don't see individual frames in your Animation Palette, go to the Sub-Menu and select Convert To Frame Animation
  • You can now designate individual durations on each frame.
  • Go to FILE / SAVE FOR WEB AND DEVICES to export your animation as an animated Gif file. Make sure to set your looping options to forever.




  • Open your Gif file in a web browser to test it. Here's my result:



- Mr. W

Monday, March 12, 2012

New Assignment: File Format Exercise

Hello Students,
In this exercise you will practice using the "save for web & devices" feature in Photoshop, a media industry standard when creating compressed images.
File Format Exercise
  • Open the image of trees posted below in Adobe Photoshop
  • Go to File / Save for Web & Devices
  • Photoshop has 12 presets, save 1 example of each. Use proper file names
  • Compare the results
  • Repeat using the circular gradient graphic posted below
  • Write a short paragraph about your results and answer these questions. Which image has the best quality? Which has the best file size? Which has the best balance of file size and quality and why?
  • Assemble your results, group images by format and compression level (high to low) and post to your blog. You should have 24 final images to upload