1. ความรู้เกี่ยวกับการจัดการรูปภาพ สำหรับบริการข้อมูลบนเว็บไซต์

2. ประเภทของภาพกราฟิก แบบบิตแมป หรือ Raster based ซึ่งเกิดจากการนำเอาจุดสีเล็กๆ หลายๆ จุดมารวมกันเพื่อให้เกิดภาพ ซึ่งจะมีความกว้างยาว X pixel และ Y pixel และความลึกคือ Z pixel (Z pixel คือ ค่าความลึกของสี : Color Depth) ไฟล์ Raster มีรูปแบบและวัตถุประสงค์ในการใช้งานแตกต่างกันไป ซึ่งเราควรจะนำมาใช้ให้เหมาะสม แบบเวกเตอร์ / Vector based คือไฟล์กราฟฟิคที่เกิดจากการ ผลคำนวณทางคณิตศาสตร์เพื่อให้เกิดภาพ หรือเราจะเรียกไฟล์ชนิดนี้ได้อีกอย่างหนึ่งว่า ไฟล์ประเภท "postscript"ไฟล์ชนิดนี้บางประเภทก็ยังสามารถเก็บภาพ bitmap เอาไว้ในตัวได้อีกด้วย ส่วนใหญ่แล้ว ไฟล์ประเภท Vector นี้จะถูกแบ่งแยกโดยโปรแกรมประยุกต์ที่ใช้ในการแก้ไขไฟล์นั้นๆ

3. ตัวอย่าง ไฟล์รูประหว่าง Raster และ Vector

4. จำง่ายๆ กับรูปแบบ Raster คุณสมบัติที่ควรรู้ ภาพจากการถ่ายภาพด้วยกล่องดิจิตอล ภาพจากการสแกนจากภาพถ่าย ภาพจากการวาดด้วยโปรแกรมคอมพิวเตอร์ และแปลงไฟล์เป็น Raster และไม่สามารถนำไปแก้ไขเช่นเดียวกับ Vector เมื่อมีการขยาย หรือลดขนาดรูป เกินขนาดของต้นฉบับ ความคมชัดและคุณภาพจะลดลง

5. จำง่ายๆ กับรูปแบบ Vector คุณสมบัติที่ควรรู้ ภาพวาดจากโปรแกรมคอมพิวเตอร์ ซึ่งยังคงเป็นชนิดไฟล์แบบ Vector และยังสามารถแก้ไขภาพได้ โดยการแก้ไขนั้น ขึ้นอยู่กับโปรแกรมที่ใช้สร้าง สามารถขยาย หรือลดขนาดได้ โดยที่คุณภาพยังคงเท่าเดิม แต่จะต้องขยายกับโปรแกรมที่สามารถจัดการกับรูปแบบ Vector ได้เท่านั้น เมื่อต้องการนำไปงาน โดยส่วนใหญ่ต้องแปลงไฟล์มาอยู่ในรูปแบบ Raster

6. ตัวอย่าง ชนิดของไฟล์แบบ Raster BMP ถูกสร้างขึ้นมาเพื่อใช้เพื่อแสดงผลภาพกราฟฟิคโปรแกรมวินโดวส์ เป็นไฟล์ที่ไม่ค่อยมีประโยชน์ในด้านการใช้งานมากนัก คุณภาพสีดีแต่ขนาดไฟล์ใหญ่ ไม่ควรนำไปใช้งานสักเท่าไร JPG คุณภาพดีเทียบเท่ากับ BMP แต่ขนาดไฟล์เล็กกว่า นิยมใช้มากที่สุดสำหรับไฟล์รูปทั่วๆ ไป Gif คุณภาพสีลดลง ไฟล์เล็กลง เมื่อเทียบกับ JPG แต่ข้อดีคือ ทำเคลื่อนไหวได้และพื้นหลังโปร่งใสได้ PNG สีเหมือน JPG และ พื้นหลังโปร่งใสเหมือน GIF แต่เคลื่อนไหวแบบ GIF ไม่ได้ ฯลฯ

