Day 3: Combining Multiple Images into One Photoshop File

Today’s essential question: How can I create unity throughout my project?

Today we will add the images we have downloaded to the inside of our Photoshop silhouettes. We will need to remove the background from each image.

We will learn how to add images to the background next class. Do not worry about that today.

Make sure your save your project as both a Photoshop (.PSD) file (which you will upload to your Google Drive) and a PNG file (which you will post to your blog). You blog will not let you upload a Photoshop file, and you will not be able to further edit a PNG file, which is why you need to save both versions. No one will finish their project today, but you must post your progress in order to receive participation points. No blog post = 0 participation for the day.

Downloading LARGE Images to Use in Your Project

  • Use the steps in this handout to download:
    • 15-20 images (that are larger than 4MP) you can use for the silhouette portion of our project
    • another 3-5 images (that are larger than 4MP) you might use for the background
  • Place these images in their own folder in your 890 number
  • Upload the folder to your Google Drive

Adding Images into your Silhouette

  1. Open your silhouette PHOTOSHOP file (the one that ends in .psd). Your layers palette should look like this:
    dragging_images_layers_screen_shot
    (If you only have one layer named background, you have mistakenly opened the PNG file. If that is the case, close  that file and open the .psd file.)
  2. Now open the first image you would like to drag into your silhouette in Photoshop.
    (File -> Open -> locate where you saved your image and select it)
    Go to the toolbar on the left side of the screen and select the move tool. move_tool
  3. Now click on the image and “throw” it into your silhouette Photoshop file. Your layers palette should now look like this:
    Screen Shot 2014-11-06 at 8.23.07 PM
  4. The image you just dragged should be below the negative space layer and on top of your silhouette layer. Eventually, it will look like the silhouette is filled with a collage of images:
    small_escher_profile_screen_Shot
  5. Scale or rotate the image by going to the top of the screen and selecting “Edit -> free transform. Do not make the image larger, or it will pixelate like the example below:
    pixelated_escher_Screen_shot
  6. Repeat steps until you have placed all your desired images into the silhouette photoshop file.
  7. Select the eraser tool and erase the background from each image. eraser_tool Make sure you are on the correct layer!
  8. Save your photoshop file occasionally while you are working on it so you do not lose your work (File -> save)

Saving your file & Posting to your blog

  1. Save your Photoshop File (File -> save)
  2. Save a version as a PNG (File -> save as -> Select “PNG” as “file type”).
  3. Upload the Photoshop file to your Google Drive
  4. Create a new blog post with the following:
    1. a png image of your progress. (You will not finish your project today, so I am looking for progress rather than perfection).
    2. a few sentences describing what was easy and what was difficult

Today we will:

  • Download 15-20 LARGE images we may want to use in our silhouettes
  • Begin dragging the images we downloaded that represent us into our silhouette file
  • Remove the background from each image using the eraser or magic wand
  • Save our file as both a Photoshop and PNG
  • Upload the Photoshop file to our Google Drive
  • Create a new blog post with the following:
    • PNG of our silhouette progress (no one will finish today)
    • a few sentences describing what was easy and what was difficult

Save

Save

Symbolic Silhouette Self-Portrait: Day 2

Today’s essential question: How can I trace over my photo to create a silhouette in Photoshop?

Today we will begin creating our symbolic silhouette self-portrait in Photoshop. At the end of today’s class, we will save our progress as both a Photoshop (.psd) file and as a .png. We will place both files in our Foundations 1 Google Drive folders, and post the .png to our blogs in order to receive participation points.

