Raster vs Vector

Project Two

Pixel Graphics & Object Graphics

Create a digital diptych exploring concepts of raster and vector imagery and text.

This first design project explores some of the major topics presented in our past reading on ‘digital  images.’ This visual exercise will begin to deal with concepts of high/low resolution (pixel graphics), greyscale, bitmap, ppi/dpi, editable type (vector based object graphics), type as image, CMYK, line art, color modes, tiff images and file types used for digital production.

Content (text) for this project must use language associated with topical concepts discussed from reading. All imagery must be self-generated and produced accordingly. You may use any digital camera at your immediate availability; this can include your phone, DSLR, or digital camera. Image content does not have to fully represent/mimic
editorial content.

Project Two: Raster vs Vector

Continue reading


Something From Nothing: Part One


Design Sprinting Workshop

Design Brief

This workshop and the dynamic use of design sprints are meant to expose first- year novice graphic design students to an open process of visual exploration. The workshop suggests a free-form process of exploration as a viable methodology to simultaneously ask questions, and solve complex design problems. Students are asked to examine concepts of the situationist dérive methodology as it pertains to graphic design. The dérive, envisioned as a playful-constructive behavior, is a tool promoting exploration and engagement through chance and opportunity. This project will first generate free-form drawings based on thematic prompts. The unedited collection then become the source material from which subsequent design solutions are governed using additional methods given at intervals through the project. Lastly, students are asked to react, reflect, and repeat the process as needed to generate additional collaborative content and collectively produce a multiple-authored thematic publication.

Project Justification

Visual Brain Dumping is a common technique associated with the traditional verbal activity of brain-storming. A “visual” brain dump utilizes the visual medium to quickly convey complex relationships. The general process begins with a predetermined set of drawings rendered in a small time frame. Working quickly the process should generate a selection of alternate views on a common theme, choosing to create additional sketches rather than refined drawings.

An alternate ideation process is sprinting. Sprinting is a technique that forces a series of com-positions in a fixed time frame. Each concept is less precious allowing an increased freedom of exploration. The design sprint is a methodology common to the concept of ‘design thinking’ in which the process of design is used to anticipate and solve problems common to users and specific members of an identified audience. Traditional design sprints use five co-dependent stages; empathize, define, ideate, prototype, and testing.

Something From Nothing workshop approaches the sprinting process in an alternative manner. This workshop is inspired by the Mistakes on Purpose workshop facilitated by Laurie Rosenwald. Participating in this workshop as a graduate student at MICA I immediately saw the experiential benefit of this methodology. Laurie’s views of this process are to encourage mistakes; “mistakes are what newness and freshness comes from.”

“this experience loosened up my uptight intellectual mindset like nothing else.”

-Ellen Lupton

Quote from – Mistakes on Purpose: Laurie Rosenwald

My ideas of design, and pedagogy as a design educator, embrace Laurie’s approach to the creative act of making. Influential designers such as Lucian Bernhard, Alexey Brodovitch, Paul Rand, Milton Glaser, Wolfgang Weingart, Chip Kidd and Mike Perry influence my views. Each designer includes non-digital, hand drawn artwork into their design process and methodology.

Professional designers and creatives debate the need to generate all forms within a project. In fact, collaboration across a diversified skill set is the key to uniquely innovative multi-discipline forms of communication. This workshop incorporates the drawings and illustrations for the entire class to collectively draw from. While each student is responsible for drafting their own solutions they also can pick up other students initial efforts. The workshop is not a popularity contest to see whose work get used more, but how drawing styles and solutions can be remixed to form alternative meaning.

