Visual Communications Home

VCOM 50 :: Process of Design

Archives

MONDAY, November 7, 2011

THE ALTERED PAGE PROBLEM
Assigned: Monday, 11/07/11
Due: Friday, 11/18/11.

Example student work for this project: altered-page-examples |
Illustrator files for this project: altered-page- archive |
Look over the EXAMPLE FILE PDF (altered-page-examples). Children have no problem assigning alternate personalities and purposes to everyday things based on all kinds of assumptions related to how the kid is feeling, what the everyday thing looks like, and what kind of alternate realities the child or children wish to temporarily inhabit. In this exercise, you get to do the same! Here are three outline images: an electric plug on a wall above the baseboard, a double hung window (the kind that slides up or down in a frame), a brisk wall. GO TO IT!
1)  You can work in teams of two or three, but each team member must do all three
2)  Unless you are feeling very computer competent, do this in traditional media — Xerox copies, collage, colored pencil, pens, markers, watercolor or gouache, or any combination of all of the above. Some of the very best examples by my students have been collages including one window with a decorative blind that could be raised to show a scene outside the window. Study how the perpetrators of the examples have taken the base image to entirely different places.
3)  Alone or in teams, let your imagination roam: visual and verbal free association, visual/verbal puns in good taste or (better) otherwise.
4)  Have fun like you are a kid in the timeless world of make believe, but don’t be afraid to expose your inner, more mature (or otherwise) personality.

MONDAY, September 31, 2011

THE ROAD SIGN PROBLEM
Assigned: 10/31/11
Due: 11/07/11.

This is a slight change of plans, but I think you will like it.
Look over the EXAMPLE FILE PDF (road-sign-examples). I this exercise you will be creating “DIAMOND SHAPED” warning signs, you know, the ones that state things like SLOW CHILDREN, FALLING ROCKS, DEER CROSSING, etc. But, the signs you’ll be making will be less prosaic. I have included the list of “topics” that are used on the examples as well as a few of my own on the last page of the examples document.
CLICK HERE FOR THE two-sign-docs
You may do this assignment in Illustrator, Photoshop, or traditionally. Make sure you make a number of rough sketches before you work on the final pieces. As you can see from the examples, the goal is to be witty and/or slightly skewed, and create a sign that requires a second or third look.

FRIDAY, September 28, 2011

DUE TODAY  – Less is More Problem; DUE TODAY
click here for examples: less-is-more-examples

click here for files: less-is-more-photos

Assigned: 10/21/11
Due: 10/28/11.

MONDAY, September 24, 2011

Less is More Problem;
click here for examples: less-is-more-examples

click here for files: less-is-more-photos

Assigned: 3/30/12
Due: 10/28/11.
A new set of videos for this project  available here:Photoshop Video 1  |  Photoshop Video 2 Bridge Video 1  |  Marquee Selections Video  |

Instructions for this project are shown for Friday, September 21.

Note: this week’s videos were done for previous semesters when time was tighter. Ignore the parts of the videos that talk about converting color to grayscale.

FRIDAY, March30, 2012
Less is More Problem;
Go to the VIDEOS PAGE

Assigned: 3/30/12
Due: 4/6/12
A new set of videos for this project  available here:Photoshop Video 1  |  Photoshop Video 2 Bridge Video 1  |  Marquee Selections Video  |
click here for examples: less-is-more-examples
click here for files: less-is-more-photos

Make sure you look over the LESS-IS-MORE examples PDF to get the general idea of what we will be doing in class today.

1.  Download and decompress the “less-is-more examples” and the “less-is-more photos” from the two links above. Take the “less-is-more photos” folder and drag it onto the ADOBE BRIDGE ICON on your dock.
2.  Arrange the BRIDGE interface so that your CONTENTS WINDOW is narrow. Enlarge the PREVIEW window as much as possible and shrink the META DATA WINDOW to nothing. When you click each CONTENT IMAGE, you will see it in a large, high resolution image in the PREVIEW WINDOW.
3.  Choose ONE of these image in the CONTENT WINDOW and DRAG it to the PHOTOSHOP ICON on the DOCK. This will open the IMAGE in the GRAYSCALE Mode.
4.  Go to the IMAGE MENU and select MODE then choose RGB from the pop-out menu.
5.  SAVE the file to your desktop.
6.  Set your workspace to FULL SCREEN MODE WITH MENU BAR. NOTE! This step is essential to do this project efficiently.
7.  As I will demonstrate in class and as is shown in the videos, DRAG the first LAYER to the NEW LAYER ICON on the LAYERS PANEL to create a copy of the first layer. ENLARGE this new LAYER.
8.  Go: SELECT > ALL then EDIT > COPY and (with your second layer active-in blue) EDIT PASTE.
9.  Now, either repeat step 7 on this new LAYER –  or  –  repeat step 7 on the original Layer. The object here is to create a new, different, and larger ENLARGEMENT.
10. Whichever method used, repeat step 8 on this new layer.
11. HOLD THE COMMAND KEY and SELECT the TWO LAYERS YOU ENLARGED (steps 7 and 9), NOT THE TWO LAYERS YOU CREATED IN STEPS 8 AND 10. SAVE.
12. Choose your favorite of the three layers remaining and GO: Image > ADJUSTMENTS > INVERT. (Note: do not Go: Select > Inverse.) SAVE.
13. You now have FOUR VERY DIFFERENT LAYERS. DRAG your favorite of these four to the new layer icon to create a new layer that is a copy of the chosen one. CLICK on the BRUSH TOOL  on the TOOLBAR. CHOOSE a HARD BRUSH from the BRUSHES POP-DOWN (second top left ICON on the menu bar) and set it to around 25 PIXELS. Set the MODE POP-DOWN (long, third ICON UPPER LEFT) to COLOR. Make sure the SWATCHES PANEL is OPEN on your desktop.
14. Choose ONE COLOR from the SWATCHES. Paint it onto your most recently made layer, emphasizing some aspect of its composition.
15. Repeat step 13 to create a Sixth Layer from the LAYER you just COLORED or another layer of your choice. This last layer should have at least two colors and at most five colors added to it.
16. SAVE and copy the file to the server and to your ZIP drive.

