วันพุธที่ 10 กันยายน พ.ศ. 2557

Raster / Vector และ Pixel

แนวคิดและทฤษฎีพื้นฐานในการออกแบบกราฟิกไปประยุกต์ใช้ใน การทำงานด้านธุรกิจ
ภาพบนคอมพิวเตอร์ หรือกราฟิคคอมพิวเตอร์สามารถแบ่งออกได้เป็นสองประเภทคือ ภาพแบบบิตแมป (bitmap) และภาพแบบเวกเตอร์ (vector) ความเข้าใจความแตกต่างของกราฟิค ทั้งสองประเภทจะช่วยให้คุณสามารถเลือกใช้งานได้อย่างยืดหยุ่น มีประสิทธิภาพ และตรงตาม จุดประสงค์สูงสุดในการใช้งาน
พิกเซล
พิกเซล (Pixel) เป็นการผสมผสานของคำว่า “Picture” และ “element” คือหน่วย พื้นฐานของภาพ ภาพบิตแมปทุก ๆ ภาพประกอบขึ้นด้วยพิกเซล แต่ละพิกเซลจะมีลักษณะ เป็นรูปสี่เหลี่ยมที่เก็บข้อมูลของสีโดยถูกกำหนตำแหน่งไว้บนเส้นกริดของแนวแกน x และ y ในลักษณะคล้ายแผนที่ (map) นั่นจึงเป็นที่มาของคำว่าบิตแมป (bitmap) เช่น พิกเซลของ ภาพ 8 บิต จะเก็บข้อมูลของสี 8 บิต ที่จอภาพจะใช้ในการแสดงผล ดังนั้นภาพภาพหนึ่งจึงประกอบด้วยพิกเซลเล็ก ๆ จำนวนมาก ซึ่งคุณสามารถมองเห็นได้เมื่อ ขยายภาพให้มีขนาดใหญ่ขึ้น
จำนวนของพิกเซลที่แสดงต่อหน่วยของความยาวในภาพจะถูกเรียกว่าความละเอียด ของภาพ โดยปกติจะวัดเป็นพิกเซลต่อนิ้ว (ppi : pixel per inch) ภาพที่มีความละเอียดสูงจะ ประกอบไปด้วยพิกเซลจำนวนมากที่มีขนาดเล็กกว่าภาพเดียวกันที่มีความละเอียดน้อยกว่า ตัวอย่าง เช่น ภาพขนาด 1 x 1 นิ้ว ที่ความละเอียด 72 ppi จะประกอบด้วยพิกเซล 5,184 พิกเซล (ความกว้าง 72 พิกเซล x ความยาว 72 พิกเซล = 5,184) และภาพเดียวกันที่ความละเอียด 300 ppi จะประกอบด้วยพิกเซล 90,000 พิกเซลที่มีขนาดของพิกเซลเล็กกว่า (300 x 300 = 90,000) แน่นอน ว่าภาพที่มีความละเอียดมากกว่าก็จะใช้พื้นที่ในการจัดเก็บมากกว่า

pixel
ภาพบิตแมปหรือราสเตอร์
        โปรแกรมปรับแต่งภาพส่วนใหญ่ที่มีอยู่ในท้องตลาดทุกวันนี้ มักจะทำงานกับภาพแบบบิตแมป หรือที่เรียกกันว่าแบบราสเตอร์ (raster) ภาพแบบบิตแมปนี้จะใช้ กริดของตารางเล็ก ๆ ที่เรารู้จักกันดีในชื่อ "พิกเซล" (pixel) สำหรับแสดงภาพ แต่ละพิกเซล ก็จะมีค่าของตำแหน่งและค่าสีของตัวเอง ด้วยเหตุที่พิกเซลมีขนาดเล็กเราจึงเห็นว่าภาพ มีความละเอียดสวยงาม ไม่มีลักษณะของกรอบสี่เหลี่ยมให้เห็น แต่ถ้าเราขยายขนาดของภาพ ก็จะเห็นกรอบเล็ก ๆ หรือพิกเซลที่ประกอบกันขึ้นมาเป็นภาพ ดังนั้นนเมื่องคุณทำงานกับภาพแบบมิตแมป จึงเป็นทำงานกับพิกเซลเล็ก ๆ ที่ประกอบกันขึ้นมาเป็นภาพ ไม่ใช่วัตถุหรือรูปทรงที่เห็น ภาพแบบบิตแมป เป็นภาพที่ขึ้นอยู่กับความละเอียด (resolution) นั่นคือ มีจำนวนพิกเซลที่แน่นอนในการแสดงภาพ ดังนั้นจากตัวอย่างในภาพที่ 1 คุณจะเห็นว่าเมื่อภาพถูกขยาย หรือพิมพ์ด้วยความละเอียดไม่มากพอ ภาพจะสูญเสียรายละเอียด และปรากฏเป็นรอยหยักอย่างชัดเจน อย่างไรก็ตามภาพแบบบิตแมป ถือเป็นรูปแบบที่เหมาะกับภาพที่มีเฉดและสีสันจำนวนมาก เช่น ภาพถ่าย หรือภาพวาด
