Winnie The Pooh Bear

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

บทที่ 9

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

            ปัญหาที่มักเกิดขึ้นกับการสร้างกราฟฟิกคือ การเลือกใช้รูปแบบกราฟฟิกที่ไม่เหมาะสมกับลักษณะของรูป โดยไม่รู้จักความแตกต่างของรูปแบบกราฟฟิก ส่งผลให้รูปที่ได้มีลักษณะไม่สมบูรณ์และมีไฟล์ใหญ่เกินความจำเป็น
  รายละเอียดของรูปแบบกราฟฟิกมี 3 ประเภทหลักๆ คือ GIF PGN และPNG
1. กราฟฟิกรูปแบบ GIF
    GIF ย่อมาจาก Graphic Interchange Format
               มีไฟล์นามสกุลเป็น .gif
                -   ได้รับความนิยมในยุคแรก
                -  มีระบบสีแบบ Index ซึ่งมีข้อมูลสีขนาด 8 บิต ทำให้มีสีมากที่สุด 256 สี
                -  มีการบีบอัดข้อมูลตามแนวของพิกเซล เหมาะสำหรับการฟฟิกที่ประกอบด้วยสีพื้น
                             *  GIF  มีการบีบอัดข้อมูลแบบไม่สูญเสีย  (Lossiess)  หมายความว่าจะไม่มีการสูญเสียข้อมูลภาพจากการบีบอัด
                             *  GIF  ใช้การบีบอัดที่เรียกว่า  LZW (Lempei-Ziv-Weleh)  ซึ่งเป็นแบบเดียวกับที่ใช้ในโปรแกรม  Zip  โดยใช้ประโยชน์จากการจากความซ้ำซ้อนของข้อมูล
                -  คุณสมบัติ  Interlacing  คือการบันทึกไฟล์  GIF  เป็น  4  ระดับ  คือ  ที่คุณภาพ  12.5% , 25% , 50% , 100%  ตามลำดับ
                           * ข้อดี  คือผู้ใช้เห็นภาพที่กำลังดาว์นโหลดอยู่มีความชัดเจนขึ้นเรื่อยๆ
                            * ข้อเสีย  คือขนาดไฟล์จะเพิ่มขึ้นเล็กน้อย
                -  คุณสมบัติในการเคลื่อนไหว  (Animated  GIF)
                           *  รูปที่ประกอบด้วยหลายๆเฟรมในรูปเดียวกัน  เมื่อมีการแสดงผลจะเห็นรูปมีการเปลี่ยนแปลงตามเฟรมต่างๆที่มีอยู่อย่างต่อเนื่อง
                            *  ข้อดี  ของ Animated  GIF  คือไม่ต้องอาศัย  plug-in  ใดๆเนื่องจากเบราเซอร์สนับสนุนคุณสมบัตินี้

2. กราฟฟิกรูปแบบ JPEG
    JPG ย่อมาจาก Joint Photographic Expert Group
            มีนามสกุลเป็น .jpg  หรือ  .jpeg
              -  มีข้อมูลสีขนาด 24 บิต (True Color) สามารถแสดงสีได้ถึง 16.7 ล้านสี
              - ใช้สีระบบบีบอัดที่มีลักษณะที่สูญเสีย (Lossy)
              - ไฟล์ประเภทนี้ควรนำไปใช้กับรูปถ่ายหรือกราฟฟิกที่มีการไล่ระดับสีอย่างละเอียด
              -   ไฟล์ประเภท  JPEG  ไม่ยึดติดกับระบบปฏิบัติการใดๆและสามารถใช้ได้กับเบราเซอร์ทั้ง  Netscape  และ  IE  version  2  เป็นต้นไป
                -  การขยายข้อมูลของ  JPEG
                            *  เนื่องจากข้อมูลถูกบีบอัดให้อยู่ในรูปของ  DCT  ดังนั้นเบราเซอร์ต้องทำการขยายข้อมูลก่อนแสดงผล  ดังนั้นเบราเซอร์จะใช้เวลาในการแสดงผลรูป  JPEG  มากกว่า  GIF
                            *  เนื่องจากจำนวนบิตของสีไฟล์  JPEG  เป็น  24  บิตเสมอจึงไม่สามารถลดขนาดไฟล์โดยการลดจำนวนบิตของสีลงได้
                            *  การลดขนาดไฟล์ทำได้โดยการบีบอัดในอัตราที่สูง  ทั้งนี้ก็ขึ้นอยู่กับคุณภาพที่ต้องการด้วย