Note: many of the videos were done for previous semesters, so some of what you see on them will look different from the current video and media page content. The meaning and the content are absolutely identical for our purposes. Ignore the time frames.

DESIGNING WITH TYPE PROJECT: Again
Assigned Friday, October 7, 2011; continued Monday, October 10, 2011
Due at 8:30 am; Friday, October 14, 2011 (if I’m not at Jury Duty)
THE FIRST HALF SEMESTER DESIGN PROJECT
Introduced Monday, October 10, 2011; due Monday, October 31, 2011
(see below this week for more on this project)

Download: Example Files by Visual Literacy Students

Designing with Type files

Project 6: design with type-1 | Project 6: design with type-2 | Project 6: design with type-3

ON MONDAY, October 10, 2011: As you should know by now, we have started using TYPE. We will continue working on this project today for at least the first hour. I would like to sit with as many of you as possible to discuss the way your project is evolving.
This project is a parallel to our first project, the BLACK SQUARE PROBLEM. Like that exercise, it involves your own creative approach and amusing or profound, illustrative instincts focused on the possibilities within some prescribed letter-forms. You need to really look at the letters in each of the six alphabets on the project file. In particular, look for differences in the way lines end, how the thickness and thinness of lines combines on the letters, how different types of curves are drawn, differences in the height of Capital and lower case letters, which letters descend below the baseline in different fonts. What suggestions of imagery do you get from different letters in different fonts?
Zoom in on each alphabet to start the questions and visual associations you can get from each fonts specifics. Then start “playing”.
Note: the videos all refer to Fall 2010. Just pretend you are hearing Fall 2011 and you’ll be fine.
Background material: A Brief history of type  |  Using type in Illustrator  | Anatomy of Type  |  Type references on the web  |

Watch the videos!
The three videos will take you through the project as often as you need. In this project, you should probably divide your time about half and half between studying the shapes in each alphabet, looking for visual associations (real or imagined) and experimentally putting letters together on the work area until your idea really gels.

FIRST SEMESTER PROJECT: Smart Phone App

In this project the class will be working as a design firm to create a new Smart Phone App. We won’t be coding it, but we want to develop a number of aspects of the application and its use, the basics of its construction and look and feel, it’s app icon, splash page, and the rudiments of its navigation. If you wish, you may join the crazy group we were discussing in class today or you may, alone or with a small team, create your own theme for this.
For Friday (if I’m not at Jury Duty) or for Monday, October 17 (if I’m not at Jury Duty) bring 3 to 5 initial ideas (small is good here) and prepare to throw them around and see what we come up with.

DESIGNING WITH TYPE PROJECT
Assigned Friday, March 16, 2012
Due at 12:30 pm; Friday, March 23, 2012 or Friday, March 30, 2012: depending on the class

Designing with Type files

Project 6: design with type-1 | Project 6: design with type-2 | Project 6: design with type-3

FOR MONDAY, October 10, 2011: Our first project using TYPE starts. This project is a parallel to our first project, the BLACK SQUARE PROBLEM. Like that exercise, it involves your own creative approach and amusing or profound, illustrative instincts focused on the possibilities within some prescribed letter-forms. You need to really look at the letters in each of the six alphabets on the project file. In particular, look for differences in the way lines end, how the thickness and thinness of lines combines on the letters, how different types of curves are drawn, differences in the height of Capital and lower case letters, which letters descend below the baseline in different fonts. What suggestions of imagery do you get from different letters in different fonts?
Zoom in on each alphabet to start the questions and visual associations you can get from each fonts specifics. Then start “playing”.
Note: the videos all refer to Fall 2010. Just pretend you are hearing Fall 2011 and you’ll be fine.

Watch the videos!
The three videos will take you through the project as often as you need. In this project, you should probably divide your time about half and half between studying the shapes in each alphabet, looking for visual associations (real or imagined) and experimentally putting letters together on the work area until your idea really gels.

THE LIFE & DEATH PROJECT
Assigned Monday, September 26, 2011
Due at 9:30 am; Friday, September 230, 2011

bigtruck-liltruck files

Project 4: life&death-1 | Project 4: life&death-2 | Project 4: life&death-3

FOR MONDAY, September 26, 2011: Our first project involving “telling a story” was a great success. This project will be our second.  It involves your own creative approach and amusing or profound, illustrative dichotomies to the depiction of life & death on the back of a semi-trailer. The “bigtruck-liltruck.zip” will provide you with a template. The three videos go over the ground, hopefully arriving at the right destination. I will try to stop the truck puns.
THIS WILL BE OUR THIRD MULTI-SESSION PROJECT. We will work on it today and the first half of Friday. This can lead to solutions equally amusing, entertaining, and surprising as Jack ‘n Jill.
You may do this in Illustrator or as a “traditional” media project. And, that can include collage as well as drawing and coloring. Download the examples file here: Life and Death Examples

The SAMPLES are all student work from the book we were going to use.
The three videos will take you through the project as often as you need. This project has an “implied storyline”, the contrast between life/death, good/bad, active/passive, etc. to create two looks at similar subjects. Look over the samples in the Life and Death Examples PDF carefully and thoroughly. Look at how the use of humor, crazy associations, reuse in a wierd place, and other elements of collage explored by Picasso, Braque, and the other early 20th century cubists are used to illustrate and enliven this dichotomy.

THE JACK & JILL PROJECT
Assigned Friday, March 2, 2012
Due at 12:00 pm; Friday, March 2, 2012

The Jack and Jill project files

Project 3: jacknjill-1 | Project 3: jacknjill-2 | Project 3: jacknjill-3

FOR MONDAY, September 19, 2011: This will be our first project that involves “telling a story”. Those of you raised in the English speaking west will be familiar with the nursery rhyme “Jack and Jill”.  Those with other backgroounds will probably be encountering this for the first time. No matter. There are six short lines to this little rhyme and there are six squares on the Template file.
This will also be the first project we will print out. THIS WILL BE OUR SECOND MULTI-SESSION PROJECT. We will work on it today and the first half of Friday. This is always a real favorite, and it does teach some Illustrator skills.

