Data Representation From 0s and 1s to images CPSC 101

Size: px
Start display at page:

Download "Data Representation From 0s and 1s to images CPSC 101"

Transcription

1 Data Representation From 0s and 1s to images CPSC 101

2 Learning Goals After the Data Representation: Images unit, you will be able to: Recognize and translate between binary and decimal numbers Define bit, byte, word Explain how to represent an image as a grid of pixels ( raster graphics ) Define font, glyph and character set, and explain how they produce text Define the terms pixel and raster graphics Construct or recognize colours in the hexadecimal form used in HTML pages, given a chart to convert between hexadecimal and decimal numbers Explain how to represent an image as a list of drawing commands ( vector graphics ) Compare and contrast the suitability of raster and vector representations for different image representation needs Describe lossless and lossy compression, their relative advantages/disadvantages and give examples of each.

3 The Decimal system We are used to representing numerical information using the decimal system in the tens place 2 in the hundreds place 8 in the ones place 2* * *10 0 = We use the digits 0..9 to represent all numbers

4 The binary system With computers, we are limited to representing numbers with the binary system *2 7 0*2 0 1*2 6 1*2 5 1*2 4 1*2 3 0*2 2 0*2 1 We use the digits 0 and 1 to represent all numbers =248

5 Binary system terminology A single digit (i.e. a 0 or a 1) is called a bit In a computer, a bit is an electrical signal that is either on or off We string 8 of these together and call it a byte A byte can represent 256 different things (i.e. 256 numbers, or 256 letters) You string bytes together to get a word If you have an 8-bit architecture, then a word is a single byte In a 32-bit system, words comprise 4 bytes, etc. A word can contain a computer instruction, a storage address or application data, etc.

6 Question Convert 58 to an 8-bit binary number a) b) c) d)

7 Question Convert to decimal a) 180 b) 90 c) 80 d) 73

8 Representing Characters All data in a computer is stored in binary (ie, 1s and 0s) How can we get text of of 1s and 0s?

9 Character Sets ASCII ( ASK-ee ) -- American Standard Code for Information Interchange Sequences of 7 bits represents 128 characters 32 non-printable characters 95 printable characters (32 to 126) We can convert from bit sequence to character (letter) using a chart Do you notice anything odd? Can we represent all languages with ASCII?

10

11 Character Sets Unicode uses sequences of 32 bits can support nearly 100,000 characters, including over 70,000 ideograms this is the industry standard Unicode is supported in HTML to use a Unicode character your document, first type &# then your Unicode number (you would look up the number in a Unicode chart) e.g. &#0025 produces the percent sign

12 Text files These characters (ASCII or Unicode) are then stored in files Can be viewed/modified using a text editor (e.g. Notepad)

13 Fonts There are many ways to actually display a character We do this by mapping a character to an abstract glyph A glyph is what the character ends up looking like on the screen A set of glyphs, grouped according (usually!) to design, size, etc, as well as the mapping for how to translate between characters and glyphs is called a font

14 Fonts There are two general classes of fonts: Serif fonts have little lines at the end of the character e.g. Times New Roman Sans-serif fonts do not e.g. Courier

15 Representing Images If everything in a computer is just 0s and 1s, then how do we represent images? A numerical representation is a good way to faithfully transmit an image. Text and music have had abstract symbolic notational systems for thousands of years; the visual arts have just achieved such a system for the first time - Anne Morgan Spalter

16 Transmitting Images

17 Raster Representation We cannot transmit images as only numbers until we agree on a data representation scheme. Let s try this one: Give the height and width of the image as numbers For each block in the image, send a 0 if it s black and a 1 if it s white Let s use exactly three digits for height and width. We call the blocks pixels, short for picture elements.

18 Transmitting Images

19 Shades of Grey How should we represent an image that s not just black and white as numbers?

20 Full Colour How about an image in full colour?

21 Common Raster file formats (Also called bitmap) GIF: graphics interchange format JPEG: joint photographic experts group PNG: portable network graphic BMP: Windows bitmap TIFF: tagged image file format

22 Problems with Raster graphics Do not scale well that is when resized, you often see a visible reduction in quality Such distorted images are referred to as pixelated

23 Scaling with Raster representation original scaled by 400%

24 Scaling with Raster representation original scaled by 800%

25 Is Raster Representation a Good Match for These Devices? Eastman Static Cutting Table Model M9000 From

26 Image Representation for a Plotter How would you use numbers to represent an image on a plotter? How about to represent the A we ve been working with?

27 Vector Representation of Images Our vector representation will be a list of sets of four numbers: x and y coordinate of the start of a line and x and y coordinate of the end of a line. So, vector graphics do not use pixels! Essentially they tell the computer to start drawing at a given point, at a particular angle, and stop drawing at a given point Real vector representations also include much more information such as the end style of a line (rounded or square), shapes, colour, transparency, etc Such graphics keep their integrity, or remain clean, regardless of the resolution

28 Common Vector File Formats SVG: scalable vector graphics EPS: encapsulated postscript PICT: Macintosh Picture WMF: Windows Media File

29 Which is Better: Raster or Vector Representation?

30 Common Uses of Raster and Vector Representations Raster is used for: representing photographs most computer displays some scientific data (like grid-based maps of wildfires ) and much more! Vector is used for: most computer models of real figures (like the models of the characters in computer animated films) most fonts (visual representations of letters and numbers) some scientific data (like elevation profiles for topographical maps) and much more!

