pixlr

Class Tuesday, October 16, 2018

 Today’s Goals:

  • Discuss quarter 1 grades and class conduct; review effort grading
  • Creating high quality images for your webpage: where to find free stock photos and how to edit them

 Today’s featured web site:

 Quarter 1 Grades, Class Conduct, and Effort

  • Effort is 60% of your grade. Some students will be losing points for effort for things like using their phones, talking while I’m talking or others are talking, not following directions, and not trying to complete the class goals of the day. There will be serious grade mark downs for doing these things.
  • Rude behavior– blatantly checking phones during the middle of class, outright not paying attention to me or others. Even if you don’t care about your grade or like the class, this is just plain rude. Consider whether you want to be in this class. It’s only October and we have a long way to go. Please talk to your guidance counselor if this isn’t for you and you can get switched out. This is an elective and you’re not required to be here.
  • Projects being graded for quarter 1: Harvest of the Month graphic, Social media graphic, Page on the class website, HTML Championships, and today’s image editing challenges. Please see me if you are missing anything or if something is incomplete.

 Finding images (review from yesterday)

  • Bad = downloading, using, helping yourself to whatever you find on Google (illegal, unethical, wrong)
  • Good = using things freely available under Creative Commons licensing and from websites where people give explicit permission for their image usage.
  • Great resources for finding images to use with your web projects. Let’s look at these sites to see how to find and download images:
  • You must ONLY use these sites, or one that you find that I approve, for ALL of your projects this year. No exceptions! It is useful to build good habits now so you won’t have problems later.
  • Even if we’re just testing and experimenting, you must only use images you find from these sources.

 Image Editing Basics

  • To make our lives a bit easier, we’ll use a good web-based image editor, https://pixlr.com/editor/. Pixlr.com is actually pretty similar to Photoshop.
  • I will show you the following things and then you’ll practice them in the challenges below
  • Basics– opening or creating image; layers; unlocking image; history panel; copying & pasting
  • Color panel– hex and hsl values
  • Resizing and cropping images
  • Color correction– curves, color balance
  • Adjustment layers
  • Filters
  • Adding text Color, size, font, drag into place
  • Cool tools- eye dropper tool to match colors, pixel copying with selection tool
  • Black and white/color photo
  • Save options– resolution and file formats

 Pixlr.com Boss Image Challenges

Go to Pixrl.com/editor to do the following activities at your own pace. You will submit them online to our class image gallery (see one from last year for an example).

You will edit and upload 5 images

  1. Crop and resize an image
    • Download this photo and open it in Pixlr.
    • Double-click the lock icon next to Background in the layers panel so you can edit the image.
    • Crop around the kitten so the photo is vertical rather than horizontal (taller than it is wide). Then resize the image so it has a width of 200 pixels. Save the photo and submit it below with your name and #2.
    • Video hint here
    • Submit here along with Your Name, #1: Period 5 or Period 6
  2. Color correct an image
    • Now, take that same kitten photo, and in your history panel, click open image to go back to the original image.
    • You’re going to use some settings under the Adjustment menu at the top to change the colors of the photo. Go to Adjustment, Brightness and Contrast and play with some of those settings until you get something you like. Then go to Adjustment, Color Balance, and select different values for the mix of Red, Green, and Blue. Finally, go to Adjustment, Curves, and check the box next to histogram. Play with the darkness and lightness of the photo by dragging the line around until you get a result you like.
    • Submit here along with Your Name, #2: Period 5 or Period 6
  3. Add a frame to an image
    • Find an image you like from https://unsplash.com/, https://www.pexels.com/, or Bing.com.
    • Go to Image, Canvas Size, select the middle box, and add 100 pixels to both the width and the height.
    • Now choose the color picker tool (next to the letter A in the tool bar), and click on a color in the photo that you want your frame to be so you can match your frame to your photo. The color you click on will automatically appear in your color panel. Now choose the paint bucket tool and click in the white space around your photo to color in the border.
    • Video hint here
    • Submit here along with Your Name, #3: Period 5 or Period 6
  4. Add fun filter/adjustment layer to an image
    • Use an image you already have or get another image you like from https://unsplash.com/, https://www.pexels.com/, or Bing.com.
    • Under Adjustment and Filter, there are several options to make your photo more visually interesting (sepia, solarize, blur, glamour glow, etc., etc.). Choose one or more to make a cool-looking photo that’s different than the original. Don’t just mess it up; make something look good!
    • Submit here along with Your Name, #4: Period 5 or Period 6
  5. Create colorized area in black and white photo
    • Download this photo and open it in Pixlr.com.
    • Reminder- double-click the lock icon next to Background in the layers panel so you can edit the image. Then right click on the layer and select Duplicate layer.
    • Now, make sure you’re on the layer copy (it should be highlighted in the layers panel) and go to Adjustment, Desaturate, to make the layer copy black and white.
    • Now, select the eraser tool (next to the paint bucket) and be sure to change the brush size to something reasonable (not too big or small). You’re going to erase away the top black and white layer to reveal the colored photo beneath- do this JUST for the rose bud.
    • Submit here along with Your Name, #5: Period 5 or Period 6

 When You’re Done:

  • Make this:
    1. You are going to create an image like this one by using a positive quote you like, a stock image, and Pixlr.com
    2. Choose a positive quote you like (approx. 5-10 minutes)
    3. Choose an image to go along with your quote (approx. 5-10 minutes). THINK- what is your quote about? Then search for an image you think would make a great background image for your quote. This image MUST be from https://stock.tookapic.com/, https://pixabay.com/, https://www.pexels.com/, or Bing.com (do image search, then search for free to share and use)
    4. Go to Pixlr.com and open your image in there. Add your quote as text to the image, carefully choosing a text color and font. Make sure you can read the text over your background image! (approx. 10-20 minutes)
    5. When you’re finished, post to our Wall of Inspiration.