![]() |
Design |
TAKE THE CAMP MULTIMEDIA SURVEY!!!!!!!!
HERE IS WHAT WE WILL BE WEEK: 5. Adjustment Layers and Filters |
OUR PROJECTS |
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)
Find examples (online, elsewhere) of design references that YOU like. Why did you choose this?
HERE ARE YOUR TOOLS:
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
![]() |
![]() |
HELPFUL HINT: Delete key erases last magnetic lasso selection point
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:
USE THE magic eraser | USE THE magnetic lasso | USE THE quick selection tool |
DOWNLOAD THESE IMAGEs: what selection tool will work best to separate the people from their background? |
what selection tool will work best? |
The most professional selection method uses the Mask tool. Professional designers often prefer this method because it’s the most meticulous.
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 -
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) |
|
-The art or process of setting and arranging types and printing from them
-The style and appearance of printed matter.
PARTNER UP!
Choose fonts that make the most sense and portray the phrase best.
Watch this video to get a better understanding about Typography.
Color Schemes- Students will learn how to work with color pertaining to design.
Here are some I’ve used in the past:
RED 1
RED 2
RED 3
PARTNER UP AND CHECK OUT THESE COLOR TOOLS!
Here's a video tutorial on Illustrator basics.
CHALLENGE 3: LOGO CHALLENGE
Create a logo for a company called “free expressions.” Students will have to decide what that company represents through the logo. The students will begin by sketching their ideas on paper then collaborate with another student to come up with a logo together. All the students will choose what logo they like the best and explain why.
HERE IS AN EXAMPLE OF HOW AN IDEA TAKES SHAPE (REFER TO THE "GREEN FILTER LOGO PROCESS" FILE ON YOUR DESKTOP).
35 Logo Redesigns from 2009
50 Fantastically Clever Logos
11 Trends in Web Logo Design: the Good, the Bad, and the Overused
Negative Space Logo Design
Here's a video tutorial on InDesign basics.
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!
GREAT POSTER AND WEBSITE LAYOUTS
(click on the site to see them in action)
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).
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
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