File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.

Slides:

Advertisements

Similar presentations

Adobe Flash CS4 – Illustrated Unit E: Optimizing and Publishing a Movie.

Advertisements

Color COM 366 Web Design & Production. RGB color Amount of light in each channel Closer to 255, whiter color gets Every color has value for red,

2.01 Understand Digital Raster Graphics

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.

Web Design, 4 th Edition 5 Typography and Images.

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)

Prepared by George Holt Digital Photography BITMAP GRAPHIC ESSENTIALS.

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

Web Design, 5 th Edition 5 Typography and Images.

Faculty of Sciences and Social Sciences HOPE Website Development Graphics Stewart Blakeway FML 213

Task 01 – Explain how different types of graphical images relate to file formats, file conversions, formats and compression. Emily Riley.

Web Graphics Image File Formats Image optimization Accessibility issues Using images and colors on the web.

File Formats About graphic file formats And image compression.

THE COLORS OF LIGHT RED, GREEN and BLUE

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.

All About File Formats Mr. Butler John Jay High School Department of Technology.

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.

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

HTML presentation Graphics H format H data compression H size H creating or finding H publishing.

Computer Images Can store color info about each pixel, but makes file BIG Compression for Web 15.

File Formats Different applications (programs) store data in different formats. Applications support some file formats and not others. Open…, Save…, Save.

Web Graphics By Chris Harding. Contents  Software  Vector Graphics and Pixel Based  Transparent Images  Compression  GIF vs. JPEG  Animated GIF.

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.

2D Graphics Theory & Principles. Single Point Smallest addressable area on screen or digital image.

File Formats and Vector Graphics. File Types Images and data are stored in files. Each software application uses different native file types and file.

Types of Graphics  Vector Individual scalable objects defined by mathematical equations  Bitmap Pixels (tiny, single-colored square) in a grid Most.

Graphic Format Factors

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.

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.

Web Graphics. Web graphics Bandwidth is king Graphics must load quickly Graphics must be optimized All other components except for text, gif and jpg are.

Color and Images. Color The natural colors we see and the colors we see on computer monitors are different. ______ -natural ______ -monitor.

Image File Formats. What is an Image File Format? Image file formats are standard way of organizing and storing of image files. Image files are composed.

Introduction to Images & Graphics JMA260. Objectives Images introduction Photoshop.

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.

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

2.01 Investigate graphic image design.

Graphic Format Factors

2.01 Understand Digital Raster Graphics

2.01 Understand Digital Raster Graphics

Web Graphics By Chris Harding.

Graphic Format Factors

Web Graphics 101 Web Image File Formats Image Optimization

2.01 Understand Digital Raster Graphics

Introduction to raster graphics

A computer display is made up of small squares, called pixels.

Web Design and Development

2.01 Understand Digital Raster Graphics

Graphic Format Factors

Graphic Format Factors

Photoshop: Creating and Preparing Images for the Web

2.01 Understand Digital Raster Graphics

2.01 Investigate graphic image design.

Graphic Format Factors

2.01 Investigate graphic image design.

Graphic Format Factors

2.01 Investigate graphic image design.

Graphic Format Factors

Graphic Format Factors

2.01 Investigate graphic image design.

2.01 Investigate graphic image design.

Graphic Format Factors

Presentation transcript:

File Formats COM 366 Web Design & Layout

Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save for Web” in PhotoShop to export as jpeg file

Graphic files Raster or bitmap graphics –Use pixels –PhotoShop

Vector graphics –Use mathematical formulas –Combine lines, points, curves Fill with colors –Flash

GIF format (.gif) Graphic interchange format GIF images use indexed color –Maximum of 256 colors Compressed –Reduce file size –“lossless” means image doesn’t lose any quality by being compressed

Biggest advantage is that one color can be transparent –Allow background on Web page to show thru Can be interlaced –Download in layers with each layer adding more detail

Interlaced file displaying every 8th row; this is how the file first loads. Interlaced file displaying all rows; this how the file appears after the entire graphic has loaded.

Best used for text or illustrations or cartoons

JPEG file (.jpeg) or.jpg Joint Photographic Experts Group Best used for photos Uses “lossy” compression scheme –Some detail is lost –Reduces file size

Progressive JPEG –Similar to interlacing for GIF file –Downloads in waves or layers

Big advantage of jpeg is that it can contain millions of colors Can choose from various compression levels –Low = more degradation –Higher the quality level, greater file size

Quality = 10, 4.7 kB Quality = 100, 83.2 kB Quality = 50, 15.1 kB

Best used for photos

File sizes File sizes measured in bytes Bit smallest unit of measurement on computer –On / off, 1 or 0 8 bits = 1 byte One byte equals about one letter “A”

A 1,000 bytes = kilobyte (kB) A million bytes = megabyte (MB) A trillion bytes = gigabyte (GB) Lowercase b would mean bits –Mb

Other formats PNG (.png) – Portable network graphics – Developed as replacement for GIF – Not patented – Lossless compression – Transparent background – Can have more colors than gif (PNG-24)

PNG-8 uses 8-bit color – 256 colors – Comparable to gif PNG-24 – Supports millions of colors – Comparable to jpeg Larger file size than jpeg But uses lossless compression

What a cat image looks like saved as a PNG-24 and placed against a patterned background on the HTML page:

.html Hypertext markup language All web pages have to be in this format Only format Web browsers (Safari, Firefox) can read