CLICK here to download a PDF of examples: Jack-Jill-Examples.pdf
The SAMPLES are all student work from the book we were going to use.
The three videos will take you through the project as often as you need. This project introduces a new concept – the storyline, a new artistis techniques – found object collage, and a new technical aspect of Adobe Illustrator – SYMBOLS. Look over the samples in the Jack-Jill -Examples PDFG carefully and thoroughly. Look at how the use of humor, crazy associations, reuse in a wierd place, and other elements of collage explored by Picasso, Braque, and the other early 20th century cubists are used to bring absurd and wild meanings to this old nursery rhyme.
You will also be struggling with CLIPPING PATHS and CLIPPING LAYERS again. Make sure you keep the LAYERS PANEL open and check to make sure you are using the correct LAYER and SUBLAYER.

THE BLACK AND WHITE PROJECT
Assigned Monday, September 12, 2011
Due at 9:45 am; Friday, September 16, 2011

FOR MONDAY, September 12, 2011: MAKE SURE YOU BRING in a DRAWING PAD, a PENCIL, BLACK MARKERS and/or BRUSH & INK, A STRAIGHT EDGE and/or RULER, and a KNEADED ERASER to class.
THIS WILL BE OUR FIRST MULTI-SESSION PROJECT. We will work on it today and the first half of Friday. I want these to be extra good.

CLICK here to download the Black and White Flash animation: true-cuppa-movie2.mov
CLICK here to download a PDF of examples: black+white-examples.pdf

The SAMPLES are all student work from the book we were going to use.
The movie is a VERY CONDENSED version of the project, but will give you an idea of what the final outcome should be.
In this assignment, you will be focusing on two main components of Visual Composition: LIMITING FOCUS and NEGATIVE SPACE. Limiting focus involves zooming in on the most salient part of any image, the smallest part that still contains the content of the image: the subject may not be immediately apparent, but it is not hidden. NEGATIVE SPACE is what we call the background or the spaces between the “foreground” shapes when it (or they) becomes “active”. In other words, when it takes on a active role in defining the image rather than merely giving it a frame or a place to be. When the NEGATIVE and POSITIVE spaces are equal or almost equal, we can create the “optical illusion” of an image which “flips” or reverses itself.

This project will be done using “traditional” media; in this case, paper, a pencil for sketching, and either a fine pen, marker, or brush, and a broad pen, marker, or brush. If you use  “drawing pens” (nibs and shafts) or brushes, you will also need “drawing” ink (you can be truly retro about this and call it “India Ink”). The easiest of these to find and manage, especially for beginners, are markers. I suggest a fine Sharpie and a broader marker — and I don’t like the washable or water-based markers because they smear.

THE PROCESS:
1)  If you are certain that you cannot draw, comfort yourself. You can certainly see and you can certainly trace. What is important here is that you can hold your image in your mind.
2)  Consider a number of everyday objects such as shoes, fruits and vegetables, fish, dishes, etc. or everyday images like a bear’s head, a whale’s tail, smoke coming from a chimney. The range is nearly infinite.
3)  Choose two or three ideas that are within your ability to draw (or trace).
4)  Create a page each of “thumbnail” sketches of each idea. In your mind and then on the page, simplify the idea into a composition of pure black and pure white shapes. Avoid LINES. Avoid OUTLINES. Let the BLACK next to a WHITE SHAPE define the edge of the White shape and let the WHITE next to a BLACK SHAPE do the same. See how many details you can leave out without losing the identity of your shape.
5)  Consult with your classmates, especially those who are more advanced artists, to help decide which of your ideas has the most potential.
6)  Create a page of “thumbnail” sketches of your best idea, focusing on parts that might make an interesting abstract composition without hiding the nature of the image.  Focus in on different parts. Draw those parts larger and larger, rotate them, reverse the dark and light parts. You want to create an “interesting” BLACK and White COMPOSITION that is not immediately recognizable. Rather, the viewer’s immediate reaction will be, “that’s interesting, let me look closer.” Then, in that “second look”, the subject of the composition comes into focus as a pleasant little surprise.
7)  When you have decided on your final image, create it as a final image on a separate sheet of paper. The image should not exceed 6.5″ in any dimension. Sketch it lightly in pencil. Then, using your fine marker or brush, color in any  tight corners or the edges of multiple shapes that are close together.
8)  Fill in the Black areas of your composition with the broad brush or marker, including any “background”. Don’t be real careful about the rectangular frame. It’s more important to make sure that any black that goes to the edge of “frame” is solid. Since we will be trimming the rectanguler frame either by cutting it or hiding it behind a rectangular “frame” as in the video, make sure that the black edges go over the edge.
9) Trim and/or frame as in the video.
10) Mount on the wall ion Room 300

AUGUST 27: class 3:

THE THIRD CLASS of our First Class CLASS

THE BLACK & WHITE PROBLEM: continued

Assigned Wednesday, August 22, 2012:
Due Monday, August 27, 2012 or Wednesday August 29, 2012

Black & White examples

DESIGN JOURNAL for today: Bring in a PRINTED piece of marketing that uses very simple geometric shapes to create its messages,

_______________________________________________

AUGUST 22: class 2:

THE SECOND CLASS of our First Class CLASS

THE FOUR SQUARES PROJECT

Assigned Wednesday, August 22, 2012:
Due Monday, August 27, 2012

In this assignment, you will be working to make 6 coherent, attractive, and, hopefully, meaningful compositions that are combine both a word and an image. They are all created on a separate LAYER or ONE ILLUSTRATOR DOCUMENT (file) and are composed of 4 squares each. Download the example files to see many examples of student work on this project. It will introduce you to Illustrator’s LAYERS PANEL, FILL & STROKE, SELECTION TOOL, and RECTANGLE TOOLS, as well as some other aspects of the Illustrator Interface. Follow the in class lecture carefully, and then watch the videos. Do not ad lib. This is a fully defined project; the intent is for you to create within the set constraints. Thinking “outside the box” is encouraged. Going beyond the defined scope of the project will incur negatives. We will discuss this aspect of creativity as it is applied in design in class.
The Six Squares Project is our first real attempt at mixing words and imagery to the betterment and specification of both. There are  innumerable “right ” answers for each of the six. To really dig into this problem, stick with squares and rectangles. DO NOT USE ELLIPSES or CIRCLES, POLYGONS, STARS, or the FLARE TOOL. DO NOT USE ELLIPSES or CIRCLES, POLYGONS, STARS, or the FLARE TOOL. DO NOT USE ELLIPSES or CIRCLES, POLYGONS, STARS, or the FLARE TOOL.
Focus on the abstract shapes and your growing awareness of their position, size, relationships to other shapes and the negative spaces between them. This a project I do myself 6 or 7 times a year,with these constraints. It is a great refresher for advanced students and an essential learning tool for beginners. The videos explain all and you have a full week (there is no school this coming Monday) to come into Room 300 and complete it.

