Computer Graphics Different Images File.

Slides:



Advertisements
Similar presentations
Graphics on the Web. Common Image File Types As you may know, the most widely supported web image graphic formats are GIF and JPEG. So the question is.
Advertisements

Web Design Vocab 3 PNG, JPG, GIF, MP3, MPEG.
Nice Calm Scene. (You’ll need it.). Skills Getting files off of the camera or scanner Getting files off of the camera or scanner Archiving Archiving Choosing.
Graphics in the web Digital Media: Communication and Design
Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services 224 B Computer Building University Park, PA 16802
Chapter 5 Web Graphics Styling Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Russell Taylor Week 3. Image File Formats - TIF, JPG, PNG, GIF - which to use? The three most common and important image file formats for for printing,
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,
Internet as a resource tutorial – part steps, 3 different actions 1. Search content 2. Use Text 3. Use Images.
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.
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.
INFSCI  “Users pay close attention to photos and other images that contain relevant information, but ignore fluffy pictures used to “jazz up” webpages.”
GRAPHICS/IMAGES INFSCI Source: Learning Web Design by Jennifer Niederst RobbinsJennifer Niederst Robbins Creating Images:  Scanning  Be aware.
MIS 208 Fundamentals of Web Publishing Week 6 Performance Editing Graphics Imagemaps.
File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.
Chapter 4 Adding Images. Chapter 4 Lessons Introduction 1.Insert and align images 2.Enhance an image and use alternate text 3.Insert a background image.
Colors, Images, & Image Maps. Working with Color Colors are defined in terms of RGB Triplet –Red, Green, Blue –0 to 255 in intensity –(00, 00, 00) is.
THE COLORS OF LIGHT RED, GREEN and BLUE
Presentation Design: Graphics. More About Color “Bit depth” of colors -- This is based on the smallest unit of information that a computer understands.
Digital Image: Representation & Processing (2/2) Lecture-3
Chapter 5 Web Graphics Styling Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Graphics and Animation Multimedia Projects Part 2.
Internet as a resource tutorial – part steps, 3 different actions 1. Search content 2. Use Text 3. Use Images.
1 Web Developer Foundations: Using XHTML Chapter 4 Key Concepts.
Types of Graphics  Vector Individual scalable objects defined by mathematical equations  Bitmap Pixels (tiny, single-colored square) in a grid Most.
Introduction to Photoshop Altering photos 1 pixel at a time.
Unit 1: Task 1 By Abbie Llewellyn. Vector Graphic Software (Corel Draw) Computer graphics can be classified into two different categories: raster graphics.
Graphics & Images What File Format Do I Use?. Graphics & Images …..are visual images presented on some form of media (drawings, print, web, digital video)
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.
Graphic definitions Summary of Chapter 10 of the Non-designer’s web book by Robin Williams and John Tollet. Pages ( ) Miss Mary Victor.
Digital Images are represented by manipulating this…
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.
Graphics Concepts Presentation
Exploring Web Design Chapter 1. Objectives Develop a new perspective of the WWW Learn what makes a website good or bad Discover how to apply objective.
Introduction to Images & Graphics JMA260. Objectives Images introduction Photoshop.
Web Page Design Mrs. Ricke. Graphics Interchange Format 256 colors only Good for icons, clipart, logos Not good for high quality pictures.
HTTP transaction with Graphics HTML file + two graphics files.
GRAPHICS. PURPOSE OF GRAPHICS IN WEB DESIGN Graphics add visual/aesthetic appeal to the information on the web page, helping to maintain viewer interest.
WEB GRAPHICS EXPLORING COMPUTER SCIENCE - LESSON 3-4.
Graphics and Image Data Representations 1. Q1 How images are represented in a computer system? 2.
CHAPTER 21: IMAGES. IMAGE SOURCES 3 options: Create your own images Find images Hire someone to make images.
13 June – Session : Graphics Different types of Graphics for the web Features of image editing software Good practice for image editing.
ITEC2110, Digital Media Chapter 3 Digital Image Processing 1 GGC -- ITEC Digital Media.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Understanding Web Graphics
Exploring Computer Science - Lesson 3-4
Chapter 3 Image Files © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,
Exploring Computer Science - Lesson 3-4
Computer Science Higher
Introduction to raster graphics
Digital Photo editing with Photoshop
Chapter 3 Graphics and Image Data Representations
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
Introduction To Photo Editing SHIELA MAE A. AQUINO SRNHS.
File Formats.
Raster Images CPSC 1030.
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.
Exploring Computer Science - Lesson 3-4
A computer display is made up of small squares, called pixels.
Digital Images.
Look at Me Mod 4 Lesson 3 Graphics Module 4- Build a Game.
Graphics Basic Concepts.
Photoshop: Creating and Preparing Images for the Web
Graphic File Format Skill Area
Web Programming– UFCFB Lecture 7
Introduction to Image Analysis and Processing
2.01 Investigate graphic image design.
Presentation transcript:

