Presentation is loading. Please wait.

Presentation is loading. Please wait.

Photo Editing for PowerPoint & the Web

Published byAmy Fox Modified over 6 years ago

Similar presentations

Presentation on theme: "Photo Editing for PowerPoint & the Web"— Presentation transcript:

1 Photo Editing for PowerPoint & the Web
Instructor: Vicki Weidler Assistant: Joaquin Obieta

2 Overview Use Photoshop to correct & optimize images
Insert images & backgrounds in PowerPoint, FrontPage, & Dreamweaver Transfer files to a remote web server

3 Graphic Limitations for PowerPoint
Avoid complex graphics Use small file sizes Use appropriate graphic file formats

4 Graphic Limitations for the Web
Connection Speeds User Configurations

5 Display Considerations
Screen Sizes Colors

6

7 Cross Platform/Browser-Safe Colors
256 vs. 216 Colors Dithering Using the Color Picker

8 File Formats JPEG – Joint Photographic Experts Group
GIF – Graphics Interchange Format PNG – Portable Network Graphics

9 JPEG Best for photos or continuous tone, full-color images
Uses 16 million colors Browsers use reasonable approximations Work in RGB mode Uses lossy compression Saving (Standard, Optimized, Progressive)

10 GIF Best for solid color images (buttons, logos) Uses 256 colors
Browsers uses 216 colors Work in Indexed mode Good compression Interlaced Used for transparent backgrounds

11 PNG (8-bit) Best for line art (logos)
Compresses solid areas of color well and maintains sharp detail Generally, has better compression than GIF (10-30% smaller) If considering saving as GIF, also consider saving as PNG (8-bit) Not supported by older browsers

12 PNG (24-bit) Best for continuous-tone images
Compresses well, but can be larger than JPEGs If considering saving as JPEG, could also consider PNG (24-bit) Not supported by older browsers

13 Comparison of JPEG and PNG
JPEG vs PNG Comparison of JPEG and PNG 68K PNG 31K JPG

14 Comparison of JPEG and PNG
GIF vs PNG Comparison of JPEG and PNG 10.8K PNG-8 with 64 colors 9.5K GIF with 64 colors

15 Vector Graphic What is a database?
A collection of data organized in some way to make it more useful Examples: Phone book, library card catalog system, LIAS CAT, Training registration system When do you use a database? Large collection of data To be organized in different ways based on multiple criteria Make it more useful by breaking it into smaller subsets of information Example: Admissions Office may want to view all University Park Penn State juniors from Pittsburgh 3 Types 1) Flat File – spreadsheet (show example) Relational Stores info in tables Tables can be joined many different ways using a primary key Benefits over flat files: Increases efficiency Reduces redundancy/duplications Improved performance 3) Object-Oriented Uses Java, C++, etc. Create different components in the system Once created, re-use, extend and modify the components

16 Resolution Guidelines
Monitor or Browser = ppi Printer = dpi = 150 ppi or less

17 Summary Use Photoshop to correct & optimize images
Insert images & backgrounds in PowerPoint, FrontPage, & Dreamweaver Transfer files to a remote web server

18 Conclusion Resources Questions & Answers Evaluations Thank You!!!

Download ppt "Photo Editing for PowerPoint & the Web"

Similar presentations

Graphics on the Web. Common Image File Types As you may know, the most widely supported web image graphic formats are GIF and JPEG. So the question is.

Graphics on the Web. Common Image File Types As you may know, the most widely supported web image graphic formats are GIF and JPEG. So the question is.
Web Design Vocab 3 PNG, JPG, GIF, MP3, MPEG.

Web Design Vocab 3 PNG, JPG, GIF, MP3, MPEG.
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.

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.
Images.

Images.
Chapter 4 Adding Images. Inserting and Aligning Images Using CSS When you choose graphics to add to a web page, it’s important to use graphic files in.

Chapter 4 Adding Images. Inserting and Aligning Images Using CSS When you choose graphics to add to a web page, it’s important to use graphic files in.
Graphics in the web Digital Media: Communication and Design. 06.03.2007.

Graphics in the web Digital Media: Communication and Design
Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services 224 B Computer Building University Park, PA 16802

Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services 224 B Computer Building University Park, PA 16802
Russell Taylor Week 3. Image File Formats - TIF, JPG, PNG, GIF - which to use? The three most common and important image file formats for for printing,

Russell Taylor Week 3. Image File Formats - TIF, JPG, PNG, GIF - which to use? The three most common and important image file formats for for printing,
Graphics Ms. Brewer Spring 2013. Bellwork Edmodo – log on! Quiz? Take it if you need to! Policies and Procedures Powerpoint in Shared Folder! Get to Know.

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.
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.

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.
1 Creating Web Graphics Outline 2.1 Graphics Types 2.2 Vector Graphics 2.3Bitmapped Graphics 2.4Graphics for the Web 2.5 GIF (Graphics Interchange Format)

1 Creating Web Graphics Outline 2.1 Graphics Types 2.2 Vector Graphics 2.3Bitmapped Graphics 2.4Graphics for the Web 2.5 GIF (Graphics Interchange Format)
GRAPHICS/IMAGES INFSCI 1052. Source: Learning Web Design by Jennifer Niederst RobbinsJennifer Niederst Robbins Creating Images:  Scanning  Be aware.

GRAPHICS/IMAGES INFSCI Source: Learning Web Design by Jennifer Niederst RobbinsJennifer Niederst Robbins Creating Images:  Scanning  Be aware.
File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.

File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.
Image Storage Bitmapped Graphics – in which an image is represented as a collection of dots Vector Graphics – in which an image is represented as a set.

Image Storage Bitmapped Graphics – in which an image is represented as a collection of dots Vector Graphics – in which an image is represented as a set.
Presentation Design: Graphics. More About Color “Bit depth” of colors -- This is based on the smallest unit of information that a computer understands.

Presentation Design: Graphics. More About Color “Bit depth” of colors -- This is based on the smallest unit of information that a computer understands.
Web Image Basics Comp 140 December 2. Vector Graphics Can be repositioned or resized – Will not diminish output quality Typically stored in AI, EPS, PICT.

Web Image Basics Comp 140 December 2. Vector Graphics Can be repositioned or resized – Will not diminish output quality Typically stored in AI, EPS, PICT.
Raster Graphics. An image is considered to be made up of small picture elements (pixels). Constructing a raster image requires setting the color of each.

Raster Graphics. An image is considered to be made up of small picture elements (pixels). Constructing a raster image requires setting the color of each.
Web Design Basics.

Web Design Basics.
File Formats and Vector Graphics. File Types Images and data are stored in files. Each software application uses different native file types and file.

File Formats and Vector Graphics. File Types Images and data are stored in files. Each software application uses different native file types and file.
Types of Graphics  Vector Individual scalable objects defined by mathematical equations  Bitmap Pixels (tiny, single-colored square) in a grid Most.

Types of Graphics  Vector Individual scalable objects defined by mathematical equations  Bitmap Pixels (tiny, single-colored square) in a grid Most.

Similar presentations

Ads by Google