Designing Your Clock Face. Objectives STUDENTS WILL BE ABLE TO: 1.Explain the differences between RASTER and VECTOR graphics. 2.List at least two examples.

Slides:



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

Images Images are a key component of any multimedia presentation.
Raster Graphics vs. Vector Graphics
© 2009 Research In Motion Limited BlackBerry themes and animated graphics.
Digital Still Images ETT June Multimedia Assets Still Images Audio Video.
2.02 Understand Digital Vector Graphics
WHAT IS SVG?. SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format SVG.
Introduction to Computer Graphics
1 Introducing Macromedia Flash MX – Lesson 1 Flash MX adds content and animation to Web pages Flash MX movies use vector graphics to reduce size and download.
Vector Graphics 2.02 Understand Digital Vector Graphics.
How Images are Represented Bitmap images (Dots used to draw the image) Monochrome images 8 bit grey scale images 24 bit colour Colour lookup tables Vector.
Raster vs Vector and Image Resolution By Josh Gallagan.
Introduction to Computer Graphics Raster Vs. Vector TGJ 2OI St. Christopher C.S.S. 4 Introduction to Computer Graphics.ppt.
Fonts Typeface Typography. Leading Spacing between lines.
Graphic Images 101. Painted on a grid Drawn mathematically.
Working with Graphics. Objectives Understand bitmap and vector graphics Place a graphic into a frame Work with the content indicator Transform frame contents.
Minard Saladino By:. Introduction: Illustrator is a vector-based imaging program. Unlike PhotoShop, which deals in pixels (raster images), this one deals.
Adobe InDesign CS5 – Illustrated Unit D: Working with Graphics.
 Insert a picture from a file  Move and delete images  Use the Picture Tools tab  Add styles, effects, and captions to images  Resize photos  Use.
Web Design, 5 th Edition 5 Typography and Images.
Module Code: CU0001NI Technical Information on Digital Images Week -2.
Building the User Interface by Using HTML5: Text, Graphics, and Media Lesson 2.
Pixels, Resolution and File Types Using Digital Media in the Classroom START.
Bitmap Vs. Vector Graphics. To create effective artwork, you need to understand some basic concepts about vector graphics versus bitmap images, resolution,
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.
Understanding digital image - of which it consists Adolf Knoll National Library of the Czech Republic © Adolf Knoll, National Library.
Multimedia Elements II Graphics, Digital Video. UIT - Multimedia Production2 Multimedia Elements Multimedia elements include: Text Graphics Animation.
Adobe Illustrator Chapter 1 Notes Pages 1-2 –1-75 Mrs. Leonard.
+ 5 Things you need to know about images* *Images for the web.
CS- 375 Graphics and Human Computer Interaction Lecture 1: 12/4/1435 Fundamental Techniques in Graphics Lecturer: Kawther Abas.
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.
2D Graphics Theory & Principles. Single Point Smallest addressable area on screen or digital image.
Chapter 2 File Format Objectives (1 of 2) Identify the difference between vector based graphics and bitmap-based graphics Clarify bitmap and vector graphic.
Vector vs. Raster Objectives:
Digital Imaging 101 Ann Ware. Digital Image Categories BITMAP  A vector is created by using a series of mathematically defined lines and curves rather.
Graphic Format Factors
By Courtney Field Creative digital graphics. Types of graphics and examples There are a number of different types of graphics file formats. Each type.
Chapter 2 File Format Objectives (1 of 2) Identify the difference between vector based graphics and bitmap-based graphics Clarify 3 types of vector programs.
Digital Imaging 101 Ann Ware
Aim: What is Illustrator? Mr. Spaterella Technology Feb. 22.
SC ICT Certification Level 1 12 Graphics By Ross Parker.
Raster Graphics 2.01 Investigate graphic image design.
© 2010 Delmar, Cengage Learning Chapter 1 Getting Started with Illustrator.
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.
Digital Graphics for Computer Games Pixels Types of Digital Graphics (Raster and Vector) Compression.
Flash Vector vs. Raster. Vector vs. Rastor Vector –Made up of points and vectors –Scalable –Low file size –Can appear smooth Rastor –Pixels of color –Scaling.
Raster vs. Vector 2.02 Understand Digital Vector Graphics.
RASTERIZING SHAPES IN PHOTOSHOP RASTERIZE: A process in Photoshop of converting a vector image into a bitmap (or raster) image VECTOR: A vector image is.
Ms Taylor. L.I. 1.I will learn about Vector and Raster graphics 2.I will learn about the advantages and disadvantages of both types of graphics 3.I will.
Graphics and Image Data Representations 1. Q1 How images are represented in a computer system? 2.
Lesson 9: Web Graphics. Objectives Distinguish between vector and raster graphic types Identify and choose appropriate image file formats, including browser-compatibility.
HTML5 and CSS3 Illustrated Unit F: Inserting and Working with Images.
Digital Basics Quiz Preparation. Basic Digital Image Concepts Aliasing & Anti‐aliasing Resolution Compression Raster & Vector Color mode & Image mode.
WHAT IS SVG?. ESSENTIAL QUESTIONS What challenges do mobile devices present to Web designers? What are the basic concepts of responsive web design?
Graphics Basic Concepts 1.  A graphic is an image or visual representation of an object.  A visual representation such as a photo, illustration or diagram.
Common Bitmap Image File Types
Digital Imaging 101 Ann Ware.
Higher Graphic Communication
What is SVG?.
Chapter 4: Scalable Vector Graphics (SVG)
Scalable vector graphics
Higher Graphic Communication
Bitmap vs. Vector.
Agenda 2/27/17 Sketch/write #30: Raster Vs. Vector Article
Chapter 3:- Graphics Eyad Alshareef Eyad Alshareef.
Graphics Basic Concepts.
Designing Your Clock.
What is SVG?.
Presentation transcript:

Designing Your Clock Face

Objectives STUDENTS WILL BE ABLE TO: 1.Explain the differences between RASTER and VECTOR graphics. 2.List at least two examples of RASTER/VECTOR image formats. 3.Learn vector grapics software new to them and employ it to create cutting profiles.

Raster vs. Vector Raster Images Array of pixels of various colors Loses quality when scaled up to larger sizes Good at displaying large numbers of colors Large file size Formats: JPG, BMP, GIF, TIF, etc. Vector Images Collection of lines/curves with starting and ending points that have color and thickness Scalable without losing quality Poor at displaying large numbers of colors Small file size Formats: SVG, CGM

1. Choose an Image to Engrave Characteristics of a Good Engraving: High contrast High resolution (300 x 300 pixels or better) Should look good in B&W Minimize shaded regions with no information content 500x518 px 1080x546 px 1200x1011px

2.A Create a Cutting Profile Should consist of line segments or simple shapes All line segments must form a closed curve Should enclose all regions that are to be removed from the face of your clock, including holes for axles to mount gearing

2.B Create a Cutting Profile To create line segments or simple shapes as vector curves we need a software solution: Method Draw is a web based SVG editor Method Draw SVG – scalable vector graphics; a vector image format for 2D graphics

2.CMethod Draw Commands Ribbon Graphics Window

3.A Scale Your Image Must fit within a 8” x 10” area (try to fill the area) Must be able to support holes for gearing: All holes 1/32” Dia.

3.B Scale Your Image Must fit within a 8” x 10” area Must be able to support holes for gearing Must show some portion of the gear train Gears should contribute to the theme of the clock All holes 1/32” Dia.

3.B Scale Your Image Import the image into MS Word Use the VIEW tab to show rulers and grid Format the image so it rests in front of text Scale the image to fill/fit 8” x 10”