Computer Graphics Different Images File

Introduction When working with digital image files, it is essential to know the differences between each one, so you know when to use them. The main difference between files formats is how they are used when designing for the web and the outcome they produce. One produces highly optimized simple graphics, another is used for most images, and the third option is used for complex graphics, gradients and transparency.

Files Used on the Web Gif, jpg and PNG files are all three used for the web.  The difference is the resulting image. Each one has its place for use on websites, and jpeg images can also be used in print files as well, although they need to be print resolution. Web images are typically 72 dpi, making them load quickly.

Gif Gif images are great for creating very low resolution files for your website. They support transparency, which is great. Transparency allows you to place the gif over any color background or even photos, and you won’t see a border or background in the image. All you will see is the icon.  

Gif [cont.] You typically use a gif for simple logos, icons, or symbols. Using a gif for photos is not recommended, because gifs are limited to 256 colors. In some cases you can use even less. The less colors that are in your image, the smaller your file size will be.

Gif [cont.] Gif files also support a feature called interlacing, which preloads the graphic. It starts out blurry and becomes focused and crisp when it is finished downloading. This makes the transition for your viewer easier, and they don’t have to wait as long to see logos or icons on your site. Gifs also support animation. Gifs don’t support the level of animation that Flash files do, but it still allows you to add movement or transitions to your site, without a lot of programming or coding. More advanced web designers and developers tend to use jQuery to create animated effects. Gif files are also compressed, which gives them a small file size.

Gif [cont.] You mainly use a gif file format for logos and graphics with solid areas of color. You wouldn’t use a photographic image, or a graphic with gradients.

Dither Transparency Dither is a method to disperse pixels, so that a gif can transition into its background easier. This was before PNG, which supports levels of opacity. You can choose to have no dither, Diffusion, Pattern, or Noise Transparency dither. Diffusion spreads out the edge pixels in order to let some of the background sow through. Pattern does the same thing, but uses a repeating pattern around the edges. Noise is straightforward and uses noise around the edges to feather the edge pixels.

Dither [cont.] In some cases it is possible to perform three one-dimensional dithering operations instead of one three-dimensional one. Consider for instance the following palette: It is made of the eight possible red/green/blue combinations made of 0 and 1 values: Red 1 Green Blue

Dither [cont.] One way of dithering an image using this palette is to convert the image into three greyscale images (separating the red, green and blue channels), dither each subimage to two colors separately and recombine the images into three channels. For instance, if at a given pixel the red channel is dithered to 1 and the green and blue channels are dithered to 0, the final pixel will be [1 0 0] which is the color red. Separate-space dithering works by splitting the image into three red, green and blue channels. Each of this channel is treated as a greyscale image that is then dithered to black and white using any dithering method seen previously. The resulting images are then treated again as three red, green and blue channels and recombined into the final image:

Dither [cont.] Here are the results with serpentine Floyd-Steinberg dithering applied to each channel. On the left, no color correction, as The Gimp or Photoshop would do; on the right, gamma-corrected dithering:

Dither [cont.]

Dither [cont.] Diffusion:

Dither [cont.] Pattern:

Dither [cont.] Noise:

Jpeg Joint Photographic Experts Group Jpeg files can be relatively small in size, but they still look crisp and beautiful. Jpegs support up to 16.7 million colors, which makes them the right choice for complex images and photographs. With the wide range of colors, you can have beautiful imagery without a bulky file size. With new responsive techniques, you can also have flexible images without large loading times. There are also progressive jpegs, which preload similar to interlaced gifs. They start out blurry, but come into focus as their information loads.

PNG Portable Network Graphics PNG files were developed to build upon the purpose of gifs. Designers need the ability to incorporate low-resolution images that load quickly but also look great, too. This is where PNG comes in. PNG-8 does not support transparency, but PNG-24 and PNG-32 do. PNG transparency is different from Gif transparency, because they can have different levels of transparency. Gifs are either transparent or opaque. Below is a comparison of how a gif will look if the edges of the image are blurred or they are semi transparent:

PNG Portable Network Graphics You will notice that the edges are rough and pixelated. Gifs are best for crisp edged graphics. Below is the same file, but saved as a png- 24:

PNG Portable Network Graphics You will notice in the PNG file above that the edges are blurred or feathered, just as we had set it up in our Photoshop file. This will allow for some nice effects for websites and images. PNG files are lossless, which means that they do not lose quality during editing. This is unlike jpegs, where they lose quality. PNG files tend to be larger than jpegs, because they contain more information, and are lossless. PNG files do not support animation. For this purpose, a gif should be used.