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

บทท่ี 2Adobe Photoshop การออกแบบกราฟิกสาหรบั เวบ็ ไซต์นางอัญชลีพร ลาบุญวทิ ยาลยั อาชีวศึกษาพษิ ณุโลก

1 บนเว็บไซต์ (Web Site) จะมีเนื้อหาหรือข้อมูลหลากหลายมาก ยง่ิ ในปจั จุบันการแข่งขนัยงิ่ สงู มาก เว็บองคก์ รใหญ่ ๆ จะเน้นการนาเสนอท่ีโดดเด่นและน่าสนใจ มคี วามพยายามทีจ่ ะทาให้ข้อมูลโลดเล่นทะลอุ อกมาให้ได้ ไม่ได้เน้นเน้ือหาท่ีเป็นข้อความและรูปภาพแบบสมัยกอ่ น แต่จะสร้างการโต้ตอบในรปู แบบของภาพเคล่ือนไหวในรูปแบบต่าง ๆ แตเ่ น้ือหาทเ่ี ป็นหวั ใจหลกั ของแต่ละเวบ็ ไซตก์ ็คงหนีไม่พน้ ข้อความและภาพแน่นอน เพราะเนอ้ื หาพน้ื ฐาน วธิ ีการเตรียมภาพไปใช้ในงานบนเวบ็ ไซต์ดว้ ยโปรแกรม Adobe Photoshop CS6 เพอ่ื สรา้ งเว็บไซตไ์ ดอ้ ยา่ งสวยงามและสมบรู ณแ์ บบ บทที่ 2 Adobe Photoshop การออกแบบกราฟิกสาหรบั เว็บไซต์

2 หนว่ ยที่ 2Adobe Photoshop การออกแบบกราฟกิ สาหรบั เว็บไซต์ การสร้างเวบ็ ไซต์ให้มคี วามสวยงามต้องใช้โปรแกรมสาหรบั การสร้างภาพกราฟกิ เพือ่เว็บไซต์ทส่ี วยงาม เช่น การออกแบบภาพ นาภาพถา่ ยตกแตง่ แก้ไขความบกพร่องส่วนตา่ ง ๆ ของภาพ และการใช้ Effects ตา่ ง ๆ เช่น สรา้ งตัวอกั ษรใหเ้ หมาะสมสาหรบั เว็บไซต์การเลือกภาพการกาหนดขนาดภาพ การออแบบกราฟิกนีใ้ ช้โปรแกรม Photo shop Cs6 จดั การกบั ภาพ เชน่ นาภาพมาตกแต่ง แกไ้ ข หรอื ออกแบบภาพสาหรบั หนา้ เว็บไซต์ ภาพกราฟกิ ในเวบ็ ไซต์แสดงอยู่บนเวบ็ ไซต์จะประกอบดว้ ยขอ้ ความ และภาพ ซึ่งจะผสมผสานกนั เพ่ือใหก้ ารนาเสนอขอ้ มูลได้อย่างสมบรู ณ์ ถ้ามีแต่ข้อความผชู้ มจะรูส้ ึกเบ่ือหนา่ ยไม่นา่ ตดิ ตาม อาจจะแทรกภาพประกอบลงไปบ้าง ชว่ ยอธบิ ายเนอ้ื หาให้เหน็ ภาพชัดเจนยิ่งขนึ้ เปน็ จุดพกั สายตาเช่อื มโยงไปยงั เน้ือหา แตถ่ ้าแทรกภาพอย่างเดียวไมม่ ีขอ้ ความให้อ่านผ้ชู มก็อาจไมเ่ ขา้ ใจถา้ ภาพนนั้ ไมส่ อ่ื ความหมายพอ2.1 ความรเู้ บอ้ื งต้นเก่ียวกบั โปรแกรม Adobe Photoshopโปรแกรม Adobe Photoshop คอื โปรแกรมเพื่อสรา้ งแกไ้ ขภาพ สามารถสรา้ งชิน้ งานได้หลากหลาย เชน่ การสรา้ งภาพเพอื่ ใช้ในงานเวบ็ เพจ การปรับแตง่ แก้ไขภาพเพอื่ ให้ได้รูปแบบใหม่การย้ายภาพตามตอ้ งการและสรา้ งสรรค์ตามจินตนาการ2.1.1 การเรยี กใช้โปรแกรม Adobe Photoshop การเรียกใช้งาน มวี ิธกี ารหลายวธิ เี ช่นขั้นตอนการเรียกใช้จากหนา้ ตา่ งโปรแกรมที่ปุ่ม ขนั้ ตอนดงั น้ี1. คลกิ เลอื กปุ่ม หรอื ปมุ่ Start2. เลอื ก โปรแกรมทง้ั หมด (All Program)3. คลิกเลือก โปรแกรม231 ภาพที่ 2.1 การเรียกใช้โปรแกรม Adobe Photoshop บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรบั เวบ็ ไซต์

3 4. เขา้ สู่หนา้ จอโปรแกรม Adobe Photoshop 2.1.2 สว่ นประกอบของโปรแกรม Adobe Photoshop หนา้ ต่างการทางานของโปรแกรม โดยแบง่ หมวดหม่ขู องกล่องเคร่ืองมือตา่ งๆการแบง่ พื้นทก่ี ารทางาน Workspace รปู แบบเครือ่ งมือการทางานท่ีหลากหลาย ซ่ึงประกอบเป็นหนา้ ต่างโปรแกรม Adobe Photoshop ดังภาพที่ 2.2เมนูบาร์ ออปชันบาร์ ย่อ/ขยายหนา้ ต่าง และปดิ โปรแกรม ขนาดความจขุ องไฟล์ ไฟล์ภาพท่ีเปิดใช้งานปจั จบุ นั ชุดพาเลต เปอรเ์ ซน็ ต์การขยายภาพกลอ่ งเครื่องมอื อ(Toolbox)ภาพที่ 2.2 ส่วนประกอบของหนา้ จอโปรแกรม Adobe Photoshop บทท่ี 2 Adobe Photoshop การออกแบบกราฟิกสาหรบั เวบ็ ไซต์

4 2.1.3 Menu Bar ชุดเมนคู าส่ังทีใ่ ช้จดั การไฟลภ์ าพท่เี ปดิ ใช้งานการปรับแตง่ แก้ไขภาพในโปรแกรมAdobe Photoshop โดยแบง่ กลุ่มเมนูคาส่งั การทางาน ดังตาราง ตารางที่ 2.1 แสดง Menu Barชอื่ เมนู หน้าที่ File จัดการเกี่ยวกบั ไฟลต์ า่ งๆ เช่น การสรา้ งไฟลใ์ หม่ การเปิดภาพ Edit การบนั ทกึ ภาพ การนาเข้า (Import) ไฟล์ หรือการนาออก (Export)Image ไฟลเ์ พื่อทางานในลกั ษณะต่างๆ ชดุ คาสง่ั ในหมวดหมขู่ องการแกไ้ ข เชน่ การตดั การคัดลอก การวาง Layer รวมถงึ การปรับแตง่ คา่ เบอ้ื งต้นของโปรแกรม เช่น ระบบการจดั โหมดสี Select ชดุ คาสัง่ ทใ่ี ช้จดั การภาพ เช่น การแก้ไขความสวา่ ง หรือสีภาพให้สมดุล Filter มากยงิ่ ข้ึน การปรบั ขนาดของภาพ และการกาหนดพนื้ ที่การทางานใน View ส่วนของภาพWindow จดั การกบั Layer ของภาพ เช่น การสรา้ ง Layer ใหม่ การรวม Layer Help การแปลง Layer และการจัดการเกีย่ วกบั Layer ภาพน้นั ๆ ปรบั แตง่ ขอบเขตพ้ืนที่ (Selection) การบันทกึ และเรียกใชง้ านขอบเขต พนื้ ทีท่ ก่ี าหนดไว้ ชดุ คาสั่งสาหรบั แปลงภาพให้มีรปู แบบท่นี า่ สนใจ เลอื กรปู แบบการแสดงผล เช่น การซมู ภาพ การแสดงไม้บรรทัด การแสดงเส้นกริด (Grid ) และเสน้ ไกด์ (Guide) เลอื กแสดงพาเลตท่ใี ช้ในการทางาน รวมถงึ การกาหนดรูปแบบ การแสดงหน้าตา่ งวินโดวใ์ นรปู แบบต่างๆ แสดงความชว่ ยเหลือรายละเอยี ดการใชง้ านโปรแกรมรปู แบบต่างๆ บทที่ 2 Adobe Photoshop การออกแบบกราฟิกสาหรับเว็บไซต์

5 2.1.4 Option Bar Option Bar คือ แผงควบคมุ เคร่ืองมือ ซึ่งจะมีรูปแบบแตกตา่ งกันไปตามเคร่ืองมือทเี่ ลอื กใชง้ านขณะน้นั โดยการทางานส่วนใหญจ่ ะมกี ารปรบั แต่งให้เหมาะสมกบั การทางานในแต่ละเครือ่ งมือนั้นๆ เช่น การใชเ้ ครื่องมือ Brush Tool ดังภาพ การบนั ทึกคา่ การปรับแต่งของเคร่ืองมอื สามารถบนั ทึกลักษณะของเคร่ืองมือทใ่ี ชเ้ ป็นประจา เช่น ความฟุ้งของเส้นขอบเครือ่ งมือ Brush Tool ไว้ใช้ในภายหลงั ขั้นตอนดงั นี้ 1. ลกั ษณะของ Option Bar เม่ือเลอื กใชเ้ ครือ่ งมือ 2. กาหนดรปู แบบเคร่อื งมือทตี่ ้องการใชภ้ ายหลัง 3. คลิกเพอื่ บันทกึ คา่ มหี นา้ ต่างยืนยนั การบันทึกกดปมุ่ OK 4. รปู แบบเครื่องมือท่บี นั ทึกแล้ว 1 2 3 4ภาพที่ 2.4 การบนั ทึกคา่ การปรับแต่งของเครอื่ งมือ Brush Tool2.1.5 วธิ ีการเรียกใช้ Palette บทที่ 2 Adobe Photoshop การออกแบบกราฟิกสาหรบั เว็บไซต์

