Working with Images John Frost Director of Education.

Slides:



Advertisements
Similar presentations
Raster Graphics 2.01 Investigate graphic image design.
Advertisements

Web Design Vocab 3 PNG, JPG, GIF, MP3, MPEG.
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.
Multimedia for the Web: Creating Digital Excitement Multimedia Element -- Graphics.
2.01 Understand Digital Raster Graphics
Graphics and Animation Chapter 8. 8 Graphics in Multimedia Graphics are an element that virtually all multimedia applications include.
Information Technology Services North Dakota State University Lorna Olsen Get the Best Digital Images Possible What’s it all about anyway?
Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services 224 B Computer Building University Park, PA 16802
Web Design, 4 th Edition 5 Typography and Images.
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 Bellwork Edmodo – log on! Quiz? Take it if you need to! Policies and Procedures Powerpoint in Shared Folder! Get to Know.
BASIC HTML TUTORIAL Amber Brady. HTML tags are keywords surrounded by angle brackets like HTML tags normally come in pairs like and The first tag in a.
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)
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.
All About File Formats Mr. Butler John Jay High School Department of Technology.
8 Using Web Graphics Section 8.1 Identify types of graphics Identify and compare graphic formats Describe compression schemes Section 8.2 Identify image.
+ 5 Things you need to know about images* *Images for the web.
Computer Images Can store color info about each pixel, but makes file BIG Compression for Web 15.
File Formats Different applications (programs) store data in different formats. Applications support some file formats and not others. Open…, Save…, Save.
PowerPoint: Images Randy Graff UF HSC IT Center
File Formats and Vector Graphics. File Types Images and data are stored in files. Each software application uses different native file types and file.
Bitmap Graphics. Bitmap Basics Bitmap Graphic Bitmap Graphic Paint Software Paint Software.
Multimedia File FormatsGraphics JPG, GIF, TIF, PSD, WMF, BMP, PNG, RAW.
Graphics & Images What File Format Do I Use?. Graphics & Images …..are visual images presented on some form of media (drawings, print, web, digital video)
Multimedia. What is a graphic?  A graphic can be a: Chart Drawing Painting Photograph Logo Navigation button Diagram.
A BCDE.
Using the Sony DSC-P52 Camera Sunday, December 06, 2015.
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.
FILE TYPES FOR WEB DESIGN 1 HOW SHOULD I SAVE?. GRAPHICS INTERCHANGE FORMAT (GIF) Best used for flat-color, sharp-edged art or text Clip art, logos Compression.
Mirjana Devetakovic, M.Sc. CAAD - Images Beograd, 2011.
Raster Graphics 2.01 Investigate graphic image design.
Graphic definitions Summary of Chapter 10 of the Non-designer’s web book by Robin Williams and John Tollet. Pages ( ) Miss Mary Victor.
Editing Images for the Web. Optimization/Compression Graphics optimization is important for fast web page display.
© 2011 Delmar, Cengage Learning Chapter 4 Adding Images.
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.
Digital File Formats By Ali Aslam. JPEG JPEG Stands for Joint Photographic Experts Group. JPEG uses a lossy compression routine. Lossy compression means.
Image File Formats Which one is right for me?. The Only Three Image Formats Your Will Ever Need: Names Jpg “Joint Photographic Experts Group” Png “Portable.
Photoshop Basics: Extended Instructor: Vicki Weidler Assistant: Joaquin Obieta.
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.
Understanding Images. Pixels pixels Every image is made up of very small squares called pixels, and each pixel represents a color or shade. Pixels within.
2.01 Understand Digital Raster Graphics
2.01 Understand Digital Raster Graphics
Exploring Computer Science - Lesson 3-4
Exploring Computer Science - Lesson 3-4
2.01 Understand Digital Raster Graphics
Introduction to raster graphics
Image Formats.
1.01 Investigate graphic types and file formats.
Picture Reduction & Zip Files
“Common Pitfalls with Figures and Legends”
File Formats.
2.01 Investigate graphic image design.
JPG vs GIF vs PNG What is the difference?
Exploring Computer Science - Lesson 3-4
A computer display is made up of small squares, called pixels.
Graphics and Animation
1.01 Investigate graphic types and file formats.
2.01 Understand Digital Raster Graphics
Photoshop: Creating and Preparing Images for the Web
2.01 Investigate graphic image design.
2.01 Understand Digital Raster Graphics
Multimedia Graphics.
2.01 Investigate graphic image design.
Graphics and Animation
2.01 Investigate graphic image design.
Presentation transcript:

