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

50การเลอื กพ้ืนทใี่ หม่ New ผลลพั ธ์เลือกพนื้ ท่ีเพิ่ม Add to ผลลัพธ์ตดั พนื้ ที่สว่ นทท่ี บั กันออก Subtract from ผลลพั ธ์ ภาพท่ี 4.3 การเลอื กขอบเขตพนื้ ท่ีตัวอย่าง การเลือกขอบเขตพ้นื ท่ีรูปแบบตา่ งๆ ดังภาพ (ต่อ)เลอื กพืน้ ทสี่ ว่ นทท่ี บั กนั ไว้ Intersect with ผลลัพธ์ ภาพท่ี 4.3 การเลอื กขอบเขตพ้นื ท่ี (ต่อ) 2.4.1.3 การทาภาพขอบฟ้งุ ดัวยคาส่งั Feather คือ การทาภาพให้เกดิ ความฟงุ้เพ่ือเพม่ิ ความน่มุ นวลตงั้ แต่ 1 ขน้ึ ไปท่ชี อ่ ง Feather ซึง่ ถา้ ตวั เลขมากเกดิ ความฟุง้ เบลอมาก โดย บทที่ 2 Adobe Photoshop การออกแบบกราฟกิ สาหรับเวบ็ ไซต์

51ตอ้ งใส่ค่าตัวเลขความฟุ้งกอ่ นแลว้ เลือกขอบเขตพ้ืนที่ คือ คลกิ เลอื กเครื่องมือ และกาหนดค่า Option ดงั ภาพรูปแบบ เครื่องมือ ความฟุ้ง รปู แบบการเลือก ความกวา้ ง X ความสูงSelection ภาพที่ 4.4 การทาภาพขอบฟงุ้การเลือกขอบเขตพ้ืนท่มี รี ูปแบบการเลือก 3 รปู แบบ ดงั น้ี Normal การเลอื กพื้นที่แบบท่ัวไป Constrained Aspect Ration กาหนดอัตราความกว้างและความสงู Fixed Size การกาหนดขนาดการเลอื กไว้แนน่ อน หรือข้ันตอนการปฏบิ ตั ิการสรา้ งภาพขอบฟุ้งจากเมนู ข้ันตอนดงั น้ี 1. คลกิ เลือกขอบเขตพื้นท่ขี องภาพก่อน 2. คลกิ เมนู Select  Modify  Featherกาหนดค่าความฟงุ้ 20 pixels 3. คลกิ เมนู Select  Inverse 4. ลบเส้นขอบเขตพืน้ ทีท่ ีเ่ ลอื ก โดยกดปุม่ Ctrl + X หรือ คลิกเมนคู าสงั่Edit  Cutภาพที่กาหนด Feather เปน็ 0 pixels ภาพที่กาหนด Feather เป็น 20 pixels บทท่ี 2 Adobe Photoshop การออกแบบกราฟิกสาหรับเว็บไซต์

52 ภาพที่ 4.5 ขั้นตอนการปฏิบัตกิ ารสร้างภาพขอบฟุ้ง 2.4.2 การสร้างขอบเขตพนื้ ทดี่ ้วยกล่มุ เคร่ืองมอื Lasso Tool คอื กลมุ่ เคร่ืองมือท่ที างานแตกตา่ งกันขน้ึ อยกู่ ับลักษณะของภาพท่ตี ้องการแก้ไขรปู แบบการสรา้ งขอบเขตพน้ื ที่เลอื กภาพนั้นโดยการกาหนดคา่ ออปชนั บาร์เหมือนกบั กลมุ่ เคร่ืองมือพ้นื ฐาน วธิ ีการเรยี กใช้เครื่องมือดงั กลา่ ว ดังภาพ ภาพที่ 4.6 เคร่ืองมอื กลุ่ม Lasso Tool 2.4.2.1 การใชเ้ ครือ่ งมอื Lasso Tool คอื การสร้างขอบเขตพืน้ ท่ี โดยใช้เคร่ืองมือ Lasso Tool เพอ่ื เลอื กขอบเขตพื้นทีภ่ าพแบบอสิ ระ คลกิ ที่เครอ่ื งมือ คลกิ เมาส์คา้ งไว้แล้วลากไปตาแหนง่ ต่างๆ ทต่ี ้องการเม่ือถึงจดุ สิ้นสุดปลอ่ ยเมาส์ ดงั ภาพ แนวเส้นประ คอื เสน้ ท่เี กดิ จาก การลากเครื่องมือ Lasso Tool ภาพท่ี 4.7 เครื่องมือ Lasso Tool บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรับเว็บไซต์