Part 1: Saving and Opening the File in Photoshop

  1. Log into your school Gmail account. (Username: student # @rcsd121.org; Password: same password you use to log into the school computers.)
  2. Click on the squares in the top right corner of the screen and select Drive
    google_drive
  3. Right click your profile photo and select “Download”
  4. Open Photoshop.
  5. Open your photo on Photoshop. (File -> Open).

Part 2: Painting your silhouette

  1. Create a new layer by clicking on the new layer button at the bottom of the layers palette. new_layer_button
    It is located on the bottom right side on the screen.
    Name this layer “silhouette.” Make sure the silhouette layer is selected. You can tell it is selected if it is blue. Make sure you do this step, or you will paint over your face and forever alter your source photo!
    Your layers palette should now look like this:
    silhouette_layer_before_tracing
  2. Select the brush tool from the toolbar on the left of the screen. brush_tool Go to the top of the screen.
    Change the hardness to 100% by dragging the slider all the way to the right.
    brush_tool_slider
  3. Select a color to paint with by double-clicking on the color box on the bottom left side of the screen. color_selector
  4. Select the magnifying glass from the tool bar and click on your image until you have zoomed in enough to be able to trace over your silhouette. magnifying_glass
    If you accidentally zoom in too far, you can zoom back out by going to the menu at the top of the screen, and selecting (View -> Fit on screen).
  5. Select the brush tool again. brush_tool Begin tracing over your silhouette.
    Adjust the brush size as needed:
    Press the right bracket } key to make the brush larger
    Press the left bracket { key to make the brush smaller.
    Once your trace over your entire silhouette, your image should look like this:
    profile_silhouette
  6. Go to the menu at the top of the screen and press File -> Save to save your progress (or press control + S).

Part 3: Painting your background

  1. When you are finished, click on the Background layer in your layer palette, then press the new layer button to create a new layer. Name this layer “negative space.” Make sure the “negative space” layer is selected. You can tell it is selected if it is blue. Make sure you do this step, or you will forever alter your source photo! Your layers palette should now look like this:
    negative_space_before_bucket
  2. Select a color to paint with by double-clicking on the color box on the bottom left side of the screen. color_selector You should pick one that contrasts with your silhouette color.
  3. Select the paint bucket tool from the  toolbar on the left side of the screen.
    Click anywhere on your image to paint the background.
    Your image should now look like this:
    profile_silhouette_bg
  4. Go to the menu at the top of the screen and press File -> Save to save your progress (or press control + S).

Part 4: Cutting the silhouette out of the background

  1. Click on the silhouette layer. Go to the menu at the top of the screen and select Layer -> Duplicate layer. Name this layer “silhouette copy.”
  2. Click on the original silhouette layer in the layers palette so it turns blue.
    The layers palette should now look like this:
    layers_silhouette_copy
  3. Go to the menu at the top of the screen and select Layer -> Merge down. This will merge one of the silhouette layers with your negative space layer. Click on this merged layer to select it. It should be blue.
    The layers palette should now look like this:
    merged_layers
  4. Click on the magic wand tool. magic_wand
    It may be hidden under the quick selection tool. If that is the case, click and hold this quick selection tool until the magic wand tool appears, then select the magic wand tool. magic_wand_quick_selection
    At the top of the screen, change the tolerance to 10.
    magic_wand_settings
  5. Click the silhouette to select it. Then press control + x to remove the silhouette.
    It will not look like anything has happened. To test whether you have actually deleted the silhouette from the inside of the merged layer, go to the layers palette and click on the eye next to the silhouette layer. This will make the silhouette layer invisible, and you will be able to see what remains on the merged “negative space” layer:
    eyeball_layers
    Your silhouette should be cut out of the background like this:
    profile_bg_only
  6. Go to the layers palette. Drag the “negative space layer” to the top of the screen, and click the eyeball next to the “silhouette copy” layer to make it visible again.
    Your layers palette should now look like this:
    eyeball_layers_visible

Part 5: Saving your file

  1. Go to the menu at the top of the screen.
  2. Select File -> Save to save your final Photoshop file (or press control + S).
  3. Then select File -> Save as -> and save your file as a PNG.

Today we will:

  • Trace over the photos to create silhouettes of ourselves. You can access this photo through your school Google Drive.
  • Save our file as both a Photoshop (.psd) and .png.
  • Upload both our .psd and .png files to our Google Drive accounts
  • Create a new blog post with the following:
    • the png of our silhouette

Photoshop Mini Lessons: Day 2

Today’s essential question: How can I combine multiple images into one Photoshop file?

Today we will complete more Photoshop tutorials. We will learn how to combine multiple images into one Photoshop file by dressing up a kitten.

Kitten Dress Up Tutorial (teaches us how to combine multiple images into one Photoshop file, and how to use the transform tool to scale and rotate objects)

Completed kitten dress up tutorial

Completed kitten dress up tutorial

  • Click here to view the step-by-step-instructions for the kitten dress up Photoshop tutorial. (If you do not have this file open and cannot tell me what step you need help with, I will not help you.)
  • Click here to download the kitten dress up Photoshop file.
  • Once you get comfortable with Photoshop, feel free to download extra accessories from Google images and customize your fashionable kitten! See if you can figure out how to add a background. Here are some examples of students who have gone above and beyond with the dress up kitten assignment:

Bonus Tutorial: Kitten in a Box (teaches us how to make an object look like it is inside a container)

Finish early? Complete this tutorial to learn how to Photoshop a kitten into a box.

cat_in_box_starter

Kitten in box tutorial starter file

Completed cat in box tutorial

Completed kitten in box tutorial

  • Click here to view the step-by-step instructions for the kitten in a box tutorial. (If you do not have this file open and cannot tell me what step you need help with, I will not help you.)
  • Click here to download the kitten in a box tutorial starter file.

Today we will:

  • Complete the kitten dress up tutorial. Save your file to your 890# AND your Foundations 1 Google Drive folder as both a photoshop (.psd) file and a .png file.
  • Finish the veggie tutorial (if you did not complete it last class).  Make sure you have posted a .png of your file to your blog, and placed both a Photoshop (.psd) and .png versions of the file in your Foundations 1 Google Drive folder.
  • If you have time, complete the kitten in a box tutorial
  • Create and publish a new blog post with the following:
    • a png of your completed kitten dress up image
    • a png of your completed kitten in a box image (if you got that far)
    • a paragraph describing how you create each image. Include any challenges you faced, and how you worked through those challenges.

Photoshop Mini Lessons: Day 1

Today’s essential question: What are some ways to remove the background from a Photoshop file?

Today we will learn several ways to remove the background from an image in Photoshop. How does this tie into our silhouette project?

If you feel like you understand Photoshop well, consider becoming a student leader and help teach your classmates how to do the mini lessons. (Notice that I said teach, not do their projects for them!)

Today we will learn how to create a collage in Photoshop by completing two mini lessons. These tutorials will teach us how to remove the background from an image in Photoshop and how to make it look like a kitten is in a box. Everyone should complete the veggie tutorial. If you have time, guide yourself through the kitten in a box tutorial. We will save a Photoshop version of our file AND a png of each tutorial to our 890# AND our Google Drive folder, and post the PNG to our blogs. You must create a new blog post that contains the work you did today in order to receive participation points.

Links to the resources we will use today:

Veggie Tutorial (teaches us how to use a variety of tools to remove the background from an image)

Veggie tutorial starter file

Veggie tutorial starter file

Completed veggie tutorial

Completed veggie tutorial

In order for it to be considered complete, it must meet the following requirements:

  • the background needs to be removed from the tomato, broccoli, onion, and mushroom
  • you must have duplicated at least one of the vegetables
  • you must have transformed the copy of the vegetable you duplicated by scaling and rotating it
  • you must add a shadow to at least one of the vegetables

Click here to view the step-by-step instructions for the veggie Photoshop tutorial. (If you do not have this file open and cannot tell me what step you need help with, I will not help you.)

Click here to download the veggie Photoshop starter file.

Bonus Tutorial: Kitten in a Box (teaches us how to make an object look like it is inside a container)

Finish early? Complete this tutorial to learn how to Photoshop a kitten into a box.

cat_in_box_starter

Kitten in box tutorial starter file

Completed cat in box tutorial

Completed kitten in box tutorial

  • Click here to view the step-by-step instructions for the kitten in a box tutorial. (If you do not have this file open and cannot tell me what step you need help with, I will not help you.)
  • Click here to download the kitten in a box tutorial starter file.

Today we will:

  • Finish sharing our artwork with the class.
  • Complete the veggie tutorial. Save your file to your 890# AND your Foundations 1 Google Drive folder as both a photoshop (.psd) file and a .png file.
  • If you have time, complete the kitten in a box tutorial
  • Create and publish a new blog post with the following:
    • a png of your completed veggie image
    • a png of your completed kitten dress up image
    • a png of your completed kitten in a box image (if you got that far)
    • a paragraph describing how you create each image. Include any challenges you faced, and how you worked through those challenges.

New Project: Symbolic Silhouette Self-Portrait

Today’s essential question: What are some images that might represent your interests or personality?

Today we will plan our silhouette self-portrait collage. We will create a new blog post with our concept and any images we may use, both for the inside of the silhouette and for the background. Here are some examples of what I am looking for:

If you are still working on your celebrity painting, you may finish that first, but know that you are responsible for turning in both projects before the end of the marking period.

If you took your photo last class, I have shared it with you in your school Google Drive.

The following people still need to have their silhouette photo taken: Jaz’Monya, Italia, Ahmed, Katelyn, Mia, Estefania, Nayeli, Andrea

Here are some sample projects created by past 9th grade students:

Project Requirements:

  • Collage created in Photoshop from at least 10 different images (the more, the better)
  • Contrast between silhouette & background
  • NO copyrighted characters or trademarked logos
  • Unity throughout the piece
  • Mastery of layers, paintbrush, and eraser tool in Photoshop demonstrated through high quality craftsmanship

Downloading LARGE Images to Use in Your Project

  • Use the steps in this handout to download:
    • 15-20 images (that are larger than 2MP) you can use for the silhouette portion of our project
    • another 3-5 images (that are larger than 8MP) you might use for the background
  • Place these images in their own folder in your 890 number
  • Upload the folder to your Google Drive
  • Create a new blog post with the following:
    • any LARGE images you may use in your project (download at least 20)
    • a few sentences describing the types of images you plan to use, and why each of these images is significant or meaningful to you

Today we will:

  • Download LARGE images to be used in our project.
  • Upload all the images to our Foundations 1 Google Drive folders. Create a new subfolder within this folder called “Symbolic Silhouette Self-Portrait” and store the images in this new folder.
  • Create a new blog post with the following:
    • any LARGE images you may use in your project (download at least 20)
    • a few sentences describing the types of images you plan to use, and why each of these images is significant or meaningful to you
  • Finish any missing/incomplete assignments and post them to our blogs

Save

MP3 Grades

teacher-cat

Today’s essential question: What do I need to turn in to get the best possible grade this marking period?

Today we will continue working on our color wheels and/or celebrity paintings.

Friday is the last day of the marking period. Check the list of the chalkboard to see if you are missing any assignments, and if so, arrange a time to catch up with Ms. Lawson during lunch or Advisement.

The following assignments count towards your MP3 Grade:

  • Photoshop Celebrity Prints
  • Photoshop Celebrity Artist Statement
  • Color Wheel Painting

Creating a Monochromatic Painting

Today’s essential question: How can I turn my Photoshop celebrity prints into a monochromatic painting?

Today we will begin the painting portion of our projects. You will be required to post a photo of your progress to  your blog every day in order to receive participation points. You may use the WordPress app on your phone, or borrow a class camera from Ms. Lawson.

Steps to creating our monochromatic celebrity paintings

  1. We will start with our black and white cutout prints:
    drake_cut_paper_edited
  2. Use the print as a reference to draw a paint-by-number image with the values labeled:
    drake_paint_by_number
  3. Mix a monochromatic value scale and use it to paint our celebrity:
    drake_painting_exemplar

Today we will:

  • Introduce the painting portion of the celebrity unit
  • Begin sketching our celebrity portraits in paint-by-number style (as shown in the example in this blog post) on posterboard
  • Label each section of the portrait with the appropriate value
  • Post a photo of our progress to the blog

 

Day 2: Setting Up Blogs & Google Drive Folders

dog_Computer.jpgToday we will share our favorite artwork, finish setting up our class blogs, and share a Foundations 1 folder with Ms. Lawson in our school Google Drive accounts. If you finish early, you may decorate your class folder or help classmates catch up.

The following people need to email Ms. Lawson (2013045@rcsd121.org) the link to their class blog:
  • Jaz’Monya
  • Italia
  • Sophia
  • Ahmed
  • Katelyn
  • Estefania
  • Cinderella
The following people need to finish their intro blog post (make sure  you post a unique picture AND answer the required questions):
  • Elijah
  • Loral
  • Sydney
  • Norah
  • Andrew
  • Mia
  • Holly
  • Tyrelle
  • Wynter
  • Jaz’Monya
  • Italia
  • Sophia
  • Ahmed
  • Katelyn
  • Estefania
  • Cinderella

Everyone needs to create a Google Drive Folder for this class and share it with Ms. Lawson.

Creating a Shared Media Folder in Google Drive

  1. Log into your school Gmail account. (Username: student # @rcsd121.org; Password: same password you use to log into the school computers.)
  2. Click on the squares in the top right corner of the screen and select Drive
    google_drive
  3. Click on “New” on the top left side of the screen and then “Folder” from the drop down menu to create a new folder
    new_folder
  4. Name your folder “LastName_FirstInitial_Foundations1”
  5. Right click on the folder and select “Share.”
    share_folder
  6. Share the folder with me (2013045@rcsd121.org) and make sure you give me permission to add items.
    folder_permissions

Deleting Filler Blog Posts:

Everyone also should delete any filler blog posts (things you did not create that have appeared on your blog and are confusing Ms. Lawson). Here are some examples:
the_journey_begins.PNG
first_blog_post_sample

Only delete filler blog posts. DO NOT DELETE your intro blog post! Ask a classmate or Ms. Lawson if you are unsure.

How to delete filler blog posts
  1. Click on “My sites” -> Blog Posts
    my_sites_blog_posts
  2. Click “More” on the bottom right side of the preview:
    more
  3. Click “Trash:
    trash

Need help? Please follow the following process:

When you finish everything, check with Ms. Lawson to make sure your blog is working properly, then help the rest of your classmates catch up or decorate your folder.

Today we will:

  • Share our favorite artwork (if you have not done so already)
  • Create a Foundations 1 folder in our school Google Drive accounts and share it with Ms. Lawson
  • Finish setting up our class blogs & creating our first blog post
  • Delete any filler blog posts (things you did not create that have appeared on your blog and are confusing Ms. Lawson).
  • Finish our squares (if you have not already done so)
  • Fill out the About Page on our blogs or help classmates catch up

 

 

Welcome to the Media Component of Foundations 1!

Computer-Cat

Welcome to the Media component of Foundations 1. In this class, we will explore a range of digital art techniques and become experts at using Photoshop.

Today we will look at some of Ms. Lawson’s and Ms. Thompson’s artwork and set up our class blogs. By the end of this class you should:

  • Set up your class blog
  • Email Ms. Lawson the link to your class blog from your school Gmail account
  • Publish your first blog post

First blog post project requirements:

  • A picture that is meaningful to you.
  • The answers to the following questions:
    • Describe your previous experience with computer art.
    • Whose is responsible if the computer crashes and your project disappears? What will happen?
    • How will you back up your work? (hint: blog, Google Drive)
    • Why is it important to post your work to your blog every class?

You must email Ms. Lawson the link to your blog and publish a blog post today in order to receive participation points.

Ms. Lawson’s Artwork

Computer Art
Drawing
Ceramics
Animation

snore animation

Ms. Thompson’s Artwork

View examples of Ms. Thompson’s artwork here.

Why is it important to be skilled with a variety of art materials and styles?

Part 1: Setting up a WordPress account

  1. Click here to set up a WordPress account. (This will be your Foundations 1 class blog.) You may choose any free template you like, but keep in mind that you will need to post both text and images, so you should pick a template that supports both of these requirements well. Use your school Gmail address (890….@rcsd121.org) – you will have to verify your email in order to publish blog posts.
  2. Log into your school email account, open the email from WordPress, and click on the link to verify your email address.

Part 2: Logging into your district Gmail account

  1. Click here to log into your district Gmail account. Your username will be your student ID # @rcsd121.org.) Ex. 8123456@rcsd121.org, and your password is your district computer password. (Your district gmail account has unlimited storage space and will give you access to DropBox, which is a great free way to back up your files.)
  2. Click on the email from WordPress to verify your class blog.
  3. Email Ms. Lawson (2013045 at rcsd121.org) from your district Gmail account. You will not receive credit if you email me from another email client. Your email should include:
    1. Your first and last name
    2. A link to your WordPress blog. For example, “Stephanie Lawson – My blog URL is SOTAfoundations1.wordpress.com.”

Part 3: Publishing your first blog post

Publish your first post by clicking on this icon at the top of your WordPress screen Screen Shot 2015-07-09 at 9.49.23 AM
Include the following:

  1. Post an image by following these steps:
    1. Go to images.google.com
    2. type in what you are looking for (ex. “cutest kitten in the world”)
    3. click on the image you want to download
    4. control +click -> save images as
    5. save the image to your desktop
    6. Click on the “add media” button Screen Shot 2015-07-09 at 9.50.16 AM
    7. Click on “upload files” Screen Shot 2015-07-09 at 9.51.03 AM
    8. Click on “select file” Screen Shot 2015-07-09 at 9.51.20 AM
    9. Select the image you want to insert
  2. Copy and paste the following questions and answer them:
    1. Describe your previous experience with computer art.
    2. Whose is responsible if the computer crashes and your project disappears? What will happen?
    3. How will you back up your work? (hint: blog, Google Drive)
    4. Why is it important to post your work to your blog every class?
  3. Click “publish” at the bottom of the screen to publish your post. Screen Shot 2015-07-09 at 10.12.00 AM

Need help? Please follow the following process:

  1. Check the blog
  2. Ask two classmates
  3. Still stuck? Raise your hand and Ms. Lawson will help you as soon as she is available.

If you finish early, help your classmates set up their blogs.

Today we will:

  • set up our class blogs
  • email Ms. Lawson the link to our class blogs
  • publish our first blog post