6 Palette (พาเลต) คือ หน้าตา่ งเพิ่มความสะดวกประกอบการทางานร่วมกับเคร่ืองมือตา่ งๆ แตล่ ะพาเลตมีรูปแบบหนา้ ที่การทางานแตกต่างกัน เชน่ พาเลต Color ใชส้ าหรบั เลอื กสีพน้ืหรอื สีเสน้ พาเลต History บนั ทกึ การทางานท่ีผา่ นมาเพ่ือกลบั ไปคาสั่งก่อนหน้ากรณที ่ีต้องการการทางานชุดเกา่ พาเลต Info ใช้สาหรับแสดงขอ้ มลู พาเลต Layer ใช้แสดงลาดบั ภาพและข้ันตอนการทางานเหมือนการวางหนังสือซอ้ นกนั หลายเลม่ พาเลต Navigator กาหนดการแสดงภาพและการย่อหรือขยายภาพ โดยพาเลตทกุ พาเลตมีวธิ กี ารเรียกใชเ้ หมือนกัน เช่น วธิ ีการเรียกใชพ้ าเลตLayer ดงั น้ี 2.1.5.1 การเปิดพาเลต คอื การเปิดใชง้ านพาเลตตา่ งๆ ดังน้ี 1) การเรยี กใชพ้ าเลตจากเมนู Window เช่น วิธีการเรยี กใช้ พาเลตLayer คลิกเมาสท์ เ่ี มนู Window  Layers ภาพที่ 2.5 พาเลต Layer พาเลตใดที่ถูกเปดิ ใชง้ านอยใู่ นปัจจุบนั นั้นจะมเี ครื่องหมาย  อยหู่ นา้ คาสงั่ เมนู ถา้ ไม่ต้องการพาเลตดงั กลา่ วให้ทาตามข้ันตอนการเรียกใช้พาเลตซ้าอีกครง้ั พาเลตนัน้ จะหายไป 2) กดคยี ล์ ดั จากแป้นพิมพ์ เช่น กด F7เพ่ือเปดิ พาเลต Layer เป็นตน้ บทท่ี 2 Adobe Photoshop การออกแบบกราฟิกสาหรับเวบ็ ไซต์

7 3) การเรยี กใช้พาเลตที่ซอ้ นกันอยซู่ ่งึ อาจจะอย่ใู นกลุ่มเดียวกนั ดงั ภาพ คลกิ ชื่อพาเลต ท่ีซอ้ นกันไอคอนพาเลตทป่ี ิด ภาพที่ 2.6 การเรยี กใชพ้ าเลตท่ีซ้อนกนั 4) คลิกเปิด/ปดิ พาเลตจากไอคอนทีแ่ สดงอยู่บนแถบพาเลตท่พี บั เก็บไว้ คลกิ เปิดจากไอคอน ทแี่ สดงอยู่ ภาพที่ 2.7 คลิกเปิด/ปิดพาเลตจากไอคอน 2.1.5.2 การปดิ พาเลต คือ การปิดพาเลตหรือยกเลกิ พาเลตต่างๆ ดังนี้ บทท่ี 2 Adobe Photoshop การออกแบบกราฟิกสาหรบั เว็บไซต์

81) เลอื กคาสงั่ Window  ชือ่ พาเลตทเ่ี ปิดอยู่ เช่น ปิดพาเลต Layer ภาพที่ 2.8 การปิดพาเลต Layer2) คลกิ ขวาบนแถบชื่อพาเลตแลว้ เลือก Close คลกิ ปิดเฉพาะพาเลตนี้ หรือคลิกปิดทัง้ กลมุ่ ภาพที่ 2.9 คลิกขวาบนแถบชื่อพาเลต3) คลิกที่เมนูของพาเลต แล้วเลอื กโค้ด ดงั ภาพ บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรบั เว็บไซต์

9 คลกิ เมนู ภาพท่ี 2.10 คลิกเมนูของพาเลต 2.1.5.3 การยอ่ /ขยายกรอบพาเลต คือ การเรียกใช้งานพาเลตใดแล้วหากต้องการปดิ พาเลตดังกล่าว หรือต้องการยอ่ หนา้ ตา่ งพาเลตเพือ่ เพ่ิมพืน้ ทกี่ ารแสดงภาพ และขยายกลับคนื เมือ่ต้องการเรียกใช้ เช่น คลกิ เมาส์ เม่ือต้องการยอ่ พาเลต หรือคลกิ ขยายพาเลต ดงั ภาพ คลกิ เพ่อื ย่อพาเลต คลกิ เพ่ือขยายพาเลต ภาพที่ 2.11 การยอ่ /ขยายกรอบพาเลต 2.1.6 กลอ่ งเคร่อื งมือ บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรบั เว็บไซต์

10 2.1.6.1 การเรียกใชก้ ล่องเคร่ืองมือ (Toolbox) คอื ชุดกล่องเครื่องมือท่ใี ชจ้ ัดการไฟล์ภาพ ท่สี ร้างขึ้นในหน้าตา่ งโปรแกรมสามารถปรบั แต่งกลอ่ งเครื่องมือ ดงั ภาพคลกิ เพ่ือแสดงแถบเคร่ืองมือ 2 แถว คลกิ เพ่ือแสดงแถบเครื่องมอื 1 แถวลกั ษณะของแถบเครื่องมอื 2 แถวลกั ษณะของแถบเครอื่ งมือ 1 แถวภาพท่ี 2.12 กล่องเคร่ืองมือ การรวมกลอ่ งเคร่ืองมอื กับพาเลตสามารถนาเมาส์คลิกทีก่ ล่องเครื่องมือแล้วกดเมาสค์ ้างไว้ดึงกลอ่ งเครอ่ื งมือมาวาง ณ มมุ ดา้ นซา้ ยของพาเลตแลว้ ปล่อยเมาส์ ดงั ภาพคลกิ เมาส์ทแ่ี ถบเครื่องมือ พาเลตและแถบเครื่องมอืแลว้ ดึงมาปล่อยท่ีพาเลต ทอี่ ยู่รวมกนั ภาพที่ 2.13 การรวมกลอ่ งเครอื่ งมือกับพาเลต 2.1.6.2 การเรียกใช้กลอ่ งเครื่องมอื คือ การเรียกใช้เครื่องมอื ต่างๆ ในกลุ่ม ซ่ึงมีกล่มุ เครอื่ งมือย่อยอกี สังเกตจากสญั ลกั ษณร์ ูปสามเหล่ียมสีดามมุ ด้านลา่ ง ของเครื่องมือแต่ละตวั จะสามารถคลิกเมาส์ค้างไว้เพ่ือเลือกเคร่ืองมือย่อยต่างๆ ในกลุ่มได้ ดงั ภาพ บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรับเวบ็ ไซต์

11คลิกเมาส์คา้ งไว้แล้วเลือกเครอ่ื งมือย่อยที่ต้องการเครือ่ งมอื ท่ีถกู เรยี กใช้อยู่ในปัจจบุ ันจะมสี เ่ี หลย่ี มสดี าหน้ารปู เคร่ืองมอื นน้ั สัญลักษณร์ ูปสามเหลยี่ มสีดา ภาพที่ 2.14 การเรียกใชก้ ลอ่ งเครื่องมือ การเรียกใชเ้ คร่อื งมือด้วยวธิ ีกดปมุ่ Shortcut บนแปน้ พมิ พ์เปน็ อกี วิธีการหนึง่ ที่นยิ มใช้โดยผู้ใชท้ ีม่ ีความชานาญนิยมใชว้ ธิ ีดงั กลา่ วเน่ืองจากสามารถใช้คาส่ังไดร้ วดเร็วไมย่ ุง่ ยากลดข้ันตอนการเรยี กใช้คาสงั่ ท่ียงุ่ ยากเป็นการกดปมุ่ ง่ายๆ บนแปน้ พมิ พร์ ว่ มกับปุ่ม Shift การเรียกใช้คาสง่ั ใดๆ เรียกใช้จากตวั อักษรทแ่ี สดงอยู่ด้านหลงั ช่อื ของเคร่ืองมอื แตล่ ะตวั ข้ันตอนดงั นี้สัญลกั ษณแ์ สดงวา่ เป็น ตัวอักษร M คือ Shortcut สาหรบั เรียกเคร่ืองมอื ทเ่ี ลอื กใช้อยู่ ใช้เคร่ืองมือในกลุ่มน้ี ภาพท่ี 2.15 การเรยี กใชก้ ลอ่ งเครื่องมือบนแป้นพิมพ์ การเรยี กใชป้ ่มุ Shortcut ทีแ่ ปน้ พมิ พ์ กดปมุ่ Shift ค้างไว้ แลว้ ตามดว้ ยตัวอกั ษรที่เปน็ปุ่มShortcut ของเครือ่ งมือในกลุ่มท่ีตอ้ งการ เช่น กดปุ่ม Shift คา้ งไว้แลว้ กดตวั อกั ษร M ที่ บทที่ 2 Adobe Photoshop การออกแบบกราฟกิ สาหรบั เวบ็ ไซต์

12แป้นพิมพ์ หมายถึง การเรียกใชเ้ ครอ่ื งมือ Rectangular Marquee Tool ถา้ กดซา้ อีกครัง้ จะเรยี กใชเ้ ครื่องมือ Elliptical Marquee Tool 2.1.6.3 กลุ่มเครอื่ งมือของโปรแกรม Adobe Photoshop คือ เคร่ืองมือตา่ งๆประกอบด้วยเคร่ืองมอื ท่ใี ชใ้ นการทางานหลากหลาย ซ่งึ ได้มกี ารจดั กลุ่มของเคร่ืองมือท่มี ลี กั ษณะการทางานคลา้ ยกนั อย่ใู นกลุ่มเดยี วกัน แบ่งกลมุ่ ย่อยได้ 8 กลุ่ม ดังนี้ 1) กลมุ่ เครอ่ื งมือสาหรับการเลอื กเพ่ือเคลื่อนยา้ ยวัตถุหรือภาพตา่ งๆ และสร้างขอบเขตพนื้ ทเ่ี พื่อลบบางสว่ นออกจากภาพ ดังตาราง ตารางท่ี 2.2 กล่มุ เคร่อื งมือสาหรบั การเลือกเพอื่ ยา้ ยวัตถุรปู เครื่องมือ ชือ่ เคร่ืองมือ หนา้ ท่ี Move Tool (V) เคล่ือนยา้ ยภาพทงั้ ทส่ี รา้ งขอบเขตพืน้ ท่ี (Selection ) Rectangular Tool หรือไมส่ ร้างขอบเขตพืน้ ทข่ี องภาพ Elliptical Tool สร้างขอบเขตพ้นื ที่รูปแบบพ้ืนฐาน คือ สเ่ี หล่ยี ม Lasso Tool สร้างขอบเขตพน้ื ท่ีรปู แบบพื้นฐาน คือ วงกลม สร้างขอบเขตพื้นที่ตามรูปทรงของภาพ ทค่ี ลกิ เมาส์ Magic Wand Tool และลากเมาส์ผา่ นรปู ภาพตามลกั ษณะทีเ่ ลอื ก Magnetic Lasso สร้างขอบเขตพ้ืนท่ี ตามรปู แบบการลากเสน้ แต่ละ Tool จุด สรา้ งขอบเขตพน้ื ท่ี โดยยึดตามสีทีใ่ กล้เคยี งกนั ของ ภาพเพื่อกาหนดขอบเขตพ้นื ที่ของสี 2) กลุ่มเครื่องมือสาหรบั การตดั ภาพเพื่อเลือกเฉพาะสว่ น และบันทกึ ไฟล์ภาพเปน็ ภาพเลก็ ๆ ขนาดความจขุ องไฟลน์ ้อย เพ่ือใชง้ านบนเว็บไซต์ ดังตาราง บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรับเวบ็ ไซต์

