Sriwattana Institute of International Business and Technology

1. Sriwattana Institute of International Business and Technology

2. เว็บกราฟิก และ Adobe PhotoShop องค์ประกอบสำคัญในการทำ Web ให้ดูน่าสนใจ คงหนีไม่พ้นรูปภาพที่นำมาตกแต่ง ซึ่งผู้พัฒนาหลายๆ คน บ้างก็นำภาพสำเร็จมาใช้งาน บ้างก็นำภาพจากเวบอื่นๆ ที่ดูสวยงามมาใช้ และก็มีไม่น้อยที่สร้างภาพเอง โดยอาศัยโปรแกรมกราฟิกต่างๆ เช่น PhotoShop, PhotoImpact, Paint Shop เป็นต้น

3. โปรแกรม PhotoShop นับว่าเป็นโปรแกรมกราฟิกสุดฮิต ที่นิยมใช้ในการปรับแต่งภาพ หรือสร้างภาพ เพื่อนำมาใช้งานในเวบ เนื่องจากมีฟังก์ชันการทำงาน ที่หลากหลาย มีฟิลด์เตอร์เพื่อปรับแต่งภาพ จากค่ายต่างๆ ทำให้ง่ายต่อการปรับแต่งภาพตามต้องการ เดิมทีนิยมใช้ PhotoShop เพื่องานสื่อสิ่งพิมพ์ (Desktop Publishing) แต่ปัจจุบัน Web Design มีบทบาทในงานธุรกิจและงานการศึกษาสูงมาก จึงนำ PhotoShop มาใช้ในงานนี้ด้วย

4. การทำภาพกราฟิกเพื่อใช้ในงานเวบมีหลักการเฉพาะ แตกต่างไปจากงานสื่อสิ่งพิมพ์ทั้งเรื่องความละเอียดของภาพ (Resolution) ที่ใช้แค่ 72 dpi หรือจำนวนสีที่ใช้แสดงผล เป็นต้น ดังนั้นการศึกษาถึง ลักษณะเฉพาะในการใช้ PhotoShop สร้างกราฟิกในงานเวบจึงเป็นศาสตร์ที่น่าสนใจอีกศาสตร์หนึ่ง

5. ลักษณะหน้าต่างโปรแกรมลักษณะหน้าต่างโปรแกรม

6. ส่วนที่1.เรียกกันว่าMenu barเป็นส่วนที่แสดงชื่อเมนูต่างๆของโปรแกรมก็จะประกอบด้วยFile , Edit , Image , Layer , Select  ,  Filter , View  , Window  , Help  1.Fileหมายถึงคำสั่งเกี่ยวกับการจัดเก็บและเรียกใช้ไฟล์รูปภาพต่างๆ 2.Edit หมายถึงคำสั่งเกี่ยวกับการแก้ไขลักษณะของรูปภาพและ Image ต่างๆ 3. Image หมายถึงคำสั่งการจัดการรูปภาพและ Image ต่างเช่นการเปลี่ยนสีและการเปลี่ยนขนาด

7. (ต่อ) 4. Layer หมายถึงชั้นหรือลำดับของรูปภาพและวัตถุที่เราต้องการจะทำ Effects 5. Select  เป็นคำสั่งการเลือกพื้นที่หรือส่วนต่างของรูปภาพและวัตถุในการที่จะเล่น Effects ต่างๆ6. Filter เป็นคำสั่งการเล่น Effects ต่างๆสำหรับรูปภาพและวัตถุ7. View เป็นคำสั่งเกี่ยวกับมุมมองของภาพและวัตถุในลักษณะต่างๆเช่นการขยายภาพและย่อภาพให้ดูเล็ก8. Window  เป็นส่วนคำสั่งในการเลือกใช้อุปกรณ์เสริมต่างๆที่จำเป็นในการใช้สร้าง Effects ต่างๆ9. Help เป็นคำสั่งเพื่อแนะนำเกี่ยวกับการใช้โปรแกรมฯและจะมีลายละเอียดของโปรแกรมอยู่ในนั้น