Working with Images John Frost Director of Education

Liberty Seated Collectors Club Why discuss images? More and more people are taking better photos LSCC members are writing image-rich articles in the Gobrecht Journal and E-Gobrecht – Enhances the final product – Better conveys the points the author is trying to make Articles, documents, websites are using different types of images – Photos of entire coins – High-resolution photos of details, diagnostics, etc., often through a microscope – Graphics (non-photographic) – Text with images – and more! Page 2

Liberty Seated Collectors Club Many types of image formats! Some of the most important ones to know… JPEG– Joint Photographic Experts Group GIF– Graphics Interchange Format TIFF– Tagged Image File Format PNG– Portable Network Graphics They are NOT all created equal They each have their strengths and weaknesses Page 3

Liberty Seated Collectors Club Strengths and weaknesses JPEG format Strengths – Widely-used photo format – 16+ million colors supported – Modest file size via image compression Weaknesses – Loss of detail and quality with each successive manipulation and saving – Introduction of noise in high-contrast images – Terrible for graphics GIF format Strengths – Excellent for graphics and high-contrast areas with no “noise” on manipulation – Small file size without compression Weaknesses – 256 color limit, and usually less – Useless for most photos Page 4

Liberty Seated Collectors Club Strengths and weaknesses TIFF format Strengths – Encoded with all photo or image information – 16+ million colors supported – Manipulates/edits well, without image degradation – Makes excellent working versions of images Weaknesses – Very large file size – Not normally useful as the “final” image published PNG format Strengths – Excellent for graphics and high-contrast areas with no “noise” – Supports millions of colors – Great for small images – Allows “transparency” for overlays Weaknesses – Not universally supported – Not good for large images Page 5

Liberty Seated Collectors Club Example of “noise” introduced by compression within graphics (JPEG) Page 6 JPEG and noise GIF/PNG, no noise

Liberty Seated Collectors Club Creating high-quality photos for publication (e.g., Gobrecht Journal) Most cameras take photos in JPEG format – Some allow “raw” formats, or TIFF If JPEG, save copy of original immediately in TIFF format, before you do anything Do all of your manipulating with the TIFF copy – Cropping, resizing, overlays, text and graphics You can save final copy as JPEG, but keep the TIFF! – You will likely need to make further changes  TIFF Page 7 Original Copy as Resize, rotate, Add graphics Save final Save as JPEG TIFF crop in TIFF in TIFF TIFF JPEG

Liberty Seated Collectors Club Graphics Many articles, presentations, and web pages use a combination of text, photos, and graphics Use GIF or PNG image formats for graphics and text as an image – Small size file, and no loss of detail, and no “noise” Examples: – Arrows and text – Advertisements – Buttons – LSCC Logo! Page 8

Liberty Seated Collectors Club Summary of recommendations Photos: – Convert the original JPEG photo to TIFF format before you do anything – Use the TIFF files to do all of your work, and keep both original and final TIFF files for future changes or redoing from scratch – You can always save final TIFF file as JPEG for actual final use and smaller file size Graphics and Text: – GIF or PNG format for quality, display speed, and small file size – These can be resized and worked on at will with no loss of quality A good quality article will make copious use of photos Use the right combination of image file formats Page 9

Liberty Seated Collectors Club In case you didn’t get this… Photos: – TIFF, TIFF, TIFF – Did I say “TIFF”? Graphics and Text: – GIF – PNG Page 10

Thank you for your time!