Today’s Goals:

• Finish your Pixlr.com boss image challenges (6 images total including final image challenge below); see how you will be graded; and play with some browser developer tools

 Today’s Featured Site:

• http://roblafratta.com/mariowario– CSS is used to create fun superhero costumes for Mario!

 Pixlr.com Boss Image Challenges

1. 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 last year’s class for an example). This is your chance to show me that you have the maturity to handle online collaboration tools.
2. 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, #2: Period 2
3. 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, #3: Period 2
4. 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, #4: Period 2
5. 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, #5: Period 2
6. 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, #6: Period 2
7. Extras
   • Try making a fake ad like this guy did in this video. Get a photo you like from Pexels, Unsplash, or Bing and find a logo to use.
   • Make anything else you want.
   • Remove image from background, add to new background
     • Download this cute dog photo and open it in Pixlr.com. Also download and open this image.
     • You’re going to remove the puppy on the blanket from his background using the magic wand tool. You will then add him (or her) to the image of the other dogs sleeping on the bed.
     • First, use the magic wand tool to click on the white background/blanket. That should highlight most of what you want (excluding the dog). Try this a few times until you get it right (remember to adjust the tolerance level). After just the background is selected, go to edit, clear. This should leave just the dog. Now, get the eraser tool and erase away any little remaining bits you don’t want.
     • Use the magic wand tool to highlight just the dog. Then go to edit, inverse selection, and copy the dog by hitting ctrl c on the keyboard. Paste the dog in the other photo and move it around with the arrow tool to put it into place with the other dogs.
     • Video hint here
   • Submit here along with Your Name, Extra: Period 2

 Final Image Challenge

• You are going to create an image like this one by using a positive quote you like, a stock image, and Pixlr.com
• #1 Choose a positive quote you like (approx. 5-10 minutes)
• #2 Choose an image to go along with your quote (approx. 5-10 minutes). This image MUST be from https://stock.tookapic.com/, https://unsplash.com/, https://www.pexels.com/, or Bing.com (do image search, then search for free to share and use)
• #3 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. Your quote should be readable and the color should be complementary to the photo (approx. 10-20 minutes)
• #4 When you’re finished, post to our Wall of Inspiration.

 Grades:

• Click here to see how you will be graded

 Browser Developer Tools

• Check out some of the useful web developer tools available in Firefox by doing the following activities
• Open Firefox. You should see your web developer tools in the tool bar at the top of the browser. If not, right click in the tool bar and then make sure “web developer” has a check in front of it.
• Go to a website you like
• Go to the CSS tab, click on it, and select “Disable all styles” so you can see the difference CSS makes to a webpage.
• Click on the Images tab and go to View Image Information in the menu.
• Click on the Information tab and then go to Display Element Information. Now point your mouse to different things on the page to see the code.
• Go back to the Information tab and choose View Color Information; this will show you all of the colors a website uses.
• Go to the Miscellaneous tab and choose Edit HTML. Change some of the HTML on the page and see what happens.
• Go to the Outline tab and choose Outline Block level elements. What do you notice about them?
• Go to the Resize tab and choose View Responsive Layouts to see how the page looks on different screen sizes. Also, go to the top right of the browser, click on the “hamburger” (3 horizontal lines in the tool bar), choose Developer, then Responsive Design mode. Drag the edge around to see how the page shifts depending on the screen size (if the page is responsive; make note of whether it is).