We will view and critique these two weeks from this Wednesday.

Download the project file and the examples PDF of student solutions to this project:   4-6inch-box-project.ait   |   4 Squares example files

Watch the following videos:

Downloading Project 1 from the website|

Project 1: Video 1Project 1: Video 2Project 1: Video 3

Project 1: Video 4Project 1: Video 5Project 1: Video 6.


Go to this web site: http://www.designhistory.org/index.html  and click on item number 6 -> The Poster’s Development and Social Impact (http://www.designhistory.org/The_History_of_Posters.html)

Look over this entry and familiarize yourself with the general out line of the evolution of Poster Art. This is for “deep” research: new knowledge, not necessarily immediately needed, to keep in the back of your mind for future use in the course.
Then, choose either one aspect of the symbols page or one poster and prepare a short, one to three minute presentation about. Do you like it or hate it (don’t be wishy-washy)? Why? What is the most or least interesting aspect of it? If you were to re-design it, what would you do?

In class next Friday, we will again discuss the Principles of Design as they relate to the “Symbols” and “Posters” detailed on the web site above. Also, make sure you have a PDF or hard copy of the VCOM 50 Syllabus so that you can participate in the discussion.

.

 

Only Three (3 – count’em) classes left before finals!
Posted Friday, May 4, 2012
Due 12:30 pm; Friday, May 11, 2012 – PRINTED

You will need to purchase a VCOM Print Card (not a Las Positas Print Card) at the book store for $10.00. Today I will show you how to set up a VCOM Print Form.

THE SMART PHONE APP Project: CLICK THE LINK phone-app-doc

1.  Remember, design the structure of the app before you begin creating logos or buttons: you need to think about how the viewer navigates the five or six pages — study apps that do similar things
2.  Is the app something that will be sponsored by an institution or offered by a larger company? Does it stand on its own?
3.  Is there a need for GPS service in it?.
4.  Does it need a “store”, shopping cart, and payment procedures? If yes, researching possibilities is optional, but study what other apps with these needs do to implement these functions.
5.  TALK TO ME about your idea so we can brainstorm together
6.  SAVE the file to your desktop often as you work, finish up by saving it to the server and then to your portable storage device. Remove the portable device from the the iMac before you leave.

ALTERNATE or EXTRA SEMESTER PROJECT

Assigned Friday, April 6, 2012
Due 12:30 pm; Friday, May 11, 2012 – PRINTED

THE SMART PHONE APP Project: details in class today

FRIDAY, April 6, 2012
Less is More Problem;
Go to the VIDEOS PAGE

Assigned: 4/6/12
Due: 4/20/12
A new set of videos for this project  available here:Photoshop Video 1  |  Photoshop Video 2 Bridge Video 1  |  Marquee Selections Video  |
click here for examples: less-is-more-examples
click here for files: less-is-more-photos

Make sure you look over the LESS-IS-MORE examples PDF to get the general idea of what we will be doing in class today.

1.  Download and decompress the “less-is-more examples” and the “less-is-more photos” from the two links above. Take the “less-is-more photos” folder and drag it onto the ADOBE BRIDGE ICON on your dock.
2.  Arrange the BRIDGE interface so that your CONTENTS WINDOW is narrow. Enlarge the PREVIEW window as much as possible and shrink the META DATA WINDOW to nothing. When you click each CONTENT IMAGE, you will see it in a large, high resolution image in the PREVIEW WINDOW.
3.  Choose ONE of these image in the CONTENT WINDOW and DRAG it to the PHOTOSHOP ICON on the DOCK. This will open the IMAGE in the GRAYSCALE Mode.
4.  Go to the IMAGE MENU and select MODE then choose RGB from the pop-out menu.
5.  SAVE the file to your desktop.
6.  Set your workspace to FULL SCREEN MODE WITH MENU BAR. NOTE! This step is essential to do this project efficiently.
7.  As I will demonstrate in class and as is shown in the videos, DRAG the first LAYER to the NEW LAYER ICON on the LAYERS PANEL to create a copy of the first layer. ENLARGE this new LAYER.
8.  Go: SELECT > ALL then EDIT > COPY and (with your second layer active-in blue) EDIT PASTE.
9.  Now, either repeat step 7 on this new LAYER –  or  –  repeat step 7 on the original Layer. The object here is to create a new, different, and larger ENLARGEMENT.
10. Whichever method used, repeat step 8 on this new layer.
11. HOLD THE COMMAND KEY and SELECT the TWO LAYERS YOU ENLARGED (steps 7 and 9), NOT THE TWO LAYERS YOU CREATED IN STEPS 8 AND 10. SAVE.
12. Choose your favorite of the three layers remaining and GO: Image > ADJUSTMENTS > INVERT. (Note: do not Go: Select > Inverse.) SAVE.
13. You now have FOUR VERY DIFFERENT LAYERS. DRAG your favorite of these four to the new layer icon to create a new layer that is a copy of the chosen one. CLICK on the BRUSH TOOL  on the TOOLBAR. CHOOSE a HARD BRUSH from the BRUSHES POP-DOWN (second top left ICON on the menu bar) and set it to around 25 PIXELS. Set the MODE POP-DOWN (long, third ICON UPPER LEFT) to COLOR. Make sure the SWATCHES PANEL is OPEN on your desktop.
14. Choose ONE COLOR from the SWATCHES. Paint it onto your most recently made layer, emphasizing some aspect of its composition.
15. Repeat step 13 to create a Sixth Layer from the LAYER you just COLORED or another layer of your choice. This last layer should have at least two colors and at most five colors added to it.
16. SAVE and copy the file to the server and to your ZIP drive.