31 Playing Tricks on the Human Vision System The human visual system has lots of weird properties

32 Image Compression Images, and many other types of data, require a lot of information to store. E.g., a 1000x1000 pixel image contains 1 million pixels. If each pixel require 8 bytes (fairly standard), each image would require 8 M to store or transmit. To deal with this, image compression techniques are used. There are two basic types of compression, lossless and lossy.

33 Lossless compression Lossless compression techniques store all the information about an image but in a potentially much smaller size. How do they do this? Well a simple example would be this. Imagine compressing the image to the right. Rather than storing each pixel, we can represent the image as: red (1-500,000), blue (500,001-1,000,000) This is a very simplified approach but there exist more sophisticated lossless compression techniques.

34 Lossy Compression Lossy Compression techniques reduce the size of an image and lose some of the original information but retain a good approximation of the original. The math behind these techniques can be extremely complex. A simple approach is to just reduce the image resolution by averaging together every group of four pixels into 1.

35 No Compression Low Compression (84% reduced) Medium Compression (92% reduced) High Compression (98% reduced)

36 Playing Tricks on a Computer Monitor One of those weird properties is that distinct stimuli that are sufficiently close together fuse into a single stimulus Computer (and TV) monitors take advantage of this by displaying small areas of red, green, and blue light close together, which our eyes mix into colour. EXPERIMENT: using an old monitor that you re not too worried about, sprinkle a few waterdrops on to magnify the RGB spots!

37 Nitty-Gritty Colour Details Computers represent colour using binary numbers, just as for everything else. A colour is broken into a red, green, and blue channel. (Why? Because it works for the human eye!) About 200 levels for each channel turns out to be enough, and we can represent exactly 256 values with 8 binary digits. So, a color is represented as three values between 0 and 255.

38 Hexadecimal Colour Representation for HTML But do you want to express colours on your web pages as: , , ? Hard to read! How about 0, 106, 255? Clearer (no red, some green, lots of blue: like this) but, less convenient for computers. Instead, we use base 16, hexadecimal : 00, 6A, FF. It s close to binary, every channel takes exactly two digits to write, and it s somewhat readable by humans. In HTML, we d write: #006AFF : 00 red, 6A green, FF blue. You should be able to answer questions like give the HTML code for a bright blue or what colour is #FF00FF?

39 JavaScript Code function colortexttogreennumber(colortext) { var greentext = colortext.substring(3,5); var greennum = parseint("0x" + greentext); return greennum; } Converts a hex color of the form #XXXXXX to the decimal value for green (Functions for red or blue would look similar.) function colornumbertotext(colornum) { var colortext = colornum.tostring(16); if (colortext.length == 1) { colortext = "0" + colortext; } return colortext; } function colornumberstotext(red, green, blue) { return "#" + colornumbertotext(red) + colornumbertotext(green) + colornumbertotext(blue); } Converts three decimal colors to the text representation that you can use in HTML. Can you see how we re exploiting the fact that every color takes two digits?

40 Learning Goals After the Image Representation unit, you will be able to: Recognize and translate between binary and decimal numbers Define bit, byte, word Explain how to represent an image as a grid of pixels ( raster graphics ) Define font, glyph and character set, and explain how they produce text Define the terms pixel and raster graphics Construct or recognize colours in the hexadecimal form used in HTML pages, given a chart to convert between hexadecimal and decimal numbers Explain how to represent an image as a list of drawing commands ( vector graphics ) Compare and contrast the suitability of raster and vector representations for different image representation needs

41 What s Next? We ve looked at two widely used data representation schemes for images. Now we know how computers can store and manipulate visual data. How have humans used those abilities to create art and explore creativity?

42 TO DO Keep working on your projects. Quiz 2 will be on March 24. If you want extra practice with JavaScript, come and see me (or one of the TAs) soon! As always, do the posted readings

Logo & Icon. Fit Together Logo (color) Transome Logo (black and white) Quick Reference Print Specifications

Logo & Icon. Fit Together Logo (color) Transome Logo (black and white) Quick Reference Print Specifications GRAPHIC USAGE GUIDE Logo & Icon The logo files on the Fit Together logos CD are separated first by color model, and then by file format. Each version is included in a small and large size marked by S or

More information

Final Study Guide Arts & Communications

Final Study Guide Arts & Communications Final Study Guide Arts & Communications Programs Used in Multimedia Developing a multimedia production requires an array of software to create, edit, and combine text, sounds, and images. Elements of Multimedia

More information

Publication Quality Graphics

Publication Quality Graphics Publication Quality Graphics Biochemistry Boot Camp 2018 Session #6 Nick Fitzkee nfitzkee@chemistry.msstate.edu Why Quality Graphics? Clarity of Presentation Sharp-looking Posters, Presentations, Papers

More information

Frequently Asked Questions about Text and Graphics

Frequently Asked Questions about Text and Graphics 1 Frequently Asked Questions about Text and Graphics 1. What is a font? A font is a set of printable or displayable text characters that are in a specific style and size. The type design for a set of fonts

More information

Elementary Computing CSC 100. M. Cheng, Computer Science

