THE COLORS OF LIGHT RED, GREEN and BLUE

Slides:



Advertisements
Similar presentations
The Web Wizards Guide to HTML Chapter Five Working with Images.
Advertisements

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.
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.
Madeleine Wright Peter Wentworth. » On your screen, or with light beams, colours are additive. » Each pixel is a mixture of Red, Green and Blue, the additive.
Raster graphics. Colour depth 01 1 bit pr pixel = 2 combinations (2 1 ): 2 bits pr pixel = 4 combinations (2 2 ): bits pr pixel = 16 combinations(2.
Tutorial 3 Designing a Web Page.
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.
Graphics in the web Digital Media: Communication and Design
Part A Multimedia Production Rico Yu. Part A Multimedia Production Ch.1 Text Ch.2 Graphics Ch.3 Sound Ch.4 Animations Ch.5 Video.
Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative.
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.
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)
WEB GRAPHICS. The Pixel Computer displays are comprised of rows and columns of pixels. Pixels are indivisible. Some common screen resolutions are:, 600.
Color Names All standards-compliant browsers should handle these color names These color names can be used with the CSS properties of color and background-color.
Images and the Web web graphics. web graphics: constraints Due to the constraints imposed by varying degrees of Internet bandwidth, designing images for.
1 Ethics of Computing MONT 113G, Spring 2012 Session 11 Graphics on the Web Limits of Computer Science.
File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.
Colors, Images, & Image Maps. Working with Color Colors are defined in terms of RGB Triplet –Red, Green, Blue –0 to 255 in intensity –(00, 00, 00) is.
Digital Images Chapter 8, Exploring the Digital Domain.
Creating Web Documents: Images, files, etc. Web graphics Paint Shop Pro for conversions File management, Ws-ftp demonstration (Return to HTML next week)
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.
Lesson 13 – Color and Typography. 2 Objectives Discuss basic color theory. Understand the color wheel. Understand how color is presented on a computer.
Digital Photography February 8, aphytips/composition.htm 2 The Rules of Composition Rule of Thirds Simplicity.
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.
Copyright © 2003 Pearson Education, Inc. Slide 4-1 Created by, Stephanie Ludi, Rochester Institute of Technology—NY Basic Web Page Construction Graphics.
1 Perception, Illusion and VR HNRS 299, Spring 2008 Lecture 14 Introduction to Computer Graphics.
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.
1 Web Developer Foundations: Using XHTML Chapter 4 Key Concepts.
1 Ethics of Computing MONT 113G, Spring 2012 Session 10 HTML Tables Graphics on the Web.
Computer Images Can store color info about each pixel, but makes file BIG Compression for Web 15.
GRAPHIC DESIGN – PHOTOSHOP AND FLASH Instructor: Qumber Hussain Start: 24 Aug 2009 End: 28 Sept 2009 Days/Time: Mon & Wed 1400 – AUGUST 2009 –
44212: Web-site Development Optimising Images for Web-pages Ian Perry Room:C49 Extension:7287
Nov 111 Example Program DemoMouseInk.java. Nov 112 Example Program DemoMouseUnistrokes.java.
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.
PowerPoint: Images Randy Graff UF HSC IT Center
Types of Graphics  Vector Individual scalable objects defined by mathematical equations  Bitmap Pixels (tiny, single-colored square) in a grid Most.
Graphic Format Factors
Graphics on the Web How much do you want to know?? Terry Griffin.
Module 4- Build a Game Look at Me Mod 4 Lesson 3 Graphics.
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.
Color and Images. Color The natural colors we see and the colors we see on computer monitors are different. ______ -natural ______ -monitor.
Digital Images are represented by manipulating this…
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 TWO Electronic Color & RGB values 1. Electronic Color Computer Monitors: Use light in 3 colors to create images on the screen Monitors use RED, GREEN,
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.
Scanner Scanner Introduction: Scanner is an input device. It reads the graphical images or line art or text from the source and converts.
Module 4- Build a Game Look at Me Mod 4 Lesson 3 Graphics.
Basic Web Publishing M. Scott Gartner 7/15/98.
2.01 Understand Digital Raster Graphics
2.01 Understand Digital Raster Graphics
CNIT 131 Graphics.
2.01 Understand Digital Raster Graphics
How to Convert Pictures into Numbers
Computer Graphics Different Images File.
1.01 Investigate graphic types and file formats.
Raster Images CPSC 1030.
1.01 Investigate graphic types and file formats.
Web Development & Design Foundations with HTML5 7th Edition
Web Design and Development
2.01 Understand Digital Raster Graphics
Photoshop: Creating and Preparing Images for the Web
2.01 Understand Digital Raster Graphics
Web Programming– UFCFB Lecture 7
Color and Images.
Presentation transcript:

THE COLORS OF LIGHT RED, GREEN and BLUE Don’t think of red, green and blue as primary colors – to a computer, they represent light. Placing one light (color) on top of another creates white, not black – black is the absence of light. Red, green and blue are ADDITIVE COLORS.

COLOR CODING There are five color options from which to choose: Background Font Links Active Links Visited Links All are created by using a combination of six numbers or letters: 000000 (black) up to FFFFFF (white). There are 216 browser-safe color combinations.

CODING WITH HTML CODE Background <BGCOLOR=“#FFFFFF”> Font <TEXT=“#000000”> Links <LINK=“#6666FF”> Active Links <ALINK=“#FF0000”> Visited Links <VLINK=“#993399”> http://htmlgoodies.earthweb.com/tutors/non_dithering_colors.html

BIT (COLOR) DEPTH Bit depth refers to how many colors can reside in an image. 8 bit = 256 colors 16 bit = 64,000 colors 24 bit = 16.7 million 32 bit = Wow! The amount of color you can view depends upon the size of your browser. Less powerful browsers compensate for large graphics by DITHERING (fooling the eye).

GIF or JPG? There are two basic photo formats for the Web: GIF (Graphic Interchange Format) Uses lossless compression JPG (Joint Photographic Experts Group) Uses lossy compression They are NOT interchangeable. GIF is for line art (cartoons, drawings, etc.) Transparent images Animation JPG is for photographs