7. ตัวอย่าง ชนิดของไฟล์แบบ Vector AI AI เป็นไฟล์ของ Adobe Illustrator จึงควรรแก้ไขไฟล์ AI บนโปรแกรม Illustrator เท่านั้น EPS เป็นไฟล์ที่ถูกสร้างขึ้นมาเพื่อใช้ในงานออกแบบสื่อสิ่งพิมพ์ (Desktop Publishing) เป็นไฟล์ Vector มาตรฐาน ใช้งานได้กับโปรแกรมหลายโปรแกรม สามารถทำการแยกสีเพื่องานพิมพ์ได้ นอกจากนี้ยังใช้ในการเซฟ Vector ไฟล์ จากโปรแกรมหนึ่งเพื่อนำไปโหลดใช้งาน ในอีกโปรแกรมหนึ่งอีกด้วย ไฟล์ชนิดนี้จะมีขนาดใหญ่กว่าไฟล์ vector ชนิดอื่นๆ SWF เป็นไฟล์ Vector ของโปรแกรม Macromedia Flash ใช้ในการแสดงผล Flash อนิเมชั่นบนเวบเพจ ฯลฯ

8. รู้จัก Mode สีกันหน่อย โหมดสีที่ควรรู้ RGB (RED GREEN BLUE) ใช้สำหรับงานออกแบบ หรือผลผลิตที่ต้องการนำเสนอผ่านจอ คอมพิวเตอร์ โทรทัศน์ โปรเจคเตอร์ เป็นต้น

9. รู้จัก Mode สีกันหน่อย โหมดสีที่ควรรู้ CMYK (CYAN MAGENTA YELLOW BLACK) ใช้สำหรับงานออกแบบสื่อสิ่งพิมพ์ ที่ต้องการพิมพ์ออกมา เนื่องจากสีแบบนี้ จะไม่สว่างและไม่สด เท่ากับ RGB ไม่สามารถแสดงผลบนเว็บไซต์

10. โหมดสีที่เหมาะสำหรับเว็บไซต์ คือ ? RGB

11. เมื่อต้องการอัปรูปภาพขึ้นเว็ป นึกถึงอะไรบ้าง ? เอารูปมาจากไหน ถ่ายรูปยังไงดี / มุมไหนดี / ถ่ายตอนเช้า หรือ บ่าย ขนาดของรูป / ขนาดไฟล์ของรูป / ใช้ไฟล์ประเภทไหน อยกาปรับแต่งภาพ เพิ่ม-ลด แสง / สีสัน ของรูปภาพให้ดูสวยงามขึ้น แล้ว...สิ่งเหล่านี้...ทำยังไง

12. ถ่ายภาพพื้นฐาน...ควรดูอะไรบ้าง? สิ่งสำคัญพื้นฐานที่ควรมี ในการถ่ายภาพ แสง / ทิศทางของแสง ความเร็วชัดเตอร์ / ISO / รูรับแสง เวลา (เช้า-สาย-บ่าย-เย็น-มืดค่ำ) สถานที่ สีสัน เทคนิคการถ่ายภาพแบบ ชัดตื้น ชัดลึก องค์ประกอบและตำแหน่งน่าสนใจ

13. แสง / ทิศทางของแสง ถ่ายตามทิศทางของแสงที่เข้าหาวัตถุ แสงที่วัตถุจะไม่มืด เลือกความสว่างของแสงที่เพียงพอ ปรับค่าแสงจากในตัวกล้อง ตามแสง ย้อนแสง

14. ความเร็วชัดเตอร์ / ISO / รูรับแสง ความเร็วชัดเตอร์ยิ่งสูง การบันทึกภาพยิ่งเร็ว แต่แสงเข้าน้อย ฉะนั้นต้องปรับค่า ISO และ รูรับแสงให้พอดี ISO ช่วยเพิ่ม – ลดแสง แต่เมื่อเพิ่มมากๆ จะเกิด Noise ค่ารูรับแสงยิ่งสูง รูรับแสงยิ่งเล็กลง ความเร็วชัตเตอร์ช้าไป สำหรับภาพนี้ ภาพเกิด Noise