Elementary Computing CSC 100. M. Cheng, Computer Science Elementary Computing CSC 100 1 Graphics & Media Scalable Outline & Bit- mapped Fonts Binary Number Representation & Text Pixels, Colors and Resolution Sound & Digital Audio Film & Digital Video Data Compression

More information

Standard File Formats

Standard File Formats Standard File Formats Introduction:... 2 Text: TXT and RTF... 4 Grapics: BMP, GIF, JPG and PNG... 5 Audio: WAV and MP3... 8 Video: AVI and MPG... 11 Page 1 Introduction You can store many different types

More information

BEST BUDDIES DESIGN GUIDELINES. Advertising & General Applications

BEST BUDDIES DESIGN GUIDELINES. Advertising & General Applications BEST BUDDIES DESIGN GUIDELINES Advertising & General Applications 2012-2013 2 BEST BUDDiES DESiGN GUiDELiNES Advertising & General Applications DESIGN GUIDELINES AND OUR LOGO Overview These are comprehensive

More information

Introduction to Computer Science (I1100) Data Storage

Introduction to Computer Science (I1100) Data Storage Data Storage 145 Data types Data comes in different forms Data Numbers Text Audio Images Video 146 Data inside the computer All data types are transformed into a uniform representation when they are stored

More information

Image Types Vector vs. Raster