53 2.4.2.2 การใชเ้ ครื่องมือ Polygonal Lasso Tool คือ การเลือกขอบเขตพ้นื ที่และหยดุ การเลือกภาพได้เป็นจุดๆ โดยคลกิ เมาสซ์ า้ ย ณ จุดทต่ี ้องการเปลี่ยนทิศทางการเคล่ือนที่แลว้ ดับเบลิ คลิกเมาส์ ณ จดุ เริ่มต้นเพื่อสิน้ สดุ การเลือก ดังภาพ คลิกจุดเรม่ิ ต้นและ ดับเบลิ คลกิ จุดสนิ้ สุด ภาพท่ี 4.8 เคร่ืองมือ Polygonal Lasso Tool 2.4.2.3 การใช้เครื่องมือ Magic Wand Tool คือ การสร้างขอบเขตพื้นท่ียึดตามสที ใ่ี กลเ้ คียงกนั ของภาพ โดยการคลิก ณ จุดสีใดสีหนึ่งแล้วลากเมาส์ไปตามสนี ั้น เคร่ืองมือยดึ ตามสีทใ่ี กล้เคยี งกับสแี รกที่ลากเมาส์ผา่ น โดยไมต่ ้องคลกิ เมาสแ์ ต่ถ้ามกี ารลากเมาสผ์ า่ นตาแหนง่สีทไี่ มใ่ กลเ้ คยี งกับสีแรก แตต่ ้องการสว่ นของสีน้ันดว้ ยให้คลิกเมาส์ เพอ่ื เป็นการยอมรับสใี หม่แลว้ คลิก ณ จดุ แรกที่มาบรรจบกนั อกี คร้ังเพอ่ื ส้ินสุดการเลอื กลักษณะ ดงั ภาพ วิธที ่ี 1 คลกิ จดุ เริ่มตน้ ณ สีชมพู แล้วนาเมาส์ ลากผ่านไปแล้ววนกลับมาจนถึงจุดแรก แลว้ คลกิ เมาส์ ณ จดุ แรกอีกคร้ัง บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรับเวบ็ ไซต์

54 วิธีที่ 2 คลิกจุดเริม่ ตน้ แล้วนาเมาส์ลากผ่าน ตามกลีบดอกไม้ระหว่างจดุ สีทีใ่ กลเ้ คียงกนั ลากผ่านมาเรื่อยๆ คลิก ณ จุดแรกอีกคร้งั ภาพท่ี 4.9 การใชเ้ คร่ืองมือ Magic Wand Tool 2.4.3 การสลับด้านขอบเขตพื้นท่ี คือ การสรา้ งขอบเขตพน้ื ท่ีท่เี ลอื กแลว้ สลับด้านขอบเขตพ้นื ท่เี ปน็ ภายนอกขอบเขตพ้ืนท่ี สาหรับภาพบางประเภทท่ีจาเปน็ ตอ้ งสรา้ งขอบเขตพ้ืนทใี่ นส่วนที่ไมต่ อ้ งการออกหรือเพื่อตัดภาพภายนอกออก เช่น การเลอื กภาพโดยการสรา้ งขอบเขตพ้ืนทเ่ี ป็นวงกลมแล้วสลับดา้ นขอบเขตพืน้ ท่ีเพอ่ื ลบภาพภายนอกขอบเขตพน้ื ท่ีออก ข้นั ตอนดงั น้ี 1. เลอื กขอบเขตพน้ื ที่ 2. กดปุ่ม Shift + Ctrl + I หรอื คลกิ เมนู Select  Inverse 3. ถา้ ตอ้ งการลบกดปมุ่ Ctrl + X หรือคลกิ เมนู Edit  Cut เลือกขอบเขตพ้นื ท่ี 1 บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรบั เวบ็ ไซต์

