Watching and Writing 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. Answer and complete all activities listed below on your own blog:

Helvetica The Movie Watching / Writing Assignment:

Answer the following questions from the fim:

1. Where does Helvetica originate from? What country?
2. What does the name Helvetica mean in English
3. What year was Helvetica created, who created it?
4. What is the design style that Helvetica brought to popularity worldwide
5. Name 3 qualities of Helvetica.
6. List the names of 3 different design styles or design movements that are discussed in the film.
7. Which screen fonts did Matthew Carter design?
8. What is the cloned version of Helvetica called?
9. Is David Carson a trained designer? How does it affect his approach?
10. What magazine did David Carson Design?
11. Name 5 brands that use Helvetica.

ACTIVITIES:

• Where can examples of Helvetica be seen? Can you spot some examples on our own campus? Use your camera and take a picture of a few examples and include in your blog post. 
• 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. Post the information to your blog with this assignment. 

Thinking More Deeply:

Choose one of the questions below to answer in your post:

1. How does a typeface create a mood, feeling or image? Can you describe an occasion when you had a particular reaction to something in print, not because of the content, but because of the typeface?
2. In HELVETICA, design writer Richard Poynor says, “The designer has an enormous responsibility” as the person who is “putting wires into our heads.” What does he mean? How would you define that responsibility?
3. Think of the font you most commonly use when working on your computer. Which one is it and why do you use that one?
4. American designer David Carson says, “Don’t confuse legibility with communication.” What does he mean? What’s the difference between them?
5. How is design an expression of the times? How does politics affect the art of design?
6. What is your reaction to the grunge style of type and design? Why do you think you respond to it that way?
7. Imagine that the post office, your local bank or other government or corporate entity whose signage is familiar to you started using a different typeface. How would that change their image or your feeling about that business or organization?
8. What might you take away from this film in terms of possible effects on your work or other aspects of your daily life?
9. What changes, if any, has this film made in how you think about print and graphic design?

Post your essay and images to your blog under the title "Helvetica The Movie"

Have fun!

- Mr.W

Introduction to Color Theory

Students,

Your next assignment is to create a color wheel that shows 22 gradations of color and examples of color harmony palettes. You will also use an online resource to create a palette derived from a photograph and then create a complementary color palette.

Resources:
Adobe Color CC
Color Calculator - Sessions College

Part A - Color Wheel Assignment:

                   

• Create a new document in Illustrator that is 10"X10"
• Go to File > Document Color Mode and choose RGB
• Create a ring of shapes, at least 24. You can use the rotate tool and control-d to quickly make a geometric pattern. Try different shapes like teardrops, diamonds, ovals etc..
• Open your color mixer (rgb) and mix your colors, start with red, then orange, etc...
• You color wheel should show a smooth mix of color from all the way around
• Create a copy of your color wheel, draw arrows to show two complementary colors. Draw boxes to show those colors side by side.
• Create a copy of your color wheel, draw arrows to show three split-complementary colors. Draw boxes to show those colors side by side.
• Create a copy of your color wheel, draw arrows to show three analagous colors. Draw boxes to show those colors side by side.
• Create a copy of your color wheel, draw arrows to show four quadrilateral colors. Draw boxes to show those colors side by side.
• Post your results to your blog

Part B - Color Palette Generation From Photograph:

In the study of color theory, primary colors refer to the 3 or 4 color combinations that all other colors can be derived from. In photography, an image can have cool, warm, light, dark, saturated or unsaturated primary colors. In this short project we will extract the colors that make up our image. From that palette we can choose pleasing color combinations for layout purposes.

Step 1: Pick a photo you like from one of the free photo websites below:

Flickr Creative Commons
http://www.freephotos.se

http://www.morguefile.com

Step 2: Navigate to this online palette generator, and upload your image as a JPG file. Here is the link : http://www.cssdrive.com/imagepalette/

Make sure you click "choose file" and upload your image....

Look for this link near the bottom of the page...

Step 3: After your image is done uploading, look at the palette it created for you, then download that palette as a Photoshop .ACO File.

Step 4: Now switch over to photoshop. Create a document about 1000X900 pixels at 72 dpi. Copy-paste your photo into it, scale it down and leave some room on your document for your color palette. You will be creating shape layers and filling them with color from your custom color palette.

Step 5: On your Color Swatch / Sub-Menu, choose Replace Swatches...