Image Types Vector vs. Raster Image Types Have you ever wondered when you should use a JPG instead of a PNG? Or maybe you are just trying to figure out which program opens an INDD? Unless you are a graphic designer by training (like

More information

HOW TO SAVE YOUR DESIGN FILES

HOW TO SAVE YOUR DESIGN FILES HOW TO SAVE YOUR DESIGN FILES READ YOUR BOOK. ART-2423 > raster > vector > holds both raster and layered o Can work in whatever color mode preferred. o Platform-specific (PC vs. Mac) and often version-specific

More information

3 Data Storage 3.1. Foundations of Computer Science Cengage Learning

3 Data Storage 3.1. Foundations of Computer Science Cengage Learning 3 Data Storage 3.1 Foundations of Computer Science Cengage Learning Objectives After studying this chapter, the student should be able to: List five different data types used in a computer. Describe how

More information

Electronic Artwork Information for Authors Glossary and definitions

Electronic Artwork Information for Authors Glossary and definitions Electronic Artwork Information for Authors Glossary and definitions Bitmap An image stored in a pixel-by-pixel fashion. Continuous tone images are stored in this format. Sometimes used to denote an image

More information

Web graphics. Introduction

Web graphics. Introduction Web graphics Introduction Role of Web Graphics Role of Web Graphics Although web designers could build a site without graphics, most users would not readily recognize a collection of bare pages as a cohesive

More information

Fonts, text, and colour on the web. Sourcing, resizing, and inserting web site images MGMT 230 LAB

Fonts, text, and colour on the web. Sourcing, resizing, and inserting web site images MGMT 230 LAB Fonts, text, and colour on the web Sourcing, resizing, and inserting web site images MGMT 230 LAB Fonts and font families Font families are used in web development rather than just the name of one font

More information

Data Storage. Slides derived from those available on the web site of the book: Computer Science: An Overview, 11 th Edition, by J.

Data Storage. Slides derived from those available on the web site of the book: Computer Science: An Overview, 11 th Edition, by J. Data Storage Slides derived from those available on the web site of the book: Computer Science: An Overview, 11 th Edition, by J. Glenn Brookshear Copyright 2012 Pearson Education, Inc. Data Storage Bits

More information

III-6Exporting Graphics (Windows)

III-6Exporting Graphics (Windows) Chapter III-6 III-6Exporting Graphics (Windows) Overview... 96 Metafile Formats... 96 BMP Format... 97 PDF Format... 97 Blurry Images in PDF... 97 Encapsulated PostScript (EPS) Format... 97 SVG Format...

More information

DIS: Design and imaging software

DIS: Design and imaging software Using IT productivity tools and applications This is the ability to use a software application designed to create, modify and layout artwork or images for display in print or on a screen (eg vector graphics

More information

color bit depth dithered

color bit depth dithered EPS The EPS (Encapsulated PostScript) format is widely accepted by the graphic arts industry for saving images that will be placed into programs such as Adobe Illustrator and QuarkXPress. It is used on

More information

Actual4Test. Actual4test - actual test exam dumps-pass for IT exams

Actual4Test.  Actual4test - actual test exam dumps-pass for IT exams Actual4Test http://www.actual4test.com Actual4test - actual test exam dumps-pass for IT exams Exam : 9A0-035 Title : Adobe Illustrator CS ACE Exam Vendors : Adobe Version : DEMO Get Latest & Valid 9A0-035

More information

1.6 Graphics Packages

1.6 Graphics Packages 1.6 Graphics Packages Graphics Graphics refers to any computer device or program that makes a computer capable of displaying and manipulating pictures. The term also refers to the images themselves. A

More information

Image coding and compression

Image coding and compression Image coding and compression Robin Strand Centre for Image Analysis Swedish University of Agricultural Sciences Uppsala University Today Information and Data Redundancy Image Quality Compression Coding

More information

Example 1: Denary = 1. Answer: Binary = (1 * 1) = 1. Example 2: Denary = 3. Answer: Binary = (1 * 1) + (2 * 1) = 3

Example 1: Denary = 1. Answer: Binary = (1 * 1) = 1. Example 2: Denary = 3. Answer: Binary = (1 * 1) + (2 * 1) = 3 1.1.1 Binary systems In mathematics and digital electronics, a binary number is a number expressed in the binary numeral system, or base-2 numeral system, which represents numeric values using two different

More information

Web Design, 5 th Edition

Web Design, 5 th Edition Typography and Images Web Design, th Edition Chapter Objectives Explain webpage typography issues Discuss effective use of webpage images Describe image file formats Discuss how to prepare web-ready images

More information

Administrative Notes February 9, 2017

Administrative Notes February 9, 2017 Administrative Notes February 9, 2017 Feb 10: Project proposal resubmission (optional) Feb 13: Art and Images reading quiz Feb 17: In the News call #2 Data Representation: Part 2 Text representation Colour

More information

Check your document s safe margin, bleeds and trim marks before uploading.

Check your document s safe margin, bleeds and trim marks before uploading. TAKE A SECOND LOOK AT YOUR DOCUMENT. A CLOSER LOOK. Check your document s safe margin, bleeds and trim marks before uploading. Please note: Business cards have been used as an example throughout the PDF

More information

255, 255, 0 0, 255, 255 XHTML:

255, 255, 0 0, 255, 255 XHTML: Colour Concepts How Colours are Displayed FIG-5.1 Have you looked closely at your television screen recently? It's in full colour, showing every colour and shade that your eye is capable of seeing. And

More information

Brand guide template. A few things to note: Remove this page. This is an example guideline for a made up company called ACME CO.

Brand guide template. A few things to note: Remove this page. This is an example guideline for a made up company called ACME CO. Brand guide template A few things to note: This is an example guideline for a made up company called ACME CO. Add your own images that capture the client s personality. text and colors based on branding.

More information

Preview from Notesale.co.uk Page 2 of 88

Preview from Notesale.co.uk Page 2 of 88 Contents About this Guide Information for Students... Be Revise-Wise How to Use this Guide to Do Well in Your Exams... Revision Checklist... 4 1 Data and Quality of Data... 5 1.1 Encoding and Storing Data...7

More information

ClipArt and Image Files

ClipArt and Image Files ClipArt and Image Files Chapter 4 Adding pictures and graphics to our document not only breaks the monotony of text it can help convey the message quickly. Objectives In this section you will learn how

More information

M4-R4: INTRODUCTION TO MULTIMEDIA (JAN 2019) DURATION: 03 Hrs

M4-R4: INTRODUCTION TO MULTIMEDIA (JAN 2019) DURATION: 03 Hrs M4-R4: INTRODUCTION TO MULTIMEDIA (JAN 2019) Max Marks: 100 DURATION: 03 Hrs M1-R4-01-19 1.3 Which of the following tag pair is used to list the text? (a) and (b) and (c)

More information

Unit 2 Digital Information. Chapter 1 Study Guide

Unit 2 Digital Information. Chapter 1 Study Guide Unit 2 Digital Information Chapter 1 Study Guide 2.5 Wrap Up Other file formats Other file formats you may have encountered or heard of include:.doc,.docx,.pdf,.mp4,.mov The file extension you often see

More information

Digital Graphics Primer

Digital Graphics Primer Vector Graphics, Raster Graphics, and Their Associated Image File Types Ed Brandt AI PSD BMP EPS GIF JPG PDF PNG SVG TIF Vector Graphics, Raster Graphics, and Their Associated Image File Types Introduction

More information

FRONTPAGE STEP BY STEP GUIDE

FRONTPAGE STEP BY STEP GUIDE IGCSE ICT SECTION 15 WEB AUTHORING FRONTPAGE STEP BY STEP GUIDE Mark Nicholls ICT lounge P a g e 1 Contents Introduction to this unit.... Page 4 How to open FrontPage..... Page 4 The FrontPage Menu Bar...Page

More information

Prentice Hall. Learning Microsoft PowerPoint , (Weixel et al.) Arkansas Multimedia Applications I - Curriculum Content Frameworks

Prentice Hall. Learning Microsoft PowerPoint , (Weixel et al.) Arkansas Multimedia Applications I - Curriculum Content Frameworks Prentice Hall Learning Microsoft PowerPoint 2007 2008, (Weixel et al.) C O R R E L A T E D T O Arkansas Multimedia s I - Curriculum Content Frameworks Arkansas Multimedia s I - Curriculum Content Frameworks

More information

CS101 Lecture 12: Image Compression. What You ll Learn Today

CS101 Lecture 12: Image Compression. What You ll Learn Today CS101 Lecture 12: Image Compression Vector Graphics Compression Techniques Aaron Stevens (azs@bu.edu) 11 October 2012 What You ll Learn Today Review: how big are image files? How can we make image files

More information

Format Type Support Thru. vector (with embedded bitmaps)

Format Type Support Thru. vector (with embedded bitmaps) 1. Overview of Graphics Support The table below summarizes the theoretical support for graphical formats within FOP. In other words, within the constraints of the limitations listed here, these formats

More information

MULTIMEDIA AND CODING

MULTIMEDIA AND CODING 07 MULTIMEDIA AND CODING WHAT MEDIA TYPES WE KNOW? TEXTS IMAGES SOUNDS MUSIC VIDEO INTERACTIVE CONTENT Games Virtual reality EXAMPLES OF MULTIMEDIA MOVIE audio + video COMPUTER GAME audio + video + interactive

More information

Advanced High Graphics

Advanced High Graphics VISUAL MEDIA FILE TYPES JPG/JPEG: (Joint photographic expert group) The JPEG is one of the most common raster file formats. It s a format often used by digital cameras as it was designed primarily for

More information

Vector Bitmap EPS Encapsulated PostScript Vector EPS EPS CDR CMX CGM DXF WMF scalable objects independent of resolution (unlimited)

Vector Bitmap EPS Encapsulated PostScript Vector EPS EPS CDR CMX CGM DXF WMF scalable objects independent of resolution (unlimited) Image File Formats There are two major graphic types; Vector and Bitmap. Bitmap images (also known as raster images) are made up of pixels on a screen. Pixels are picture elements; tiny dots of individual

More information

CS 100 Spring Lecture Notes 3/8/05 Review for Exam 2

CS 100 Spring Lecture Notes 3/8/05 Review for Exam 2 CS 100 Spring 2005 Lecture Notes 3/8/05 Review for Exam 2 The second exam is Thursday, March 10. It will cover topics from Homework 2 through Homework 4, including anything pertaining to binary representation.

More information

Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style

Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style precedence and style inheritance Understand the CSS use

More information

Designing Maps to Maximize Impact

Designing Maps to Maximize Impact Designing Maps to Maximize Impact Kim Sowder Indiana Geological Survey Workshop Indiana GIS Conference March 7, 2006 Topics to be Covered Designing for purpose and medium Layout planning and linking to

More information

Layout Basics For Non-Designers. xrocket Script, 36pt. Eeronauts, 400pt

Layout Basics For Non-Designers. xrocket Script, 36pt. Eeronauts, 400pt Layout Basics For Non-Designers xrocket Script, 36pt Eeronauts, 400pt CONTENTS Tools Making a Mockup Printer Spreads Quark Tricks Using Images Using Fonts Collecting For Output 3 4 7 10 13 17 18 4.When

More information

DTP Theory Notes. Arbroath Academy - Technology Department - National 5 Graphic Communication

DTP Theory Notes. Arbroath Academy - Technology Department - National 5 Graphic Communication DTP Theory Notes What is Desktop Publishing? Desktop Publishing (DTP) is the process of using software to create different publications, e.g, magazines, brochures, posters, booklets,newspapers. Who makes

More information

FACULTY AND STAFF COMPUTER FOOTHILL-DE ANZA. Office Graphics

FACULTY AND STAFF COMPUTER FOOTHILL-DE ANZA. Office Graphics FACULTY AND STAFF COMPUTER TRAINING @ FOOTHILL-DE ANZA Office 2001 Graphics Microsoft Clip Art Introduction Office 2001 wants to be the application that does everything, including Windows! When it comes

More information

Perfect Student Midterm Exam March 20, 2007 Student ID: 9999 Exam: 7434 CS-081/Vickery Page 1 of 5

Perfect Student Midterm Exam March 20, 2007 Student ID: 9999 Exam: 7434 CS-081/Vickery Page 1 of 5 Perfect Student Midterm Exam March 20, 2007 Student ID: 9999 Exam: 7434 CS-081/Vickery Page 1 of 5 NOTE: It is my policy to give a failing grade in the course to any student who either gives or receives

More information

Understanding file formats

Understanding file formats Understanding file formats When you save files from Elements, you need to pick a file format in the Format drop-down menu found in both the Save and Save As dialog boxes. When you choose from the different

More information

Digital Technologies Hangarau Matihiko Level 1

Digital Technologies Hangarau Matihiko Level 1 External Assessment Resource Digital Technologies Hangarau Matihiko Level 1 This resource supports external assessment against Achievement Standard 91887 (1.11) 1 Standard title: Credits: Resource title:

More information

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2) Horizontal Rule Element

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2) Horizontal Rule Element Web Development & Design Foundations with HTML5 Ninth Edition Chapter 4 Visual Elements and Graphics Learning Objectives (1 of 2) 4.1 Create and format lines and borders on web pages 4.2 Apply the image