13 ตารางท่ี 2.3 กลุม่ เครือ่ งมือสาหรบั การตัดภาพรูปเคร่ืองมือ ชื่อเคร่อื งมือ หน้าท่ี Crop Tool ตดั ภาพ โดยเลือกเฉพาะสว่ นท่ีต้องการไว้ใชง้ าน Slice Tool ตัดภาพ เพื่อนาไปใช้ออกแบบเวบ็ เพจ Slice Select Tool ย่อหรือขยายภาพทีต่ ดั ด้วยเครือ่ งมือ Slice Tool 3) กลมุ่ เครื่องมือสาหรบั วัดค่า เช่น เกบ็ ค่าสเี พ่อื ใช้เปรยี บเทยี บ การวัดระยะการตรวจนับภาพ ดังตาราง ตารางท่ี 2.4 กล่มุ เครอื่ งมือสาหรบั วดั ค่ารปู เคร่ืองมือ ชอ่ื เครื่องมือ หนา้ ท่ี Eyedropper Tool เลือกสีจากภาพไปใช้งาน และ Color Sampler Tool Ruler Tool ท่ีใช้คลกิ เลือกสอี า้ งองิ การปรับแตง่ Note Tool วดั ระยะระหว่างจุด 2 จุด Count Tool แทรกโนต้ บนภาพ เพอ่ื แจ้งผู้ทท่ี างานรว่ มกนั ใหท้ ราบความคดิ เหน็ การนับจานวนส่วนใหญ่ใช้กับไฟลภ์ าพทาง การแพทย์ 4) กลุม่ เคร่อื งมือสาหรับการระบายสตี า่ งๆ โดยมแี บง่ กลุ่มย่อยตามลักษณะของการใชง้ านด้านต่างๆ เช่น การระบายสี วาดเสน้ แปลงภาพเป็นภาพระบายสนี า้หรือการลงสแี บบ ไลโ่ ทนสี ดงั ตาราง บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรบั เว็บไซต์

14 ตารางที่ 2.5 กลมุ่ เครื่องมือสาหรบั การระบายสีรปู เครอ่ื งมือ ชื่อเครือ่ งมือ หน้าท่ี Brush Tool สรา้ งเสน้ หรอื วาดลายเสน้ Pencil Tool สรา้ งเสน้ หรอื ลดลายเสน้ แบบหยาบๆ Color Replacement Tool แดรกเมาส์เพื่อเปลี่ยนสีภาพเปน็ สีใหม่ Mixer Brush Tool แดรกเมาส์ภาพเพ่อื ทาให้ภาพเบลอ History Brush Tool เรียกภาพก่อนปรับแต่งคืนมา Art History Brush Tool ปรบั เปลย่ี นเปน็ ภาพวาด Gradient Tool แดรกเมาสผ์ ่าน เพอ่ื สรา้ งแถบสี Paint Bucket Tool คลิกเพือ่ เทสีลงไป 5) กลุม่ เครอื่ งมือสาหรับการปรบั แตง่ ภาพ โดยแบง่ เครื่องมือออกเป็นกลุ่มย่อยๆ ไดแ้ ก่ กลุ่มการแก้ไขพ้นื ผิว กลุ่มสาหรับการตดั ฉากหลงั กล่มุ สาหรบั ปรับความคมชัดภาพและกลุ่มสาหรับการปรบั แต่งสเี ฉพาะจดุ ดังตาราง ตารางที่ 2.6 กลุ่มเครอื่ งมือสาหรับการปรบั แต่งภาพ บทท่ี 2 Adobe Photoshop การออกแบบกราฟิกสาหรบั เวบ็ ไซต์

15รูปเครอื่ งมือ ช่ือเคร่อื งมือ หนา้ ที่ คลกิ แกไ้ ขจุดบกพร่องเลก็ ๆ บนภาพ Spot Healing Brush Tool แกไ้ ขจุดบกพร่องขนาดใหญ่บนภาพ Healing Brush Tool แก้ไขพื้นผิวของภาพ โดยการนาพ้ืนผิวอ่ืน Patch Tool มาวางทับพ้ืนท่ใี นขอบเขตพ้ืนที่ที่เลือก ใชแ้ กไ้ ขภาพถ่ายตาแดง Red Eye Tool คดั ลอกพ้ืนผิวจากจุดหน่ึงวางทับอีกจดุ หน่ึง Clone Stamp Tool สาหรบั รที ชั ภาพพื้นผิวลงในภาพถ่าย Pattern Stamp Tool ลบพน้ื ท่ไี มต่ อ้ งการออกจากพนื้ หลัง Eraser Tool ลบพื้นหลังโดยการแดรกเมาส์ Background Eraser Tool ลบพื้นหลังออกจากภาพโดยคลกิ สที ่ี ต้องการลบ Magic Eraser Tool ปรับสว่ นทแ่ี ดรกเมาส์ใหน้ มุ่ นวลข้ึน ปรบั เพม่ิ ความคมชัด Blur Tool ปรับเพ่ิมความสวา่ งจุดที่แดรกเมาส์ผ่าน Sharpen Tool เพ่ิมความมดื ใหจ้ ุดทีแ่ ดรกเมาสผ์ ่าน Dodge Tool ลดความอมิ่ ตัวของสี หรือเพ่ิมความอม่ิ ตวั Burn Tool จดุ ท่ีแดรกเมาส์ผ่าน Sponge Tool 6) กลุ่มเคร่อื งมือสาหรบั สรา้ งเสน้ รปู ทรงแบบ Vector สามารถบิดเสน้หรอื ดัดรูปทรงได้โดยไม่สูญเสยี รายละเอียด เช่น การวาดภาพในกลุม่ เครอื่ งมือ Pen Tool การสร้างตวั อกั ษร หรือการวาดรูปทรงในกลมุ่ Shape Tool ดังตาราง ตารางท่ี 2.7 กลมุ่ เคร่อื งมือสาหรบั สร้างเสน้ รูปทรงแบบ Vector บทท่ี 2 Adobe Photoshop การออกแบบกราฟิกสาหรับเว็บไซต์

16รูปเครือ่ งมือ ชอื่ เครือ่ งมือ หน้าท่ี สรา้ งเส้นพาธโดยการแดรกเมาส์กาหนด Pen Tool ทศิ ทาง สร้างเสน้ พาธครา่ วๆ เพื่อปรับแต่งภายหลัง Freeform Pen Tool เพิ่มจุดแองเคอร์ Add Anchor Point Tool ลบจุดแองเคอร์ Anchor Point tool ปรบั แตง่ มุมเสน้ พาธทิศทาง Convert Point Tool คลกิ เลอื กเส้นพาธเพอื่ ย้ายตาแหน่ง Path Tool คลกิ จุดแองเคอร์เพอ่ื ปรบั แต่ง หรอื เคล่ือนย้าย ตาแหน่งจดุ แองเคอร์ Direct Tool สรา้ งรปู ทรงพ้ืนฐาน สร้างรูปทรงที่โปรแกรมเตรยี มไวใ้ ห้ Shape Tool สร้างขอ้ ความปกติ ทง้ั แนวนอนแนวต้งั Custom Shape Tool สรา้ งขอ้ ความแบบขอบเขตพื้นที่ แนวตงั้ Type Tool Type Mask Tool 7) กลุม่ เครอ่ื งมือสาหรบั จดั การกับมมุ ของภาพ เช่น การเลือ่ นดภู าพแต่ละสว่ น การหมนุ ภาพไปในทศิ ทางตา่ งๆ และการมองภาพ ดังตาราง ตารางที่ 2.8 กลุ่มเคร่ืองมือสาหรับจัดการกบั มมุ ของภาพรปู เครอื่ งมือ ช่อื เครอ่ื งมือ หน้าที่Hand Tool เลือ่ นดสู ่วนต่างๆของภาพRotate View Tool หมุนภาพไปทิศทางต่างๆZoom Tool (Z) ขยายดสู ่วนท่ตี ้องการของภาพ2.1.7 การสร้างไฟล์ภาพใหมแ่ ละบนั ทึกไฟล์การสร้างไฟล์ภาพใหม่ตอ้ งกาหนดขนาดของภาพก่อน เพื่อระบขุ นาดของไฟล์ภาพใช้งานจริง ภาพที่บันทึกไฟลจ์ ะมคี ุณภาพของภาพแตกต่างกันตามประเภทของไฟล์ทีบ่ นั ทกึ บทที่ 2 Adobe Photoshop การออกแบบกราฟิกสาหรบั เวบ็ ไซต์

17 2.1.7.1 การสร้างไฟล์ภาพใหม่ การสร้างไฟล์ภาพใหมน่ ั้นจะต้องกาหนดขนาดของภาพก่อน เพ่อื ระบุขนาดของไฟลภ์ าพใชง้ านจริง เม่ือมกี ารพิมพ์ออกทางเคร่อื งพมิ พแ์ ลว้ ได้ขนาดรูปภาพตาม ทรี่ ะบุในการสรา้ งไฟล์ภาพใหม่ โดยการคลกิ ทเี่ มนู File  New หรอืCtrl + N จะปรากฏหนา้ ต่างทใ่ี ช้สร้างไฟลภ์ าพใหม่ ซง่ึ มสี ว่ นประกอบ ดงั ภาพ เลอื กขนาดภาพ โดยกาหนดเอง กาหนดขนาดของภาพ ช่ือไฟลภ์ าพ ซ่ึงสามารถกาหนดไดท้ ันที หรือตงั้ ช่ือเมื่อบันทกึ เมือ่ ต้องการเก็บขนาดไฟล์ภาพ กาหนดหน่วยวัดของภาพ กาหนดความละเอยี ดของภาพ เลือกสพี ้ืนหลังให้กบั ภาพ ตวั เลอื กกาหนดโพรไฟลส์ ี ภาพที่ 2.16 การสรา้ งไฟลภ์ าพใหม่ โดยสามารถเลือกรปู แบบ หรือกาหนดคา่ ต่างๆ เช่น ความกวา้ ง ความสงู และโหมดการพมิ พ์ของภาพแตล่ ะรปู แบบมคี วามหมาย ดงั น้ี Name ตั้งชอ่ื ไฟลภ์ าพใหม่ Preset กาหนดขนาดหนา้ ตา่ งการทางาน Width กาหนดความกว้าง 30 Pixels Pixels พกิ เซล Inches นิ้ว Cm เซนตเิ มตร Mm มิลลิเมตร Point จุด บทที่ 2 Adobe Photoshop การออกแบบกราฟิกสาหรับเวบ็ ไซต์

18 Picas ไพคะ Columns สดมภ์Height กาหนดความสูง 24 PixelsResolution กาหนดความละเอียดของภาพเป็น 72 PixelsColor Mode กาหนดโหมดสีภาพเปน็ CMYK Color Bitmap แบบจดุ สี Gray scale แบบขาวดา RGB Color แบบ Additive CMYK Color แบบใช้กบั ส่งิ พิมพ์ Lab Color แบบไมค่ านึงถึงอุปกรณท์ น่ี ามาใช้Background Contents กาหนดสพี นื้ หน้าตา่ งเป็นสีขาว White พนื้ หลงั สขี วา Background Color พื้นหลังเปน็ สีท่ีตัง้ ไว้ Transparent พืน้ หลงั โปรง่ แสงตัวอย่าง การกาหนดสพี น้ื ไฟลภ์ าพใหม่White Background Color Transparentภาพท่ี 2.17 ตัวอยา่ งการกาหนดสพี น้ื ให้ภาพ 2.1.7.2 การบันทึก File คือ การบันทึก File “ไฟล”์ ภาพนน้ั ที่ทาการบนั ทึกไฟล์จะมีคณุ ภาพของภาพแตกต่างกันตามประเภทของไฟล์ทบี่ ันทกึ โดยการเลอื กประเภทของไฟลภ์ าพนนั้ ขน้ึ อยู่กบั ความเหมาะสมกับงานทีจ่ ะนารูปภาพมาประยุกต์กับโปรแกรมตา่ งๆ ในภายหลงั ดังนี้ 1) ไฟลน์ ามสกลุ .PSD (Photoshop) ไฟลท์ ่เี กบ็ ขั้นตอนการทางานไว้โดยดูจาก Layer การทางาน ซง่ึ สามารถนาไฟล์ไปปรบั ปรุงแกไ้ ขใหม่ไดท้ นั ที บทที่ 2 Adobe Photoshop การออกแบบกราฟิกสาหรับเวบ็ ไซต์

