Graphics www.webstyle guide.com
Graphics and Images <ul><li>Vector graphics: </li></ul><ul><ul><li>Unlimited scaling </li></ul></ul><ul><ul><li>Highest re...
Designing for Print and the Web
3 formats used on the web <ul><li>GIF </li></ul><ul><li>JPG </li></ul><ul><li>PNG </li></ul>
GIF <ul><li>Graphic Interchange Format </li></ul><ul><li>Lossless compression-meaning no color information is discarded wh...
Animation <ul><li>Adds visual interest to a Web page or presentation </li></ul><ul><li>Create animated GIF files from illu...
Gif Transparency <ul><li>The background color or pattern will show through the areas that you have designated a transparen...
Gif Animation <ul><li>You can build animations consisting of multiple static images that play continuous, creating the ill...
JPG <ul><li>Joint Photographic Experts Group </li></ul><ul><li>Format best used for photographs or continuous tone images....
PNG <ul><li>Portable Network Graphics </li></ul><ul><li>Royalty-free file format that was intened to replace GIF </li></ul...
RGB COLOR MODELS <ul><li>Red, Blue and Green </li></ul><ul><li>RGB mirrors the way the human eye perceives color </li></ul...
Pixels <ul><li>A pixel is the smallest element in a bit mapped image capture by a digital camera or scanner </li></ul><ul>...
Pixel and Color Depth <ul><li>To control the color of each pixel on the screen, the operating system must dedicate a small...
Pixel and Color Depth <ul><li>If more bits of memory are dedicated to each pixel in the display, more colors can be manage...
Resolution <ul><li>Pixels can vary in size.  If you have an image with a resolution of 100ppi, each pixel would be 1/100 t...
Browser safe colors <ul><li>The browser safe color palette is a solution devised by Netscape to solve the problem of displ...
CMYK <ul><li>Is referred to as subtractive color model. </li></ul><ul><li>Used for printing </li></ul><ul><li>If you subtr...
Color Separation <ul><li>Full-color images are broken down to individual color components, one for each of the four proces...
RGB VS CMYK <ul><li>Work with RGB mode if the image is intended for use on the WWW or multimedia project </li></ul><ul><li...
Color Models
Dithering <ul><li>Used to reduce the color range of images down to the 256 or fewer colors seen in 8 bit GIF images. </li>...
Screen Resolution <ul><li>Refers to the number of pixels a screen can display with in a given area </li></ul><ul><li>Resol...
Upcoming SlideShare
Loading in...5
×

Graphics

947