Learning Outcomes

  • Examine fundamental design principles associated with typography & illustration
  • Investigate formal visual principles such as scale, balance, hierarchy, rhythm, color, and diagrammatic relationships
  • Encourage the inherent symbiotic relationship of technical skills with visual and critical thinking
  • Identify the differences of writing, hand lettering, and type design through the creation of letterforms, alphabetic character sets, numerals, monograms, signs and symbols
  • Introduction to ‘design thinking’ methodology, creative ideation, problem solving, visual abstraction, and concept development
  • Acknowledging a reductive historic timeline of graphic design identifying practitioners which shared a similar visual vocabulary to the self expression concepts of sprinting
  • Introduction to the theory of a kit of parts through a collaborative image library
  • Merging hand drawn concepts to digital solutions
  • Hand drawing tools, visual style, and techniques unique to design sprinting and larger practice of creative concepting and ideation
  • Introduction to Adobe® digital applications, tools and production techniques through hands on tutorial
  • Examination of several broadly defined media genres; each representing a cross disciplined approach to professional practice and content delivery systems unique to graphic design
  • Creative self-expression and personal explorations in the creation randomized content
  • Exposure to collaborative content generation through publication design

[Workshop PDF File]

Workshop Resources



  • Drucker, Johanna. The visible word: experimental typography and modern art, 1909-1923.
  • Lupton, Ellen, and Jennifer Cole Phillips. Graphic Design: The New Basics. New York: Princeton Architectural Press, 2008.
  • Lupton, Ellen. Thinking With Type: a critical guide for designers, writers, editors, & students. New York: Princeton Architectural Press. 2004.
  • Lupton, Ellen. Indie Publishing: How to Design and Produce Your Own Book. New York: Princeton Architectural Press, 2008.
  • Millman, Debbie. How to Think Like a Great Graphic Designer. New York: Allsworth Press, 2007.
  • Perry, Michael. Hand Job: A Catalog of Type. Princeton Architectural Press. 2007.
  • Samara, Timothy. Drawing for Graphic Design: Understanding Conceptual Principles and Practical Techniques to Create Unique, Effective Design Solutions. Rockport Publishers. 2012.

Something From Nothing: Design Sprints

Part Two: Student Samples


Day One: anonymous Content generation

Using alternative drawing mediums (other than a pencil and pen) create a drawing based on a given theme, category, or subject matter. The time frame will be between 3–5; 10-15 minutes. Random topics such as: letterforms, alphabets, animal forms, vegetables, patterning, textures, people, portraits, indexical signs and symbols, and geometric shapes will be announced. Alternate ideas of randomness will be encouraged. Drawings may be exchanged, borrowed or stolen.

Day Two: final work in progress

On the second day of the scheduled workshop, participants will have created a series of design “sketches” of semi-finalized designed ephemera. Choose a design medium and concept of your choosing. Add depth and breadth to your initial ‘sprinting’ compositions. Do not add any other illustrations beyond those generated in class by yourself or classmates. Consider augmenting content:

  • Write text/copy
  • Adding support text
  • Photography
  • Typeface
  • Color
  • Texture


Collaborative Group Project

The third session is about creating a collaborative publication project using the first two days as a model for content generation. A collaborative project is considered and determined by the class. A rewarding collaborative project may take the form of a book, zine or other publication. Suggestions, mediation, and direction will be provided to guide the decision process. Topic, subject matter, duration and rules of engagement will be determined as a group. Once the project and subsequent topic or theme has been determined, the class will be broken down into two to three person groups, which are directed to work as a collaborative team to generate all the content necessary to fulfill the project goal. Each team will then submit their contributions for collation. Publication can remain in a digital format, but must be ready for publication or dissemination across social media platforms/channels.

Abstract Grid Composition


| Ten Compositions Layered and Stacked


| Ten Compositions Sequential Display

Project Three — Part One
Abstract Grid Composition: Hierarchy Study

Create a series of compositions with placeholder text. Use the grid to determine the potential placement of a graphic/image and  text. Create dynamically divergent compositions. Use any type variety within the Univers family. Use size and scale change to your advantage.

Project Requirements:
Each series of compositions will start with a 10″ x 10″ composition in InDesign. Each set of compositions will exclusively use the type family LT–Adobe Univers (provided on R2•D2)