55 คลิกเมนู Select  Inverseเกิดขอบเขตพืน้ ท่ีรอบนอกขอบเขตพ้ืนที่ท่เี ลอื ก 2 ตดั สว่ น ภายนอก ขอบเขตพ้ืนทที่ ่ีเลอื ก3 ภาพท่ี 4.10 การสลับดา้ นขอบเขตพน้ื ที่ 2.4.4 การสรา้ งขอบเขตพนื้ ทด่ี ว้ ยคาสัง่ Color Range คือ การสร้างขอบเขตพน้ื ที่ท่ีมีคา่ สีเหมอื นกนั หรือใกลเ้ คยี งกันและสามารถเลือกซา้ ๆ ได้ เพื่อเกบ็ รายละเอียดของภาพท่ีเลอื กขนั้ ตอนดังน้ี 1. คลกิ เลอื กเมนู Select  Color Range 2. จะปรากฏหน้าตา่ ง Color Range ซึ่งมีส่วนประกอบ ดงั ภาพการย่อ/ขยายขอบเขตของ เครอ่ื งหมายบวกสที ี่เลือก คา่ ยิ่งมากพ้นื ที่ เพิ่มขอบเขตพ้นื ที่ที่เลอื กจะขยายเพม่ิ ขึน้ เคร่อื งหมายลบ ลด ขอบเขตพ้ืนที่ พื้นท่ีรปู ภาพ เลอื กขอบเขตพ้นื ที่ กาหนดเพ่อื สรา้ ง กาหนดเพื่อดภู าพ ขอบเขตพน้ื ที่ บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรบั เวบ็ ไซต์

56 ภาพท่ี 4.11 การสร้างขอบเขตพื้นที่ 3. คลกิ เลอื กตาแหนง่ ภาพท่ีต้องการแล้วสงั เกตจุดสีบริเวณดังกล่าวจะเปลยี่ นเป็นสีเทา 4. แล้วคลกิ ปมุ่ OK ปรากฏภาพทเ่ี ลอื กมขี อบเขตพ้ืนท่ีรอบๆ พ้ืนทที่ เ่ี ลือก ดงั ภาพ 3 ภาพที่ 4.12 ขอบเขตพื้นที่ 2.4.5 ปรับแต่งลักษณะของขอบเขตพ้นื ที่ ดว้ ยคาส่งั Modify คอื การปรบั แต่งขอบเขตพ้ืนที่ และสามารถปรับแต่งรูปแบบการเลอื ก โดยการเรยี กใชค้ าส่ังกลุ่มเมนคู าสั่ง Modify เรียกใช้จากเมนคู าส่ัง Selection  Modify  แล้วเลือกรูปแบบปรับแต่ง ดงั ภาพ ภาพท่ี 4.13 ลักษณะของขอบเขตพื้นที่ 2.4.5.1 Border คอื การเพิ่มความหนาใหข้ อบเขตพืน้ ที่ โดยกาหนดค่า กอ่ นแล้วปรากฏขอบเขตพื้นทเี่ ป็นเสน้ คู่ ดงั ภาพ บทท่ี 2 Adobe Photoshop การออกแบบกราฟิกสาหรับเว็บไซต์

57โค้งมน ดังภาพ ภาพที่ 4.14 เพม่ิ ความหนาขอบเขตพื้นที่ 2.4.5.2 Smooth คือ การสร้างเสน้ ขอบเขตพืน้ ทใ่ี ห้ดูนุ่มนวลหรือมีความ กาหนดค่า Smooth 10 ภาพที่ 4.15 สรา้ งเส้นขอบเขตพ้ืนท่ใี หด้ ูนุ่มนวล 2.4.5.3 Expand คือ การเพ่มิ ขนาดขอบเขตพื้นที่ โดยขยายเพิ่มทกุ ด้านเทา่ ๆ กันขนาดขอบเขตพนื้ ท่ีเดิม กาหนดคา่ 10 pixels ขยายเพิ่มทุกด้านเทา่ ๆ กัน ภาพท่ี 4.16 การเพมิ่ ขนาดขอบเขตพ้ืนที่ 2.4.5.4 Contract คือ การลดขนาดขอบเขตพื้นที่ โดยลดขอบเขตพื้นที่ทุกดา้ นเทา่ ๆ กันขนาดขอบเขตพื้นที่เดมิ ลดขอบเขตพ้นื ทที่ ุกดา้ นเทา่ ๆ กัน บทท่ี 2 Adobe Photoshop การออกแบบกราฟิกสาหรับเวบ็ ไซต์