19 2) ไฟลน์ ามสกลุ .TIFF (Tagged Image File Format) คอื ไฟลท์ ีเ่ ก็บขน้ั ตอนการทางานไว้ ข้อดีของไฟล์นามสกลุ นี้ คอื ภาพมคี วามละเอยี ด เหมาะกบั งานด้านนิตยสาร 3) ไฟล์นามสกุล .JPG และ .JPEG (Joint Photoshop ExpertsGroup) คอื ไฟล์มขี นาดเลก็ สามารถบีบอดั ข้อมลู ไดม้ ากเหมาะกบั งานด้านเว็บเพจ 4) ไฟล์นามสกลุ .GIF (Graphics Interchange Format) คอื ไฟลภ์ าพขนาดเล็กเหมือนกับไฟลน์ ามสกุล .JPG และ .JPEG แตเ่ หมาะกับงานด้านภาพลายเสน้ มากกวา่ 2.1.7.3 การบนั ทึกไฟลภ์ าพด้วยคาสั่ง Save คือ การบันทึกไฟล์กอ่ นการทางานอนื่ ๆ ควรบันทกึ ไฟล์ภาพใหเ้ รียบร้อยก่อนการปิดหรือเปิดไฟลภ์ าพอืน่ การบันทึกไฟลภ์ าพ ขั้นตอนดังน้ี 1. เลือกเมนู File โดยคลิกทเ่ี มนู File  Save จะปรากฏหนา้ ตา่ งการบนั ทึกไฟลด์ ังภาพต่อไปนี้ 1 บันทกึ ทับไฟล์เดมิ ภาพที่ 2.18 การบันทกึ ไฟล์ด้วยคาส่ัง Save 2. เลือกโฟลเดอรบ์ ันทกึ ไฟล์ และพิมพช์ อื่ ไฟล์ 2 1. เลอื กโฟลเดอร์ที่ ตอ้ งการเก็บไฟลภ์ าพ บทท่ี 2 Adobe Photoshop การออกแบบกราฟิกสาหรับเว็บไซต์

202. ตง้ั ช่ือไฟลท์ ี่ต้องการ 3เกบ็ ไฟลภ์ าพ3. เลือกนามสกุลทตี่ อ้ งการเกบ็ ภาพท่ี 2.19 เลือกโฟลเดอร์บันทกึ ไฟล์ และพิมพช์ ่อื ไฟล์ 3. คลิกปุ่ม Save (บันทกึ ไฟลน์ ามสกลุ .JPEG) จะปรากฏหน้าตา่ งปรับเปล่ียนคณุ ภาพของไฟล์ภาพ โดยการกาหนดค่า Image Options) ดงั นี้ Quality คือ คุณภาพของไฟล์ประกอบดว้ ย Low ไฟลค์ ณุ ภาพต่า Medium คณุ ภาพปานกลาง High ไฟลค์ ณุ ภาพดี Maximum ไฟล์คุณภาพดสี งู สดุ Small File/Large File การปรับขนาดไฟล์ภาพ โดยถา้ ลากแถบเลอื่ นไปด้านซ้ายไฟล์ภาพมีขนาดเล็ก แตถ่ า้ เล่ือนไปดา้ นขวาไฟลภ์ าพจะมขี นาดใหญ่ Format Options คือ คณุ สมบตั ไิ ฟลร์ ูปภาพ ประกอบด้วย Baseline (“Standard”) กาหนดเป็นไฟล์แบบมาตรฐานสามารถรองรับบราวเซอร์ได้หลายบรษิ ทั Baseline Optimized กาหนดเป็นไฟล์แบบลดคุณภาพของสีลง แตใ่ ช้ไดก้ บั บางบราวเซอร์ Progressive กาหนดไฟลแ์ บบแสดงภาพข้ึนมาทีละนดิ ขณะโหลดไฟล์ ใชไ้ ดก้ บั บางบราวเซอร์ Size คือ ขนาดของไฟล์รปู ภาพซง่ึ เร่มิ ที่ 14.4 Kbps ถงึ 2 Mbps 4. นาเมาสค์ ลิกปมุ่ OK 2.1.7.4 การบันทึกไฟล์ภาพ Adobe Photoshop (.PSD) การแก้ไขไฟลภ์ าพ โดยการสรา้ งภาพกราฟกิ เช่น การตัดต่อภาพ การเพิม่ ขนาด หรอื เปลยี่ นแปลงลกั ษณะไฟลท์ ีม่ ีผลกับโครงสรา้ งเดมิ ของภาพ เมอ่ื มีการเลือกคาสัง่ File  Save แสดง Dialog box เมนู Save As ข้นึโดยเลอื กรปู แบบของไฟล์ภาพเป็น Adobe Photoshop (*.PSD, * .PDD) เปน็ คา่ พน้ื ฐาน ดงั ภาพ บทท่ี 2 Adobe Photoshop การออกแบบกราฟิกสาหรบั เวบ็ ไซต์

21 ภาพที่ 2.21 ไฟล์ภาพ Adobe Photoshop คุณสมบตั ิของไฟลด์ งั กล่าวคือ เก็บรายละเอยี ดการทางานต่างๆ เช่น Layer รปู แบบอักษรและรูปแบบเส้นพาธไว้ไดอ้ ย่างครบถ้วนชว่ ยให้การนาไฟล์ภาพกลับมาแก้ไขทาไดง้ ่าย ในขณะที่ไฟล์ประเภทอนื่ จะเก็บขอ้ มูลเหล่าน้ีไม่ได้ หรือได้เพียงบางสว่ น 2.1.8 การเปิดไฟลภ์ าพ คอื การเปดิ ไฟลภ์ าพสามารถทาไดห้ ลายวธิ ีขึน้ อยูก่ บั ความตอ้ งการของผู้ใช้จะเลือกใช้วิธีใด เช่น วธิ ีการเปิดไฟล์ภาพจากเมนู File ดังนี้ 2.1.8.1 การเปิดไฟลจ์ ากเมนูไฟล์ ข้ันตอนดงั นี้ 1. คลิกเมนู File  Open หรือ กดคีย์ลดั Ctrl + O จะปรากฏหน้าต่างๆ Open 2. ชอ่ ง Look in เลือก Drive และโฟลเดอรท์ ่เี ก็บไฟล์ บทที่ 2 Adobe Photoshop การออกแบบกราฟิกสาหรับเวบ็ ไซต์

22 3. ดูตัวอยา่ งภาพและคลิกเลือกช่ือไฟล์จากรายการ 4. คลิกปมุ่ Open 2 เปลี่ยนมุมมองไฟล์ให้ แสดงรายช่ือหรือภาพ ตัวอย่าง (Thumbnails) 3 ตัวอยา่ งไฟล์ 4 ภาพท่ี 2.22 การเปดิ ไฟลภ์ าพ 2.1.8.2 การเปิดไฟลภ์ าพ Adobe Photoshop (PSD) คอื การเปดิ ไฟล์โปรแกรม วธิ เี รยี กใช้เหมือนการเปิดไฟลภ์ าพทั่วไป แตไ่ ม่สามารถมองเห็นตัวอยา่ งไฟล์ภาพท้ังหมดในกรอบรายการไฟล์ แต่ต้องคลกิ เลอื กไฟลก์ อ่ นแล้วดตู ัวอยา่ งที่ดา้ นล่างแทน (สามารถคลกิ เลอื กไฟล์ครั้งละ 1 ภาพ) แต่เม่ือเปดิ ไฟล์ภาพขนึ้ มาแลว้ บนพาเลต Layer น้นั จะแสดง Layerท้งั หมด และสามารถแกไ้ ขต่อได้ โดยแสดงภาพใน Layer เป็นช้ันๆ ดงั ภาพ บทที่ 2 Adobe Photoshop การออกแบบกราฟิกสาหรับเว็บไซต์

23 ไอคอนแสดงประเภท ไฟล์ Adobe Photoshop ภาพที่ 2.23 การเปดิ ไฟลภ์ าพ 2.1.8.3 การเปิดไฟล์ภาพอย่างรวดเร็วดว้ ยคาสง่ั Open Recent เป็นคาสั่งการเปิดไฟล์ภาพอยา่ งรวดเรว็ ซ่ึงเก็บชอ่ื ไฟล์ภาพทเี่ คยเปดิ ใช้งานแลว้ กอ่ นหน้านนั้ 10 ไฟล์ โดยคลกิ ที่เมนู File  Open Recent ปรากฏชอื่ ไฟล์ต่างๆ แลว้ คลิกเลือกไฟล์ที่ตอ้ งการ ดงั ภาพ บทที่ 2 Adobe Photoshop การออกแบบกราฟิกสาหรบั เวบ็ ไซต์

24 ภาพท่ี 2.24 การเปดิ ไฟลภ์ าพอยา่ งรวดเร็วด้วยคาสัง่ Open Recent 2.1.9 การปิดไฟลภ์ าพ คือ การปดิ ไฟลภ์ าพการทางานในโปรแกรมจาก Adobe Photoshopเสร็จสน้ิ แล้วสามารถเลือกปิดไฟลภ์ าพทท่ี างานอยู่ได้หลากหลายวธิ ี เช่น คลกิ เครื่องหมาย หรอื คลิกจากเมนูคาส่ังไฟล์ ดงั น้ี 2.1.9.1 นาเมาสค์ ลิกเครอ่ื งหมาย  ในหนา้ ตา่ งไฟล์ภาพ ดังภาพ คลกิ เครอ่ื งหมาย  ดา้ นบน ชอ่ื ภาพเพื่อปิดไฟลร์ ูปภาพ หากมกี ารปรับแตง่ จะปรากฏหนา้ ต่าง สาหรับเลือกบันทกึ ภาพ ภาพท่ี 2.25 การปดิ ไฟล์ภาพ 2.1.9.2 เรยี กใช้คาสงั่ จากเมนูไฟล์ คอื การปดิ ไฟลภ์ าพที่เปดิ ใช้งานในปัจจุบนั วธิ กี าร ดังภาพ คลิกเลือกเพอ่ื ปิดภาพทีใ่ ช้งานอยู่ คลกิ เลือกเพื่อปิดภาพทีใ่ ช้งานท้ังหมดคลกิ เลอื กเพือ่ ปิดภาพ และเปดิโปรแกรม Adobe Bridge บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรับเว็บไซต์