bitmap
ภาพเวกเตอร์
ภาพแบบเวกเตอร์จะต่างจากภาพแบบบิตแมป ซึ่งคุณจะได้พบกับภาพแบบนี้บนโปรแกรม สำหรับวาดภาพเช่น Adobe Illustrator, Macromedia Freehand ภาพแบบเวกเตอร์จะประกอบด้วย เส้นสาย ลวดลายต่าง ๆ ที่สร้างขึ้นจากการคำนวณทางคณิตศาสตร์ของลักษณะทางเรขาคณิตเพื่อ สร้างรูปทรงต่าง ๆ ที่คุณเห็น ซึ่งเรียกว่าเวกเตอร์ (vectors)
ข้อดีของภาพแบบเวกเตอร์ที่มีเหนือภาพแบบบิตแมปคือ คุณสามารถเคลื่อนย้าย ปรับขนาด เปลี่ยนสี รูปทรง โดยไม่สูญเสียคุณภาพของภาพ เพราะภาพแบบเวกเตอร์ เป็นภาพที่ไม่ขึ้นกับ ความละเอียด นั่นคือสามารถปรับขนาดและพิมพ์ที่ความละเอียดใด ๆ โดยไม่สูญเสียรายละเอียด และคุณภาพ ดังนั้นภาพแบบเวกเตอร์จึงเหมาะกับภาพลายเส้นต่าง ๆ เช่น ตัวอักษร โลโก้
 
vector
ความละเอียดของภาพ
เมื่อภาพต่าง ๆ ถูกแสดงบนจอ ขนาดของภาพที่แสดงจะถูกกำหนดโดยขนาดของ พิกเซล(pixel dimension) ของภาพ บวกกับขนาดและการตั้งค่าความละเอียดในการแสดง ผลของจอภาพ ขนาดไฟล์ของภาพถึงแปรผันตรงกับขนาดของพิกเซล ดังนั้นการแสดงภาพ เดียวกันที่จอภาพขนาดต่างกัน เช่น 14” และ 21” ซึ่งกำหนดขนาดความละเอียดในการแสดง ผลเท่ากัน เช่น 640 x 480 จะให้ภาพที่สามารถแสดงได้อย่างเต็มจอ แต่ภาพที่ปรากฏบนจอภาพ ขนาดใหญ่จะปรากฎให้เห็นเป็นพิกเซลขนาดใหญ่ขึ้น แต่เมื่อคุณกำหนดให้ความละเอียดใน การแสดงผลเพิ่มขึ้น เช่น กำหนดเป็น 800 x 600 หรือ 1024 x 768 พิกเซล คุณจะเห็นภาพที่แสดงมี ขนาดเล็กลง คุณจะเห็นแล้วว่าความละเอียดในการแสดงผลของจอภาพมีผลต่อขนาด ของภาพที่ปรากฎ สิ่งนี้จะมีผลอย่างยิ่งโดยเฉพาะภาพกราฟิคที่คุณต้องการนำไปใช้บนเว็บ เพราะ ผู้ใช้แต่ละคนมีขนาดจอภาพ และการตั้งค่าความละเอียดในการแสดงผลที่ต่างกัน การกำหนด ขนาดและความละเอียดของภาพ 1024 x 768 พิกเซล ภาพของคุณจะสามารถแสดงบนจอภาพของ ผู้ใช้ที่มีขนาดเดียวกัน และกำหนดขนาดความละเอียดเท่ากัน แต่ถ้าภาพของคุณต้องไปแสดงบนจอ ภาพขนาด 14” ที่กำหนดความละเอียด 640 x 480 ปัญหาเรื่องขนาดของไฟล์จะเกิดขึ้นทันที
 
ch8
 
 