58กาหนดคา่ 10 pixels ภาพที่ 4.17 การลดขนาดขอบเขตพื้นที่ 2.4.6 การตดั ภาพ การตัดภาพ คือ การประยกุ ต์ใชเ้ คร่ืองมือการสรา้ งขอบเขตพื้นทรี่ ว่ มกับคาสั่งตัดภาพเพื่อจะคลั ลอกภาพไปยงั ไฟล์อน่ื ๆ หรือยา้ ยตาแหน่งภาพไปยังสว่ นต่างๆ ในไฟล์เดมิ ขัน้ ตอนดงั นี้ 1. เปดิ ไฟลภ์ าพที่ตอ้ งการ 2. คลิกเคร่อื งมือ แลว้ สร้างขอบเขตพืน้ ที่ และคลิกเมนู Edit  Cutหรอื คลิกเครื่องมือ (Move Tool) แล้วลากไปยังตาแหนง่ ท่ีตอ้ งการวาง ดงั ภาพ ตดั เพ่ือเคลื่อนย้ายภาพไปยงั ตาแหน่งตา่ งๆ บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรับเว็บไซต์

59 ภาพที่ 4.18 การตดั ภาพหรอื การเคลื่อนยา้ ยภาพไปยังไฟลภ์ าพอน่ื ๆ ข้ันตอนดงั น้ี 1. เปดิ ไฟล์ภาพทต่ี อ้ งการ 2. คลกิ เคร่ืองมือ แล้วสร้างขอบเขตพื้นที่ 3. คลิกเครอ่ื งมือ (Move Tool) ลากไปยงั ไฟลภ์ าพใหมท่ ่ตี ้องการวาง 4. โปรแกรมเปิดไฟล์ภาพอนื่ ข้ึนมาเพ่อื ใหว้ างภาพในตาแหนง่ ทตี่ ้องการวางสร้างขอบเขตพน้ื ท่ี คลกิ เครื่องมือ แลว้ นาเมาส์ชี้ไปยังไฟลใ์ หม่ อืน่ ๆ  234 บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรับเว็บไซต์

60เปิดไฟลภ์ าพใหม่ปล่อยเมาสเ์ พือ่ วางภาพภาพที่ 4.19 การยา้ ยภาพไปยงั ไฟล์ภาพอ่ืน2.4.7 การคัดลอกภาพการคดั ลอกภาพ คือ การสร้างสาเนาของภาพขึ้นมาหลายๆ ภาพ โดยภาพทีท่ าสาเนาอาจจะวางไวใ้ นไฟล์เดียวกันหรอื จะสร้างเป็นไฟล์ใหม่ ข้ันตอนดังน้ี2.4.7.1 การคัดลอกภาพไว้ในไฟล์เดียวกัน1. เปดิ ไฟลภ์ าพท่ตี อ้ งการ2. คลิกเคร่ืองมือ หรือจะสรา้ งขอบเขตพื้นที่ภาพในรูปแบบเครื่องมืออ่ืนๆ ตามต้องการ โดยกดป่มุ Alt ท่แี ป้นพิมพ์คา้ งไว้ แล้วคลกิ เครื่องมือ ลากเมาส์ไปยังตาแหน่งทตี่ ้องการแลว้ ปล่อยเมาสจ์ ะได้สาเนาภาพ ดังภาพ การคดั ลอกภาพไว้ในไฟล์เดียวกัน บทที่ 2 Adobe Photoshop การออกแบบกราฟกิ สาหรับเว็บไซต์

61 ภาพที่ 4.20 การคัดลอกภาพในไฟลเ์ ดยี วกัน 2.7.1.2 การคดั ลอกภาพไปยังไฟล์ใหม่ 1.เปดิ ไฟล์ภาพทตี่ ้องการ 2.คลกิ เครื่องมือ แลว้ กาหนดคา่ Feather เปน็ 5 pixels แล้วเลือกขอบเขตพน้ื ท่ตี ามตอ้ งการ แล้วคลิกทีเ่ มนู Edit  Copy เพอื่ คดั ลอกภาพไฟลเ์ ดมิ ไฟล์ใหม่ บทที่ 2 Adobe Photoshop การออกแบบกราฟกิ สาหรับเว็บไซต์