Note: many of the videos were done for previous semesters, so some of what you see on them will look different from the current video and media page content. The meaning and the content are absolutely identical for our purposes. Ignore the time frames.

FIRST SEMESTER PROJECT: Smart Phone App

Assigned Friday, March 16, 2012
Due at 12:30 pm; Friday, April 6, 2012s

In this project the class will be working as a design firm to create a new Smart Phone App. We won’t be coding it, but we want to develop a number of aspects of the application and its use, the basics of its construction and look and feel, it’s app icon, splash page, and the rudiments of its navigation. If you wish, you may join the crazy group we were discussing in class today or you may, alone or with a small team, create your own theme for this.

For Friday, April 6. bring 3 to 5 initial ideas (small is good here) and prepare to throw them around and see what we come up with.

DESIGNING WITH TYPE PROJECT
Assigned Friday, March 16, 2012
Due at 12:30 pm; Friday, March 30, 2012 or Friday, April 6, 2012: depending on the class

Designing with Type files

Project 6: design with type-1 | Project 6: design with type-2 | Project 6: design with type-3

FOR FRIDAY, March 26, 2011: Our first project using TYPE starts. This project is a parallel to our first project, the BLACK SQUARE PROBLEM. Like that exercise, it involves your own creative approach and amusing or profound, illustrative instincts focused on the possibilities within some prescribed letter-forms. You need to really look at the letters in each of the six alphabets on the project file. In particular, look for differences in the way lines end, how the thickness and thinness of lines combines on the letters, how different types of curves are drawn, differences in the height of Capital and lower case letters, which letters descend below the baseline in different fonts. What suggestions of imagery do you get from different letters in different fonts?
Zoom in on each alphabet to start the questions and visual associations you can get from each fonts specifics. Then start “playing”.
Note: the videos all refer to Fall 2010. Just pretend you are hearing Fall 2011 and you’ll be fine.

Watch the videos!
The three videos will take you through the project as often as you need. In this project, you should probably divide your time about half and half between studying the shapes in each alphabet, looking for visual associations (real or imagined) and experimentally putting letters together on the work area until your idea really gels.

THE LIFE & DEATH PROJECT: continued if necessary

DESIGNING WITH TYPE PROJECT
Assigned Friday, March 16, 2012
Due at 12:30 pm; Friday, March 23, 2012 or Friday, March 30, 2012: depending on the class

Designing with Type files  |  Example Files by Visual Literacy Students  | A Brief history of type  |  Using type in Illustrator  | Anatomy of Type  |  Type references on the web  |

Project 6: design with type-1 | Project 6: design with type-2 | Project 6: design with type-3

FOR FRIDAY, March 23, 2012: Our first project using TYPE starts. This project is a parallel to our first project, the BLACK SQUARE PROBLEM. Like that exercise, it involves your own creative approach and amusing or profound, illustrative instincts focused on the possibilities within some prescribed letter-forms. You need to really look at the letters in each of the six alphabets on the project file. In particular, look for differences in the way lines end, how the thickness and thinness of lines combines on the letters, how different types of curves are drawn, differences in the height of Capital and lower case letters, which letters descend below the baseline in different fonts. What suggestions of imagery do you get from different letters in different fonts?
Zoom in on each alphabet to start the questions and visual associations you can get from each fonts specifics. Then start “playing”.
Note: the videos all refer to Fall 2010. Just pretend you are hearing Fall 2011 and you’ll be fine.

Watch the videos!
The three videos will take you through the project as often as you need. In this project, you should probably divide your time about half and half between studying the shapes in each alphabet, looking for visual associations (real or imagined) and experimentally putting letters together on the work area until your idea really gels.

THE JACK & JILL PROJECT
Assigned Friday, March 2, 2012
Due at 12:00 pm; Friday, March 2, 2012

The Jack and Jill project files

Project 3: jacknjill-1 | Project 3: jacknjill-2 | Project 3: jacknjill-3

FOR MONDAY, September 19, 2011: This will be our first project that involves “telling a story”. Those of you raised in the English speaking west will be familiar with the nursery rhyme “Jack and Jill”.  Those with other backgroounds will probably be encountering this for the first time. No matter. There are six short lines to this little rhyme and there are six squares on the Template file.
This will also be the first project we will print out. THIS WILL BE OUR SECOND MULTI-SESSION PROJECT. We will work on it today and the first half of Friday. This is always a real favorite, and it does teach some Illustrator skills.

CLICK here to download a PDF of examples: Jack-Jill-Examples.pdf
The SAMPLES are all student work from the book we were going to use.
The three videos will take you through the project as often as you need. This project introduces a new concept – the storyline, a new artistis techniques – found object collage, and a new technical aspect of Adobe Illustrator – SYMBOLS. Look over the samples in the Jack-Jill -Examples PDFG carefully and thoroughly. Look at how the use of humor, crazy associations, reuse in a wierd place, and other elements of collage explored by Picasso, Braque, and the other early 20th century cubists are used to bring absurd and wild meanings to this old nursery rhyme.
You will also be struggling with CLIPPING PATHS and CLIPPING LAYERS again. Make sure you keep the LAYERS PANEL open and check to make sure you are using the correct LAYER and SUBLAYER.

FRIDAY, February 24, 2012:
CLASS #3 — Presenting the BLACK & WHITE Problem
This is to be done in traditional media; pen & ink or marker or opaque paint on heavy paper or illustration board.

MAKE SURE YOU BRING in a DRAWING PAD, a PENCIL, BLACK MARKERS and/or BRUSH & INK, A STRAIGHT EDGE and/or RULER, and a KNEADED ERASER to class.
THIS WILL BE OUR FIRST MULTI-SESSION PROJECT. We will work on it today and the first half of next Friday. I want these to be extra good.

CLICK here to download the Black and White Flash animation: true-cuppa-movie2.mov
CLICK here to download a PDF of examples: black-white-examples

