Images for the Web planning, acquiring, processing.

Slides:

Advertisements

Similar presentations

Introduction to Computer Graphics Raster Vs. Vector COMMUNICATION TECHNOLOGY.

Advertisements

Multimedia for the Web: Creating Digital Excitement Multimedia Element -- Graphics.

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.

COS 125 Day 13. Agenda Assignment 3 Due Assignment 4 Posted –Due March 24 Left to do –6 Assignments (9 total) About one per week –3 Quizzes –Capstone.

Digital Still Images ETT June Multimedia Assets Still Images Audio Video.

2.01 Understand Digital Raster Graphics

Introduction to Computer Graphics

Vector vs. Bitmap SciVis V

The University of Adelaide Picture Perfect: Image Formats and Resolution Peter Murdoch March 2014 PREPARING GOOD LOOKING DOCUMENTS.

Objective 1.  Also known as raster images.  Made up of pixels in a grid.  Pixels: tiny dots of individual color that makes up what you see on your.

File Formats The most common image file formats, the most important for cameras, printing, scanning, and internet use, are JPG, TIF, PNG, and GIF.

Image and Sound Editing Raed S. Rasheed Image Image. Digital image. – Raster images. – Vector Images. – Stereo Images. – Image File Formats Lossless.

V Obtained from a summer workshop in Guildford County July, 2014

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.

Digital Images. Scanned or digitally captured image Image created on computer using graphics software.

Multimedia Elements – Text and Graphics. Text in Multimedia Applications Of all multimedia elements, text is the easiest to manipulate General guidelines:

 Scanned or digitally captured image  Image created on computer using graphics software.

Web Design, 4 th Edition 5 Typography and Images.

Bitmap vs. Vector How computers work with photographs and drawings.

Graphic Images 101. Painted on a grid Drawn mathematically.

Understanding Web Graphics Web Design Section 5-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

Today’s Agenda (2/10/04’) Creating anchored links Creating anchored links Working with images Working with images The “Philosophy” page The “Philosophy”

Digital Imaging Raster (Bitmapped) Images. 1. How they work…  Image data is stored in literal “map”  Each pixel (picture element) is measured for its.

DIGITAL GRAPHICS & ANIMATION Complete LESSON 2 Importing and Exporting Graphics.

Lecture 4 - Introduction to Computer Graphics

Pixels, Resolution and File Types Using Digital Media in the Classroom START.

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.

Vector vs. Bitmap

GRAPHICAL MEDIA 1. ScannerScanner Graphics Sources 2.

 Scaling an image is resizing the image in a graphic editing software so it is the proper size before adding it to a site.  Important NOTE: If you insert.

TYPES OF GRAPHICS TECHNOLOGICAL DESIGN. GRAPHIC DESIGN DEFINITION Visual problem solving that utilizes shapes, images, text, color, etc. to communicate.

Microsoft FrontPage 2003 Illustrated Complete Working with Pictures.

Graphics and Animation Multimedia Projects Part 2.

EDT321EDT321 1 Summer Session Online Presentations Presentation Guidelines Design Guidelines Graphic File Types Power Point Skills PowerPoint Project.

Digital Darkroom I Theresa L. Ford. Objectives Basic Digital Image Terminology Screen Display of Pictures –Why are pictures too big for the screen? –Why.

Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 3 This presentation © 2004, MacAvon Media Productions Introduction to Computer Graphics.

GRAPHICS. Topic Outline What is graphic. Resolution. Types of graphics. Using graphic in multimedia applications.

Multimedia Elements –Graphics. Graphics in Multimedia Applications.

CHAPTER 4 : MULTIMEDIA DEVELOPMENT 4.2 MULTIMEDIA ELEMENTS IMAGE/graphic/picture.

CS- 375 Graphics and Human Computer Interaction Lecture 1: 12/4/1435 Fundamental Techniques in Graphics Lecturer: Kawther Abas.

© Anthony J. Nowakowski, Ph.D. GRAPHICAL MEDIA EDC 601 Instructional Technologies © Anthony J. Nowakowski, Ph.D. “Graphics help to display and to clarify.