62 ภาพที่ 4.21 กาหนดค่า Feather 3. คลิกสร้างไฟลภ์ าพขน้ึ ใหม่ โดยคลกิ เมนู File  New จะปรากฏหน้าตา่ งการกาหนดขนาดไฟลภ์ าพใหม่ โดยขนาดภาพทปี่ รากฏนน้ั มีขนาดเทา่ กับภาพทีค่ ดั ลอกไวก้ อ่ นหนา้ นั้นดังภาพ 4. คลกิ ปุ่ม OK แล้วคลิกเมนู Edit  Paste เพอ่ื วางภาพทคี่ ัดลอก ดงั ภาพ 2.4.8 การปรบั รูปทรงภาพด้วยคาสั่ง Transform การปรับรปู ทรงภาพในรปู แบบลักษณะต่างๆ เชน่ เลอื กจากเมนู คลกิ เมนู EditTransform ข้นั ตอนดงั น้ี 1.เปดิ ไฟลภ์ าพ 2.คลิกเมนู Select  All หรือกดปมุ่ Ctrl + A เพ่ือสร้างขอบเขตพ้ืนทีภ่ าพทั้งหมดแล้วคลกิ ทเ่ี มนู Edit  Transform ดงั ภาพ บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรบั เวบ็ ไซต์

63 ภาพที่ 4.22 เมนปู รบั รูปทรงภาพAgain เร่มิ ทาใหมก่ อ่ นหนา้ นี้ 1 คร้ังScale การปรับรปู ทรงภาพแบบแนวต้ัง แนวนอนหรอื แนวทแยงRotate การหมนุ ภาพSkew การปรับรูปทรงภาพในลกั ษณะบดิ เอนDistort การปรับรปู ทรงภาพในลักษณะบดิ เบือนPerspective การปรับรปู ทรงในลกั ษณะแบบมมี ิติคงรปู เหมอื นจรงิRotate 180 การหมนุ แบบ 180 องศาRotate 90 CW การหมุน 90 องศาตามเข็มนาฬิกาRotate 90 CCW การหมนุ 90 องศาทวนเขม็ นาฬกิ าRotate 180 CCW การหมนุ 180 องศาทวนเข็มนาฬิกาFlip Horizontal การกลับดา้ นภาพจากซ้ายไปขวาหรือขวาไปซ้ายFlip Vertical การกลับด้านภาพจากบนลงล่างหรอื จากลา่ งขน้ึ บนตัวอย่าง การปรับรูปทรงภาพในเมนตู า่ งๆ ดังนี้Scale คือ การปรบั รปู ทรงภาพแบบแนวต้งั แนวนอนหรือแนวทแยง ดังภาพ จดุ ส่เี หล่ียม คอื ตาแหนง่ การปรับ รปู ทรง โดยวิธีการดึง เมาส์ดังภาพ ภาพท่ี 4.25 การปรบั ภาพแบบ Scaleการปรบั ภาพแบบ Rotate คอื การปรับรปู ทรงภาพแบบแนวตงั้ แนวนอนหรอื บทที่ 2 Adobe Photoshop การออกแบบกราฟิกสาหรบั เวบ็ ไซต์

64แนวทแยง ดังภาพ นาเมาสม์ าวางแล้วคลกิ ปรบั ภาพภาพต้นฉบบั ปรบั ภาพแบบโรเทท ภาพท่ี 4.26 การปรับภาพแบบ RotateSkew คือ การปรบั รูปทรงภาพในลักษณะบดิ เอน ดังภาพนาเมาส์มาวางแล้วคลิกปรับภาพภาพตน้ ฉบับ ปรับภาพแบบสะควิ ภาพที่ 4.27 การปรับภาพแบบ Skewการปรบั ภาพแบบ Distort คือ การปรบั รปู ทรงภาพในลักษณะบิดเบอื น ดังภาพ บทที่ 2 Adobe Photoshop การออกแบบกราฟกิ สาหรับเว็บไซต์

65นาเมาส์มาวางแลว้ คลิกปรบั ภาพภาพต้นฉบบั ปรบั ภาพแบบดิสทอ ภาพท่ี 4.28 การปรับภาพแบบ Distort การปรบั ภาพแบบ Perspective คือ การปรับรปู ทรงลกั ษณะแบบมีมติ ิคงรปู เหมือนจรงิ โดยคลิกเมาส์ปรับด้านใดด้านหน่งึ แต่อกี ด้านหนึ่งของภาพจะมีการปรับภาพในลักษณะดงั กล่าวด้วยดงั ภาพ นาเมาส์มาวางแลว้ คลิกปรับภาพภาพตน้ ฉบับ ปรบั ภาพแบบ Perspective ภาพท่ี 4.29 การปรบั ภาพแบบ Perspective บทท่ี 2 Adobe Photoshop การออกแบบกราฟิกสาหรับเว็บไซต์