15. เวลา เช้า – สาย – บ่าย – เย็น – มืดค่ำ จะส่งผลกับทิศทางของแสงที่เข้าหาวัตถุ

16. สถานที่ เลือกให้เหมาะสมกับผลิตภัณฑ์ที่ต้องการนำเสนอ

17. สีสัน ปรับตั้งค่าในกล้อง ปรับแต่งด้วยโปรแกรมคอมพิวเตอร์

18. เทคนิคการถ่ายภาพแบบ ชัดตื้น / ชัดลึก

19. การปรับแต่งรูปพื้นฐาน การ Crop (เลือกเฉพาะส่วนที่ต้องการ) การเพิ่ม-ลด ความสว่าง การเพิ่ม-ลด ความสดของสี

20. การ Crop (เลือกเฉพาะส่วนที่ต้องการ) เปิดไฟล์รูปภาพ ไปที่เมนู File > Open

21. การ Crop (เลือกเฉพาะส่วนที่ต้องการ) เลือกไฟล์รูปภาพที่ต้องการ จากนั้นกดปุ่ม Open

22. การ Crop (เลือกเฉพาะส่วนที่ต้องการ) Crop รูปภาพในส่วนที่ต้องการ โดย ไปที่เครื่องมือ Crop Tool

23. การ Crop (เลือกเฉพาะส่วนที่ต้องการ) ตั่งค่าขนาดของการ Crop รูปภาพ ในส่วนของ Option ด้านบน ให้ปรับค่าเป็น600 x 600 pxและ Resolutionเป็น 72 pixels / inch

24. ค่า Resolution ที่ควรรู้ ค่า Resolutionสำหรับการแสดงผลบนเว็บไซต์ ไม่ควรเกิน 72 pixels / inch ค่า Resolutionสำหรับงานสิ่งพิมพ์ ไม่ควรน้อยกว่า 300 pixels / inch

25. การ Crop (เลือกเฉพาะส่วนที่ต้องการ) ลากเม้าส์ เพื่อกำหนดขอบเขตการ Crop ตามที่ต้องการ

26. การ Crop (เลือกเฉพาะส่วนที่ต้องการ) เมื่อกำหนดเสร็จ จะได้กรอบสี่เหลี่ยม crop บริเวณรูปที่ตามพื้นที่ ที่เลือกไว้

27. การ Crop (เลือกเฉพาะส่วนที่ต้องการ) สามารถปรับขนาด หรือ หมุน การ Crop ได้ โดยนำเม้าส์ไปชี้มุมของการ crop แล้ว คลิกลาก เข้า – ออก เพื่อขยายและลด

28. การ Crop (เลือกเฉพาะส่วนที่ต้องการ) เมื่อได้ตามต้องการแล้ว ดับเบิ้ลคลิก บริเวณของการ crop จะทำการ crop รูปภาพให้ตามที่เรากำหนดไป

29. การ Crop (เลือกเฉพาะส่วนที่ต้องการ) ตัวอย่างรูป ที่ได้จากการ crop และยังได้ขนาดเป็น 600 x 600 px

30. การ Crop (เลือกเฉพาะส่วนที่ต้องการ) จากนั้นบันทึกไฟล์รูปภาพ โดยไปที่เมนู File > Save As..

31. การ Crop (เลือกเฉพาะส่วนที่ต้องการ) ตั้งชื่อไฟล์รูปตามต้องการ แนะนำให้มีคำว่า 600pxตามหลังชื่อไฟล์ เพื่อบอกให้รู้ว่า ไฟล์ขนาด 600 px Format : ชนิดไฟล์ให้เป็น JPEG ตัวอย่าง เช่น desert-600px.jpg เมื่อตั้งชื่อเสร็จแล้ว กด Save

