20080306 Web Graphics

  • Published on
    29-May-2015

  • View
    2.946

  • Download
    3

Embed Size (px)

DESCRIPTION

เทคนิคการออกแบบกราฟิกสำหรับเว็บไซต์

Transcript

<ul><li> 1. </li></ul> <p> 2. 3. </p> <p> 4. </p> <ul><li><ul><li>(Personal/Business) </li></ul></li></ul> <ul><li><ul><li>(Screen Area ) </li></ul></li></ul> <ul><li>Screen Area 1024 x 768 pixels </li></ul> <ul><li>Web Area</li></ul> <ul><li><ul><li>1000 pixel </li></ul></li></ul> <ul><li><ul><li> Header 1 3 </li></ul></li></ul> <p> 5. Truehits.net 6. 7. </p> <ul><li>Header </li></ul> <ul><li>Banner </li></ul> <ul><li>Icon </li></ul> <p> 8. Template &amp; Layout Design TITLE Menu History Duty Project 9. Template &amp; Layout Design TITLE History Duty Project 10. Template &amp; Layout Design TITLE History Duty Project 11. Template &amp; Layout Design TITLE History Duty Project 12. </p> <p> 13. </p> <ul><li>.bmp </li></ul> <ul><li>.tif </li></ul> <ul><li>.wmf </li></ul> <ul><li>.gif </li></ul> <ul><li>.png </li></ul> <ul><li>.jpg </li></ul> <ul><li>.ai </li></ul> <p> 14. Interlaced Progressive 15. 100100 pixels 300250 pixels 300250 pixels Up to1024768 pixels Up to1024768 pixels Up to18401232 pixels Up to18401232 pixels Size 72 dpi 72 dpi 72 dpi 72 dpi 72 dpi Up to 350 dpi Up to 350 dpi Resolution GIF JPG PNG GIF JPG PNG TIF JPEG JPEG JPEG TIFF JPEG, TIFF Format Preview Website Database Presentation Digital Archive 16. Format </p> <ul><li>( File Size ) </li></ul> <p> 17. Interlaced Progressive 18. Interlaced GIF 19. JPEG Quality &amp; Progressive </p> <ul><li>JPGQuality </li></ul> <ul><li> Progressive </li></ul> <p> 20. GIF </p> <ul><li>Graphics Interlace File </li></ul> <ul><li>.gif </li></ul> <p> 21. Bit depth drastically affects file size 24 bit color 16 million colors 1.55 MB 8 bit color 256 colors 518k 8 bitgray scale 256 shadesof gray518k 1 bit ditheredimage64k 22. Transparent GIFs 23. Animation GIF 24. JPEG </p> <ul><li>Joint Photographer's Experts Group</li></ul> <ul><li>( File Compression )</li></ul> <ul><li> Progressive</li></ul> <ul><li>. jpg. jpeg </li></ul> <p> 25. JPEG File Format JPEG - 19K Low Quality JPEG - 60K Max Quality 26. PNG </p> <ul><li>Portable Network Graphics</li></ul> <ul><li>( True Color ) , ( Transparent )( Interlaced )</li></ul> <ul><li>. png </li></ul> <p> 27. GIF Transparent 28. GIF Transparent 29. TIFF </p> <ul><li>Tagged - Image File Format</li></ul> <ul><li> ( Layer ) , Annotation,CMYK, RGB, Lab Color </li></ul> <ul><li>. tif </li></ul> <p> 30. </p> <ul><li><ul><li> GIF (Graphics Interlace File) </li></ul></li></ul> <ul><li><ul><li> JPG (Joint Photographers Experts Group) </li></ul></li></ul> <ul><li><ul><li> PNG (Portable Network Graphics) </li></ul></li></ul> <p> 31. GIF / JPEG 32. GIF or JPEG? 33. </p> <p> 34. Image Metadata </p> <ul><li>Image MetadataXMP( eXtensible Metadata Platform )</li></ul> <ul><li>The Newspaper Association of America( NAA )The International Press Telecommunications Council( IPTC )</li></ul> <ul><li>Adobe PhotoShop 7.0 Title, Author, Position, Caption, Copyright, URL, Keyword, Categories, Detail of org. </li></ul> <p> 35. 36. Watermark </p> <ul><li><ul><li>Text Embedded Watermark </li></ul></li></ul> <ul><li><ul><li>Image Embedded Watermark </li></ul></li></ul> <ul><li>Digital Library, Digital Archive, E-Commerce </li></ul> <p> 37. 38. 39. Text Embedded Watermark </p> <ul><li>Adobe PhotoShopFile, File info, Copyright &amp; URL </li></ul> <ul><li>Search/FindWindows </li></ul> <p> 40. Image Embedded Watermark </p> <ul><li> , </li></ul> <ul><li>Watermarking Software</li></ul> <p> 41. Watermark Processing </p> <ul><li>Encoding </li></ul> <ul><li>Decoding/Detect </li></ul> <ul><li><ul><li>DetectWatermark Detecting Watermark Software </li></ul></li></ul> <p> 42. The Watermark Embedding Process 43. The Watermark Detection Process 44. </p> <ul><li>http://www.stks.or.th </li></ul> <ul><li>http://www.stks.or.th/elearning </li></ul>