25 ภาพที่ 2.26 การปดิ ไฟล์ภาพจากเมนไู ฟล์2.2 การกาหนดมมุ มองและการย่อหรือขยายภาพ คาสง่ั การยอ่ ภาพและขยายภาพดว้ ยเครื่องมอื การเปดิ พาเลตข้นึ มากาหนดขนาดการแสดงภาพและเลือกจุดท่ตี ้องการแสดงไดไ้ ม่ตอ้ งเปล่ยี นเคร่ืองมือบ่อย ๆ 2.2.1 การย่อหรอื การขยายภาพ คือ คาสั่งสาหรบั การขยายไฟลภ์ าพ เพื่อดรู ายละเอียดของภาพท่เี ปดิ ใชง้ านใหช้ ัดเจนมากยิ่งขน้ึ เช่น การย่อภาพและขยายภาพดว้ ยเมนู View และการใช้เครอ่ื งมือ Zoom Tool ขั้นตอนดงั นี้ 2.2.1.1 การยอ่ และขยายรูปภาพด้วยเมนู View มี 2 วธิ ี ดังน้ี บทที่ 2 Adobe Photoshop การออกแบบกราฟกิ สาหรบั เวบ็ ไซต์

26 1) การย่อภาพจากเมนูคาส่งั เช่น คลิกที่เมนู View  Zoom out หรือเรียกใช้คีย์ลดั เชน่ กดปุม่ Ctrl + – ท่แี ป้นพิมพ์ ถา้ กดซา้ อกี ภาพจะมีขนาดเล็กลงไปอกี 2) การขยายรูปภาพจากเมนูคาสั่ง เชน่ คลกิ ทเี่ มนู View Zoom Inหรอื เรียกใชค้ ยี ์ลัด เชน่ กดปุ่ม Ctrl + + + ทีแ่ ป้นพมิ พ์ ถา้ กดซ้าอกี ภาพจะมีขนาดใหญข่ ึ้นอีก 2.2.1.2 การย่อภาพและขยายภาพด้วยเครอ่ื งมอื (Zoom Tool) คือ การยอ่และขยายภาพ โดยคลิกเครือ่ งมอื แล้วกาหนดคณุ สมบตั เิ คร่อื งมือในออปชันบาร์ ดงั ภาพขยายภาพ ปรบั หน้าต่างใหพ้ อดี ปรบั ขนาดภาพท่จี ะพมิ พ์ ย่อภาพ กับภาพย่อ/ขยาย ออกทางเคร่ืองพมิ พ์ ปรบั หน้าต่างให้พอดี ปรบั ขนาดเท่ากับภาพ กับการยอ่ /ขยายภาพ จรงิ ปรบั ขนาดใหพ้ อดีกบั หนา้ ต่างภาพ ภาพที่ 3.1 การยอ่ -ขยายภาพวธิ ีการยอ่ และขยายภาพด้วยเครอื่ งมือ Zoom Tool ดังนี้ 1) คลิกเคร่ืองมือ รปู เมาส์พอยเตอร์จะเปลี่ยนแปลงไปเป็นรปู แว่นขยาย และเครื่องมือมีเคร่ืองหมาย + จากนั้นคลกิ ทีร่ ูปภาพทีต่ ้องการขยาย 2) การย่อขนาดภาพโดยกดปุ่ม Alt ท่แี ปน้ พมิ พ์รูปเมาส์พอยเตอร์เปลี่ยนเปน็ รปู แว่นขยาย เมาส์มีเคร่ืองหมาย – จากนนั้ คลิกภาพทีต่ อ้ งการย่อขนาดการขยายภาพดว้ ยเครื่องมอื ได้แลว้ ยังสามารถใช้คาสง่ั อนื่ ๆ เช่น คีย์ลดั ขยายภาพเปน็ ขนาด 100 % ไดง้ ่ายๆ โดยการกดปมุ่ Ctrl + Alt + 0 หรือย่อขนาดภาพใหเ้ ต็มจอภาพพอดีโดยกดปุ่ม Ctrl + 0การย่อภาพหรือการขยายภาพทีน่ ิยมอกี วิธหี นึง่ คือ การใชพ้ าเลต Navigator การขยายภาพ โดยคลิกเรียกใชไ้ ดจ้ ากเมนู คลกิ Window  Navigator คือ การเปิดพาเลตขนึ้ มากาหนดขนาดการแสดงภาพ และเลอื กจดุ ทต่ี ้องการแสดงได้ไม่ต้องเปลย่ี นเคร่ืองมือบ่อยๆ ดังภาพกรอบสีแดงกาหนด ภาพทเี่ ปิดใชง้ านพื้นท่แี สดงภาพ บทที่ 2 Adobe Photoshop การออกแบบกราฟิกสาหรับเวบ็ ไซต์

27เปอร์เซน็ ตก์ ารขยายภาพ ปรับเลื่อนย่อ/ขยายภาพ ภาพที่ 3.2 การยอ่ ภาพหรอื ขยายภาพ2.2.1.3 การเลื่อนดภู าพดว้ ยเครอื่ งมอื (Hand Tool) คือ การเลื่อนดูภาพในสว่ นตา่ งๆโดยคลิกทเ่ี คร่ืองมือ แลว้ คลกิ เมาส์ค้างท่ภี าพ แลว้ ดึงเมาส์เลอื่ นดูทีละส่วนของภาพในตาแหนง่ ทตี่ ้องการ ภาพที่ 3.3 การเลื่อนดภู าพเมอ่ื นาเมาสว์ างที่ภาพ โดยเมาส์จะเป็นรปู มือ ซงึ่ สามารถใช้เมาสน์ คี้ ลกิ เลื่อนดูภาพตามตาแหนง่ ทคี่ ลกิ เมาส์ลงไป (โดยวธิ กี ารดึงเมาส์เล่ือนภาพมา ณ จุดทต่ี ้องการดภู าพ)เคร่ืองมอื ดงั กลา่ วจะใช้ได้ก็ต่อเมื่อขยายรูปภาพนน้ั ๆ ให้มีขนาดใหญ่กวา่ หน้าต่างโปรแกรมจึงจะสามารถเล่อื นดภู าพส่วนอ่นื ๆ ได้ 2.2.2 การตกแตง่ ภาพดว้ ยพาเลต Layer พาเลต Layer คอื การลาดับภาพ การตกแตง่ ภาพสามารถใชค้ าสงั่ ตกแต่งแก้ไขภาพบางสว่ นของภาพได้ เชน่ คาสง่ั ในการแก้ไขภาพ ปรับแต่งภาพ ลบภาพ สามารถทาไดโ้ ดยไม่ส่งผลกระทบกับสว่ นอื่นๆ ของภาพ โดยอาศยั การทางานของพาเลต Layer ทส่ี ามารถควบคุมภาพแยกเปน็ สว่ นๆ และสามารถสร้างภาพที่มีการวางซ้อนทบั กัน 2.2.2.1 วธิ ีการเรียกใชพ้ าเลต Layer มีวิธีการเรียกใชจ้ ากเมนู Window แล้วเลือกพาเลต Layer ขัน้ ตอนดงั น้ี 1. คลกิ ท่เี มนู Window  Layer หรือ กดป่มุ F7 บทที่ 2 Adobe Photoshop การออกแบบกราฟิกสาหรบั เวบ็ ไซต์

282. คลกิ เลอื กพาเลต Layerภาพที่ 3.4 วธิ ีการเรียกใชพ้ าเลต Layer 2.2.2.2 ส่วนประกอบของพาเลต Layer การสรา้ งภาพน้ันจาเป็นต้องอาศยัความรู้เกี่ยวกบั การใชพ้ าเลต Layer เช่น การใส่ Effects การสรา้ ง Layer Mask และการซ่อนLayer เพื่อดูผลลพั ธใ์ นลกั ษณะต่างๆ โดยสว่ นประกอบของ Layer ทีส่ าคญั ดังภาพ การผสานสี Layer กาหนดความโปรง่ ใสของภาพการลอ็ ก Layer บทท่ี 2 Adobe Photoshop การออกแบบกราฟิกสาหรบั เวบ็ ไซต์

29เลือก Layer ท่ีทางาน กาหนดความโปร่งใส ของภาพใน Layerสญั ลักษณ์ Layer นนั้ถกู ล็อกการทางาน ใสส่ ไตลใ์ ห้ Layerสร้างลงิ ค์ให้ Layer ทเี่ ลอื ก ลบ Layer สร้างเอฟเฟ็กต์ให้ Layer สร้าง Layer สร้างมาสก์ให้ Layer สรา้ งเลเยอร์กร๊ปุ (Group) ภาพที่ 3.5 สว่ นประกอบของพาเลต Layer 2.2.2.3 พาเลต Layer คือ ลาดบั ขน้ั ตอนการวางภาพแบบหนังสือซ้อนทับกันจานวนหลายๆ เล่ม โดยวัตถทุ อี่ ย่ดู ้านบนสุดจะบังทับวัตถทุ อ่ี ยู่ดา้ นล่าง และถา้ หากวัตถุทอ่ี ยู่ด้านบนสุดมกี ารเจาะทะลผุ ่านจะสามารถมองเห็นวตั ถทุ ี่อยดู่ ้านล่างทีม่ ีการวางซ้อนทับกนั หลายๆ ภาพการวางภาพไมค่ วรอยใู่ น Layer เดียวกนั เพ่ือสะดวกในการแก้ไขภาพ เชน่ การลบภาพ และการกาหนดความโปรง่ ใสของภาพการวางภาพแบบมลี าดับก่อนหลงั การใส่สีเส้น และการใส่ Effectsดังภาพ บทที่ 2 Adobe Photoshop การออกแบบกราฟกิ สาหรบั เวบ็ ไซต์

30 ภาพท่ี 3.6 พาเลต Layer 2.2.2.4 การจัดการเบ้อื งต้นกับ Layer คือ การจัดการเบอ้ื งตน้ ในการสรา้ ง Layerใหมเ่ พอื่ ใช้ระบายสี การปรบั แต่งค่าอ่ืนๆ ท่ไี มต่ อ้ งการให้เปล่ยี นแปลงภาพใน Layer เดมิ และการลบ Layer ทีไ่ ม่ตอ้ งการ ดังน้ี 1) การสรา้ ง Layer ใหม่ คือ คลิกที่ Create a new Layer ดงั ภาพ 2. เลเยอร์ใหมท่ ีไ่ ด้ 1. คลกิ Create a new layer เพอ่ื สรา้ ง Layer ใหม่ ภาพที่ 3.7 การสร้าง Layer ใหม่ 2) การสรา้ ง Layer ใหม่ คอื คลกิ เมนู Layer New  Layerหรือป่มุ Shift + Ctrl + N ซง่ึ สามารถกาหนดออปชันเพมิ่ เตมิ ให้ Layer ใหมท่ สี่ รา้ งได้ ขัน้ ตอนดงั น้ี 1. คลิกเมนู LayerNew  Layer หรือกดป่มุ Shift + Ctrl + Nเพ่อื เปิดหนา้ ตา่ ง New Layer 2. ต้งั ช่ือให้ Layer ที่สร้างขนึ้ 3. คลิกเลอื กสีของ Layer เพอื่ แยกกลุ่มหรอื ประเภท Layer ทีท่ างาน 4. ได้ Layer ใหม่ ท่ีมชี ่ือและสี Layer ตามทีก่ าหนด บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรับเวบ็ ไซต์

1 12 31 4 3 ภาพที่ 3.8 การสร้าง Layer ใหม่ Layer ท่สี รา้ งแลว้ ต้องการเปล่ยี นชอื่ Layer ใหมใ่ นภายหลัง คอื การดับเบิลคลกิ บนชือ่ Layer เดิมแลว้ สามารถต้ังช่ือให้ Layer ใหมไ่ ด้ทันทกี ารตงั้ ชอ่ื ทาเพ่ือสะดวกในการค้นหา Layer ในภายหลงั ดังภาพ ดบั เบลิ คลกิ แลว้ พิมพช์ อ่ื ใหม่ไดท้ ันที ภาพท่ี 3.9 การเปลย่ี นชื่อ Layer ในภายหลัง 3) การสรา้ งสาเนา Duplicate Layer คือ การคดั ลอก Layer เพิม่ จาก Layerเดมิ การตกแต่งภาพบางครั้งจาเป็นต้องนาภาพใน Layer เดิมมาทดลองปรบั แต่งแกไ้ ขก่อน เพ่ือป้องกนั ความเสียหายของภาพตน้ ฉบบั ซงึ่ เราเรียกวธิ ีการน้ีวา่ การการสรา้ งสาเนา Layer ดังภาพแดรกเมาสน์ า Layer มาวางทป่ี มุ่ Create a new layer บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรบั เวบ็ ไซต์

32 คลกิ เลือก back แลว้ กดปมุ่ หรือ Ctrl + J เพ่อื สร้างสาเนา Layer ทเ่ี ลือก ภาพท่ี 3.10 การสร้างสาเนา Layer 4) การลบ Delete layer คือ การลบ Layer ที่ไมต่ ้องการ ดังนี้ 1) การลบแบบถามซ้า การลบดว้ ยวธิ ีนีค้ าสัง่ จะถามซ้าอกี ครงั้ เพอ่ืความแน่ใจก่อนลบทง้ิ ดังภาพ1. คลิก Layer ทตี่ ้องการลบ 2. คลิก Yes เมื่อต้องการลบ หรือคลกิ No แล้วคลกิ ปมุ่ เม่อื ไม่ต้องการลบ ภาพที่ 3.11 การลบแบบถามซา้ 2) การลบ Layer โดยการแดรกเมาส์มาวางท่ีปุ่ม การลบผู้ใช้สามารถเลือก Layer แลว้ แดรกเมาสไ์ ปวางท่ีปุ่ม Delete layer ไดท้ ันที โดยคาส่ังจะไมถ่ ามซา้ วา่ ตอ้ งการลบหรอื ไม่ทาให้ภาพน้นั ลบไปทันที ดงั ภาพ เลือก Layer ภาพ แดรกเมาส์ดงึ Layer ภาพมาวางท่ีป่มุ เพอ่ื ลบท้ิง บทที่ 2 Adobe Photoshop การออกแบบกราฟกิ สาหรบั เว็บไซต์

33 ภาพที่ 3.12 การลบ Layer โดยการแดรกเมาส์ 3) การลบ Layer แบบรวดเร็ว เมอ่ื ต้องการลบ Layer แบบรวดเร็วนั้นผู้ใช้สามารถคลิกเลอื ก Layer แล้วกดปุม่ Delete บนแปน้ พิมพ์ ดงั ภาพ 5) การสลับลาดบั Layer ด้วยคาสั่ง Layer Order คือ สลับตาแหนง่วางภาพในLayer เพ่อื เปลยี่ นลาดับการซ้อนทบั ภาพ โดยคลิกเมาสเ์ ลือก Layer ทตี่ อ้ งการสลับแล้วสงั เกตเมาส์จะเปลีย่ นเป็นรูปมือ แล้วแดรกเมาสไ์ ปวาง ณ ตาแหนง่ ท่ีต้องการวางภาพ เชน่ การนาภาพ Layer 2 วางไว้ด้านบนของ Layer 4 ให้สงั เกตเส้นทึบเปน็ สนี า้ เงนิ ท่ีเกดิ ข้นึ ซ่งึ จะเป็นจุดท่สี ามารถปล่อยเมาส์วางภาพ ณ ตาแหนง่ ทตี่ ้องการวาง ดังภาพ  ภาพท่ี 3.13 การสลบั ลาดับ Layer 6) การรวม Layer ด้วยคาส่ัง Merge Layer คือ การรวมภาพแตล่ ะภาพในLayer ภาพท่ีตกแตง่ เรียบร้อย หรือ Layer ภาพทีม่ ีรูปแบบใกลเ้ คียงกนั สามารถรวมภาพน้ันให้เป็น Layer เดียวกันได้ เพื่อลดจานวน Layer ของภาพ ดงั น้ี (1) รวม Layer ดว้ ยคาส่งั Merge Down คอื การรวม Layer ภาพท่ีอยดู่ า้ นบนกับ Layer ด้านลา่ ง คลกิ เลือก Layer 3 แลว้ คลิกขวา เลือกคาสัง่ Merge Down (คลกิLayer1 Merge Down) หรือกดปมุ่ Ctrl + E ดังภาพ รวม Layer 3 และ Layer 2 บทที่ 2 Adobe Photoshop การออกแบบกราฟกิ สาหรับเวบ็ ไซต์

34 ภาพที่ 3.14 รวม Layer ดว้ ยคาสั่ง Merge Down (2) การรวม Layer ตา่ งๆ ท่ีไมไ่ ด้ซ่อนด้วยคาส่งั Merge Visible คือการรวม Layer ท้งั หมดยกเวน้ Layer ทีซ่ อ่ น คลิกเมนู Layer เลือก Merge Visible หรอื กดปมุ่ Shift + Ctrl + E รวมเฉพาะ Layer ท่ีไม่ซ่อน ภาพท่ี 3.17 รวม Layer (3) การรวม Layer ท่ีเลือก คอื การเลือก Layer ภาพทตี่ กแต่งเรียบร้อยแล้วทีต่ ้องการรวม โดยการคลิกแดรกเมาสเ์ ลอื ก Layer ก่อนแล้วจงึ กดปมุ่ Ctrl + E เพ่อื รวมLayer เพ่อื เป็นภาพเดยี วกนัแดรกเมาสเ์ ลือก Layer รวม Layer บทท่ี 2 Adobe Photoshop การออกแบบกราฟิกสาหรบั เว็บไซต์

35 ภาพท่ี 3.18 การรวม Layer ทีเ่ ลอื ก (4) การรวม Layer ทง้ั หมด เปน็ Layer ใหม่ คือ การรวม Layerทงั้ หมดแล้วสรา้ งเป็น Layer ใหม่ โดยเลือก Layer อยู่บนสดุ กดปุ่ม Ctrl + Alt + Shift + Eเพื่อรวม Layer ท้งั หมดเปน็ Layer ใหม่ รวม Layer ทัง้ หมดเปน็ Layer ใหม่ ภาพที่ 3.19 การรวม Layer ท้ังหมดเปน็ Layer ใหม่ 2.2.3 การปรับสี ปรบั แสง และแต่งภาพด้วย Layer การกาหนดความโปรง่ ใสของภาพในพาเลต กาหนดความโปรง่ ใสเฉพาะภาพ แต่Effectsไม่มกี ารเปลีย่ นแปลง เชน่ Effects คือ เสน้ ขอบยังคงเดิมไม่มกี ารเปล่ียนแปลง 2.2.3.1 การกาหนดความโปร่งใสด้วยคาสงั่ Opacity ของภาพ คือ การกาหนดความโปร่งใสของภาพในพาเลต Layer สามารถทาได้ 2 แบบ คอื การกาหนดค่า Opacity และกาหนดคา่ Fill ใน Layer โดยการลดค่า Opacity ทาให้ภาพ และ Effects ใน Layer ดโู ปร่งใสแต่ถ้ากาหนดคา่ Fill จะทาให้ภาพใน Layer โปรง่ ใส แต่ Effects จะยงั คงคา่ เหมอื นเดิม การกาหนดคา่ Opacity คือ ภาพท้ังหมดมคี วามโปรง่ ใส โดยต้องเลือก Layerภาพก่อนแล้วคลกิ เมาสก์ าหนดค่า Opacity เป็น 50 % ลกั ษณะภาพ และ Effects จะเบลอ ดงั ภาพ บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรับเวบ็ ไซต์

36 ภาพท่ี 3.15 การลดคา่ โปร่งใส การกาหนดค่า Fill คอื กาหนดความโปรง่ ใสเฉพาะภาพ แต่ Effectsไมม่ ีการเปลีย่ นแปลง เชน่ Effects คือ เสน้ ขอบยงั คงเดิมไมม่ กี ารเปลีย่ นแปลง ดงั ภาพ ภาพท่ี 3.16 การลดคา่ Fill ตัวอย่าง การลดคา่ Fill ลดลง 0 % ภาพใน Layer จะถกู ปรับจางหายไป แต่ Effects คือเสน้ ขอบยงั คงเดมิ 2.2.3.2 การผสมสี Layer ด้วยคาสง่ั Layer Blend Mode คือ การผสมสีระหว่างLayer โดยวธิ กี ารผสมสภี าพใน Layer ปัจจบุ ันเข้ากับ Layer ด้านล่าง ทาให้ภาพเปน็ สีพเิ ศษ เพ่อืใชส้ ร้าง Effectsหรือเปลย่ี นมมุ มองของภาพในลกั ษณะต่างๆ ได้ ภาพทัง้ หมดในแต่ละLayer ไม่มีการเปลีย่ นแปลงแต่อยา่ งใดการผสมสีแบบ Layer มโี หมดให้เลือกหลายรปู แบบสามารถเลอื กใช้ตามความเหมาะสม ดังนี้ 1) กลุม่ การผสมสีให้มืดลง คือ การผสมสีของ Layer กลมุ่ นจ้ี ะใช้วธิ ีเปรยี บเทยี บความสวา่ งของพนื้ สที ง้ั สองแลว้ แสดงส่วนของสีท่มี ีความเข้มกวา่ ของภาพใน Layerบน และส่วนทม่ี ืดกวา่ ของภาพใน Layer ล่าง กลมุ่ การผสมสใี ห้มดื ลง ดังนี้ (1) Darken คือ การเปรียบเทยี บความสวา่ งของพน้ื ท่ีสีท้งั สอง Layerแล้วแสดงสว่ นของสที ่สี ว่างกว่าของภาพ Layer ด้านบน แตไ่ ม่มีผลกับสว่ นทมี่ ดื กว่า (2) Multiply คือ การผสมสีระหว่าง Layer ทง้ั สองเหมอื นกับการซ้อนฟลิ ์มสไลด์ 2 แผ่น ทฉ่ี ายบนโปรเจคเตอร์ บทที่ 2 Adobe Photoshop การออกแบบกราฟิกสาหรบั เวบ็ ไซต์

37 (3) Color Burn คือ การผสมสใี น Layer ทงั้ สอง โดยการเพิม่ ค่าของความเขม้ ของ Layer บนเม่ือผสมกนั ผลลพั ธข์ องภาพจะมดื ลง (4) Linear Burn คือ การผสมสี Layer ท้ังสอง ลดค่าความสวา่ งลงผลลพั ธ์ทไ่ี ดภ้ าพจะมืดลงแต่จะไม่มีผลกับสีขาวบน Layer (5) Darker color คือ การเทียบสใี นแต่ละ Layer ที่นามาผสมกัน แล้วนาสไี ปผสมกับสพี ืน้ ฐานและแสดงค่าตา่ สดุ ของสีออกมา การผสมสใี นกลุ่มมดื ลง คือ การนาภาพจานวน 2 ภาพ ผสมสีระหว่างกันและวางในLayer ตา่ งกัน ขั้นตอนดังนี้ภาพ Layer บน ภาพ Layer ล่าง ภาพที่ 3.17 ภาพทตี่ ้องการผสมสี เลอื กโหมดผสมสี บทท่ี 2 Adobe Photoshop การออกแบบกราฟิกสาหรับเว็บไซต์

38เลือก Layer 1บน ภาพท่ี 3.18 การเลือกโหมดผสมสีตวั อยา่ ง การผสมสใี นกลมุ่ ของภาพมืดลง ซึ่งแสดงลกั ษณะต่างๆ ของภาพผลลพั ธ์ ดงั ภาพโหมด Color Burn โหมด Darken บทท่ี 2 Adobe Photoshop การออกแบบกราฟิกสาหรบั เว็บไซต์

โหมด Multiply 39 โหมด Color Burnโหมด Linear Burn โหมด Darker colorภาพท่ี 3.19 การผสมสีของ Layer กลุ่มมดื ลง 2) การผสมสใี หส้ วา่ งขึน้ คอื การผสมสีของ Layer ภาพมีความสวา่ งเพิม่ ขึ้นซึ่งคาสง่ั ในการผสมสีกล่มุ ดังกลา่ ว ดังนี้ (1) Lighten คือ การเทียบสใี นแตล่ ะพาเลตของแตล่ ะ Layer การนาภาพนามาผสมแล้วเลือกสสี ว่างกว่ามาแสดง แต่ไมม่ ผี ลกบั สว่ นทสี่ วา่ งอยูแ่ ลว้ (2) Screen คือ การผสมสภี าพใน Layer ทง้ั สองเหมือนการถา่ ยภาพ 2ภาพ บนเฟรมเดยี วกันซึง่ จะทาใหส้ วา่ งขน้ึ (3) Color Dodge คือ การผสมสแี ละปรบั สีภาพใหส้ วา่ งเพ่มิ มากขน้ึโดยขน้ึ อย่กู บั ค่าสีใน Layer บน (จะให้ผลตรงกันข้ามกับ Color Burn) (4) Linear Dodge คอื การผสมสแี ละปรับภาพให้สวา่ งขน้ึ โดยขนึ้ อยู่กบั ค่าสีใน Layer บนสาหรับในส่วนทสี่ ว่างอยู่แล้วก็จะสว่างมากยิ่งขนึ้ (5) Lighter Color คอื การผสมสีและปรับสีของภาพใหส้ ว่างข้ึนเกิดจากการเปรยี บเทียบค่าของแชนเนลสมี าผสมกับสหี ลกั บนภาพ และนาค่าสีที่มากท่สี ดุ มาแสดงแต่จะไมม่ ีผลกบั ภาพสว่ นท่สี ว่างอย่แู ลว้ และทาใหบ้ างสหี ายไป บทท่ี 2 Adobe Photoshop การออกแบบกราฟิกสาหรบั เวบ็ ไซต์

40 3) การผสมสี Layer โดยการเปรียบเทยี บสี คอื การผสมสีของ Layer นาคา่ ของสที ้งั สอง Layer มาหักลบกันใหผ้ ลลพั ธภ์ าพท่มี ดื ลงหรอื สว่างขนึ้ โดยจะขนึ้ กับสขี องภาพใน Layer บน และ Layer ลา่ งเกิดภาพสีสวยสด แปลกตา และนา่ สนใจ ประกอบด้วยคาสง่ั ดงั นี้ (1) Overlay คอื วิธีการผสมผสานสีแบบ Multiply และสกรีน เข้าดว้ ยกันโดยภาพจะมดื หรือสวา่ ง ข้นึ อยกู่ ับสีใน Layer ลา่ ง (2) Soft Light คอื การฉายภาพ Layer บนซอ้ น Layer ลา่ งดว้ ยแสงไฟออ่ นๆ ซึ่งจะทาใหภ้ าพสว่างและกลมกลนื กนั (3) Hard Light คอื การฉายภาพ Layer บนซอ้ น Layer ล่างดว้ ยแสงไฟแรงๆ โดยจะให้ผลเหมอื นการทาไฮไลทบ์ นภาพ (4) Vivid light คอื การผสมสภี าพให้มีลกั ษณะคลา้ ยกบั คลั เลอร์ เบลอและคลั เลอร์ ดรอปหากภาพมคี วามสว่างมากกวา่ สเี ทา 50% จะลดความสวา่ งลง แต่ถา้ ภาพมคี วามมดื มากกวา่ สเี ทา 50% จะเพมิ่ ความสว่างข้ึน (5) Linear Light คือ มลี ักษณะเหมอื นกับการใช้ Linear Burn และLinear Dodge โดยปรบั ภาพส่วนท่ีสว่างอย่แู ล้วให้สวา่ งขนึ้ และปรบั ภาพสว่ นท่มี ืดอยู่แล้วให้มืดขน้ึทาใหภ้ าพมสี เี ขม้ ขน้ึ (6) Pin Light คอื การผสม Layer ให้ดูกลมกลืนกันทัง้ สอง Layer ถา้ภาพใน Layer บนสอี ่อนกว่าสีเทา 50% กจ็ ะถกู แทนทดี่ ้วยสีของ Layer ลา่ งแทน (7) Hard Mix คอื การผสม Layer ใหก้ ลมกลนื กัน โดยการเพ่มิ ค่าสีแดงสเี ขยี ว และสนี า้ เงนิ ผสมกบั สีหลักบนภาพในสว่ นทเี่ ข้ม และแทนทส่ี ที ีอ่ ยูด่ ้านล่างสาหรับส่วนท่ีเป็นสอี อ่ นจะแทนท่ีดว้ ยสีขาวแทน 4) การผสมสีตามองคป์ ระกอบโมเดลสี คอื การผสมสขี อง Layer โดยการนาคา่ ของสที ง้ั สองมาหักลบกันตามคา่ ของโมเดลสี ทาใหภ้ าพออกมาในลกั ษณะดังน้ี (1) Difference คือ การเทียบสแี ละนาคา่ ของสีมาลบกนั ทาให้ภาพบางส่วนกลายเปน็ สตี รงขา้ ม คือ ส่วนทมี่ ืดจะปรับให้สว่าง ส่วนทีส่ ว่างจะปรบั ให้มืดลง (2) Exclusion คอื คลา้ ยกับการผสมสีด้วยโหมด Difference โดยจะปรบั สว่ นท่ีสว่างใหเ้ ปน็ สีตรงข้าม แต่จะไม่มผี ลกบั สสี ว่ นท่มี ดื (3) Subtract คอื การนาข้อมูลของสมี าหักลบกนั โดยดูจากสเี ลขฐานในภาพ 8 บติ และ 16 บิต ทาให้ภาพบางสว่ นมืดและบางส่วนสว่าง (4) Divide คือ การนาขอ้ มูลของสีแต่ละคา่ มาหารกันจากสพี ้นื ฐานท่ผี สมกนั บทที่ 2 Adobe Photoshop การออกแบบกราฟกิ สาหรบั เว็บไซต์

41 5) การผสมสใี นกลุ่มสีความสดและความสว่าง คือ การผสมสที ี่มคี วามสดทาให้ภาพออกมาในลกั ษณะดังนี้ (1) Hue คือ การผสมสรี ะหว่าง Layer ทัง้ สอง โดยการสร้างความสวา่ งและสร้างความอมิ่ สี ซ่ึงทาให้ภาพเปน็ สีเขม้ ขนึ้ (2) Saturation คือ การผสมสรี ะหวา่ งภาพใน Layer ทั้งสองโดยการสร้างความสวา่ ง สรา้ งค่าสี และความอิ่มตัวของสี เพ่ือทาให้ภาพด้านล่างมคี วามอิม่ ตัวของสแี ต่ไมม่ ีผลกับส่วนท่ีเปน็ สเี ทาในภาพลา่ ง (3) Color คอื การผสมสีภาพของ Layer ต่างๆ ทีท่ าให้กลมกลนื กนัคลา้ ยๆ กบั โหมดสี Hue โดยการผสมสีของทงั้ สองจะรกั ษาความอิม่ ตัวของสีสว่ นท่เี ปน็ สเี ทาในภาพ (4) Luminosity คือ การผสมสีภาพของ Layer โดยการนาคา่ และความอิ่มตัวของสี Layer ภาพท่อี ยู่ด้านลา่ งมาเปน็ ฐานและเพม่ิ ความสวา่ งในสีที่ผสมกนั มผี ลกับภาพดา้ นบนทาให้ภาพดกู ลมกลนื กนั 6) เทคนิคการปรับสีภาพ คอื การปรบั สีภาพถา่ ยงา่ ยๆ โดยการนาสีพน้ื สีต่างๆ มายอ้ มผสมลงไปกับสภี าพใน Layer เดมิ ทาใหไ้ ดภ้ าพถ่ายมีสีสนั แปลกตาและโดดเด่นขั้นตอนดังน้ี 1. เปิดไฟล์ภาพ 1 ภาพ 2. เพ่มิ Layer แลว้ เลือกเครื่องมือ เทสแี ดงลงไป 3. เลือกโหมดสี Color Burn 4. ผลลัพธ์ภาพหลงั จากเลอื กโหมดสี Color Burn 1 ภาพตน้ ฉบับ 2 34 บทที่ 2 Adobe Photoshop การออกแบบกราฟิกสาหรบั เวบ็ ไซต์

42 ภาพผลลัพธ์การผสมสีภาพท่ี 3.20 การยอ้ มผสมลงไปกบั สภี าพ 2.2.3.3 ตกแต่ง Layer ดว้ ยคาส่ัง Layer Style คือ คุณสมบัตทิ ก่ี าหนดไวก้ ับLayer เพื่อตกแตง่ ภาพใน Layer ให้มลี ักษณะพเิ ศษ เช่น การทาแสงเงาใหว้ ัตถุ ทาให้พ้นื ผิวให้นูนขน้ึ หรือทาแสงฟุง้ ออกมาจากภาพ ดังน้ี 1) วิธกี าหนด style Layer คอื การกาหนด style ให้ Layer 1. เลือกคาสง่ั Layer  Layer Style  เลือกช่ือ style ดงั ภาพเลอื กคาสงั่ Layer  Layer Style เลือกชอื่ Styleภาพที่ 3.21 เลอื กช่อื style บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรับเวบ็ ไซต์

