Learning Objectives:

You will be able to edit a photo for size and dimensions.

You will be able to make simple edits to a photograph.

You will be able to identify the different photo file types on the Web.

You will be able to identify why your webpage should be validated

Class Videos:

Intro to Photoshop

Watch: Web File Formats

Watch: Adobe Beginner photo editing course

Watch: Photoshop Optimizing Web Graphics

Watch: The Practice videos on Note 1 (skip the first 2 minutes), Note 2 and Note 3 from my Photoshop Classes or Adobe's Photoshop Tutorials

Watch: Did you know from YouTube!

Homework:

Post: Create a Graphics Page showing at least 3 before and after graphics that you manipulated using Photoshop or some other graphics program. Make sure you link the graphics page to your homework page! You should also post a graphic of your name on your homework page!

 Graphic homework page

Read:  Chapter 5  in your book

Review: CSS W3schools Cover CSS Display to CSS Navigation Bar

Reminder: Post your articles on Canvas under the Weekly Articles on the Discussion Board Section.

Additional Information:

Review:  How to use Stable Diffusion  

Web Graphic Formats: 

Joint Photographic Experts Group Jpeg (extension is .jpg)

Graphics Interchange Format Gif is the old format developed by Compuserve (extension is .gif)

Portable Network Graphics PNG (extension is .png)

WebP, the new kid on the web, was developed by Google intended as a replacement for JPEGPNG, and GIF file formats. (extension is .webp)

Remember: Edit in RGB Mode

gif uses Index Colors (the most popular 256 or less colors for your picture)

 Photoshop tutorials on Youtube

1. Use GIFJPEG, WEBP or PNG file formats for graphics on the Web. (Use a resolution of 72 pixels per inch)

2. Use Photoshop's File - Export - Save for Web option when working with graphics. Select the best resolution / file size that you can live with. Remember that as a rule, graphics on a main page should not be larger than 50 k and should not take up more than a half of the height of the screen.

3. Always save your graphic in Photoshop's PSD format (in addition to web format) for future use. PSD will save the graphics's layers.

4. Always modify graphics in RGB mode (Image > Mode > RGB) for better results.

5. Play with the Tools and Filters in Photoshop! (Consider taking a Photoshop class)

6. Use thumbnail versions of large graphics that link to the large graphic.

7. Clip art is available from the Web and from Microsoft's Power Point.

Photoshop is a separate class in of itself! I barely touched on its capabilities and you should play with it. I don't expect expert graphics from you (yet). Looking for Images, try Google.

Stock Photos 

Google and Lycos image search

Copyright

Terms:

Crop, RGB, JPEG, GIF, PNG, Pixel, Vector Graphics, Scanner

Reminder: Post your articles on Canvas under the Weekly Articles on the Discussion Board Section.

Dr. Jon Storslee
Phone: 602-787-6734

HTML Valid


Paradise Valley Community College 
18401 N. 32nd Street Phoenix, AZ 85032