Color and Images.

Slides:



Advertisements
Similar presentations
Introduction to Computer Graphics Raster Vs. Vector COMMUNICATION TECHNOLOGY.
Advertisements

Multimedia Mr. Sanchez.
L.Ghadah R. Hadba CT1514-L1.  Computer Graphics :refers to processing of creating a new image from Geometry, Lighting parameters, Materials and Textures.Using.
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.
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
Introduction to Graphic Arts Technology PRINT Versus WEB.
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.
Digital Images Chapter 8, Exploring the Digital Domain.
THE COLORS OF LIGHT RED, GREEN and BLUE
07: Color in Interactive Digital Media
Getting the Basics Graphics for the Web McIntyre, Period 2 Kellogg, Period 5.
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.
Basic Knowledge of Web creation. Computer graphic knowledge Graphic file has 2 types Raster Graphic A bitmap or raster image are comprised of pixels in.
Foundations of Web Design I Photoshop CS5 Michael Daniel
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.
44212: Web-site Development Optimising Images for Web-pages Ian Perry Room:C49 Extension:7287
ADOBE PHOTOSHOP VECTOR VS RASTER. Pixel A pixel is the fundamental unit of an image in Photoshop. It is a small square block of color. An image often.
10 | Graphics COM 366 Web Design & Production. Native file format –Format native to software program –psd > PhotoShop default Preserves layers –Use “Save.
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.
A BCDE.
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.
Color and Images. Color The natural colors we see and the colors we see on computer monitors are different. ______ -natural ______ -monitor.
Graphics Concepts Presentation
The Web. Web Servers and File Transfer Protocol (FTP)
Vocabulary Worksheet Answers
Image Editing Vocabulary Words Pioneer Library System Norman Public Library Nancy Rimassa, Trainer Thanks to Wikipedia ( help.
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.
Graphic Format Factors
BITMAPPED IMAGES & VECTOR DRAWN GRAPHICS
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 MEDIA FOUNDATIONS
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
Digital Photo editing with Photoshop
Image Formats.
Basic Knowledge of Web creation
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.
Graphics Basic Concepts.
2.01 Understand Digital Raster Graphics
MED 2001 Advanced Media Production
Graphic Format Factors
2.01 Investigate graphic image design.
2.01 Understand Digital Raster Graphics
Graphic Format Factors
Graphic Format Factors
Multimedia System Image
timo. fi (59003) www. biocenter
2.01 Investigate graphic image design.
Graphic Format Factors
Graphic Format Factors
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 ____________________ *CYAN, MAGENTA, YELLOW, BLACK *PRINT DOCUMENTS Up to 331 dots of color per inch! Large dots on Bill boards

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 *RED, GREEN, AND BLUE *HEXIDECIMAL CODE VALUES - 1-100 OR HEXIDECIMAL

Color - Netscape Composer RGB Values Netscape Composer - used to make web pages (in class)

Color - Dreamweaver Hexadecimal Code

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

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

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. *ANIMATED PHOTOS, DEPTH .JPG are good for shadows, shading,

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 Clip art, cartoons, animation *ANIMATED LOGOS Huge difference in no. of colors available (compared to .JPG)

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 DISK SPACE DIMENSIONS SPEED Website: 30kb or less so it doesn’t take as long for pics to download on a site. Photo Shop can resize/change resolution of picture - resolution changes the file size but not the PICTURE size

Accessibility ____________ labels -text that will show as image is downloading or in place of images ALTERNATE LABELS A sentence or a word that describes the picture. If a person cannot see the Pic, it may still be accessible.

“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. Maximum IMAGE Minimum QUALITY Make sure image is on the SERVER Do not RENAME or MOVE your image once you have placed it