Introduction to Photoshop Altering photos 1 pixel at a time.

Slides:



Advertisements
Similar presentations
Put your photos into PowerPoint Insert, crop, and format pictures Youve got photos and you want to display them in a slide show. The first thing you need.
Advertisements

So you want pictures on your web site ? ECUSA Digital Media Services Workshop by John Rollins,Cindy Meneghin and Jan Paxton.
Web Design Vocab 3 PNG, JPG, GIF, MP3, MPEG.
L.Ghadah R. Hadba CT1514-L1.  Computer Graphics :refers to processing of creating a new image from Geometry, Lighting parameters, Materials and Textures.Using.
Adobe Photoshop CS Design Professional FOR THE WEB CREATING IMAGES.
Chapter 17 Creating Images for the Web. Chapter Lessons Learn about Web features Optimize images for Web use Create a button for a Web page Create slices.
Graphics. Image format's GIF Format: Use a maximum of 256 colors, and are recommendable for big areas of one color or non- continuous images. They are.
Using the Photo Album in PowerPoint 2003 Multimedia Services at The Citadel Updated 6/18/07.
Effective Digital Imaging using Basic Composition and Adobe Photoshop Paul S. Marley Instructional Technology Specialist Department of Art Wake Forest.
Graphics CS 121 Concepts of Computing II. What is a graphic? n A rectangular image. n Stored in a file of its own, or … … embedded in another data file.
Image Processing, Illustration (Drawing), Paint Programs, and Scanning Dr. Warren C. Weber Cal Poly Pomona.
ETT 429 Spring 2007 Digital Photography/Scanners.
Adobe Photoshop 6 Advanced Level Course. Easy Fixes Photoshop is the best tool to fix old, torn and faded photographs, and can fix almost all flaws in.
Graphics and Animation Chapter 8. 8 Graphics in Multimedia Graphics are an element that virtually all multimedia applications include.
File Formats The most common image file formats, the most important for cameras, printing, scanning, and internet use, are JPG, TIF, PNG, and GIF.
Review of last session The Weebly Dashboard The Weebly Dashboard Controls your account and your sites Controls your account and your sites From here you.
Zinnia Bell. RAWimages are image files that have not yet processed, they contain minimally processed data from the image sensor of either a image scanner,
Graphics Ms. Brewer Spring Bellwork Edmodo – log on! Quiz? Take it if you need to! Policies and Procedures Powerpoint in Shared Folder! Get to Know.
Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative.
Understanding Web Graphics Web Design Section 5-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Chapter 6 Images in Dreamweaver & Fireworks Mrs. Johnson Web Design.
Graphics and Animation Multimedia Projects Part 2.
Review of last session Add text to your website Add text to your website Title Title Paragraph Paragraph Title and paragraph Title and paragraph Add photographs.
Cropping and Resizing Web Design Section 5-6 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.
Microsoft Expression Web-Illustrated Unit E: Working with Pictures.
PowerPoint: Images Randy Graff UF HSC IT Center
Adobe Photoshop CS3 Revealed – Chapter 16 FOR THE WEB CREATING IMAGES.
Graphics & Images What File Format Do I Use?. Graphics & Images …..are visual images presented on some form of media (drawings, print, web, digital video)
Chapter 3 Image Files © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,
Multimedia. What is a graphic?  A graphic can be a: Chart Drawing Painting Photograph Logo Navigation button Diagram.
Getting Started with Fireworks A few tips: –Before you begin an assignment, be sure to create a folder on your drive for it. –If your canvas is checkered,
Lesson 5.  To locate free resources that you can use for image editing  Determine the optimum image file size  Decide on the best image file format.
PowerPoint Bloat How to avoid it. 1 PowerPoint technique, 4 image techniques PowerPoint 1.Split long PowerPoint files into several smaller files Image.
Photo Story Creating your own!. What is Photo Story? Photo Story is a way to create slideshows with added narration, effects, transitions and background.
Project Two Adding Web Pages, Links, and Images Define and set a home page Add pages to a Web site Describe Dreamweaver's image accessibility features.
Raster Graphics 2.01 Investigate graphic image design.
Web Graphics. Web graphics Bandwidth is king Graphics must load quickly Graphics must be optimized All other components except for text, gif and jpg are.
Editing Images for the Web. Optimization/Compression Graphics optimization is important for fast web page display.
Graphics Concepts Presentation
Digital Image Editing Presented by John Hohn. File Formats JPEG – Joint Photographic Experts Group PNP – Portable Network Graphics GIF – Graphic Interchange.
Introduction to Images & Graphics JMA260. Objectives Images introduction Photoshop.
8 Graphics Digital Media I. What is a graphic? A graphic can be a:  Chart  Drawing  Painting  Photograph  Logo  Navigation button  Diagram.
Finding and Using Digital Images Alastair Dunning, AHDS Executive Office King’s College London, Bradford 12 th December 2005.
Digital File Formats By Ali Aslam. JPEG JPEG Stands for Joint Photographic Experts Group. JPEG uses a lossy compression routine. Lossy compression means.
1 2/22/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: Images and placing pages on the server.
WEB GRAPHICS EXPLORING COMPUTER SCIENCE - LESSON 3-4.
13 June – Session : Graphics Different types of Graphics for the web Features of image editing software Good practice for image editing.
Basic Web Design Week 3 - Graphics UVICELL. Web Graphics Concepts for Week 3 Selecting the right format for your image Creating a name banner for your.
“Rightsizing” Images for
Editing images using Microsoft Photo Editor and Paint
Overview Review Elements
Exploring Computer Science - Lesson 3-4
Imaging and Design for Online Environment
Chapter 3 Image Files © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,
Exploring Computer Science - Lesson 3-4
Computer Graphics Different Images File.
Introduction To Photo Editing SHIELA MAE A. AQUINO SRNHS.
Graphics Basics Ellen Eyth.
Chapter 3 Image Files © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
Cropping and Resizing Web Design Section 5-6
Exploring Computer Science - Lesson 3-4
Graphics and Animation
1.01 Investigate graphic types and file formats.
Overview Review Elements
Graphics Basic Concepts.
Chapter 2 Adding Web Pages, Links, and Images
PLACE YOUR TITLE HERE **Poster Author(s) Go Here
Creating Images for the Web
Technology – Using freebibleimages.org
Multimedia Graphics.
Presentation transcript:

Introduction to Photoshop Altering photos 1 pixel at a time

What is a pixel? - Unit of measurement - Smallest piece of information in a picture - Sometimes referred to as a dot (DPI)

Web resolution The resolution of photos on the Web is 72dpi (dots per inch)

There are 3 different file types most often used on the Web: - JPG - GIF - PNG

What is a GIF (Graphics Interchange Format)? - 8-bit graphic limited to 256 web colors or less. - Best used with graphics (not photos) - Can have transparent backgrounds - Can be animated (multiple frames)

What is a JPEG (Joint Photographic Experts Group)? - You can create images using all 16.7 million colors - An image that has been compressed for the Web, Low, Medium, High, Very High, Maximum. - Best used with photographs or other images using a wide spectrum of color - Can leave compression artifacts - This is the format you want to save photos for the Web - No difference between files saved as.jpg or.jpeg, although.jpg is more common.

What is a PNG (Portable Network Graphics Format)? - An option for newer browsers (IE) - Has better compression and uses millions of colors - Can have several transparent colors - Variations of transparency

Big >> small

Small >> big

Cropping photos Cropping is decreasing the size of photo height, width and/or resolution. 1) To crop to a specific height or width: Use the crop tool

Step 1 - Cropping photos Decreasing the size of photo height, width and/or resolution

Cropping photo by size 1) To crop to a specific width: Use the crop tool

Cropping photos by shape 2) To crop to a specific shape use the rectangular selection tool: Select the area you'd like to crop with the select tool and choose "Crop" from under the "Image" menu

Step 2 - Sharpening photos Making things clearer

Sharpen photos If photos aren't as crisp and clear as you'd like, try sharpening the photo. Filter > Sharpen > Sharpen OR Sharpen edges NOTE: Don't do this too many times or it will distort your photo.

Color correcting photos To do an overall color correct, go to Image > Adjustments > Levels > Auto To manually manipulate colors, you can either use curves or color balance under the Image menu.

Step 3 - Saving photos Saving for print and online

Saving for the Web File >> Save for Web & devices

JPG artifacts

Keep the proportion of the photo Changing the proportion of a photo alters the credibility

Uploading and sharing your photos in -Create an account at Or log into your ASU , and then navigate to the URL and create a Picasa account that’s tied to your address. -From the Home screen, click on the “upload” button at the top middle of the window. -Type in a name for your album, and either drag photos directly from your computer into the window, or hit the “Select photos from your computer” button. You can select multiple photos at once by holding down the “Command” key. -When you upload the photos, you’ll have the option to add captions by clicking “Add Caption” just below each photo.

Uploading and sharing your photos in -Hit “OK” at the bottom-right of the window to create the album. -Once you’ve created the album, you can access it by clicking on “My Photos”, and selecting the album you want. -Once you’re in the album, click the “Slideshow” button in the upper left to preview what the photo story will look like. -If you want to add more photos, simply click on “Add photos” when you’re inside the album. -When you’re done with it, click on the “Share” button, and include that link in your social-media pitch.

Photo assignment continued... - Crop your 5 photos to be 500 pixels by 350 pixels wide. - Color correct and sharpen them. - Upload them to a photo-sharing website. - Use the tool for whichever website you choose to create a slideshow, with complete cutlines. - Submit pitches with links to assignment via social media.