3. กราฟฟิกรูปแบบ PNG 
     PNG ย่อมาจาก Portable Network Graphic
                -  สามารถสนับสนุนระบบสีได้ทั้ง 8 บิต 1  บิต  และ  24  บิต
                -  มีระบบการบีบอัดแบบ Deflate ที่ไม่ทำให้เกิดการสูญเสีย  (lossless)
                -  มีระบบการควบคุมแกมม่า (Gamma) และความโปร่งใส (Transparency) ในตัวเอง
               
ระบบการวัดขนาดของรูปภาพ
                -  รูปภาพใช้หน่วยวัดขนาดตามหน้าจอมอนิเตอร์  นั่นก็คือหน่วยพิกเซล  ซึ่งจะมีประโยชน์ในการเปรียบเทียบขนาดของกราฟฟิกกับองค์ประกอบอื่นๆในหน้าเว็บ  รวบถึงขนาดของหน้าต่างเบราเซอร์
                -  ระบบความละเอียดของรูปภาพที่แสดงผลบนจอมอนิเตอร์ควรใช้หน่วย pixel per  inch  (ppi)
                -  แต่ในทางการใช้งานจะนำหน่วย  dot  per  inch  (dpi)  ซึ่งเป็นหน่วยวัดความละเอียดของสิ่งพิมพ์มาใช้งานแทน  ppi
                -  ความละเอียดของรูปภาพที่ใช้ในเว็บไซต์ควรมีความละเอียดแค่ 72  ppi ก็เพียงพอ

โปรแกรมสร้างกราฟฟิกสำหรับเว็บ
                * Adobe  Photoshop  เป็นโปรแกรมที่ได้รับความนิยมตั้งแต่อดีตจนถึงปัจจุบัน
                * Adobe  ImangeReady  ลักษณะหน้าตาและเครื่องมือคล้ายคลึงกับ  Photoshop  แต่จะถูกพัฒนาข้นเพื่องานกราฟฟิกโดยเฉพาะ   เพิ่มความสามารถในการสร้าง  animation  ได้
                * Firework  มีคุณสมบัติในการตกแต่งตัวอักษรกราฟฟิกที่เห็นผลทันที  การแสดงค่าของสีในระบบเลขฐานสิบหก  การสร้างภาพเคลื่อนไหว  การตัดแบ่งภาพให้มีขนาดเล็กๆสำหรับไฟล์  HTML
                -  ค่าพื้นฐานที่สามารถเลือกปรับได้คือ  รูปแบบไฟล์ , ชุดสีที่ใช้ , จำนวนสี , ระดับความสูญเสีย , ความโปร่งใสและสีพื้นหลัง

คำแนะนำในกระบวนการออกแบบกราฟฟิกสำหรับเว็บ
ออกแบบกราฟฟิกโดยใช้ชุดสีสำหรับเว็บ  (Web Palette)
เลือกใช้รูปแบบกราฟฟิกที่เหมาะสม  GIF  หรือ  JPEG
ตัดแบ่งกราฟฟิกออกเป็นส่วนย่อย  (Slices)
สามารถปรับแต่งชิ้นส่วนของกราฟฟิกได้ตามความเหมาะสมของแต่ละบริเวณ     
                    
    << Back  

ไม่มีความคิดเห็น:

แสดงความคิดเห็น