66การปรับภาพแบบ Rotate 180 คอื การหมุนภาพแบบ 180 องศา ดงั ภาพภาพต้นฉบับ การหมนุ แบบ 180 ภาพท่ี 4.30 การปรับภาพแบบ Rotate 180 การปรับภาพแบบ Rotate 90 CW คือ การหมนุ 90 องศาตามเข็มนาฬิกาดังภาพภาพต้นฉบับ ปรับภาพแบบ Rotate 90 ภาพท่ี 4.31 การปรบั ภาพแบบ Rotate 90 บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรับเวบ็ ไซต์

67 การปรับภาพแบบ Rotate 90 CCW คอื การหมุนแบบ 90 องศา โดยหมุนภาพทวนเขม็ นาฬกิ า ดังภาพภาพตน้ ฉบับ หมนุ ทวนเข็มนาฬิกา ภาพท่ี 4.32 การปรับภาพแบบ Rotate 90 การปรบั ภาพแบบ Flip Horizontal คอื การกลับด้านภาพจากซา้ ยไปขวาหรือจากขวาไปซา้ ย ดงั ภาพ ภาพตน้ ฉบบั ภาพแบบกลับด้านภาพ ภาพท่ี 4.31 การปรบั ภาพแบบ Flip Horizontal การปรับภาพแบบ Flip Vertical คือ การกลับดา้ นภาพจากบนลงลา่ งหรือล่างขนึ้ บนดังภาพ บทที่ 2 Adobe Photoshop การออกแบบกราฟกิ สาหรบั เว็บไซต์

68 ภาพตน้ ฉบับ ภาพแบบ Flip Vertical ภาพที่ 4.32 การปรับภาพแบบ Flip Vertical 2.4.9 สรา้ งขอบเขตพืน้ ท่ดี ้วยคาสั่ง Layer Mask การระบายสดี าใน Layer Mask เพอ่ื ซอ่ นพื้นที่บริเวณน้นั และใช้สีขาวระบายลงไปกาหนดใหพ้ ืน้ ทบ่ี ริเวณนัน้ สามารถแสดงไดต้ ามปกติ 2.4.9.1 Layer Mask คือ การสรา้ งขอบเขตพ้ืนที่ ทส่ี ามารถปรบั แตง่ ขอบเขตพ้ืนท่ีใน Layer Mask มีลกั ษณะเหมอื นกับการเจาะหรือตัด Layer ให้เป็นรู โดยการเจาะหรือตัดทาไดด้ ว้ ยการระบายสีดาใน Layer Mask เพ่ือซอ่ นพืน้ ทบ่ี รเิ วณนัน้ และใช้สีขาวระบายลงไป เพื่อกาหนดให้พนื้ ท่ีบรเิ วณน้นั สามารถแสดงไดต้ ามปกติ ขัน้ ตอนดังนี้ 1. นาภาพวาง 2 ภาพบนพาเลต Layer 1 และ Layer 2 2. คลิกเลือก Layer 2 แล้วคลกิ ปมุ่ Add layer mask 1 2 บทท่ี 2 Adobe Photoshop การออกแบบกราฟิกสาหรบั เว็บไซต์