8. ส่วนที่2. คือส่วนของอุปกรณ์ต่างที่เราใช้ในการสร้างชิ้นงานต่างหรือใช้ในการตกแต่งภาพส่วนวิธีการใช้เราสอนในบทเรียนต่อไปในการเรียกอุปกรณ์เราสามารถเรียกได้โดยมาที่ window ---> Show Tools เมื่อเราคลิ๊กที่อุปกรณ์ตัวใดตัวหนึ่งค้างไว้ก็จะเห็นอุปกรณ์นั้นจะมีหลายแบบให้เราเลือกโดยการสังเกตจากเครื่องหมายจุดสามเหลี่ยมบนตัวอุปกรณ์

9. (ต่อ) และเมื่อดับเบิ้ลคลิ๊กก็จะปรากฏOption ของอุปกรณ์นั้นขึ้นมา จะมีให้เลือก Option ต่างๆ

10. ส่วนที่3. เป็นส่วนของพื้นที่ของไฟล์ใหม่ที่เราจะมาเริ่มต้นการสร้างชิ้นงานเราสามารถสร้างโดยคำสั่ง File --> New

11. Name = การตั้งชื่อหัวข้อเหนือไฟล์. Image Size = ขนาดความสูงความกว้าง Mode = เป็นการกำหนด Mode สีถ้าเป็นมาตรฐานจะเป็น RGB Color Contents ก็จะเป็นลักษณะพื้นหลังก็จะมี White (สีขาว) , Background Color (สีที่เรากำหนด) , Transparent (สีพื้นแบบ- โปร่งใส,ไม่แสดงสีพื้นโล่ง)

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

13. หน้าต่างฟังก์ชันงาน - Palettes Palettes เป็นหน้าต่างเล็กที่แสดงรายละเอียดของงานต่างๆ เช่น Palette Layer จะควบคุมการทำงานของเลเยอร์ เป็นต้น การเปิด/ปิด Palette เหล่านี้ใช้เมนูคำสั่ง Window

15. นอกจากนี้ยังมีคีย์ลัดในการควบคุม ได้แก่ สำหรับเปิด/ปิด palettes, the options bar, and the toolbox สำหรับเปิด/ปิด palettes

16. มารู้จักเครื่องมือและคำสั่งใช้งานใน Photoshop กันเถอะ

18. เครื่องมือบางรายการ จะเป็นชุดเครื่องมือ สังเกตได้จากรูปสามเหลี่ยมเล็กๆ ที่ปรากฏอยู่มุมล่างขวาของเครื่องมือนั้นๆ การเลือกเครื่องมือจากชุด ใช้วิธีกดเมาส์ค้างไว้ โปรแกรมจะแสดงเครื่องมือในกลุ่ม ดังนี้

19. จากนั้นปล่อยเมาส์ ณ ตำแหน่งเครื่องมือที่ต้องการเครื่องมือบางเครื่องมือ มีรายละเอียดปลีกย่อยในการใช้งานซึ่งควบคุมจาก Options Bar ดังนั้นเมื่อเลิกเครื่องมือใดๆ ควรกำหนดรายละเอียดการใช้งานเครื่องมือนั้นๆ ก่อนเสมอ ตัวอย่าง Lasso Options Bar

20. อุปกรณ์มาควี(Marquee Tools ) เป็นอุปกรณ์ที่ใช้ในการเลือกพื้นที่ของภาพตามต้องการโดยมีให้เลือกโดยการคลิ๊กเม้าค้างตรงรูปสามเหลี่ยมเล็กๆด้านข้างโดยจะมีแบบให้เลือกทั้งสี่เหลี่ยมวงรีเส้นนอนเส้นตั้ง

21. อุปกรณ์แลซโซ ( Lasso Tools) เป็นอุปกรณ์ที่ใช้ในการเลือกพื้นที่การทำงานแบบอิสระโดยเริ่มจากพื้นที่จากจุดเริ่มจนวนมาพบกันอีกครั้งโดยตัดในลักษณะใดก็ได้รูปแบบใดก็ได้..แล้วต้องกลับมาบรรจบที่จุดเริ่มต้นกันอีกครั้งซึ่งจะเกิดเส้น Selection ขึ้นมา

