Imaging Intro
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.
Classes
- 9/14: Intro, Science of Light, How Humans See and Cameras work
- 9/19: Using Photoshop
- 9/21: Using Illustrator
- 9/26: Image Workshop 1
- 9/28: Image Workshop 2
- 10/3 Image Workshop 3
project and quiz
- 10/12: Image Project Due
- 10/26: Image Quiz (in class)
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,024px by 1,014px. 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
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 1024px/1024px: JPG file
- Vector 500px/500px: PNG file
- Both images represent you in some way that you can explain
DUE DATE
Thursday, October 12
Turning it in
You will submit the following 5 files to Blackboard:
- The PSD (Photoshop) file
- The AI (Illustrator) file
- A version of the raster file for web (1024px * 1024px, 300PPI, JPG)
- A version of the vector file for web (500px * 500px, 300PPI, PNG)
- You can submit an SVG version (6th file) of the vector image as extra credit.
- A short statement about your project. Use this template.
- That includes Credits for all images you did not create yourself (follow the format outlined on slide #17).
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
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
- 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
DALL-E 2 https://openai.com/dall-e-2/
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). If you need a placeholder image there are sites you can use. They give…
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.…
Image Software Extras
Here are some tutorials that may help if you’re updating your image projects or using images in your final project. Illustrator: Adding Shadows and Shading There are a number of ways to add shadows and shading to give your images more feeling of depth or realism. Here are some tutorials to help with that. Coloring…