Photoshop Photoshop works with bitmapped, digitized images (that is, continuous-tone images that have been converted into a series of small squares, or.

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.

Chapter 3 Image Files © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,

 Scanned or digitally captured image  Image created on computer using graphics software.

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.

Chapter 8B Graphics and Multimedia. 8B-2 Graphic File Formats Bitmapped images –Most common image type –Also called raster images –Image is drawn using.

Images Size & The Web. When putting your photos on the Web or sending them by , the smaller you can get them, the better. One simple thing you can.

Graphics Concepts Presentation

Information Technology Images: Types, Resolution and Techniques.

Software Packages Used In Digital Graphics By Jack Turner.

Graphics and Image Data Representations 1. Q1 How images are represented in a computer system? 2.

Guilford County SciVis V104.03

Resolution in Digital Images & Vector versus Raster Why we work at 300 ppi in Photoshop and what that actually means….

Digital Basics Quiz Preparation. Basic Digital Image Concepts Aliasing & Anti‐aliasing Resolution Compression Raster & Vector Color mode & Image mode.

ITEC2110, Digital Media Chapter 2 Fundamentals of Digital Imaging 1 GGC -- ITEC Digital Media.

Basic Digital Imaging For PE 266 Technology in HPER.

Understanding Web Graphics

Types of Graphics Technological Design.

Chapter 3 Image Files © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,

4 Importing Graphics Desktop Publishing: Chapter 4

Multimedia Elements – Text and Graphics

Graphics Basics Ellen Eyth.

Chapter 3 Image Files © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.

Introduction to Computer Graphics

Graphics Basic Concepts.

ImageEditing Understanding Image Resolution.

Graphics Basics.

Presentation transcript:

Images for the Web planning, acquiring, processing

My Laws of Image Usage Images ALWAYS convey information (think about what messages your image conveys) If you can use a picture instead of words, do. (but add the words as alt-text). Make sure you have the right to use the image(s) Don’t make the image files larger than necessary (thumbnail/printing)

Planning Audience? What information do I want to convey? What information can be conveyed visually? What style (also informative) do I want to use. (Law 5: Be consistent)

Getting Images 1 Take pictures (with a camera or digital camera) Get from sites that explicitly give the right to use – (actually cool pics) Logomakers Ask permission to use images you like Make a collage of free images Buy a commercial image or set of images –Eyewire, Artville

Getting Images 2 Get post-copyright images (100 yr guideline) Capture image (permission need still applies) – PSP, SnagIt, Print Screen Explore your organization’s intellectual property Create an image with a drawing program Round Robin - How do you get images?

Processing Images

Image Qualities Transparency Compression Scalability Color Depth

File Formats Vector - paths - commercial design work.wmf/.ai (illustrator) /.cd (corel) - not really Web Raster - pixels - Web images.jpg (most colors in compression, but not transparent).gif (allows transparency, but fewer colors).tif - used often for no compression - some browsers.bmp (large file size, microsoft paint).png (more colors than gif, w/ transparency option)

File Sizes Why Care? –Loading speed –Space Limitations Desirable File Sizes –50-300k for display images ( arbitrary but possible ) –more for printing (but consider an extra step) Decreasing size –smaller image or different compression

Image sizes/resolutions 640x480 base size = 307,200 pixels ppi = display / dpi = printer pixels/ppi=inches 72 ppi for web Declaring image size in HTML Scaling using image programs/Scaling using Word

How to work with images...

Special Images Animations - many different programs Panoramas (Photovista) - steerable Image maps - FrontPage - What do you use? Look for an image, maybe of a panorama, maybe with the top and bottom blacked out to show that it could go all the way around my walls (sample image plan)

Programs Paint (.bmp only - severely limited) Paint Shop Pro - $84, demo available, nice capture Whatever came with your scanner or camera Microsoft Word - Great for scaling, clipart Adobe Photoshop - $127 (Image Lab?) Gimp - Free but very complicated Others?