22. อุปกรณ์พ่นสี (AirBrush Tool) ใช้พ่นสีที่เราเลือกบนพื้นที่ที่เราต้องการซึ่งลักษณะที่ได้จะเหมือนกับการพ่นด้วย Air Brush

23. อุปกรณ์รับเอร์สแตมป์ ( Rubber stemp Tool ) ลักษณะในการใช้ก็คล้ายกับตรายางนั้นแหละครับเป็นการคัดลอกชิ้นงานออกมาลักษณะการใช้งานก็ไปคลิ๊กที่รูปภาพโดยให้กดปุ่ม Alt ค้างไว้ด้วยพูดอีกอย่างเป็นการโคลนนิ่งภาพนั้นเอง

24. อุปกรณ์ดินสอ ( Pencil Tool ) ลักษณะการทำงานก็คล้ายดินสอใช้วาดภาพเป็นอุปกรณ์เครื่องมือแบบเดียวกับ Paint Brush

25. อุปกรณ์โทนนิ่ง( Dodge Tool ) ใช้ในการปรับค่าโทนสีของภาพให้สว่างหรือมืดซึ่งจะมีเครื่องมือให้เลือกอีกคือ Dodge,Burn,Sponge

26. อุปกรณ์ไทป์( Type Tool ) เป็นอุปกรณ์ที่สำคัญและใช้บ่อยด้วยใช้สำหรับสร้างตักอักษรซึ่งสามารถนำมาจัดประกอบภาพได้ทันทีโดยคุณสามารถเลือกสีได้ด้วยและมีให้เลือก2แบบได้แก่การสร้างตัวอักษรทึบและแบบโปร่งเพื่อเติมสีทีหลังเหมาะสำหรับจะนำภาพมาสร้างตัวอักษร

27. อุปกรณ์ถังสี( Paint Bucket Tool ) ใช้ในการเทหรือละเลงสีระบายลงบนภาพหรือพื้นที่ที่ได้เลือกไว้เหมาะกับการเทลงพื้นที่ขนาดกว้าง

28. อุปกรณ์แฮนด์ ( Hand Tool ) เป็นเครื่องมือใช้เลื่อนภาพบนจอจะสามารถใช้ได้ก็ต่อเมื่อเราได้ขยายภาพล้นหน้าจอแล้วเท่านั้น

29. อุปกรณ์เคลื่อนย้าย(Move Tool ) เป็นอุปกรณ์ที่ใช้ในการเคลื่อนย้ายภาพหรือบนชั้น Layer ที่เรากำลังทำงานอยู่ไปในตำแหน่งต่างๆ

30. อุปกรณ์เมจิควอนด์ ( Magic Wand Tool ) เป็นอุปกรณ์ให้เลือกพื้นที่การทำงานเช่นกันโดยจะเลือกพื้นที่ที่มีสีโทนเดียวกันหรือมีสีโทนคล้ายๆกัน..ใช้ในการสร้างเส้น.. Selcetion เฉพาะพื้นที่

31. อุปกรณ์ Paint Brusเป็นอุปกรณ์สำหรับการวาดภาพและระบายสีซึงลักกษณะการใช้งานจริงๆจะมีให้เลือกใช้หลายตัว

32. อุปกรณ์ยางลบ ( Eraser Tool ) ก็ทำหน้าที่คล้าย..ยางลบนั้นแหละใช้ลบส่วนต่างๆของภาพที่เราไม่ต้องการ

33. อุปกรณ์โฟกัส ( Blur Tool )เป็นอุปกรณ์ที่ใช้สำหรับปรับค่าความคมชัดของสีภาพซึ่งจะประกอบด้วย Blur, Sharpen เลือกโดยการคลิ๊กเม้าค้างไว้

34. อุปกรณ์ปากกา( Pen tool )ใช้ในการสร้างเส้นภาพสำหรับวาดภาพซึ่งจะสร้างเส้นตรงก่อนแล้วดัดให้โค้งตามต้องการ

