Download presentation
Presentation is loading. Please wait.
Published byCynthia Briggs Modified over 9 years ago
1
GRAPHICS/IMAGES INFSCI 1052
2
Source: Learning Web Design by Jennifer Niederst RobbinsJennifer Niederst Robbins Creating Images: Scanning Be aware of copyright holders even if you change the image Easier to maintain quality if resizing to a smaller size Black and white are scanned using 8 bit gray scale Using black and white allows no adjustments to midtone colors Digital Cameras Web is relatively low resolution environment so high end equipment is not necessary Electronic drawing Adobe Illustrator Adobe Photoshop
3
INFSCI 1052 Stock Photography Pictures Illustrations Buttons Logos Rights-Managed Need a license to use May be able to get exclusive use for an image Can be pricey Royalty free Pay a one time fee
4
INFSCI 1052 Web Sites with Images IStockPhoto Royalty free Submitted by users Inexpensive – as low as a dollar Getty Images Largest collection of images Professional Royalty free and Licensed Inexpensive to very expensive Jupiter Images Rights managed and royalty free
5
INFSCI 1052 JuicyStock.com Pics of people and places around the world Inexpensive Veer Rights managed and royalty free Edgy Illustrations, fonts and stock video Clip Art Royalty free illustrations, animations and buttons Usually get clip art with graphics packages like PowerPoint Can be amateurish – sometimes pay membership fee – sometimes free
6
INFSCI 1052 Sites for Clip Art Clipart.com Membership fee – good quality Original Free Clip Art Free #1 Free Clip Art Free
7
INFSCI 1052 Graphics Formats There are hundreds of formats Three choices for the web GIF Best for images with flat colors and hard edges Good for animation and transparency JPEG Best for photographs Best for images with color blends PNG Good substitute for GIF Good for transparency
8
GIF Graphics Interchange Format Small size and cross platform compatible Uses compression scheme that is good for: Logos Lineart Graphics containing text, icons Doesn’t work as well when saving photgraphs or textured images 8 bit – 256 colors Uses indexed color – color table Can edit color table in Photoshop Many images start off as RGB and then are transferred to GIF and 256 color scheme so some color information gets lost
9
INFSCI 1052 GIF Compression Lossless No image information is lost (except color) Uses Lempel – Ziv – Welch compression scheme LZW Looks for repetition in image – that’s why images with large areas of a single color do well All parts of a GIF image can become transparent so the background shows through Interlacing Multiple passes to show the image – gives hint of the image on first pass Animation Multiple frames of an image and settings for speed etc all stored in one GIF file Gifmation – www.boxtopsoft.comwww.boxtopsoft.com Tutorial for creating GIF animation http://www.learningwebdesign.com/pdf/animated_gifs.pdf http://www.learningwebdesign.com/pdf/animated_gifs.pdf
10
INFSCI 1052 JPEG Joint Photographic Experts Group – a standards body that created it Good for gradients and blended colors – not so good for large flat color areas and sharp edges Don’t use a limited color palette like GIFS 24bit images that can represent millions of colors Compression Lossy – some of the image information is discarded Can choose the amount of compression – file size versus image quality Process is not reversible – don’t continuously resave a JPEG image Photoshop allows you to make copies of the original Display time JPEGS display in multiple passes increasing the resolution with each pass – similar to GIF interlacing – can specify the number of passes Takes longer – not much – to decompress a JPEG than a GIF
11
INFSCI 1052 PNG Portable Network Graphic Designed to replace GIF (Web) and TIFF ( storage of images) 8 bit indexed or 24 bit RGB or 16 bit grayscale or 48 bit color Lossless On/off transparency or levels of transparency Progressive display Embedded text Transparency Biggest feature Can contain multiple levels of transparency – alpha channel Use PINGS May have smaller file size than GIF depending upon graphics software Larger file size than JPEG though
12
INFSCI 1052 Questions to ask for choice of format Large Flat color areas? GIF or 8bit PNG Graduated color? JPEG Flat and graduated color? GIF or 8 bit PNG Transparency? GIF or PNG Multiple levels of transparency PNG Animation GIF
13
INFSCI 1052 Size and Resolution Bitmapped (Raster) All GIF JPEG and PNG Made up of many pixels Different from vector graphics Smooth lines and filled areas Based on mathematical formulas Resolution Pixels per inch – for the web there is no consistency between monitors On paper 300 to 600 Onscreen, typically 72 Higher resolution monitors make images look smaller The pixels are smaller Digital camera can take a picture 1600 px by 1200 px which is way too big for the web
14
INFSCI 1052 Resize images Use graphics image package like Photoshop. Also, many online services for free or image manipulation software for free Optimize images for download Dial up – one second per kilobyte Many corporations have limits on file sizes Limit dimensions of the image Crop out unneeded space or color swatches Take advantage of caching If image is used repeatedly Choose right compression for the type of image Use professional package such as Adobe Photoshop Reduce the number of colors with graphics software GIFS can contain 256 but do you need all the colors When you save in graphics package there are choices for bit depth and number of colors. Often 5 bit color looks just as good on the web Limit the amount of dithering ( colors from palettes are mixed to create a new color) in GIFS Need dithering in color blending or gradients
15
INFSCI 1052 GIF Optimization Design for flat colors Save GIF with fewest colors needed Adjust dithering Apply a lossy filter JPEG Use high compression levels – different quality levels Use weighted optimization – some areas of an image canbe compressed more than others Slightly blur the image Avoid flat colors and sharp lines
16
INFSCI 1052 PNG Avoid PNG-24 With PNG-8 Reduce number of colors Reduce dithering Design with flat colors Reduce interlacing Photoshop – Optimize to file size
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.