1 After completing this lesson, you will be able to: Comprehend the basics of Web graphics. View and manipulate Web graphics in a graphics program. Describe.

Slides:

Advertisements

Similar presentations

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

Advertisements

Raster Graphics 2.01 Investigate graphic image design.

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

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.

DECO1001: Optimising for the Web Format Colour File Size.

ETT 429 Spring 2007 Digital Photography/Scanners.

2.01 Understand Digital Raster Graphics

Graphics and Images September 28, Unit 3.

Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services 224 B Computer Building University Park, PA 16802

Scanning and Graphics Workshop I Graphics for the Web, Scanning and Introduction to Photoshop.

Chapter 5 Web Graphics Styling Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.

1 ADVANCED MICROSOFT POWERPOINT Lesson 7 – Working with Visual and Sound Objects Microsoft Office 2003: Advanced.

Zinnia Bell. RAWimages are image files that have not yet processed, they contain minimally processed data from the image sensor of either a image scanner,

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.

WEB GRAPHICS. The Pixel Computer displays are comprised of rows and columns of pixels. Pixels are indivisible. Some common screen resolutions are:, 600.

GRAPHICS/IMAGES INFSCI Source: Learning Web Design by Jennifer Niederst RobbinsJennifer Niederst Robbins Creating Images:  Scanning  Be aware.

Unit E. Image Measurements The size of an image can be measured 2 ways: Dimensions: the height and width, measured in pixels. File Size: measured in Kilobytes.

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

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.

1 Enhancing Your Teaching with the Effective Use of Digital Images Richard P. Usatine, MD Nancy B. Clark, MEd For STFM Annual Conference, September 2003,

Day 4.  Assignment 1 Due  Assignment 2 Posted Assignment 2 Posted  Due Feb 9:35 AM  3 8:30 AM  Today we will look at creating and using.

Chapter 5 Web Graphics Styling Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.

Microsoft FrontPage 2003 Illustrated Complete Working with Pictures.

Presented by the Virginia 4-H Science and Technology Committee.

8 Using Web Graphics Section 8.1 Identify types of graphics Identify and compare graphic formats Describe compression schemes Section 8.2 Identify image.

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.

Multimedia in Web Images. A Picture Tells A Thousand Words Forms of Images Photograph Painting Symbol Logo Flag Map Diagram Functions Provide facts Explain.

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.

Image File Types Module 4: Working with Images LESSON 5.

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.

Things to Remember When working with digital images.

Chapter 12 Web Publishing. Goals Become an image optimization master Get a handle on Web file formats, including SVG and SWF Learn about Web image color.

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.

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.

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.

Editing Images for the Web. Optimization/Compression Graphics optimization is important for fast web page display.

WWW, Web Design, Multimedia Winny Wang Image Types.

Web Page Design Mrs. Ricke. Graphics Interchange Format 256 colors only Good for icons, clipart, logos Not good for high quality pictures.

Digital File Formats By Ali Aslam. JPEG JPEG Stands for Joint Photographic Experts Group. JPEG uses a lossy compression routine. Lossy compression means.

WEB GRAPHICS EXPLORING COMPUTER SCIENCE - LESSON 3-4.

CHAPTER 21: IMAGES. IMAGE SOURCES 3 options: Create your own images Find images Hire someone to make images.

2.01 Understand Digital Raster Graphics

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

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

Understanding Web Graphics

Exploring Computer Science - Lesson 3-4

Exploring Computer Science - Lesson 3-4

2.01 Understand Digital Raster Graphics

Digital Photo editing with Photoshop

Computer Graphics Different Images File.

"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.

2.01 Investigate graphic image design.

Exploring Computer Science - Lesson 3-4

1.01 Investigate graphic types and file formats.

2.01 Understand Digital Raster Graphics

Photoshop: Creating and Preparing Images for the Web

2.01 Investigate graphic image design.

2.01 Understand Digital Raster Graphics

Web Programming– UFCFB Lecture 7

chapter 29: Creating Web Graphics

2.01 Investigate graphic image design.

2.01 Investigate graphic image design.

Presentation transcript:

1 After completing this lesson, you will be able to: Comprehend the basics of Web graphics. View and manipulate Web graphics in a graphics program. Describe the different types of graphics file formats. Choose “safe” colors for the Web. Crop a graphics image.

2 Pointillism Georges Seurat. The Siene at La Grande Jatte, Spring Oil on wood. Musée Royaux des Beaux-Arts, Brussels, Belgium

3 Pixels

4 Palettes

5 Image Files on Web Pages afs_title.gif 4members.jpg Index.html (Home Page) Revisiting Figure 1-4:

6 File Types Some sample file types (note the icons and extensions):

7 GIFs GIFs: Usually small files that download quickly Limited to 256 colors Display logos, bullets, icons, and other small graphics Support transparency Support interlacing Can show simple animation

8 Interlacing

9 Transparency

10 Clip Art GIFs The tiger clip art image is transparent and animated (the tiger jumps back and forth through the ring of fire).

11 JPEGs JPEGs are used to display pictures and other images that contain millions (or at least lots!) of colors.

12 JPEG Save Options

13 PNG vs. GIF Overall, PNGs serve the same purpose as GIFs. Main Difference: PNGs support transparency in 8-bit (256 colors) and 24-bit (millions of colors) images.

14 Optimizing Images Ways to optimize images for the Web: Use Web-safe colors to avoid dither in GIFs and PNGs Configure JPEGs to render progressively Compress JPEGs Resize images Crop images Use thumbnails when possible

15 Resize Dialog Box The Resize dialog box in Paint Shop Pro 8:

16 Cropping Cropping means to cut away part of a picture to make the image smaller.

17 Thumbnails You can use small images or cropped images to create thumbnail pictures.

18 Photographs Ways to digitize pictures: Scanners Film developers Digital cameras and camera phones