The SAMPLES are all student work from the book we were going to use.
The movie is a VERY CONDENSED version of the project, but will give you an idea of what the final outcome should be.
In this assignment, you will be focusing on two main components of Visual Composition: LIMITING FOCUS and NEGATIVE SPACE. Limiting focus involves zooming in on the most salient part of any image, the smallest part that still contains the content of the image: the subject may not be immediately apparent, but it is not hidden. NEGATIVE SPACE is what we call the background or the spaces between the “foreground” shapes when it (or they) becomes “active”. In other words, when it takes on a active role in defining the image rather than merely giving it a frame or a place to be. When the NEGATIVE and POSITIVE spaces are equal or almost equal, we can create the “optical illusion” of an image which “flips” or reverses itself.

This project will be done using “traditional” media; in this case, paper, a pencil for sketching, and either a fine pen, marker, or brush, and a broad pen, marker, or brush. If you use  “drawing pens” (nibs and shafts) or brushes, you will also need “drawing” ink (you can be truly retro about this and call it “India Ink”). The easiest of these to find and manage, especially for beginners, are markers. I suggest a fine Sharpie and a broader marker — and I don’t like the washable or water-based markers because they smear.

THE PROCESS:
1)  If you are certain that you cannot draw, comfort yourself. You can certainly see and you can certainly trace. What is important here is that you can hold your image in your mind.
2)  Consider a number of everyday objects such as shoes, fruits and vegetables, fish, dishes, etc. or everyday images like a bear’s head, a whale’s tail, smoke coming from a chimney. The range is nearly infinite.
3)  Choose two or three ideas that are within your ability to draw (or trace).
4)  Create a page each of “thumbnail” sketches of each idea. In your mind and then on the page, simplify the idea into a composition of pure black and pure white shapes. Avoid LINES. Avoid OUTLINES. Let the BLACK next to a WHITE SHAPE define the edge of the White shape and let the WHITE next to a BLACK SHAPE do the same. See how many details you can leave out without losing the identity of your shape.
5)  Consult with your classmates, especially those who are more advanced artists, to help decide which of your ideas has the most potential.
6)  Create a page of “thumbnail” sketches of your best idea, focusing on parts that might make an interesting abstract composition without hiding the nature of the image.  Focus in on different parts. Draw those parts larger and larger, rotate them, reverse the dark and light parts. You want to create an “interesting” BLACK and White COMPOSITION that is not immediately recognizable. Rather, the viewer’s immediate reaction will be, “that’s interesting, let me look closer.” Then, in that “second look”, the subject of the composition comes into focus as a pleasant little surprise.
7)  When you have decided on your final image, create it as a final image on a separate sheet of paper. The image should not exceed 6.5″ in any dimension. Sketch it lightly in pencil. Then, using your fine marker or brush, color in any  tight corners or the edges of multiple shapes that are close together.
8)  Fill in the Black areas of your composition with the broad brush or marker, including any “background”. Don’t be real careful about the rectangular frame. It’s more important to make sure that any black that goes to the edge of “frame” is solid. Since we will be trimming the rectanguler frame either by cutting it or hiding it behind a rectangular “frame” as in the video, make sure that the black edges go over the edge.
9) Trim and/or frame as in the video.
10) Mount on the wall ion Room 300.

___________________________________

FOR FRIDAY, February 25, 2012: Bring in a PRINTED (commercially printed, NOT a file from the web printed on a small printer) that has a design based on three to six similar shapes in a simple composition. For this Design Journal homework, remember that SIMPLE is BETTER.

_______________________________________________

AUGUST 22: class 2

THE FOUR SQUARES PROJECT

Assigned Wednesday, August 22, 2012:
Due Monday, August 27, 2012

In this assignment, you will be working to make 6 coherent, attractive, and, hopefully, meaningful compositions that are combine both a word and an image. They are all created on a separate LAYER or ONE ILLUSTRATOR DOCUMENT (file) and are composed of 4 squares each. Download the example files to see many examples of student work on this project. It will introduce you to Illustrator’s LAYERS PANEL, FILL & STROKE, SELECTION TOOL, and RECTANGLE TOOLS, as well as some other aspects of the Illustrator Interface. Follow the in class lecture carefully, and then watch the videos. Do not ad lib. This is a fully defined project; the intent is for you to create within the set constraints. Thinking “outside the box” is encouraged. Going beyond the defined scope of the project will incur negatives. We will discuss this aspect of creativity as it is applied in design in class.
The Six Squares Project is our first real attempt at mixing words and imagery to the betterment and specification of both. There are  innumerable “right ” answers for each of the six. To really dig into this problem, stick with squares and rectangles. DO NOT USE ELLIPSES or CIRCLES, POLYGONS, STARS, or the FLARE TOOL. DO NOT USE ELLIPSES or CIRCLES, POLYGONS, STARS, or the FLARE TOOL. DO NOT USE ELLIPSES or CIRCLES, POLYGONS, STARS, or the FLARE TOOL.
Focus on the abstract shapes and your growing awareness of their position, size, relationships to other shapes and the negative spaces between them. This a project I do myself 6 or 7 times a year,with these constraints. It is a great refresher for advanced students and an essential learning tool for beginners. The videos explain all and you have a full week (there is no school this coming Monday) to come into Room 300 and complete it.

We will view and critique these two weeks from this Friday.

Download the project file and the examples PDF of student solutions to this project:   4-6inch-box-project.ait   |   4 Squares example files

Watch the following videos:

Downloading Project 1 from the website|

Project 1: Video 1Project 1: Video 2Project 1: Video 3

Project 1: Video 4Project 1: Video 5Project 1: Video 6.

_______________________________________________

FOR FRIDAY, February 3, 2012: Bring in a PRINTED (commercially printed, NOT a file from the web printed on a small printer) that is based on Basic Word/Simple-abstract-shape composition. For this Design Journal homework, remember that SIMPLE is BETTER.

The following stuff is out of date

For Thursday, March 17, 2011, You should be ready to begin the actual development of your poster. Please, talk with me about this. There are so many ways to get these ideas into a typographic format that you really need to brainstorm continually through the development process.