ความรู้เบื้องต้นของโปรแกรมกราฟฟิกส์

รู้จักกับโปรแกรม Photoshop

        Adobe Photoshop คือชื่อเต็มของโปรแกรมนี้ ที่ใช้สำหรับการตกแต่งภาพ แก้ไขภาพ ย่อขนาด เปลี่ยนประเภทไฟล์ หรือหลายๆ คนอาจเคยได้ยินคำว่า Retouch ภาพซึ่งก็มีความหมายในแนวเดียวกัน?โปรแกรม photoshop นี้ถือได้ว่าเป็นโปรแกรมที่ดีที่สุด และน่าใช้ที่สุดสำหรับการแก้ไขภาพก็ว่าได้ เรียกว่า ถ้าพูดถึงการแก้ไขรูปภาพดิจิตอล ต้องพูดถึงโปรแกรม Adobe Photoshop เลยทีเดียว
photoshop_cs
      เราสามารถเรียนรู้วิธีการใช้โปรแกรม Adobe Photoshop นี้ได้ด้วยตัวเอง รับรอง คุณสามารถที่จะทำการแก้ไขภาพ ตกแต่งภาพ ซ้อนภาพในรูปแบบต่างๆ ได้อย่างง่ายดาย พร้อมกันนี้ที่ขาดไม่ได้ก็คือ การใส่ข้อความประกอบลงในภาพของเรา? และเนื่องด้วย Adobe Photoshop มีการพัฒนาโปรแกรมมาอย่างต่อเนื่อง ทำให้เราจำเป็นต้องศึกษาคำสั่งต่างๆ ให้เข้าใจ แต่ที่สำคัญ เมื่อคุณเรียนรู้การใช้คำสั่งในเวอร์ชั่นเก่า คุณก็ยังคงสามารถนำไปประยุกต์ใช้กับเวอร์ชั่นใหม่ๆ ได้ด้วยครับ

        ความสามารถพื้นฐานของ Adobe Photoshop ที่ควรทราบ

  • ตกแต่งหรือแก้ไขรูปภาพ
  • ตัดต่อภาพบางส่วน หรือที่เรียกว่า crop ภาพ
  • เปลี่ยนแปลงสีของภาพ จากสีหนึ่งเป็นอีกสีหนึ่งได้
  • สามารถลากเส้น แบบฟรีสไตล์ หรือใส่รูปภาพ สี่เหลี่ยม วงกลม หรือสร้างภาพได้อย่างอิสระ
  • มีการแบ่งชั้นของภาพเป็น Layer สามารถเคลื่อนย้ายภาพได้เป็นอิสระต่อกัน
  • การทำ cloning ภาพ หรือการทำภาพซ้ำในรูปภาพเดียวกัน
  • เพิ่มเติมข้อความ ใส่ effect ของข้อความได้
  • Brush หรือแปรงทาสี ที่สามารถเลือกรูปแบบสำเร็จรูปในการสร้างภาพได้
  • และอื่นๆ อีกมากมาย
นอกจากนี้ ยังมีโปรแกรมเสริมที่ช่วยให้การตกแต่งภาพด้วย Photoshop เป็นเรื่องง่ายๆ อีก นั่นคือ Plug-ins ของ Photoshop ซึ่งได้แก่ การปรับภาพจากภาพถ่าย มาเป็นภาพแบบวาดด้วยสีน้ำ ภาพลายการ์ตูน เป็นภาพลายเส้น เป็นต้น สำหรับ Plug-ins ที่เป็นที่นิยมใช้กับ Photoshop ได้แก่
  • AlienSkin Eye Candy
  • Extensis Photo Frame
  • Extensis Photo Graphics
  • Extensis Photo Tools
  • Kai's Power Tools

ส่วนประกอบของโปรแกรม Photoshop

หน้าจอของโปรแกรม Photoshop ประกอบไปด้วยองค์ประกอบต่าง ๆ ดังต่อไปนี้
1. สัญลักษณ์ของโปรแกรม Photoshop
2. แถบเมนู ( Manu Bar )
3. ปุ่มควบคุมการทำงาน
4. แถบกำหนดรูปแบบของเครื่องมือที่ใช้งาน ( Tool Option Bar )
5. กล่องเครื่องมือ ( Tool Box )
6. Palette ที่รวบรวมคุณสมบัติของการทำงานต่างๆ เช่น Navigator , Color , Layer , History เป็นต้น