35. อุปกรณ์ไล่ระดับสี( Linear Gradient Tool ) เป็นการระบายสีภาพโดยการไล่เฉดสีที่เราต้องการเมื่อดับเบิ้ลคลิ๊กจะมีให้เลือกหลายลักษณะตามที่เราต้องการ

36. อุปกรณ์ดูดสี( Eyedropper Tool ) เป็นเครื่องมือในการดูดสีที่มีอยู่ในภาพเพื่อนำสิ่งนั้นไปใช้ในบริเวณอื่นโดยจะถือเป็น Foreground Color

37. อุปกรณ์แว่นขยาย ( Zoom Tool ) ใช้ในกรณีที่เราต้องการที่จะย่อ / ขยายภาพในจอหรือขยายเพื่อจะได้ทำได้ละเอียดมากยิ่งขึ้น

38. สรุปประเด็นสำคัญของภาพกราฟิกสำหรับงานเว็บสรุปประเด็นสำคัญของภาพกราฟิกสำหรับงานเว็บ การทำภาพกราฟิกเพื่อใช้ในงานเว็บ มีหลักการเฉพาะแตกต่างไปจากงานสื่อสิ่งพิมพ์ ทั้งเรื่องความละเอียดของภาพ (Resolution) ที่ใช้เพียง 72 dpi หรือจำนวนสีที่ใช้แสดงผล เป็นต้น ดังนั้นการศึกษาถึง ลักษณะเฉพาะในการใช้ PhotoShop สร้างกราฟิกในงานเว็บ จึงเป็นศาสตร์ที่น่าสนใจอีกศาสตร์หนึ่ง

39. ประเด็นสำคัญของภาพกราฟิกสำหรับงานเว็บประเด็นสำคัญของภาพกราฟิกสำหรับงานเว็บ • ใช้ความความละเอียดของภาพ (Resolution) 72 dpi ใช้โหมด RGB ในการสร้างงาน ต้องคำนึงถึง Screen Area ของจอภาพ ดังนี้ 640 x 480 pixel 800 x 600 pixel 1024 x 768 pixel

40. การเปิดไฟล์ภาพ (Open File) คำสั่งในการเปิดไฟล์ภาพของ PhotoShop มีสองคำสั่ง ได้แก่คำสั่ง File, Open… จะใช้ในกรณีที่ต้องการเปิดดูไฟล์ภาพทุกๆ ฟอร์แมตคำสั่ง File, Open as… ใช้ในกรณีที่ต้องการเปิดดูไฟล์ภาพที่ต้องการระบุนามสกุลของไฟล์

41. นอกจากนี้สามารถใช้วิธี Double Click บนพื้นที่ว่างๆ ของ Work Area ได้ โปรแกรม PhotoShop เตรียมภาพตัวอย่างไว้ให้เรียกดูจาก Folder ดังนี้

42. การจัดเก็บภาพ (Save File) สำหรับภาพต้นฉบับ การบันทึกภาพ หรือจัดเก็บภาพมีข้อพิจารณา 2 ประเด็นคือ การบันทึกภาพต้นฉบับซึ่งภาพลักษณะนี้จะยังคงชั้นของเลเยอร์ไว้ดังเดิม และการบันทึกภาพเพื่อนำไปใช้งานสำหรับงานเว็บ โดยโปรแกรมจะรวมเลเยอร์ที่มีทั้งหมดเป็นชั้นเดียว คือชั้น Backgroundซึ่งมีวิธีการบันทึกแตกต่างกันไป ดังนี้

43. (ต่อ) เปิดโปรแกรม PhotoShop สร้างภาพด้วยวิธีการของ PhotoShop หรือเปิดไฟล์ภาพที่ต้องการ ปรับแต่งภาพด้วยคำสั่งของ PhotoShop เมื่อปรับแต่งภาพได้ตามที่ต้องการแล้ว ก็จะทำการ จัดเก็บภาพโดยจะเลือกฟอร์แมตเป็น .PSD ดังนี้ เลือกคำสั่ง File, Save as สำหรับการจัดเก็บ