More information

Presenta(on Tools Adobe Illustrator. November 6, 2017

Presenta(on Tools Adobe Illustrator. November 6, 2017 Presenta(on Tools Adobe Illustrator November 6, 2017 Today s Lab Adobe Illustrator on Macs in 345 Need to stagger afendance 5 students from 2 3:30 5 students from 3:30 5 Graphics SoNware Computer sonware

More information

KillTest. 半年免费更新服务

KillTest.   半年免费更新服务 KillTest 质量更高 服务更好 学习资料 http://www.killtest.cn 半年免费更新服务 Exam : 9A0-035 Title : Adobe Illustrator CS ACE Exam Version : DEMO 1 / 7 1. Which Illustrator feature allows you to export Illustrator layers to

More information

R.L. HAMMETTE & ASSOCIATES

R.L. HAMMETTE & ASSOCIATES R.L. HAMMETTE & ASSOCIATES PHONE 863-299-3901 a division of H A M M E T T E I N T E R N A T I O N A L, I N C. 1625 U.S. HWY. 17, N. PO BOX 846 EAG LE LAK E, FL 33839-0846 w w w. h a m m e t t e. c o m

More information

Colour and Number Representation. From Hex to Binary and Back. Colour and Number Representation. Colour and Number Representation

Colour and Number Representation. From Hex to Binary and Back. Colour and Number Representation. Colour and Number Representation Colour and Number Representation From Hex to Binary and Back summary: colour representation easy: replace each hexadecimal "digit" with the corresponding four binary digits using the conversion table examples:

More information

Print Services User Guide

Print Services User Guide Print Services User Guide Understanding Artwork for Print 1 Preferred Formats: Preferred formats should contain only vector-based graphics and text, and/or high-resolution images. Low resolution images

More information

Thursday, November 17, 11.

Thursday, November 17, 11. stacy.mcconnen@csus.edu File Formats & Resolution Program File Formats INDD - Indesign AI - Illustrator PSD - Photoshop FLA - Flash (working file) SWF - Flash (executable file) Image File Formats EPS GIF

More information

Adobe EXAM - 9A Adobe InDesign CS5 ACE Exam. Buy Full Product.

Adobe EXAM - 9A Adobe InDesign CS5 ACE Exam. Buy Full Product. Adobe EXAM - 9A0-142 Adobe InDesign CS5 ACE Exam Buy Full Product http://www.examskey.com/9a0-142.html Examskey Adobe 9A0-142 exam demo product is here for you to test the quality of the product. This

More information

Part III: Survey of Internet technologies

Part III: Survey of Internet technologies Part III: Survey of Internet technologies Content (e.g., HTML) kinds of objects we re moving around? References (e.g, URLs) how to talk about something not in hand? Protocols (e.g., HTTP) how do things

More information

Fundamentals of Website Development

Fundamentals of Website Development Fundamentals of Website Development CSC 2320, Fall 2015 The Department of Computer Science Chapter 4: Creating a Simple Page An introduction to (X)HTML elements and attributes A step-by-step demo for simple

More information

creating figures Research Imaging Solutions

creating figures Research Imaging Solutions Research Imaging Solutions it.med.harvard.edu creating figures a basic recipe for building scientific figures using Photoshop and PowerPoint grants journals posters presentations Research Imaging Solutions

More information

Paint/Draw Tools. Foreground color. Free-form select. Select. Eraser/Color Eraser. Fill Color. Color Picker. Magnify. Pencil. Brush.

Paint/Draw Tools. Foreground color. Free-form select. Select. Eraser/Color Eraser. Fill Color. Color Picker. Magnify. Pencil. Brush. Paint/Draw Tools There are two types of draw programs. Bitmap (Paint) Uses pixels mapped to a grid More suitable for photo-realistic images Not easily scalable loses sharpness if resized File sizes are

More information

Chapter 5 Images. Presented by Thomas Powell. Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A.

Chapter 5 Images. Presented by Thomas Powell. Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A. Chapter 5 Images Presented by Thomas Powell Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A. Powell Image Introduction Images are good for illustrating ideas showing

More information

Using Dreamweaver, Photoshop, and Fireworks: CS38: Graphics Production for the Web. Stanford University Continuing Studies CS 38

Using Dreamweaver, Photoshop, and Fireworks: CS38: Graphics Production for the Web. Stanford University Continuing Studies CS 38 Using Dreamweaver, Photoshop, and Fireworks: Graphics Production for the Web Stanford University Continuing Studies CS 38 Mark Branom markb@stanford.edu http://www.stanford.edu/people/markb/ Course Web

More information

Graphics File Formats

Graphics File Formats 1 Graphics File Formats Why have graphics file formats? What to look for when choosing a file format A sample tour of different file formats, including bitmap-based formats vector-based formats metafiles

More information

Graphic Standards Guidelines Updated November 13, 2008

Graphic Standards Guidelines Updated November 13, 2008 Graphic Standards Guidelines Updated November 13, 2008 Centreville Presbyterian Church Graphic Standards 2 Brand Communications How To Use This Manual This manual provides an easy-to-use reference to our

More information

Lesson 7 Working with Graphics

Lesson 7 Working with Graphics Lesson 7 Working with Graphics *Insert pictures from files *Insert picture from Microsoft Clip Art Collections *Resize and reposition a picture *Create and modify WordArt *Create and modify SmartArt *Create

More information

Bits and Bit Patterns

Bits and Bit Patterns Bits and Bit Patterns Bit: Binary Digit (0 or 1) Bit Patterns are used to represent information. Numbers Text characters Images Sound And others 0-1 Boolean Operations Boolean Operation: An operation that

More information

IMAGE COMPRESSION USING FOURIER TRANSFORMS

IMAGE COMPRESSION USING FOURIER TRANSFORMS IMAGE COMPRESSION USING FOURIER TRANSFORMS Kevin Cherry May 2, 2008 Math 4325 Compression is a technique for storing files in less space than would normally be required. This in general, has two major

More information

More HTML. Images and links. Tables and lists. <h1>running in the family</h1> <h2>tonight 9pm BBC One</h2>

More HTML. Images and links. Tables and lists. <h1>running in the family</h1> <h2>tonight 9pm BBC One</h2> More HTML Images and links Tables and lists running in the family tonight 9pm BBC One hurdles legend Colin Jackson traces his family tree to Jamaica in Who Do You Think You Are?

More information

MSITA WORD LESSON 7 NOTES

MSITA WORD LESSON 7 NOTES Insert Picture MSITA WORD LESSON 7 Picture: a visual representa on of something Ex. person or scene, photograph, pain ng, scanned image, line art, artwork, etc. 1. Click where you want to insert the picture.

More information

Lecture 19 Media Formats

Lecture 19 Media Formats Revision IMS2603 Information Management in Organisations Lecture 19 Media Formats Last week s lectures looked at MARC as a specific instance of complex metadata representation and at Content Management

More information

Lecture 06. Raster and Vector Data Models. Part (1) Common Data Models. Raster. Vector. Points. Points. ( x,y ) Area. Area Line.

Lecture 06. Raster and Vector Data Models. Part (1) Common Data Models. Raster. Vector. Points. Points. ( x,y ) Area. Area Line. Lecture 06 Raster and Vector Data Models Part (1) 1 Common Data Models Vector Raster Y Points Points ( x,y ) Line Area Line Area 2 X 1 3 Raster uses a grid cell structure Vector is more like a drawn map

More information

What is PowerPoint Good For? Using PowerPoint. What is PowerPoint Not So Good For? What is PowerPoint Terrible At? Modifying the Layout

What is PowerPoint Good For? Using PowerPoint. What is PowerPoint Not So Good For? What is PowerPoint Terrible At? Modifying the Layout What is PowerPoint Good For? Highlights Using PowerPoint Dynamic information some style issues Visual information What is PowerPoint Not So Good For? Textual information - Long sentences take time to read

More information

Image creation with PHP

Image creation with PHP Image creation with PHP By Kore Nordmann PHP Unconference Hamburg 25.04.08 About me Kore Nordmann Studying computer science at the University Dortmund Working for ez systems on ez components Maintainer

More information

LOGO & BRAND STANDARDS GUIDE

LOGO & BRAND STANDARDS GUIDE LOGO & BRAND STANDARDS GUIDE INTRODUCTION The SparkPost Brand Standards Guide provides key information needed to accurately and consistently produce external and internal documents and communications.

More information

CPSC 301: Computing in the Life Sciences Lecture Notes 16: Data Representation

CPSC 301: Computing in the Life Sciences Lecture Notes 16: Data Representation CPSC 301: Computing in the Life Sciences Lecture Notes 16: Data Representation George Tsiknis University of British Columbia Department of Computer Science Winter Term 2, 2015-2016 Last updated: 04/04/2016

More information

Digital Media. Daniel Fuller ITEC 2110

Digital Media. Daniel Fuller ITEC 2110 Digital Media Daniel Fuller ITEC 2110 Daily Question: Which statement is True? 5 + 5 = 10 1 + 1 = 10 F + 1 = 10 Email answer to DFullerDailyQuestion@gmail.com Subject Line: ITEC2110-26 First, some mac

More information

1/27/2013. Outline. Adding images to your site. Images and Objects INTRODUCTION TO WEB DEVELOPMENT AND HTML

1/27/2013. Outline. Adding images to your site. Images and Objects INTRODUCTION TO WEB DEVELOPMENT AND HTML Outline INTRODUCTION TO WEB DEVELOPMENT AND HTML Images and Objects: Adding images to your site Adding Objects with Using Images as Links Image Maps Exercise Lecture 05 - Spring 2013 Adding images

More information

Name: Class: Teacher:..

Name: Class: Teacher:.. Name: Class: Teacher:.. Introduction Desktop publishing (DTP) is the process of designing newspapers, magazines, books, leaflets, booklets and reports on a computer. The industry that produces these items

More information

Digital Signage Content Creation Guidelines

Digital Signage Content Creation Guidelines A NEW era of Digital Advertising 2017 Digital Signage Content Creation Guidelines DIGITAL BILLBOARD CONTENTS GUIDELINES & TIPS Introdution 01 Intro Maximize the Potential Text, graphics and backgrounds

More information

</HTML> </HEAD> </BODY> </TITLE> </I> </B> </U> </BLINK> </EM> </FONT> </FONT> </CENTER> </H1> </H2> </H3> </P> </BR> --!>

</HTML> </HEAD> </BODY> </TITLE> </I> </B> </U> </BLINK> </EM> </FONT> </FONT> </CENTER> </H1> </H2> </H3> </P> </BR> --!> HTML - hypertext mark-up language HTML is a standard hypertext language for the WWW and has several different versions. Most WWW browsers support HTML 2 and most of new versions of the browsers support

More information

HTML/XML. XHTML Authoring

HTML/XML. XHTML Authoring HTML/XML XHTML Authoring Adding Images The most commonly used graphics file formats found on the Web are GIF, JPEG and PNG. JPEG (Joint Photographic Experts Group) format is primarily used for realistic,

More information

CMPT 165 Graphics Part 2. Nov 3 rd, 2015

CMPT 165 Graphics Part 2. Nov 3 rd, 2015 CMPT 165 Graphics Part 2 Nov 3 rd, 2015 Key concepts of Unit 5-Part 1 Image resolution Pixel, bits and bytes Colour info (intensity) vs. coordinates Colour-depth Color Dithering Compression Transparency

More information

Graphic Standards Guide 2008 Version 2.0

Graphic Standards Guide 2008 Version 2.0 Graphic Standards Guide 2008 Version 2.0 Managing ULI s Institutional Brand In this manual, you will find guidelines, specifications, and formats for the application of the ULI graphic identity. It provides

More information

Flying Start AS Computer Science. September 2015

Flying Start AS Computer Science. September 2015 Flying Start AS Computer Science September 2015 Name: To your first AS Computing lesson, you will need to bring: 1. A folder with dividers An A4 ring binder with labelled A4 dividers would be ideal. The

More information

Vector- drawn: what is the meaning of " on the fly " in vector images? It means that computers draw the image as per instructions.

Vector- drawn: what is the meaning of  on the fly  in vector images? It means that computers draw the image as per instructions. Bitmaps: what is bit and map means? bit is the simplest element in the digital world. map is a two-dimensional matrix of these bits. Vector- drawn: what is the meaning of " on the fly " in vector images?

More information

New features in APLX Version 3

New features in APLX Version 3 New features in APLX Version 3 Built-in charting facility APLX Version 3 includes a built-in, very powerful, but easy-to-use facility for producing business, statistical, and scientific graphs. You can

More information

Lesson 3 Creating and Using Graphics

Lesson 3 Creating and Using Graphics Lesson What you will learn: how to delete a sprite and import a new sprite how to draw using the pen feature of Scratch how to use the pen up and pen down feature how to change the colour of the pen how

More information

Adding CSS to your HTML

Adding CSS to your HTML Adding CSS to your HTML Lecture 3 CGS 3066 Fall 2016 September 27, 2016 Making your document pretty CSS is used to add presentation to the HTML document. We have seen 3 ways of adding CSS. In this lecture,

More information

Stonelaw High School. Computing Science. BGE - Computer Systems

Stonelaw High School. Computing Science. BGE - Computer Systems Stonelaw High School Computing Science BGE - Computer Systems Contents Computer Systems... 3 Computer Systems... 3 Hardware & Software... 3 Data Representation... 3 Representing Positive Integers... 3

More information

EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE IMAGE EDITING

EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE IMAGE EDITING EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE IMAGE EDITING The European Computer Driving Licence Foundation Ltd. Portview House Thorncastle Street Dublin 4 Ireland Tel: +

More information

creating figures Research Imaging Solutions

creating figures Research Imaging Solutions Research Imaging Solutions goo.gl/yp8j3c creating figures a basic recipe for building scientific figures using Photoshop and PowerPoint grants journals posters presentations Research Imaging Solutions

More information

1.1 Data representation

1.1 Data representation 1.1.2 HEXADECIMAL NUMBER SYSTEM The one main disadvantage of binary numbers is that the binary string equivalent of a large decimal base-10 number can be quite long. When working with large digital systems,

More information

15110 PRINCIPLES OF COMPUTING SAMPLE EXAM 2

15110 PRINCIPLES OF COMPUTING SAMPLE EXAM 2 15110 PRINCIPLES OF COMPUTING SAMPLE EXAM 2 Name Section Directions: Answer each question neatly in the space provided. Please read each question carefully. You have 50 minutes for this exam. No electronic

More information

Web Development & Design Foundations with XHTML. Chapter 4 Key Concepts

Web Development & Design Foundations with XHTML. Chapter 4 Key Concepts Web Development & Design Foundations with XHTML Chapter 4 Key Concepts Learning Outcomes In this chapter, you will learn to: Create and format lines and borders on Web pages Decide when to use graphics

More information

Lecture 1: What is a computer?

Lecture 1: What is a computer? 02-201, Fall 2015, Carl Kingsford Lecture 1: What is a computer? 0. Today's Topics Basic computer architecture How the computer represents data 1. What is a computer? A modern computer is a collection

More information

Template Graphics Guidelines

Template Graphics Guidelines Contents Page Overview 1 Screensaver Formats 1 Pop-Up Formats 2 Ticker Formats 3 Banner Formats 3 Web Page Formats 4 Edge Transparency Not Supported 5 Graphics Files 5 Bitmap vs Vector 6 Bitmap Pixellation

More information

OPTIMIZING PDFS WITH ACROBAT PRO 8

OPTIMIZING PDFS WITH ACROBAT PRO 8 OPTIMIZING PDFS WITH ACROBAT PRO 8 GUIDELINES FOR CREATING PDF DOCUMENTS THAT ARE SMALLER IN FILE SIZE INTRODUCTION If you incorporate a lot of images in a file and then convert it to a PDF, the file size

More information

Chapter 2 Bits, Data Types, and Operations

Chapter 2 Bits, Data Types, and Operations Chapter 2 Bits, Data Types, and Operations How do we represent data in a computer? At the lowest level, a computer is an electronic machine. works by controlling the flow of electrons Easy to recognize

More information

Welcome. Web Authoring: HTML - Advanced Topics & Photo Optimisation (Level 3) Richard Hey & Barny Baggs

Welcome. Web Authoring: HTML - Advanced Topics & Photo Optimisation (Level 3) Richard Hey & Barny Baggs Welcome Web Authoring: HTML - Advanced Topics & Photo Optimisation (Level 3) Richard Hey & Barny Baggs Health and Safety Course Information General Information Objectives To understand the need for photo

More information

Graphic Design Starter Pack

Graphic Design Starter Pack Graphic Design Starter Pack Graphic Design Contact Us// E-mail: graphic.design@shawacademy.com www.shawacademy.com Hello This Starter Pack aims to give you a better understanding of what Graphic Design

More information