Step 6: Navigate to the Photoshop ICO file you downloaded from the palette generator website.

Your color swatch tab should show your custom color palette loaded up, with no other colors available (you can change it back by choosing "reset swatches" from the submenu later on).

Step 7: After your palette is loaded, use a shape tool to draw a square, circle etc...

Step 7: Draw 1 object, then switch to the Move Tool and Option-Drag a copy....

With the Move Tool selected, and your object Layer selected... hold the option key and drag your copy...

Step 8: Continue this process.. each time you create a new object, select a new color from your custom palette by clicking on the swatch. Then you can use the Option-Delete command to fill with that color, or go to the Edit Menu / Fill / Using Foreground Color...

Continue this process until you have 20 different objects... fill these objects with the most dominant colors you see in your custom swatch palette.

Final Step: Add your name and some cool title text to your assignment results and post them to your blog.

Part C - Short Writing Assignment:

On your blog, write a short summary of the principals discussed, shown and demonstrated in this color theory lesson. Refer to your lecture notes. You can search for images online and research answers also. Try to address all the questions listed below:

• What are the 3 primary colors? 
• How are secondary colors created? Cite an example 
• How are tertiary colors created? Cite an example 
• What is the difference between subtractive and additive color models? 
• How can color affect our perception? 
• How does one color affect another? 
• Find an example or show an example of a greyscale image. 
• Find an example or show an example of a monochrome image. 
• Find an example or show an example of an image that uses complimentary color.

- Mr.W

Introduction to the Principals and Elements of Design

"People ignore design that ignores people." — Frank Chimero

Art and Design elements are the basic units or building blocks of a visual image. The principles of art and design govern the relationships of the elements used and also organize the composition of a visual image as a whole. All imagery, art, design and photography alike, are comprised of elements that can be broken down and analyzed. 

Look over these posters, the first addresses the principals, the second addresses the elements and provide visual representation or examples of these concepts. Continue scrolling down for written explanations in more detail, there is an exercise at the bottom of this post as well to work on...

The Elements of Art and Design

Space: Space refers to the distances or areas around, between or withing components of an image. It can exist in two or three dimensions. Space can refer to positive space(a shape, such as an apple) or negative space (the absence of an apple shape). It can also refer to elements in the foreground, mid or background of an image.

Line: Line is the basic element and refers to the continuous movement of a point along a surface, such as a pencil or brush. Line can also be created by the edges of other shapes. Lines can vary in length, thickness and direction.

Balance: Balance can either be symmetrical or asymmetrical. The balance of an image can affect the focal point of an image. The location of objects, their sizes and colors, textures and shapes all affect the perception of balance in an image.

Color: Color and particularly, contrasting color is used to draw the eyes attention to certain areas. It can invoke mood and emotion. Color is created in many different ways... but in all color spectrums, there are primary colors, which all other colors are derived from, and secondary and tertiary colors. Certain formula’s exist for choosing colors that are pleasing to the eye, one way is using Complimentary Colors, which appear opposite each other on a color wheel. Colors can be perceived as “Warm” such as reds, yellows and oranges, other colors are “Cool” such as purples, greens and blues.

Shape: Shapes are what give objects their definition. Think of the silhuoette. Shapes can be organic (curved, soft, random) or geometric (angular, sharp, organized, complex).

Texture: Texture is perceived surface quality. In art two types of texture exist, tactile and implied. Tactile texture is the way a surface actually feels, such as sandpaper or tree bark. Implied texture is the way the surface of an object “looks” like it feels. This is created with different pencil and brush techniques. In the modern digital realm, texture is a strong ally in design.

Value: Value is an element that refers to the relationship between light and dark. It can also be referred to as tone or shading. The value of an object helps give it form and depth. 

The Principles of Art and Design

Unity: Unity refers to a sense that everything in a piece of work belongs. It can be referred to in the literal sense of course, or just by the way balance, repetition and other elements acheive a design harmony.

Variety: The use of dissimilar elements. Differences in shape, texture, color, line etc.

Repetition: This refers to the recurrence of elements within a piece. Color, lines, shapes and other elements can be echoed, often with some subtle variation to maintain interest. Repetition can be random or organized, or express rhythm and patterns.

Harmony: Harmony is acheived through the sensitive balance of variety and unity. Harmony in color can be acheived by using complementary or analagous colors. Harmony in design is reflected in consistency in style, similarity of components. Harmony can also extend to the use of texture, color, scale etc.