You must also specify type, which appears to represent three (3) layers of typographic hierarchy. Use placeholder text unless you wish to add “content” to a large display type where you copy edit your own text.



  • Examine the diversity and versatility of a series of  grid structures
  • Consider the totality of the composition when text and image are aligned to a grid
  • Using false, or placeholder texts, create and examine subtle hierarchy possibilities in relation to three (3) congruent levels of text
  • Keep the designs and compositional concepts simple
  • Look at the possible compositions of text and image
  • Create a single PDF file with a full collection of your ten (10) compositions

See the attached PDF files of ten (10) sample compositions.
Each uses:

  • Univers Type Family
  • Conventional typographic alignments [left, right, centered]
  • Each has three (3) layers of typographic hierarchy
  • 50% (grey/black) stand-in for images
  • “Fill with placeholder text” – each composition and paragraph sample uses a different fill
  • Several equally divided grids; 7×7, 9×9, 12×12 of columns and rows
  • Do not save with ‘visible guides’ turn on; samples show how each is organized

Sample Files: Ten Compositions [PDF]

Project Three: Part One – without ‘visble guides + grids’
Project Three: Hierarchy Grid – with ‘visible guides’

Adobe Illustrator Celebrity Portrait


A print made by the silk-screen process.

Silk–Screen Process

A print made using a stencil process in which an image or design is superimposed on a very fine mesh screen and printing ink is squeegeed onto the printing surface through the area of the screen that is not covered by the stencil. Each imprint, or application of color, is printed above its previous layer. Separate artwork is generated and applied to individual screens, each carrying their own unique color blend. Typically flat, and opaque color is represented and specified through the Pantone Matching System (PMS). Unlike professional offset printing, silk screen inks lay flat and offer no transparent blending of color.

Project Three: Part One

| Project Three: Part One

Project 3: Reductive Portrait
Illustrator Project —1.1

Appropriating The Master Appropriator

Pulling from his background in skateboarding graphics, Shepard Fairey is a modern master of reductive design-based art. Using a similar process throughout his body of work, he has managed to create an impactful and recognizable style that has found a home in areas ranging from street art and graffiti to presidential campaigns. We will be using his work as a base of inspiration for this assignment.

Your first task is to seek out a relatively high resolution photograph of a famous person to use as reference. You will be working on an 11”x 17” layout (portrait, not landscape), so plan to crop/resize your image to fit. Much like Fairey’s famous Obama poster (the HOPE poster), you will reduce your image to four (4) color planes. Each color plane should exist on its own layer in the ILL file. Place the photo on the bottom layer, so you can see it as you trace over it. For an added challenge, you can incorporate a small amount of text into your final portrait.

You will be turning in TWO final files. The first is the original drawing. The second is the original drawing with textures and effects applied to it. This will be introduced further in Project 3 Part 2. 
We’ll look critically at both.

Work in layers. Since you are using only 4 color fields, make sure each color field is on its own layer. Remove the original image from the file for turn-in, but be sure to turn it in together (just not as a flattened layer).


Alternate Tutorial; for thinking about, and working with, Vector portraits

Adobe Illustrator: Celebrity Portrait

| Project Three: Part Two

Project 3: Alternate Textures
and Patterns
Illustrator Project —1.2

Pattern & Texture alternative

For Project Three Part Two you will be examining the use of texture and pattering to effect and alter your current portrait. Illustrator has strong editing tolls. Adding textures from alternative sources can change your designs quickly. Adding raster based PSD files into illustrator files can create supper dynamic richly texture images. Knowing how, and when, to use what file type is essential. You will be looking through the graphic collections offered by Media Militia to alter your design by adding texture and pattern.

You will be turning in TWO final files. The first is the original drawing. The second is the original drawing with textures and effects applied to it. We’ll look critically at both.

Examine several of the Media Militia artwork collections. Determine which is appropriate, and with its addition, can enhance your portraits. Download any of the collections (or all of them for future usage)

  • Examine what type of media files contained in the collection. There can be; eps- AI file type, vector AI file type, png-PSD raster images, often in black and white or RGB, these files most often have transparent backgrounds; JPEG files.
  • Both vector and EPS files can be used directly in Adobe Ill. You can change the color, weight, and scale proportions freely.
  • PNG, JPEG and other image files can be manipulated with limed editing possibilities in AI, or…
  • PNG, JPEG files can be opened and altered in PSD for greater control.
  • Files can be turned into greyscale, then converted to monochromatic bitmap files types; lastly, saved as a TIFF file, which allows greater color control within AI.