44. (ต่อ) งานครั้งแรก หรือ File, Save สำหรับการจัดเก็บงานครั้งที่สองและต้องการเปลี่ยนชื่อไฟล์ภาพ ปรากฏจอภาพโต้ตอบการทำงาน Save as ดังนี้เลือกไดร์ฟ และโฟลเดอร์ที่ต้องการเก็บภาพ ตั้งชื่อไฟล์ภาพ เลือกฟอร์แมตภาพเป็น .psdคลิกปุ่ม Save เพื่อยืนยันการจัดเก็บภาพ

45. เลือกไดร์ฟ และโฟลเดอร์ที่ต้องการเก็บภาพ ตั้งชื่อไฟล์ภาพ เลือกฟอร์แมตภาพเป็น .psdคลิกปุ่ม Save เพื่อยืนยันการจัดเก็บภาพ

46. การจัดเก็บภาพ (Save) ในฟอร์แมต JPG ภาพที่จะนำมาใช้ในการสร้าง Webpage มีฟอร์แมตแตกต่างไปจากภาพโดยทั่วไป โดยฟอร์แมตหนึ่งที่นิยมใช้คือ .JPG ซึ่งเป็นฟอร์แมตที่เหมาะกับภาพถ่าย หรือภาพที่ต้องการให้คงความคมชัดและความสดใสของสี โปรแกรม PhotoShop มีวิธีการจัดเก็บภาพให้เป็นฟอร์แมต JPG ดังนี้

47. (ต่อ) เปิดโปรแกรม PhotoShop สร้างภาพด้วยวิธีการของ PhotoShop หรือเปิดไฟล์ภาพที่ต้องการ ปรับแต่งภาพด้วยคำสั่งของ PhotoShop เมื่อปรับแต่งภาพได้ตามที่ต้องการแล้ว ก็จะทำการจัดเก็บภาพโดยจะเลือกฟอร์แมตเป็น .JPG ดังนี้

48. (ต่อ) เลือกคำสั่ง File, Save สำหรับการจัดเก็บงานครั้งแรก หรือ File, Save as สำหรับการจัดเก็บงานครั้งที่สองและต้องการเปลี่ยนชื่อไฟล์ภาพปรากฏจอภาพโต้ตอบการทำงาน เลือกไดร์ฟและโฟลเดอร์ที่ต้องการเก็บภาพ จากรายการ Save in: ตั้งชื่อไฟล์ภาพโดยพิมพ์ในบรรทัด File name: เลือกประเภทของไฟล์เป็น JPEG (*.JPG, *.JPE) จากรายการ Format

49. คลิกปุ่ม Save เพื่อยืนยันการจัดเก็บภาพ • ปรากฏหน้าต่าง JPEG Options ดังนี้ • กำหนดค่า Quality อันเป็นค่าเกี่ยวกับคุณภาพของภาพ ไว้ประมาณ 5 - 7 ไม่ควรกำหนดค่าไว้มากเกินไปเพราะจะทำให้ไฟล์มีขนาดใหญ่ และทำให้เสียเวลานานในการโหลดภาพจาก Server และไม่ควรกำหนดค่าไว้น้อยมาก เพราะจะทำให้คุณภาพของภาพต่ำ

50. (ต่อ) ภาพที่แสดงไม่คมชัดFormat Options เป็นรายการเลือกเพิ่มเติมสำหรับการนำเสนอไฟล์ภาพ โดย Baseline ("Standard") เป็นตัวเลือกที่ดีที่สุดสำหรับภาพ ที่ต้องการนำเสนอผ่านเว็บเบราเซอร์ เนื่องจากสนับสนุนกับเว็บเบราเซอร์ทุกตัว Baseline Optimized สำหรับการบีบอัดไฟล์ภาพให้มีขนาดเล็กกว่าปกติ แต่ก็ไม่ใช่ทางเลือกที่ดีที่สุด เพราะไม่สามารถแสดงผลได้กับเว็บเบราเซอร์ทุกตัว