What You Will Need for the Module
- Camera – a phone is fine
- Space to save image files (on computer, USB drive or in the cloud)
- Quizlet Account
- We use this in each module
- Computer that can run Adobe
- Computer Software:
- Adobe Photoshop
- Adobe Illustrator
What We’ll Learn
How WE SEE LIGHT and how Cameras make images
We will learn the science behind how humans see light and how digital cameras use a similar process to create images.
Creating and editing images
We will look at the two main types of images (vector and raster), practice editing raster images with Photoshop and creating vector images with Illustrator. The main focus is on editing, not on taking pictures, but if there is interest we can give some class time to taking pictures.
Setup and Materials
software
You will need to download and install Adobe Creative Suite on your computer. There is a Creative Cloud app that helps you manage all of the Adobe apps. Then install Photoshop and Illustrator.
- Adobe Access Instructions: You will use your CUNYfirst username and password.
hardware
You will need a computer that can run Adobe software. You will also need a device to take pictures. For most people you can just use your phone. If you want to use a camera, that’s great; just make sure you know how to save a file and get that file onto your computer.
Please let Prof Stein know if your computer can’t run Photoshop or Illustrator or you don’t have a way to take pictures.
Module Media Project
self portraits: Raster and vector versions
RASTER
Take/find images of yourself or something that represents you, and combine them in Photoshop as a square image at least 1,000px by 1,000px. Make sure to not upsample (increase the size of) your images. Use tools we’ve covered in class (i.e: adjustment layers, filters, masks, crop tool etc.) to create your composition. You may only use images in the public domain or with a Creative Commons license. See the post Where to Find Free Images for more information.
VECTOR
Make a square vector/Illustrator file that represents you using only geometrical shapes (the final image can be abstract or representational).
Requirements
- 4 images combined for Raster image. You can use more.
- All images taken by you or have a Creative Commons license or are in the public domain
- credits for all images used
- Square aspect ratio (both images)
- Raster 1000px/1000px: JPG file
- Vector 1000px/1000px: PNG file
- Both images represent you in some way that you can explain
Turning it in
You will submit the 02_Images folder to Brightspace. It should have the following
- Project Description Document: A short statement about your project. Use this template.
- That includes Credits for all images you used (follow the format outlined in the template).
- Project Files folder
- The PSD (Photoshop) file
- The AI (Illustrator) file
- Source Files folder
- All of the images you took or downloaded and used in your project files.
- Output Files folder
- A version of the raster file for web (1000px * 1000px, 300PPI, JPG)
- A version of the vector file for web (1000px * 1000px, 300PPI, PNG)
- You can submit an SVG version of the vector image as extra credit.
Grading rubric
The grading rubric takes into account the files used, format, the copyright of the content and the quality of the project. The rubric will be updated here after the module starts.
Tutorials and Resources
SLIDES
Slide presentation on the science of light, human vision and digital image files:
Slide presentation on Photoshop:
Slide Presentation on Illustrator:
HOW Images Work
- How We See
- Electromagnetic Spectrum
- Image File Formats, video [6:44]
- Vector vs Raster Graphics, video [2:36]
- What is the difference between RGB and CMYK? [5:14]
TUTORIALS AND ESSENTIAL RESOURCES
Adobe Hands-on Tutorials
In class we will use Adobe Hands-on Tutorials to help you learn. These can be found in the Help area of both Photoshop and Illustrator.
Other Tutorials
- Making a Headshot for your Resume/Portfolio
- Official Adobe tutorials:
- Adobe Photoshop User Guide – “Selections”
- Adobe Photoshop User Guide – “Mask Layers”
- Adobe Photoshop CC tutorial – “Export images from Adobe Photoshop for mobile and web”
- Adobe CC tutorial – “Draw basic shapes”
- Adobe Illustrator User Guide – “Combine Objects”
- Adobe Illustartor CC tutorial – “How to save a file for output”
- Best practices for attribution
- Need help mastering the Pen tool? Take the Bezier game
- Resolution reference: “DPI love – Easily find the DPI/PPI of a device”
Creative Commons licensed and public domain images for your projects
- Openverse: https://wordpress.org/openverse
- Unsplash: all images are free to use how you want: http://unsplash.com/
- Pixabay: variety of images http://pixabay.com/
- Pexels: variety of images Http://pexels.com
- PUBLIC DOMAIN
- Library of Congress: https://www.flickr.com/photos/library_of_congress The LOC has many photos released to the public domain. Flickr Feed for LOC
- Public Domain Archive http://publicdomainarchive.com/ : This site lists public domain images, not the same as LOC
- New York Public Library https://www.nypl.org/research/collections/digital-collections/public-domain The library has thousands of images that are in the public domain (meaning there are no restrictions on how you can use them).
For even more info view the Where to find Images post.
SUGGESTED RESOURCES
These aren’t required but help you get deeper into it if you have time and interest.
- How Vision Works
- Image concepts:
- Digital Camera Sensor Sizes
- Camera Sensor size Explained, video [3:37]
- How Digital Cameras Capture Images, video [7:50]
- Compression, video [12:47]
- Color blindness
- Color Blindness & UX: Designing with Accessibility in Mind
- Image Sensors, Alternate article on sensors
- Image Resolution
Digital Images Posts
Where to find free images
When you use an image on a web site, you must obey copyright law and only use images you have an explicit right to use. So, searching Google Images is NOT the way to find them (unless you take additional steps shown below). What You Can Use The general rule of thumb is: Only use images where…
Photoshop Compositing
Composite images are images you make by combining multiple images. There are many ways to combine images in Photoshop but we will focus on a few techniques and tools that will help you. Selection Layer Masks Blend Mode Hands-on Tutorials Photoshop has a number of built-in tutorials that help you learn how to do things.…