Use existing outlines and color shapes as clipping masks and layer the new artwork in/onto your existing artwork.

  • Copy outlines or main color fields
  • Add a layer;
  • Place your new artwork
  • commnd– “F” or ‘paste-in-place’ your outline, which will shortly become a vector clipping mask for the placed imagery
  • Select both the outline & the image
  • Choose Object >clipping path – your image is now inset into the artwork.
  • Under layers you can access the clipping mask, and/or the placed image independent from each other
  • Use color to create subtle color shift, white to reverse out from main artwork
  • Examine transparency or layering blending for subtle color shifts
Alternatively — you can add or create AI patterns of icons or other graphic elements to inlay into your portraits. For example: you could create a vector peace sign and apply it as a pattern.


Media Militia is an online resource of patterns, textures, PSD brushes, AI (vector) illustrations. Each library contain different file types which can be used to enhance and change your portrait. Several of the libraries are more versatile than others; some more stylistic. Ultimately it is up to you to use them in subtle ways, and retain creative control without taking too many of the borrowed visual properties.

Media Militia — Freebies




Anatomy of a Grid


Point Size and Leading Comparison

Bauer Bodoni, Helvetica Bold, and Adobe Garamond Pro


Bauer Bodoni Regular

This text is set in 10/12 point and the headline in 24 point Bauer Bodoni Regular. Because the typeface has a small x–height (the height of lowercase letters in relation to capital letters) and beacause the thick and thins in the stroke of the letters, its visual impression is one of delicate text surrounded by generous white space. Therefore, it requires less additional space between lines of type for comfortable reading than ther Helvetica Bold setting to the pragraph to the right.

Helvetica Bold

This text is set in 10/12 point and the headline is set in 24 point Helvetica Bold. Because the typeface has a large x–height and because of its bold strokes in relation to the enclosed white space, its visual impression is one of sturdy text surrounded by little white space. Helvetica, therefore, requires more additional space between lines of type for comfortable reading than the Buaer Bodoni Regular setting in the paragraph to the left.

When the linespacing is increased and the point size is reduced, as in this 9/13 point paragraph, the legibility of the typeface for reading large amounts of text improves. And because Helvetica has a large x–height, it can be set at sizes smaller than Bodoni and be equally readable. For these reasons, it is difficult to use a single set of rules for the legibility of type.

Adobe Garamond Pro

This text is set in 10/12 point and the headline in 24 point Adobe Garamond Pro. Because the typeface has a smaller x–height than both Bauer Bodoni Regular and Helvetica Bold. Because the thick and thin angled strokes of the letters, its visual impression is one of delicate text surrounded by generous white space. Therefore, it too requires less additional space between lines of type for comfortable reading than the Buaer Bodoni and Helvetica Bold paragraphs to the left.

When the linespacing is increased and the point size is reduced, as in this 9/13 point paragraph, the legibility of the typeface for reading large amounts of text becomes strained. Additional designs, unique to the Garamond type letterforms, allow for its familar and even color when set in a paragraph.

When the linespacing is further increased and the point size is reduced again, as in this 8/14 point paragraph, the legibility of the typeface for reading large amounts of text visually feels light and airy. The diminished point size and open line spacing is fragile and delicate, therfore, setting large amounts of text would strain the readers eyes, ultimately comprimising legibility and reducing its readability. For this reason it is unwise to use such a delicate serif typeface for online usage.


Type Samples—
Each Headline isset at 24 point and first paragraph body copy at 12 point. Because the serif Bodoni has a much smaller x-height (the height of the lowercase letters) in comparison to the general proportions of the sans-serif Helvetica, it requires less additional vertical space between lines of text to make it legible. It is wise to compare several typefaces, noticing the visual effects both size and leading have on the look and feel of set text. 
Helvetica Regular 7/9

Type sample and visual study have been taken from Graphic Design Theory by Meridith Davis



Context Contrast Contents


First Things First Manifesto 2014

EYE-Mag-FTFM_issue33Eye Magazine
Eye, #33, Autumn 1999

••• — — — •••

First Things First Manifesto 2000


Thirty-three visual communicators renew the 1964 call for a change of priorities

We, the undersigned, are graphic designers, art directors and visual communicators who have been raised in a world in which the techniques and apparatus of advertising have persistently been presented to us as the most lucrative, effective and desirable use of our talents. Many design teachers and mentors promote this belief; the market rewards it; a tide of books and publications reinforces it.

Encouraged in this direction, designers then apply their skill and imagination to sell dog biscuits, designer coffee, diamonds, detergents, hair gel, cigarettes, credit cards, sneakers, butt toners, light beer and heavy-duty recreational vehicles. Commercial work has always paid the bills, but many graphic designers have now let it become, in large measure, what graphic designers do. This, in turn, is how the world perceives design. The profession’s time and energy is used up manufacturing demand for things that are inessential at best.

Many of us have grown increasingly uncomfortable with this view of design. Designers who devote their efforts primarily to advertising, marketing and brand development are supporting, and implicitly endorsing, a mental environment so saturated with commercial messages that it is changing the very way citizen-consumers speak, think, feel, respond and interact. To some extent we are all helping draft a reductive and immeasurably harmful code of public discourse.

There are pursuits more worthy of our problem-solving skills. Unprecedented environmental, social and cultural crises demand our attention. Many cultural interventions, social marketing campaigns, books, magazines, exhibitions, educational tools, television programmes, films, charitable causes and other information design projects urgently require our expertise and help.

We propose a reversal of priorities in favour of more useful, lasting and democratic forms of communication – a mindshift away from product marketing and toward the exploration and production of a new kind of meaning. The scope of debate is shrinking; it must expand. Consumerism is running uncontested; it must be challenged by other perspectives expressed, in part, through the visual languages and resources of design.

In 1964, 22 visual communicators signed the original call for our skills to be put to worthwhile use. With the explosive growth of global commercial culture, their message has only grown more urgent. Today, we renew their manifesto in expectation that no more decades will pass before it is taken to heart.

Jonathan Barnbrook
Nick Bell
Andrew Blauvelt
Hans Bockting
Irma Boom
Sheila Levrant de Bretteville
Max Bruinsma
Siân Cook
Linda van Deursen
Chris Dixon
William Drenttel
Gert Dumbar
Simon Esterson
Vince Frost
Ken Garland
Milton Glaser
Jessica Helfand
Steven Heller
Andrew Howard
Tibor Kalman
Jeffery Keedy
Zuzana Licko
Ellen Lupton
Katherine McCoy
Armand Mevis
J. Abbott Miller
Rick Poynor
Lucienne Roberts
Erik Spiekermann
Jan van Toorn
Teal Triggs
Rudy VanderLans
Bob Wilkinson
and John P. Corrigan (added post-publication)



Last year the Canadian magazine Adbusters took the unusual step of reprinting a manifesto, ‘First Things First’, written 35 years ago in London by Ken Garland and signed by 21 other visual communicators. As it turned out, Garland knew nothing about this renewed interest in his call for a ‘reversal of priorities in favour of the more useful and more lasting forms of communication.’ Adbusters had come across the manifesto in a back issue of Eye (see ‘There is such a thing as society’ by Andrew Howard, Eye no. 13 vol. 4) and felt that its sentiments had become ‘more, rather than less relevant’ today.

After that, things started to move. Kalle Lasn, editor of Adbusters, showed the issue with ‘First Things First’ to the late Tibor Kalman, who said: ‘We should do this now. ‘They met Ken Garland himself at their Vancouver HQ. Little by little the idea of a new version of ‘First Things First’, updated and rewritten for the twenty-first century, began to take shape. Garland gave the project his blessing, but left the writing and organization of new signatories to Adbusters. Earlier this year [1999] the magazine’s art director, Chris Dixon, read out a preliminary draft during a packed lecture at the Royal College of Art.