Contrast: Contrast is the occurrence of differeng elements, such as color, value, scale etc. It creates interest and helps direct the focal point. Contrast helps define depth and space as well. Objects that are closer to use appear lighter, and objects that are farther away often appear darker.

Proximity: This refers to the physical placement of objects or elements in a piece. Proximity is used to communicate ideas like relation, importance or hierarchy.

Proportion: Proportion involves the relationship between objects. It is relative to size and scale. Proper proportion is important in implying realism, and skewing proportion can force the viewers perspective to change. One classical expression of proportion is the “Golden Ratio” in mathematics and the arts. Throughout history, the ratio for length to width of rectangles of 1.6 (roughly) has been considered the most pleasing to the eye. 

Functionality: In the design world, good design is created for a purpose. This is the difference between art and design. Art is created for the aesthetic value, while design is created to communicate. Art is developed by artists often to satisfy personal motivation. Design is created by designers, for clients, to communicate a message or information. Good design must be aesthetically pleasing as well as informative.

Poster designed by Milt Glaser

Principals and Elements of Design Exercise:

Part 1 - Hand Drawing Exercise

• Prepare 2-3 sheets of drawing paper and acquire pen, pencils and colored pens or pencils when neeeded
• Create a series of pencil/pen sketches that demonstrate the following elements and principles:
• Line
• Shape
• Form
• Color
• Texture
• Space
• Create a new series of illustrations utilizing the following elements and principles to communicate a concept:
• Communicate "Order" using Line
• Communicate "Chaos" using Shape
• Communicate "Friend" using Form
• Communicate "Enemy" using Color
• Communicate "Alone" using Texture
• Communicate "Together" using Space

Part 2 - Digital Drawing Exercise

• Create an 11"X17" document in Adobe Illustrator or Photoshop, whichever program you are more confident in with illustration
• Layout a grid of 12 equally spaced and sized boxes
• Render your hand drawings digitally. You can scan your drawings and trace over them in Adobe Illustrator, or you can freehand your digital version using your pencil and paper sketch as a reference.
• Use proper drawing techniques. When using the pen tool remember to close your path in order to apply a fill. Use color, gradients, lines, path effects, brushes or any other Adobe Illustrator tool you need to complete your drawings.
• When complete, add a title to your artwork, save a PNG and post to your blog

Student Examples:

This exercise is due Friday... have fun!

Skill Development with Adobe Photoshop: Juxtaposition Collage

Hello Students,
Having an in-depth understanding of Adobe Photoshop and its processes is incredibly important in many areas of digital media study, especially with photography. Photoshop was designed with the photographic process in mind and uses terminology and techniques common to the photographic process. This is not the only software the photographers use, but it is a great starting point to begin study. In this exercise we will develop familiarity with the image editing process and the power of photoshop for image manipulation.

Tutorial 1 Link: Using Photoshop Selection Tools

• Search online for a photo with a green screen background (make sure it is larger than 1000 pixels wide/tall), or go in the studio and take a portrait against the green screen, read and watch all parts of the link above and then use your skills to remove the green from your image, replace it with a color or a different background. Save the results to your project folder for posting later on.
• Follow the tutorial link above to learn how selections work...
• Download an image with a green screen background.
• Edit out the green and replace with a new background.
• Save a JPG of your edited image.
• Post next to the original on your blog.

Tutorial 2 Link: Using Photoshop Layers

• Read the website/tutorial page link above, then use your skills to make a simple layered image. Try to replicate the image below...
• Read the tutorial link and try out the steps to learn how layers work.
• Create 3 layers and create a colored circle on each layer of different colors.
• Try out different "Blending Modes" to see how the layers interact with each other...

When are complete with these tutorials proceed to the assignment below...

Project: Juxtaposition Collage:

A collage is a work of art created by combining different imagery from different sources. Your assignment challenge is to create a collage from different photographic sources to convey the concept of Juxtaposition. Use the selection tools in photoshop to combine different images, you can use other tools like the eraser tool to blend two photo's together. Use whatever tools you need to complete your image.

Assignment Details:

• Your image must be created in Photoshop at a size of around 10"X8"with a resolution of 72 DPI.
• You must have a minimum of 4-6 objects you have cut out and composed.
• Your design must adhere to the concept of Juxtaposition, the arrangement of conflicting elements, ideas or concepts. Such as a car driving on water, or football players in the antarctic, or penguins in outer space.