432. คลิกจากปมุ่ Add a Layer style ดงั ภาพ คลิกจากป่มุภาพท่ี 3.22 คลิกจากปุ่ม Add a Layer style3. เลอื กคาสัง่ Window  Styles แลว้ เลือกชดุ style สาเร็จรูป ดังภาพWindow  Styles ชุด style สาเร็จรปู ภาพท่ี 3.23 เลอื กชุด style สาเร็จรปู การสรา้ ง Layer style น้นั สามารถเลอื ก Effects ต้องการแลว้ บันทึกเป็น style สาเร็จรูปเพื่อนากลับมาใชใ้ หมไ่ ดห้ รือเลอื ก style สาเร็จรปู ทีโ่ ปรแกรมกาหนดไวใ้ ห้ เช่น Effects ของข้อความ ปมุ่ กดเวบ็ เพจ และขอบภาพ วิธกี ารกาหนด style Layer ดงั นี้ 2) การเลอื ก Layer style คอื การกาหนด Layer ท่ีต้องการแล้วเลอื ก styleดังน้ี บทที่ 2 Adobe Photoshop การออกแบบกราฟกิ สาหรับเว็บไซต์

44 1. คลิกเลือก Layer ทต่ี อ้ งการกาหนด style (หาก Layer ทเ่ี ลือกเปน็Layer Background ดับเบลิ คลกิ เปลี่ยนเปน็ Layer 0 กอ่ นใชค้ าสั่งนี้ 2. คลกิ ปมุ่ แลว้ เลอื ก Effectsท่ตี ้องการใชง้ าน 3. เลือก Option และกาหนดค่าการทาตา่ งๆ ของ Effects 4. คลิกปุ่ม 12 ภาพที่ 3.25 กาหนดคา่ ของ Effects กาหนดค่าการทาต่างๆ ของ Effects 3 บทที่ 2 Adobe Photoshop การออกแบบกราฟิกสาหรับเวบ็ ไซต์

45ภาพท่ี 3.24 กาหนดค่าการทาตา่ งๆ ของ Effectsภาพกอ่ นเลือก Layer Style ผลลพั ธภ์ าพเลือก Layer Style ภาพที่ 3.25 เลือก Layer style 2.2.4 ขนาดของภาพและขนาดของไฟล์ กอ่ นนาภาพมาใชง้ านต้องมคี วามเขา้ ใจเกยี่ วกบัขนาดของภาพ หรืออัตราส่วนของภาพในแต่ละภาพเชน่ กวา้ ง X สงู (Width X Height)ขนาดไฟล์ภาพคอื ความจขุ องภาพท่ีจดั เกบ็ ลงในดสิ ก์ ซงึ่ ตอ้ งมีความรูท้ ้ังการจัดขนาดของภาพและขนาดของไฟล์ เพอื่ นาภาพไปใชง้ านให้เหมาะสมกบั งาน เช่น การนาภาพไปพมิ พท์ ่ีรา้ นพิมพ์ภาพตอ้ งใช้ขนาดเท่าไหร่ ความละเอยี ดของภาพกี่ Pixels นาภาพไปใชบ้ นเว็บเพจขนาดของภาพควรกาหนดขนาดเท่าไหร่ การนาภาพใชง้ านให้ตรงวตั ถปุ ระสงคม์ ากทสี่ ดุ โดยการปรับขนาด ตัด หรอื ลดพื้นท่ีทไ่ี ม่ต้องการออก เปน็ ต้น 2.2.4.1 การปรับขนาดของภาพ คอื การปรบั ขนาดของภาพท้งั การย่อและการขยายและเปลยี่ นคา่ ความละเอยี ดของภาพ ซึ่งขนาดของภาพท่ีเปน็ “ความกว้าง  ความสูง” หรือ“Width  Height เรียกว่า Image size การกาหนดความกว้างและความสูง โดยเลอื กหนว่ ยนับเป็นน้ิว เซนติเมตร หรือ Pixels เพ่อื ให้ได้ขนาดของภาพทีเ่ หมาะสมสาหรับการนาไปใชง้ านเชน่ ใช้แสดงในหนา้ เว็บเพจ นาไปใช้ในเอกสารท่ัวไป ส่งไปกับอเี มล์ หรอื นาภาพพมิ พ์ลงกระดาษเปน็ ต้น ขน้ั ตอนดงั นี้ บทที่ 2 Adobe Photoshop การออกแบบกราฟิกสาหรับเว็บไซต์

46 1. คลิกเมนูคาสั่ง Image  Image Size 2. เลอื กออปชนั ตา่ งๆ สาหรับปรบั ขนาดของภาพดงั นี้ Scale Styles ปรบั สดั ส่วนของ Layer styleให้เป็นไปตามขนาดภาพ Constrain Proportions ใหร้ ักษาสัดสว่ นเดิมของภาพไว้ คอื เม่อื กาหนดความกวา้ งหรือความสูงค่าใดค่าหนง่ึ อกี คา่ จะถูกปรบั ตามโดยอตั โนมัติ สดั ส่วนภาพจะสมดลุ กัน Resample Image กาหนดใหเ้ ป็นการปรบั แบบเพ่มิ หรือลดจานวนPixels โดยต้องระบวุ ธิ คี านวณของโปรแกรม ซงึ่ แตล่ ะวิธีจะให้ผลที่ตา่ งกนั ดังน้ี Nearest Neighbor การทางานไดเ้ ร็วท่สี ดุ แตใ่ ห้ภาพดอ้ ยที่สุด เหมาะกับภาพทมี่ ีความคมชดั เช่น ภาพวาด Bilinear ทางานได้เร็วและใหภ้ าพดปี านกลาง Bicubic ใหภ้ าพทดี่ ีทีส่ ดุ เหมาะสาหรบั ภาพทวั่ ไปโดยเฉพาะภาพถ่าย Bicubic Smoother เหมาะสาหรบั การขยายภาพ Bicubic Sharper เหมาะสาหรับการย่อและขยายภาพ 3 ขนาดของภาพเดมิ ภาพที่ 3.33 คลิกเมนู Image size บทที่ 2 Adobe Photoshop การออกแบบกราฟกิ สาหรับเว็บไซต์

47ขนาดใหมข่ องไฟลภ์ าพ ขนาดเดมิ ของไฟลภ์ าพ 3 2 สญั ลกั ษณป์ รับแบบ รกั ษาสัดสว่ นเดิมไว้ภาพท่ี 3.34 การปรับขนาดของภาพ 3. กาหนดความกวา้ งหรอื ความสูง และเลอื กหนว่ ยวดั ภาพ ดงั ตัวอย่างนีไ้ ดเ้ ลอื กเป็นPixels แลว้ คลิกปุ่ม OK จะได้ผลลัพธ์ของภาพใหมใ่ นขนาดทกี่ าหนดภาพตน้ ฉบับ ขนาด 2048 X 1536 ภาพใหม่ ขนาด 500 X 375(ยอ่ ภาพให้แสดง 10%) (ยอ่ ภาพให้แสดง 33.33%) บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรบั เว็บไซต์

48ภาพที่ 3.35 ผลลพั ธ์ของภาพใหม่2.4 การสรา้ งขอบเขตพื้นที่ (Selection) การสร้าง Selection “ขอบเขตพ้ืนที่” สามารถทาได้หลากหลายวิธี เช่น การใชเ้ ครือ่ งมอืพืน้ ฐานต่างๆ เพ่ือกาหนดขอบเขตพื้นท่ี เช่น กลุ่มเคร่ืองมอื Marquee Too เป็นกลุ่มเครื่องมอื ท่ีทางานแตกตา่ งกันข้ึนอยู่กับลักษณะของภาพทตี่ ้องการปรับเปลีย่ น การแกไ้ ขขอบเขตพ้นื ทีท่ เ่ี ลอื กของภาพ ท่ีต้องการลบและกลมุ่ เคร่ืองมือ Lasso Too คือ กลมุ่ เครอื่ งมือเลอื กขอบเขตพ้ืนที่และการกาหนดค่าออปชันบารม์ ีความเหมือนกบั กลมุ่ เครื่องมือพ้นื ฐาน 2.4.1 การสรา้ งขอบเขตพืน้ ทด่ี ว้ ยเคร่อื งมือกลมุ่ Marquee Too คอื การสรา้ งภาพขอบเขตพน้ื ท่ีด้วยเคร่ืองมือพื้นฐาน โดยการคลิกเครอื่ งมือพื้นฐานแล้วเลอื กรปู แบบ เช่น เลอื กวงกลมเหลย่ี ม เสน้ แนวนอนและเสน้ แนวตั้ง รูปแบบการเรียกใชง้ านเหมือนกนั ดังนี้ บทที่ 2 Adobe Photoshop การออกแบบกราฟกิ สาหรบั เวบ็ ไซต์

49 ภาพท่ี 4.1 การสร้างขอบเขตพื้นท่ีด้วยเครื่องมือพืน้ ฐาน 2.4.1.1 การใช้เครือ่ งมือ Rectangular Marquee Tool คอื การสร้างขอบเขตพื้นท่ีรูปแบบสเ่ี หลยี่ มลักษณะการใช้งานดังน้ี 1. คลกิ เลอื กเคร่ืองมือ 2. กาหนดคา่ Option Bar เพอ่ื เลอื กขอบเขตพื้นท่ี ดงั ภาพรูปแบบเคร่ืองมือที่เลือก ปรับพื้นทีท่ ีเ่ ลอื กให้เรียบขนึ้ ปรับขนาดการเลือกพ้นื ท่ี การปรบั ความฟุ้งเบลอท่ีกรอบ รปู แบบการเลือกพื้นที่ ภาพที่ 4.2 การกาหนดค่าขอบเขตพื้นท่ี 2.4.1.2 การเลือกพืน้ ท่ี การเพ่มิ ลด และรวมขอบเขตพ้นื ที่ คอื การกาหนดคา่ ในออปชันบาร์กอ่ นการสรา้ งขอบเขตพ้ืนท่ีเพ่อื สร้างขอบเขตพืน้ ที่ในลักษณะรปู แบบต่างๆ ดังน้ี New การเลือกขอบเขตพื้นทใี่ หม่ Add to ขอบเขตพื้นที่การรวมพนื้ ทซี่ อ้ นกันหลายชิ้นใหเ้ ป็นชนิ้ เดยี วกนั Subtract from ขอบเขตพ้ืนทีต่ ัดส่วนทซี่ ้อนทบั กันออก Intersect with ขอบเขตพ้นื ท่ีตัดรปู ทรงและเก็บเฉพาะส่วนท่ีซ้อนทับกันไว้ การเลอื กขอบเขตพื้นทใ่ี นลกั ษณะตา่ งๆ น้ันข้นึ อยกู่ บั ความตอ้ งการของผูใ้ ช้กาหนดค่าเพอ่ื ให้ไดภ้ าพลกั ษณใ์ หม่ๆ เกิดขึ้นมา โดยการกาหนดค่าออปชนั การเลอื กขอบเขตพนื้ ตวั อยา่ ง การเลือกขอบเขตพ้ืนท่ีรปู แบบต่างๆ ดงั ภาพ บทที่ 2 Adobe Photoshop การออกแบบกราฟิกสาหรับเว็บไซต์