Remember: the word(s) and associated imagery/typographic design must describe an emotion or state of mind of which you feel you have some understanding and background. From that understanding and background, free associate other words to the word you have chosen. For example: consider ANGER as a choice. Free association may lead an educated person to think of madness, rage, hurt, loss, oppression, misuse, punk rock, righteous indignation, fundamentalism, terrorism, stupidity, psychology, disfunctional, abuse, etc.
I want you to make it both personal and impersonal. Huh? Yes, both. Personal because you will have a certain “investment” in the subject and impersonal because you need to make more universal connections between the word and society.
For 10/4, bring in your conceptual best 3 conceptual sketches.

Go to the The Type Poster Page to see Typographic Poster examples

Today will talk about PRINTING the projects and about acquiring VCOM PRINT CARDS.

Also today in class, I will offer you some more pen tool technique in the lecture. Using a file that I have put up on the media files page. NOTE from last week: I left up the video (in videos) and a template set (in media) for those who want to begin learning the PEN TOOL, Illustrator’s most powerful drawing tool. The video explains haw to use the templates.

March 03, 2010 : due March 10: an assignment and the next step in the FINAL PROJECT

Either one of these two projects:
The Altered Page: page 74
-or- Homage to André Breton; page 156

Assigned: 02/24/11
Due: 03/03/11

I will leave it to each of you to decide which of these projects you wish to attempt. I have posted templates for each on the MEDIA FILES page. Those of you who really feel the need for an extra challenge may want to attempt some of the other “advanced” projects in the book. Note that most of them require a fair bit of drawing skill. The examples shown in the book should give you a good idea of the scope of these projects. The only limitations on these (2) projects is that they need to start with the templates.

The Semester Project: Typographic Poster
Final Due: March 17, 2011.
Sub-assignment #3 due: March 03, 2011

For Thursday, February 2011, You should be ready to begin the actual development of your poster. Please, talk with me about this. There are so many ways to get these ideas into a typographic format that you really need to brainstorm continually through the development process.

Remember: the word(s) and associated imagery/typographic design must describe an emotion or state of mind of which you feel you have some understanding and background. From that understanding and background, free associate other words to the word you have chosen. For example: consider ANGER as a choice. Free association may lead an educated person to think of madness, rage, hurt, loss, oppression, misuse, punk rock, righteous indignation, fundamentalism, terrorism, stupidity, psychology, disfunctional, abuse, etc.
I want you to make it both personal and impersonal. Huh? Yes, both. Personal because you will have a certain “investment” in the subject and impersonal because you need to make more universal connections between the word and society.
For 10/4, bring in your conceptual best 3 conceptual sketches.

September 27, 2010 : due October 4: an assignment and the next step in the FINAL PROJECT

Life or Death; page 110

Assigned: 02/24/11
Due: 03/03/11

Carefully read the description of the project on page 111, noting that the final paragraph states, “To develop ideas for this problem, try writing a list.…”
Very much as I am asking you to do for the final project, I want you to free associate around a specific topic; the word/idea/concept you have chosen.

Go to the Media Page and DOWNLOAD the “ bigtruck-liltruck” files. This includes 2 files: nine little truck ends to sketch on; one big truck end to create your final project. They are in Illustrator CS3. Go to the VIDEOS page. There are 3 new videos that will walk you through the process. This time you are confronted with nine little drawings of the back of a truck. Print this sheet out and use it to sketch. Remember to get some word association going before you start.Create as many sheets of sketches as you need to come up with an idea that really works – that contains surprise, humor, irony, whimsy, horror, etc. Once you have the idea you want, print out the Big Truck sheet if you haven’t done so already. Carefully transfer your best sketch idea to the larger format. Sign both the sketches and the large image with your name and date ON THE BACK.
Unless you have discussed doing this project digitally with me, either in Illustrator or Photoshop, DO THIS WITH TRADITIONAL MEDIA!

We will go over all of this in class today.

The Semester Project: Typographic Poster
Final Due: October 18.
Sub-assignment #3 due: October 4

For Monday, October 4, 2010, have 3 pages of sketches for your poster. This means your verbal concept (word or phrases) and all the associated words and phrases is complete, and that you have decided on the general visual direction you wish to use.
Begin sketching out, using simple rectilinear or circular/oval shapes, light gray rectangular boxes for lines of type, compositional possibilities to display this word/image/idea. Keep in mind that you must prioritize how this imagery unfolds. Think in terms of 3 steps. First thing, most important, largest or most focused. Second thing: comes from the first, maybe even more important in a subtle way. Third thing: adds to the first 2, describes, enhances, prettifies (or uglifies). Keep the structure tight and work to make the whole jump off the page.

Remember: the word(s) and associated imagery/typographic design must describe an emotion or state of mind of which you feel you have some understanding and background. From that understanding and background, free associate other words to the word you have chosen. For example: consider ANGER as a choice. Free association may lead an educated person to think of madness, rage, hurt, loss, oppression, misuse, punk rock, righteous indignation, fundamentalism, terrorism, stupidity, psychology, disfunctional, abuse, etc.
I want you to make it both personal and impersonal. Huh? Yes, both. Personal because you will have a certain “investment” in the subject and impersonal because you need to make more universal connections between the word and society.
For 10/4, bring in your conceptual best 3 conceptual sketches.

Designing with Type; page 84

Assigned: 02/17/11
Due: 02/24/11

Carefully read the description of the project on page 83, noting that the final paragraph states, “This problem is an extension of the Black Square problem.”
I would say, rather, that it an expansion of that problem and adds an enormously important part of the designer’s repertoire to the elemental story telling: TYPE.

Go to the Media Page and DOWNLOAD the “DESIGNING WITH TYPE” files. These include a version of the template in Illustrator CS3 and 2 example files. Go to the VIDEOS page. There are 5 new videos that will walk you through the process. Once again, you are confronted with six blank boxes, this time using the same length to width ratio as a normal sheet of American paper. Once again, you are tasked with creating an abstract composition that fits on of six themes;  scale, negative/positive, pattern, congestion, tension, playful. This time, however, you will be using individual letters from a specified typeface. I have placed alphabets of each required typeface in a separate SUB-LAYER for each of the six rectangles, along with a Clipping (sub)Layer and an initial working subLayer. Make sure you copy the letters you wish to use from the subject layer alphabet sub-layer and then paste it on the working sub-layer below the clipping sub-layer before you manipulate it. As in the Black Square problem, play with these components, working to make something visually stimulating in its own right as well as satisfying the meaning of each subject layer.
ONE VERY IMPORTANT RULE: DO NOT WARP THE LETTERS! You can scale them proportionally (hold down the SHIFT KEY before you begin scaling) and you can rotate them. You can tuck them under the border of the clipping sublayer. Just don’t squash them or elongate them or slant them. USE THE LETTERS JUST AS THEY ARE, except for size, rotation, and placement.