Godzilla serves coffee in a diner, thanks to the magic of photoshop. Created by Seth Wilson 2016

Godzilla Attacks Chicago 1905. Created by Seth Wilson 2014

Godzilla Rides A Chopper By Seth Wilson 2013

Godzilla Rides A Chopper By Seth Wilson 2012

Have fun!

- Mr.W

Randomized Album Design Project

Hello Students,

Your new assignment is to create an album cover design. Photography is provided, but you can add original design, illustration or alteration. Use all of your skills you have learned this semester. This is a preliminary exercise to compare your skill advancement near the end of our coursework.

Introducing: Fou Ts'ong, Piano, Mozart Piano Cocerti , K503 & K595,  Westminster , Designer, Rudolph de Harak

Assignment Details:

You will be creating a CD album artwork. Think about how you can visualize the physical and emotional response the music creates inside of you... how can you put those influences into a visual representation? They key to this assignment is to make sure the artwork on the album cover is representational of the music it is showcasing. Although in this case the music doesn't exist, and neither do the musicians. You must design an album cover based on your own interpretations of the album and artist name that you will be given through a randomized method.

Design by Nic Milcevski, Graphic Design Student, 2016

Assignment Specifications:

Utilize all of the skills you have learned this semester. This project should be a shining example of your graphic design skills for your portfolio. We will design another album from scratch at a later date to compare our skill development. When you design your cover

Follow the steps below to discover your artist and album title:

• First, go here: http://en.wikipedia.org/wiki/Special:Random The title of the article is now the name of your band. 
• Next, go here: http://www.quotationspage.com/random.php Go to the bottom of the page. The last three to five words of the last quote are the title of your first album 
• Lastly, go here: http://www.flickr.com/explore Select a random image. It is now the photo for your album cover. Manipulate the picture, resize it, add some other color, whatever. Manipulate the image digitally as you see fit to match the type of music your "group" makes. Do the same with the band name and album title typography
•  Finesse your design until you think it's perfect within the deadline allowed.
• Complete your design with Photoshop or Illustrator, your choice. If you use Photoshop, make sure the resolution is at least 800 pixels wide/tall
• Export a JPG and post to your blog when complete

This album topped the charts in 1978, a powerful solo album of acoustic love ballads by the russian folk artist, Aryeh Shander. Just kidding! It never existed, and was created by me with a random selection of artist name and album title. 

Links for Design Inspiration... Check These Out!

35 Beautiful Music Album Covers

50 Amazing Album Cover Art Examples

Designs are due on tuesday, have fun!

- Mr.W

Previous Student Examples:

Advanced Mousing 101: Develop Your Pen Tool Skills to ULTRA LEVEL!!!!!

Pen Tool Practice Exercise 1:

Pen Tool Tutorial:

Read through this tutorial carefully and follow along with illustrator using the pen tool. You will be required to turn in a pdf file that demonstrates your steps of pen tool practice in each step of the tutorial, additionally at the end of the tutorial there are 10 black shapes. You must trace these shapes using the pen tool. You may download the images, and use the FILE/PLACE function in Illustrator to place the jpg on your artboard for tracing.

View the tutorial here: http://www.vectordiary.com/illustrator/drawing-with-pen-tool

When your Pen Tool Exercise is complete you can move on to this next assignment, Place and Trace. The goal is to further practice your Pen Tool by tracing line art over a photograph.

Pen Tool Practice Exercise 2: Place and Trace:

The goal of your place and trace assignment is to show clean lines, and to use line profile modifications and different line weights to add focus and emphasis to the details and features in your illustration.

1. Search for a photograph online that you would like to trace... make sure the image is at least 1000 pixels wide so that it contains some good details. Look for images that have details that can be traced, flat looking images may not trace well
2. Download your image and import it into Adobe Illustrator
3. Lock down the layer that contains your photograph, create a new layer to create artwork on above the image
4. Using your Pen Tool only, trace line art over your photograph, make sure there is no Fill, Outline only! Vary the thickness and other stroke properties to add depth to your illustration
5. Turn off the photograph layer to see your line art. Keep drawing until your image contains a good level of detail. Save your file often to avoid losing work to software crashes, etc

Place and Trace Examples: