Design

TAKE THE CAMP MULTIMEDIA SURVEY!!!!!!!!

1. DESIGN ORIENTATION

Stuff Katelin Loves:
Stuff Katelin Loves
Required Reading design
Lovely Package
Hidden Logos
Want vs Need Prints
Letterheads and logos

(just a few to get you excited)

• What does design mean to you? Find examples!.
• Here are some famous designs that you may see everyday. (ex. McDonald’s, Pepsi, Teams, etc.)  
• Psychology of Fast Food Logos (Red and Yellow!!)
• “Design is Everywhere” (a little Theory) EVERYTHING not in nature is designed. Even things you wouldn’t think of initially as designed like tables and chairs. These are things we normally just see as basic objects. Until you see something so almost “over” designed (but super awesome) Like this table or this chair and other...interesting chairs and tables shown with it.
• Architectural (egg house and mansion in the sky)
• Industrial (outdoor furniture)
• Website (Carsonified, every page is a different design)
• Print (Typography Calendar)
• What other design references can you come up with: THINK ABOUT Industrial, architectural, website and print design.

CHALLENGE 1: WHAT IS DESIGN?

Find examples (online, elsewhere) of design references that YOU like. Why did you choose this?

2. PHOTOSHOP ORIENTATION

HERE ARE YOUR TOOLS:

AND A VIDEO ABOUT HOW TO USE THEM

     HINT: Command/Control D is very helpful in getting rid of a selection marquee.

3. SELECTING IMAGES
How to separate an image from its background

• Here are the tool options:

HELPFUL HINT:  Delete key erases last magnetic lasso selection point
 

We'll use the magnetic lasso, quick selection tool/magic wand and magic eraser

Select the tool you want to use and take your cursor and draw around the area that you wish to select or "crop" out. Copy your selection by right clicking your mouse, and then paste your selection into a new layer in Photoshop.

EXPERIMENT: DOWNLOAD THESE IMAGES and select these figures out from their backgrounds:

The most professional selection method uses the Mask tool.  Professional designers often prefer this method because it’s the most meticulous.

4. LAYERS

We'll work with the fish.psd document downloaded on your computers.

CHALLENGE 2: COLLAGE PROJECT

Create a collage in Photosho, and find copyright free images from use Flickr’s Creative Commons, the New York Digital Public Library's Flickr Photostream , or Wikimedia Commons (all images need to be selected from the Public Domain or Creative Commons)Pick a theme for your collage and go for it (e.g., flowers, geese, shoes, etc) .You might want to  take a photo of yourself and include it in the Collage (using PhotoBooth.. Save your selections as a png files. Bring each image into a new PSD document, and put each selected image on a different layer.

5. ADJUSTMENT LAYERS AND FILTERS

6. THE FREE OPEN SOURCE SOFTWARE (THAT'S A LOT LIKE PHOTOSHOP) CALLED GIMP

7. IMAGE RESOLUTION
A note about resolution: It's important! A JPG is different than a GIF is different than a PNG!!!
Great simple explanation -

• Great simple explanation - JPG vs. GIF vs. PNG
  

             Here’s another example w/ pictures: JPG vs. GIF, etc.

             Here are 3 images that differentiate betwen JPG, GIF and PNG

PNG (handles tranparency!)	JPG (complicated!/photo	GIF:  simple logos (high contrast)

8. SKETCHING

9. TYPOGRAPHY

-The art or process of setting and arranging types and printing from them

-The style and appearance of printed matter.

• Importance of Typography
• Examples of Typography
• How to download fonts and install.

PARTNER UP!
Choose fonts that make the most sense and portray the phrase best.

Watch this video to get a better understanding about Typography.

10. COLOR

Color Schemes- Students will learn how to work with color pertaining to design.

• Power of Red: Power of red (how can we communicate this and make it fun?  Like have students walk around and identify what is red?  Then give them cool examples in design and photography.

Here are some I’ve used in the past:  
RED 1
RED 2
RED 3

PARTNER UP AND CHECK OUT THESE COLOR TOOLS!

• Color Contrast Check (what colors work with what colors in terms of contrast)
• Kuler:  pre-existing color schemes:  decide which color schemes you and your partner are drawn to, and how you differ in taste.
• Where do color choices in design come from?  Pantone:  (VIDEO)
• Dashboard (Apple) Color Widget
• How colors make you feel; why companies choose certain color.  Why was Facebook chosen to be blue and white?
• Individually, PICK 2-3 THREE-COLOR COLOR SCHEME that could be applied towards any design.

11. ILLUSTRATOR ORIENTATION

11. PEN TOOL

12. IN-DESIGN ORIENTATION

Here's a video tutorial on InDesign basics.

12. LAYOUT

What makes good layout???

Works Every time Layout Video (From White Space is Not Your Enemy)

13 Design Sins: Here’s a VIDEO explaining the layout sins!

• Sin example 1
• Sin example 2
• Sin example 3

GREAT POSTER AND WEBSITE LAYOUTS

• Example of great poster  layout 1
• Example of great website layout 2

               (click on the site to see them in action)

• 60 Creative and Clever Advertisements
• 40 Beautiful Web Design Portfolios
• 15 Examples of Modern Web Design

 

Great Helvetica Based Typographic Posters

PARTNER UP!!
Pair students up. Students will begin to design an 8 X 14 poster using INDESIGN.   
Students will have 15 minutes to find and manipulate (Photoshop) images and for this project.  Find PD images from Flickr’s Creative Commons, the New York Digital Public Library's Flickr Photostream , or Wikimedia Commons (all images need to be selected from the Public Domain or Creative Commons).

14. DREAMWEAVER ORIENTATION

ADDING NAVIGATION BARS (with buttons developed in PS)

DEFINING HOTSPOTS AND LINKING PAGES (have students link to their favorite pages)

ADDING IMAGE ROLLOVERS
Here are 2 images students can download and use for a rollover effect (note to students:  images are the same size; one has a color pencil filter on it)

FINAL PROJECT REQUIREMENTS: DESIGN

1. Most have a logo (and that logo must be tied to everything)
2. Most have a company project that has:
   1. a poster with AT LEAST ONE PICTURE FROM THE CREATIVE COMMONS/NEW YORK DIGITAL LIBRARY
      and using Works Everytime Layout rules.
   2. a Business card
   3. A website with a ROLLOVER image and 3 links (going to your favorite pages)
   4. YOU MUST use the Color contrast checker.
   5. YOU MUST do something that totally totally challenges you and is outside your comfort zone.
       
3. must have photoshop images taken from the CREATIVE COMMONS/the New York Public Digital Library (aka: they MUST be copyright FREE)
4. must have one aspect that is TOTALLY CHALLENGING TO YOU
5. Must have credits.

Resources:
Color Scheme Designer
Download GIMP
Works everytime layout
Photoshop Tutorial-Pen tool
Pyschology of Color
Logos, Websites, Business cards and more
Dafont.com (obviously)
100 Logos in 100 days
Free Fonts (not as great as dafont but still a good resource)
Letterhead/logo designs **awesome!
Anatomy of a website
aWWWards (web design inspiration)
We should knock it into their heads not to be a:
Comic Sans Criminal
Typolution video