32. การ Crop (เลือกเฉพาะส่วนที่ต้องการ) หลักจากกด Save แล้ว จะแสดงหน้าต่าง Option ของไฟล์รูป ตัวเลข 12 คือ ค่าคุณภาพของรูป ยิ่งสูง ยิ่งดี แต่ขนาดไฟล์จะใหญ่ขึ้น (สูงสุดคือ 12) ส่วนของ Format Option ให้เลือกติ๊กถูกที่ Baseline (“Standard”) จากนั้นกด OK

33. การ Crop (เลือกเฉพาะส่วนที่ต้องการ) ทำการย่อขนาดรูปให้ได้เท่ากับ 200x200 px โดยไปที่เมนู Images > Images Size…

34. การ Crop (เลือกเฉพาะส่วนที่ต้องการ) หน้าต่าง Image size จะแสดงค่าต่างๆ ของไฟล์ ให้ปรับค่าจาก 600 เป็น 200 (หน่วยต้องเป็น Pixels นะครับ)

35. การ Crop (เลือกเฉพาะส่วนที่ต้องการ) ปรับแล้วได้ตามนี้ จากนั้นกด OK

36. การ Crop (เลือกเฉพาะส่วนที่ต้องการ) ทำการ Saveไฟล์รูปให้เป็นขนาด 200 x 200 pxโดยไปที่เมนู File > Save As…

37. การ Crop (เลือกเฉพาะส่วนที่ต้องการ) ตั้งชื่อไฟล์รูปตามต้องการ แนะนำให้มีคำว่า 200pxตามหลังชื่อไฟล์ เพื่อบอกให้รู้ว่า ไฟล์ขนาด 200px Format : ชนิดไฟล์ให้เป็น JPEG ตัวอย่าง เช่น desert-200px.jpg เมื่อตั้งชื่อเสร็จแล้ว กด Save

38. การ Crop (เลือกเฉพาะส่วนที่ต้องการ) เป็นอันเสร็จสิ้นการสร้างรูปขนาด 600 x 600 pxและ 200 x 200 px

39. การปรับแสงให้กับรูปภาพ

40. การปรับแสงให้กับรูปภาพ ไปที่เมนู Image > Adjustments > Brightness / Contrast…

41. การปรับแสงให้กับรูปภาพ ปรับค่าตามต้องการ โดยค่าเป็น 0 คือ ค่าแสงต้นฉบับของรูปภาพ การเพิ่ม-ลด แสงขึ้นอยู่กับค่าตัวเลข

42. การปรับแสงให้กับรูปภาพ ตัวอย่างลองปรับค่าแสงเท่ากับ 60 ภาพที่ได้ จะมีแสงสว่างมากขึ้น – จากนั้นกดOK

43. การเพิ่มความสดของสีให้รูปภาพ ก่อน หลัง

44. การเพิ่มความสดของสีให้รูปภาพ ไปที่เมนู Image > Adjustments > Hue / Saturation…

45. การเพิ่มความสดของสีให้รูปภาพ ปรับค่าของ Saturation – ค่ายิ่งสูง ความสดยิ่งเพิ่มตามลำดับ

46. การเพิ่มความสดของสีให้รูปภาพ ตัวอย่างการ ปรับค่าของ Saturationเท่ากับ +50

47. การเพิ่มความสดของสีให้รูปภาพ ผลที่ได้ตามนี้

48. การโหลดภาพจากกล้องลงคอมพิวเตอร์ วิธีการโหลดภาพแบบพื้นฐานที่ควรรู้ ดังนี้ การเชื่อมต่อโดยตรงกับตัวกล้อง ผ่านสายข้อมูลของกล้อง การเชื่อมต่อกับ Memory ของกล้องโดยผ่าน Card Reader

49. การเชื่อมต่อโดยตรงกับตัวกล้อง ผ่านสายเชื่อมต่อข้อมูลของกล้อง

50. การเชื่อมต่อกับ Memory ผ่าน Card Reader