Color and Images. Color The natural colors we see and the colors we see on computer monitors are different. -natural -monitor.

Slides:

Advertisements

Similar presentations

Introduction to Computer Graphics Raster Vs. Vector COMMUNICATION TECHNOLOGY.

Advertisements

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.

2.01 Understand Digital Raster Graphics

Guilford County SciVis V106.01

V Obtained from a Guildford County workshop-Summer, 2014.

Introduction to Computer Graphics Raster Vs. Vector TGJ 2OI St. Christopher C.S.S. 4 Introduction to Computer Graphics.ppt.

Dr Jimmy Lam CAD for Fashion and Textiles

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)

Images and the Web web graphics. web graphics: constraints Due to the constraints imposed by varying degrees of Internet bandwidth, designing images for.

Faculty of Sciences and Social Sciences HOPE Website Development Graphics Stewart Blakeway FML 213

File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.

THE COLORS OF LIGHT RED, GREEN and BLUE

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.

1 Perception, Illusion and VR HNRS 299, Spring 2008 Lecture 14 Introduction to Computer Graphics.

8 Using Web Graphics Section 8.1 Identify types of graphics Identify and compare graphic formats Describe compression schemes Section 8.2 Identify image.

1 Ethics of Computing MONT 113G, Spring 2012 Session 10 HTML Tables Graphics on the Web.

Section 8.1 Create a custom theme Design a color scheme Use shared borders Section 8.2 Identify types of graphics Identify and compare graphic formats.

File Formats Different applications (programs) store data in different formats. Applications support some file formats and not others. Open…, Save…, Save.

10 | Graphics COM 366 Web Design & Production. Native file format –Format native to software program –psd > PhotoShop default Preserves layers –Use “Save.

Web Graphics. Colours and Display Graphics and Modems 28.8kbps = 3.6 KB per second 36 KB takes 10 seconds to load. Pixels and color.

Graphic Format Factors

Unit 1: Task 1 By Abbie Llewellyn. Vector Graphic Software (Corel Draw) Computer graphics can be classified into two different categories: raster graphics.

Color and Images. Color The natural colors we see and the colors we see on computer monitors are different. CMYK -natural RGB -monitor.

Things to Remember When working with digital images.

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.

File Types. Terms Multimedia- the integration of text, sound, video and/or animation into a document Letters, brochures, newsletters, web pages or presentations.

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

Glencoe Introduction to Web Design Chapter 8 Web Graphics 1 A bitmap file format that is used by scanners and graphics programs for use in print.

Introduction to Images & Graphics JMA260. Objectives Images introduction Photoshop.

21 st Century Technology. Painting Uses Pixels Quality of image Changes Drawing Uses Vectors or Lines Quality of Image Does NOT Change.

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 Investigate graphic image design.

Graphic Format Factors

Section 8.1 Section 8.2 Create a custom theme Design a color scheme

2.01 Understand Digital Raster Graphics

2.01 Understand Digital Raster Graphics

Digital Imaging 101 Ann Ware.

Graphics 1 Graphics 2 Color 2 I Spy 1pt 1 pt 1 pt 1pt 1 pt 2 pt 2 pt

Graphic Format Factors

2.01 Understand Digital Raster Graphics

Introduction to raster graphics

Sci Vis I Exam Review Unit 6 File Formats.

Introduction To Photo Editing SHIELA MAE A. AQUINO SRNHS.

2.01 Investigate graphic image design.

A computer display is made up of small squares, called pixels.

1.01 Investigate graphic types and file formats.

Information Technologies Anselm Spoerri PhD (MIT)

Web Design and Development

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

Graphic Format Factors

Graphic Format Factors

2.01 Investigate graphic image design.

2.01 Understand Digital Raster Graphics

2.01 Investigate graphic image design.

Graphic Format Factors

2.01 Investigate graphic image design.

Graphic Format Factors

Color and Images.

2.01 Investigate graphic image design.

2.01 Investigate graphic image design.

Graphic Format Factors

Graphic Format Factors

2.01 Investigate graphic image design.

2.01 Investigate graphic image design.

Graphic Format Factors

Presentation transcript:

Color and Images

Color The natural colors we see and the colors we see on computer monitors are different. ______ -natural ______ -monitor

Color - CMYK  C____, M______, Y______, _______K  Four color process  Reflective color- light from sun (or bulb) hits an object & color is reflected to our eyes  ____________________

Color - RGB  “Monitor” color  R____, G_____, B_____  TV, video, computer monitors  Straight from light source; not reflective  “RGB values” = intensity of colors  _________________ code- 6 numbers

RGB Values Color - Netscape Composer

Color - Dreamweaver Hexadecimal Code

Paint program: You can edit individual pixels Draw program: You can easily resize, insert text and use layers  Bitmapped (pixel-based, _______, raster, Photoshop)  Vector (math- based, object- oriented, draw, Illustrator)

Images - File format What we will use on our webpages .______- we say jay-peg .______

Images- JPEG  Joint Photographic Experts Group  Cross platform  Compressed (lossy - data removed)  Maximum of 16.7 million colors  Cannot be transparent, interlaced or _______________  __________, images with subtle color changes, _________, lighting, etc.

Images -GIF  Graphic Interchange Format  Cross platform  Compressed (lossless - no data removed)  Indexed color -maximum of 256 colors  Can be transparent, interlaced and ________________  Simple illustrations, ______, cartoons

File size vs. Picture size  File Size-how much _____________ is used by the file ex. 30kb  Picture Size-the _________ of the image ex. 150 pixels wide  Both important for ________ of download  Resize and/or change resolution

Accessibility  ____________ labels -text that will show as image is downloading or in place of images

“Web-ified” Images  Goal is to get maximum ____________ for minimum ______________  Make sure your image is on ___________ otherwise your link will not work  Do NOT ________ or _______ your image once you have placed it on your web page.