Graphic definitions Summary of Chapter 10 of the Non-designer’s web book by Robin Williams and John Tollet. Pages (172-179) Miss Mary Victor.

Slides:



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

Web Design Vocab 3 PNG, JPG, GIF, MP3, MPEG.
Droddy.  “Pixel” is short for two words: Picture and Element. Pixels (tiny squares) combine to form the image the human eye perceives Too small for the.
Adobe Flash CS4 – Illustrated Unit E: Optimizing and Publishing a Movie.
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.
Nice Calm Scene. (You’ll need it.). Skills Getting files off of the camera or scanner Getting files off of the camera or scanner Archiving Archiving Choosing.
2.01 Understand Digital Raster Graphics
Ann Ware Digital Imaging 101. Digital Image Categories BITMAPVECTOR A bitmap is an image created with pixels (small squares of color) The number of pixels.
Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services 224 B Computer Building University Park, PA 16802
File Formats By Jack Turner. Raster (Bitmap) Raster or bitmap is a dot matrix data structure, containing columns of dots and rows, of a graphics image.
File Types, Sizes & Dots Per Inch (dpi) Best practices applied to Photoshop file formats when creating media-specific documents. Bit Depth is the number.
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.
Internet as a resource tutorial – part steps, 3 different actions 1. Search content 2. Use Text 3. Use Images.
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.
Digital Imaging Utah State University Extension Eric Hawley.
Module Code: CU0001NI Technical Information on Digital Images Week -2.
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.
Presentation Design: Graphics. More About Color “Bit depth” of colors -- This is based on the smallest unit of information that a computer understands.
XHTML Images. Images are important Purpose: to enhance your web site. Add only when they complement or add additional impact to your message.
SOFTWARE TYPES Word processing Page layout Paint Draw.
Web Design Basics.
10 | Graphics COM 366 Web Design & Production. Native file format –Format native to software program –psd > PhotoShop default Preserves layers –Use “Save.
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.
Multimedia File FormatsGraphics JPG, GIF, TIF, PSD, WMF, BMP, PNG, RAW.
Digital Imaging 101 Ann Ware. Digital Image Categories BITMAP  A vector is created by using a series of mathematically defined lines and curves rather.
Digital Imaging 101 Ann Ware
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,
Color and Images. Color The natural colors we see and the colors we see on computer monitors are different. CMYK -natural RGB -monitor.
Using the Sony DSC-P52 Camera Sunday, December 06, 2015.
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.
Raster Graphics 2.01 Investigate graphic image design.
File Types. Terms Multimedia- the integration of text, sound, video and/or animation into a document Letters, brochures, newsletters, web pages or presentations.
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.
Color and Images. Color The natural colors we see and the colors we see on computer monitors are different. ______ -natural ______ -monitor.
Image File Formats. What is an Image File Format? Image file formats are standard way of organizing and storing of image files. Image files are composed.
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.
Digital File Formats By Ali Aslam. JPEG JPEG Stands for Joint Photographic Experts Group. JPEG uses a lossy compression routine. Lossy compression means.
HTTP transaction with Graphics HTML file + two graphics files.
Part 1 File Formats Definition: A file format is a way to write the code of information for storage of an electronic file on a computer. Different software.
13 June – Session : Graphics Different types of Graphics for the web Features of image editing software Good practice for image editing.
2.01 Understand Digital Raster Graphics
2.01 Understand Digital Raster Graphics
Digital Imaging 101 Ann Ware.
Chapter 3 Image Files © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,
Web Graphics 101 Web Image File Formats Image Optimization
2.01 Understand Digital Raster Graphics
Introduction to raster graphics
Digital Photo editing with Photoshop
Image Formats.
2.01 Investigate graphic image design.
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.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
A computer display is made up of small squares, called pixels.
1.01 Investigate graphic types and file formats.
Graphics Basic Concepts.
2.01 Understand Digital Raster Graphics
Terms 1 Terms 2 Terms 3 Terms 4 Terms 5 1pt 1 pt 1 pt 1pt 1 pt 2 pt
Photoshop: Creating and Preparing Images for the Web
2.01 Investigate graphic image design.
2.01 Understand Digital Raster Graphics
Color and Images.
2.01 Investigate graphic image design.
2.01 Investigate graphic image design.
Presentation transcript:

Graphic definitions Summary of Chapter 10 of the Non-designer’s web book by Robin Williams and John Tollet. Pages ( ) Miss Mary Victor

File Formats File format is the type of file. You can find out the type by the extension. For example.gif, jpg and png are extensions for image type files,.mov is for movie and.html is a website. We shall focus on different image formats. but before that you need to know..

Native file format is the format native to or natural to the program, for instance when you save in Microsoft word the program automatically saves the file as a word document (.doc, docx) that is the native file to the program. Sometimes you have the option of saving the file in more than one format.

Graphic File Formats Vector images Based on mathematical formulas. The application has the word “draw” or “illustrate” in the name. ex. Illustrator. Pixels images Based on pixels (dots on a screen) The application usually has the word “paint” or “photo” in the name ex. paint brush & photoshop There are two kinds of graphic files Graphics on the web are pixel based.

GIF Images pronounced “gif” not “jif”. Developed by CompuServe. Stands for Graphic Interchange Format.

Gifs Properties 1 They are cross platform :work on any computer. They are compressed (Small in size) for ex. Tiff image 2*2 could be 900K while Gif of same dimension is 5K. The small in size helps in fast file transfer on the internet.

Gif properties 2 Animation. The only format with which you can create moving pictures is GIF. Transparency : images shows through the background. interlacing: allows for layers.

GIF Color Lossless compression uses index color : a maximum of 256 colors

GiF is Best for logos, simple images or cartoons

JPEGs pronounced “jay peg”. Stands for Joint Photographic Experts Group.

JPEG Properties Cross platform: work on many computers. Does not allow for Transparency thus all files are rectangular in shape. Not interlaced. No layers. Thus you have to wait for image to work its way down slowly.

JPEG Color up to 16.7 Million color! Hence they are better in photographs, watercolor images, pencil or charcoal drawings.

JPEG is Best for? photographs & images with Details: depth, lightening effect and graduations of colors and tones.

PNGs pronounced “Ping” stands for Portable Network Graphics

PNG Properties Alpha level:It has 256 LEVELS of transparency. Interlaced: So you see an image immediately that gradually loads in detail Gamma level: PNG is smart enough to have a property (the gamma) that can detect screen type and adjust brightness accordingly!

PNG Colors Can have 256 colors or 16.7 Million or greyscale !!

Point of Comparison GIFJPEGPNG Stands for Graphical Interchange Format Joint Photographic Expert Group Portable Network Graphics Animation ✔✖✖ Interlacing ✔✖✔ Transparency ✔✖✔ 256 levels Gamma ✖✖✔ Color 256 Colors16.7 Million colors 256, or 16.7 Million or greyscale Best for? Logos, text, simple images, cartoons Digital photographs with details (rectangular) Summary of Main points