We will go over all of this in class, naturally. There will also be a series of videos to walk you through the problem.


Less is More Problem; page 64

Assigned: 02/10/11
Due: 02/17/11

Glance a bit at the examples on page 66 and 67, then carefully read the directions on page 65. You are free to do this problem traditionally, or in a mid-eighties (disco?) version, or in Photoshop as is described in the videos. If you opt to do a straight traditional version, I recommend selecting a fairly simple subject that is easy to draw and/or paint, because you will be graded on execution. If you choose the mid-80′s, prepare to spend time drawing/painting/collaging the original image, then more time (and some cash) make xerox copies until you achieve a satisfactory result. Again, execution will matter in the grade. It will also matter in the Photoshop version, but in this version some of the difficulties have been taken care: there is a selection of photos to down load at the requited 8.5″ X 11″ size (or ratio, if you prefer to work a little smaller) on the Media files page of the web site.
Now go back and study the examples on pages 66 through 73. Notice how, even within the fairly tight constraints of the instructions, the examples show a great deal of innovation and creativity.
If you do not do the Photoshop version, you will create 6 individual images. If you choose the Photoshop option, you will create 6 LAYER COMPS, one for each of the six variations in the project, on ONE FILE as described in video #6.
I will lecture on this method on Monday, 9/13/10, and have put the photograph selections on the Media Files page on the VCOM 50 website and 6 videos on the Videos page that fully document the creation process.

JACK AND JILL: Project 3

February 3, 2011 : due February 10. 2011:

This week we are going to work a two pronged assault on the WORDS AND PICTURES aspect of graphic design. The first is to re-envision a story that everyone (at least those who grew up in the Anglo speaking culture – if you didn’t, let’s talk about the story) knows; the old nursery rhyme “Jack and Jill”. The idea here is to see the story almost like a comic strip, or, to be more au courant, a graphic novel (a very short graphic novel, maybe even a graphic novellitito) using “found” imagery. This will be explained in class. The second prong, if you will, is the technical – or software – side. You will be using Adobe Illustrator and making use of its SYMBOL function. I this case, the SYMBOLS are a large number of images that have very little relationship to each other and, certainly, no inherent relationship to the Jack and Jill story. By dragging these different SYMBOLS from Illustrator’s SYMBOL PANEL onto the Jack and Jill template from the Media Files page, you will illustrate your own version of the six panel story.

Jack & Jill: Look at page 42 in Visual Literacy, really look! Now check out page 43. Yes, read the words. For those of you unfamiliar with the old nursery rhyme “Jack and Jill,” now is your chance to get to know it. But unlike millions of little English speaking kids down the ages, you get to make it your own. The assignment divides easily into 6 panels: (1) Jack and Jill (2) went up the hill (3) to fetch a pail of water (4) Jack fell down (5) and broke his crown (6) and Jill came tumbling after. I have put a 6 panel Illustrator template with the all the little images on the base of page 42 included as ILLUSTRATOR SYMBOLS on the Media Page. Download the Jack & Jill Project files there or by clicking the link you just passed (hah!). I will demonstrate how to use the template and the SYMBOLS in class on 02/03. The web site videos page has three Jack and Jill videos that will walk you through the project. This is always one of the real student favorites in this class. The main thing to remember is that you are amplifying, or even re-creating a story with pictures, but the building blocks of those pictures are really “found objects.” A huge amount of design is constructed in exactly this way.

January 27, 2011 : due February 3:

The Black & White Problem-videos: Only the Project 2: video-black & white (immediately below and toward the bottom of the list on the videos page) is an “on-screen” video. The “true-cuppa-movie” link (both places) is the downloadable .swf file used in the Project 2… video to demonstrate the creation process for the Black & White project.

Project 2: video-black & white | true-cuppa-movie2

The Black & White Problem-directions: Go to the media files page and download the “black and white project files”. Use the enclosed template to print out work sheets for this project. Do not do this project digitally without instructor permission.  Create one BLACK & WHITE COMPOSITION on a 5″ X 7″ (or 7″ X 5″) rectangle using the explanations on page 29 and the examples on pages 30 through 39 of Visual Literacy. You must make many initial sketches. Put thumbnails down, many to a page, as shown on page 29. Take the three or four of the soundest ideas from your 20 to 30 sketches and develop them at about twice the size, still using pencil (or your favorite sketching medium) on sketch paper. Take your best, developed idea and carefully draw it in very light pencil within a 5″ X 7″ rectangle on a larger piece of good paper. Carefully outline the shapes of your drawing that are going to be black with a fine point pen or other delicate drawing tool. When the outlines are complete, fill in the larger areas with a black, broad nibbed marker or with brush and ink. Then either (a) matte the image by carefully cutting a 5″ X 7″ hole in a piece of paper or board (artist’s poster board, not wood) the same size as the paper used for the final drawing, or (b) trim the final drawing down to 5″ X 7″ using a straight edge and and X-Acto knife or matte knife. There is a new video on the VIDEOS PAGE of this site, “Project 2: video-black & white” that will take you through this. It includes and animation that shows both the matting and the trimming processes. I will be working with you and demonstrating sketching and cutting during class on Monday, August 30.

EVERY TUESDAY & THURSDAY: Log on to FreshBooks (FB) using this link.

Your USER NAME is your first and last name with no spaces. Initially use the this password: designshop. A new dialog will direct you to change your password and the verify the new password. Click OK and you are in.

Use the TIME TRACKING tab.
Click once in the calendar in the current Tuesday or Thursday for which you are tracking your 2.5 to 5 hours.
To the right of the calendar use these pull down menu choices:

PROJECT = TBA-VCOM 50

TASK = TBA = total of 5 hours for each week (entered only on Tuesday and/or Thursday).

CLICK “LOG HOURS”

Any questions, e-mail me.