69 ภาพท่ี 4.33 การนาภาพบนพาเลต 3. คลิกเลือกเคร่ืองมือ Brush Tool กาหนดค่า Option Bar ให้เหมาะสม 4. กาหนดสี Foreground เป็นสีดา ระบายสที บั สว่ นท่ตี ้องการซ่อนบนภาพ Layer Mask (Layer 2) สังเกตว่าสว่ นที่ระบายดว้ ยสีดาจะหายไป ถา้ ตอ้ งการให้กลบั คนื มาให้ระบายด้วยสีขาว ดังภาพภาพ Layer 1 และ Layer 2 Layer 2 ท่รี ะบายด้วยสีดา ภาพท่เี สร็จสมบรู ณ์ ภาพที่ 4.34 Layer Mask2.4.9.2 ซอ่ นขอบเขตภาพดว้ ยคาสัง่ Clipping Mask คือ การซอ่ นพืน้ ทบ่ี างสว่ นLayer ภาพท่ีเลอื กให้มีขอบเขตเทา่ กับภาพใน Layer ทอ่ี ยู่ด้านล่างจากการสรา้ ง Clipping Maskโดยไมเ่ ปน็ ต้องตัดภาพทิ้งจริงๆ ขั้นตอนดังนี้1. สรา้ งกรอบภาพที่ตอ้ งการไว้ดา้ นลา่ งของภาพ2. สรา้ ง Layerใหมแ่ ละนาภาพมาวางบนสดุ3. กดปุ่ม Alt คา้ งไว้แล้วคลิกเมาส์ระหวา่ ง Layer (Layer1 และ Shape 1)เพื่อสร้าง Clipping Mask (เมาสค์ ลิกระหว่างเสน้ แบง่ Layer สงั เกตเมาส์จะเปลีย่ นแปลงเป็นสญั ลักษณ์  แล้วคลกิ เมาส์ )4. เมอื่ คลิกเมาส์ภาพของ Layer บนจะเท่ากบั ภาพใน Layer ล่างทันที 12 นาภาพมาวางบนสดุ คลกิ เมาสร์ ะหว่าง Layer 3 3  บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรบั เวบ็ ไซต์

70 1 สรา้ งกรอบภาพ ภาพของ Layer บนจะเท่ากบั ภาพใน Layer ล่าง 4 ภาพที่ 4.35 ซอ่ นขอบเขตภาพดว้ ยคาส่ัง Clipping Mask 2.4.10 แกไ้ ขชว่ งสีไมต่ อ่ เน่ืองของภาพ กรณที ่มี ีการนาภาพถา่ ยตา่ ง ๆ มาเรยี งต่อกันหลายๆ ภาพรวมกันเป็นภาพเดยี วกันโดยใช้งานคาส่ัง Photo merge ภาพทน่ี ามาวางมคี วามสว่าง และมสี ที แี่ ตกต่างกันมากจนการไล่โทนสไี มส่ มบรู ณ์ ผใู้ ช้สามารถเปดิ คาสงั่ Auto Blend Layer เพ่ือไลโ่ ทนสีระหวา่ งภาพทง้ั หมดใหม้ ีความกลมกลืนกัน ข้ันตอนดังน้ี 1.ลักษณะของภาพแบบ Panorama ทเ่ี รียงตอ่ กนั เรียบร้อยแล้ว แต่ว่าสีของแตล่ ะภาพมคี วามแตกต่างกันมาก ดังภาพ 1 บทท่ี 2 Adobe Photoshop การออกแบบกราฟกิ สาหรับเวบ็ ไซต์

71ภาพ 1 ภาพ 2 ภาพ 3 กดปุ่ม Shift แลว้ เลือก Layer ภาพทัง้ หมด 2 ภาพที่ 4.36 นาภาพถ่ายมาเรียงต่อกัน2.กดปุม่ Shift แล้วคลกิ เลอื ก Layer ภาพทั้งหมด3.คลิกเมนู Edit  Auto Blend Layer ออปชนั Panorama จะถกู เลือกไวใ้ ห้โดยอัตโนมตั ิ4.คลกิ Seamless Tones and Colors แลว้ ทค่ี ลกิ ป่มุ OK2 5.ลกั ษณะของผลลพั ธ์ท่กี ารไลโ่ ทนสีทาได้สมบูรณข์ ้ึน ดังภาพ 3 3 45 การวางภาพแตล่ ะ Layer ต้องวางภาพซ้อนทับติดกันให้มากทสี่ ดุ ห้ามมีช่องว่างระหวา่ งภาพ ถ้ามชี อ่ งว่างระหวา่ งภาพที่สรา้ งด้วยคาสั่งนเี้ กดิ เป็นเส้นสีขาวเกดิ ขนึ้ ระหว่างภาพแตล่ ะภาพดังภาพ บทท่ี 2 Adobe Photoshop การออกแบบกราฟิกสาหรับเวบ็ ไซต์

72เส้นสขี าวระหวา่ งภาพภาพที่ 4.37 เส้นสขี าวเกดิ ข้ึนระหว่างภาพบทที่ 2 Adobe Photoshop การออกแบบกราฟกิ สาหรับเว็บไซต์