Published on

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
947
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Graphics

  1. 1. Graphics www.webstyle guide.com
  2. 2. Graphics and Images <ul><li>Vector graphics: </li></ul><ul><ul><li>Unlimited scaling </li></ul></ul><ul><ul><li>Highest resolution possible from the output device </li></ul></ul><ul><ul><li>Unlimited editing </li></ul></ul><ul><ul><li>Very small files </li></ul></ul><ul><ul><li>Concise color </li></ul></ul><ul><li>Raster images: </li></ul><ul><ul><li>Sized defined when the file is created or scanned </li></ul></ul><ul><ul><li>Fixed resolution </li></ul></ul><ul><ul><li>Excessive editing can affect image quality </li></ul></ul><ul><ul><li>Very large files </li></ul></ul><ul><ul><li>Continuous-tone color </li></ul></ul>
  3. 3. Designing for Print and the Web
  4. 4. 3 formats used on the web <ul><li>GIF </li></ul><ul><li>JPG </li></ul><ul><li>PNG </li></ul>
  5. 5. GIF <ul><li>Graphic Interchange Format </li></ul><ul><li>Lossless compression-meaning no color information is discarded when image is compressed </li></ul><ul><li>Color depth-8 bit or 256 colors </li></ul><ul><li>Best use for line art or large field of homogeneous color </li></ul><ul><li>Gifs should not be use used for photographs or graphics with graduations of color </li></ul>
  6. 6. Animation <ul><li>Adds visual interest to a Web page or presentation </li></ul><ul><li>Create animated GIF files from illustration or image-editing software </li></ul><ul><li>GIF format results in small file sizes and relatively short download times </li></ul><ul><li>Can be viewed in most current Web browsers </li></ul><ul><li>Create animated movies using Macromedia Flash </li></ul><ul><li>Flash animation provides more options than GIF, but large files require longer download time and Flash Player utility to view the movies </li></ul>
  7. 7. Gif Transparency <ul><li>The background color or pattern will show through the areas that you have designated a transparent </li></ul>
  8. 8. Gif Animation <ul><li>You can build animations consisting of multiple static images that play continuous, creating the illusion of motion </li></ul><ul><li>You can use the program image ready to create gif animation </li></ul><ul><li>Some what limited </li></ul><ul><li>Use restraint when adding animated gifs </li></ul>
  9. 9. JPG <ul><li>Joint Photographic Experts Group </li></ul><ul><li>Format best used for photographs or continuous tone images. </li></ul><ul><li>24-bit images that allow millions of colors </li></ul><ul><li>Uses lossy compression-when the image is compressed some color information is discarded resulting in in a loss of quality form the original image. </li></ul><ul><li>Photoshop allow you to manually manipulate the compression of an image by using a slider. </li></ul><ul><li>The higher the compression the lower the image quality </li></ul>
  10. 10. PNG <ul><li>Portable Network Graphics </li></ul><ul><li>Royalty-free file format that was intened to replace GIF </li></ul><ul><li>Compresses images to a smaller file size than GIF </li></ul><ul><li>Supports transparency and interlacing but not animation </li></ul>
  11. 11. RGB COLOR MODELS <ul><li>Red, Blue and Green </li></ul><ul><li>RGB mirrors the way the human eye perceives color </li></ul><ul><li>The RGB model is called &quot;additive&quot; because a combination of the three pure colors red, green, and blue &quot;adds up&quot; to white light </li></ul><ul><li>You get secondary colors when you add red and blue to get magenta; green and blue to get cyan and red to green to get yellow </li></ul><ul><li>http://www.webstyleguide.com/graphics/displays.html </li></ul>
  12. 12. Pixels <ul><li>A pixel is the smallest element in a bit mapped image capture by a digital camera or scanner </li></ul><ul><li>Photoshop allows you to edit pixels, changing their color, shade and brightness. </li></ul>
  13. 13. Pixel and Color Depth <ul><li>To control the color of each pixel on the screen, the operating system must dedicate a small amount of memory to each pixel. </li></ul><ul><li>In the simplest form of black-and-white computer displays, a single bit of memory is assigned to each pixel. </li></ul><ul><li>Because each memory bit is either positive or negative (0 or 1), a 1-bit display system can manage only two colors (black or white) for each pixel on the screen: </li></ul>
  14. 14. Pixel and Color Depth <ul><li>If more bits of memory are dedicated to each pixel in the display, more colors can be managed. When 8 bits of memory are dedicated to each pixel, each pixel could be one of 256 colors </li></ul><ul><li>If still more memory is dedicated to each pixel, nearly photographic color is achievable on the computer screen. </li></ul><ul><li>&quot;True-color&quot; or &quot;24-bit&quot; color displays can show millions of unique colors simultaneously on the computer screen. </li></ul><ul><li>True-color images are composed by dedicating 24 bits of memory to each pixel; 8 each for the red, green, and blue components (8 + 8 + 8 = 24): </li></ul>
  15. 15. Resolution <ul><li>Pixels can vary in size. If you have an image with a resolution of 100ppi, each pixel would be 1/100 th of an inch square </li></ul>
  16. 16. Browser safe colors <ul><li>The browser safe color palette is a solution devised by Netscape to solve the problem of displaying color graphics in a similar way on all kinds of display screens. </li></ul><ul><li>Browser safe colors is based on an 8 bit 216 color palette (40 colors are reserved by windows operating system </li></ul><ul><li>The browser-safe color palette is a solution devised by Netscape to solve the problem of displaying color graphics in a similar way on many kinds of display screens, with browsers running under different operating systems </li></ul>
  17. 17. CMYK <ul><li>Is referred to as subtractive color model. </li></ul><ul><li>Used for printing </li></ul><ul><li>If you subtract all cyan, magenta and yellow you end up with the absence of color-white </li></ul>
  18. 18. Color Separation <ul><li>Full-color images are broken down to individual color components, one for each of the four process colors and additional separations for spot colors. </li></ul>=
  19. 19. RGB VS CMYK <ul><li>Work with RGB mode if the image is intended for use on the WWW or multimedia project </li></ul><ul><li>CMYK or RGB if the image is intended to print…just convert RGB to CMYK </li></ul>
  20. 20. Color Models
  21. 21. Dithering <ul><li>Used to reduce the color range of images down to the 256 or fewer colors seen in 8 bit GIF images. </li></ul><ul><li>Dithering reduces the overall sharpness of an image and often make the image look grainy. </li></ul>
  22. 22. Screen Resolution <ul><li>Refers to the number of pixels a screen can display with in a given area </li></ul><ul><li>Resolutions vary from 72-96 pixels per inch </li></ul><ul><li>When displaying images on the web you should set the resolution to 72 ppi </li></ul>

×