As the new version and list came together, other magazines were approached to see whether they would act as co-sponsors of the initiative.


‘First Things First Manifesto 2000’ is being published in its entirety, with 33 signatories’ names, in Adbusters, Emigre and the AIGA Journal in North America, in Eye and Blueprint in Britain, in Items in the Netherlands, and Form in Germany. A poster version will be designed by Adbusters and dispatched to design schools around the world.

The aim is to stimulate discussion in all areas of visual communication – in education, in practice, in the organizations that represent design’s aspirations and aims – as well as outside design. The changing relationship of advertising, graphic design, commerce and culture poses some profound questions and dilemmas that have recently been overlooked. If anything, these developments are accepted as an unproblematic fait accompli.

In consequence, many young designers have little conception of the values, ideals and sense of responsibility that once shaped the growth and practice of design. The profession’s senior figures, who do, are for the most part quiet. Adbusters’ welcome initiative reasserts these considerations as fundamental to any sensitive interpretation of graphic design’s role and potential.

First published in Eye no. 33 vol. 9, 1999



Authors Featured in Eye Magazine

Authors (designers)

Jonathan Barnbrook
Tibor Kalman
Ellen Lupton
Katherine McCoy
Rick Poynor
J. Abbott Miller
Lucienne Roberts
Jan van Toorn
Rudy VanderLans
Bob Wilkinson
Nick Bell
Jeffery Keedy
Zuzana Licko
Armand Mevis
Andrew Howard
Jessica Helfand
Milton Glaser
Andrew Blauvelt
Hans Bockting
Irma Boom
Sheila Levrant de Bretteville
Max Bruinsma
Sian Cook
Linda van Deursen
Chris Dixon
William Drenttel
Gert Dumbar
Simon Esterson
Vince Frost
Ken Garland
Erik Spiekermann

various designers

••• — — — •••



Spring DES220 Lesson Two Album Covers

DES220 Introduction to 2–D Digital Imaging

Lesson Two

Photoshop Image Manipulation
Randomized Search: Album Covers

Bone Creek

  • Bone Creek — This Is The Real Deal


  • Dallas Hood — Wouldn’t Seem So Wonderful At All


  • Mr. Medicine — Good Sense & Reason


  • Richard Baneham — Desolating the Country
  1. A Young Axe
  2. Reparation Without Satisfaction
  3. A Peacefully Meditative Gnu
  4. Objectionable and Oppressive
  5. Each Is All Three
Image Resources:

‪Bone Creek‬
© All rights reserved by Red Beetle

Mr. Medicine‬
© All rights reserved by rocket2722
© All rights reserved by Cutter55

Richard Baneham
© All rights reserved by Trevor Kemp
© Some rights reserved by mollyblock
© All rights reserved by xperiane (Extremely Ultimately busy)

•••  —  —  —  •••

Assignment Description/Process

ASSIGNMENT: several years ago, there was a album cover artwork generation phenomena on Facebook.

Lesson Two: Random Album Covers project brief

To Do This —

  1. Go to Wikipedia. Hit “random” or  —
click http://en.wikipedia.org/wiki/Special:Random

    The first random Wikipedia article you get is the name of your band.
  2. Go to Quotations Page and select “random quotations” or  —
click http://www.quotationspage.com/random.php3

    The last four or five words of the very last quote on the page is the title of your first album.
  3. Go to Flickr and click on “explore the last seven days” or  —
click http://www.flickr.com/explore/interesting/7days

    Third picture, no matter what it is, will be your album cover.
  • Use Photoshop to put it all together, including the typography.
  • Repeat this process three (3) times to generate three different album concepts
— The second time you MUST compose two (2) images into your cover design; the third, you must find three (3) images to collage into your album concept.This is a total of six (6) images.

You also must look through, and search three resources for free typeface.
Links: da Font | Lost Type Co-op | Chank Fonts • FREE

Full Set(s) of Album Covers