หนังสือเรียนรายวิชา กราฟิก 2 มิติ ม.5

หนงั สอื เรยี นรายวชิ าพนื้ ฐาน การใช้งานโปรแกรมคอมพิวเตอร์ กราฟิก 2 มิติ ชัน้ มัธยมศึกษาปที ่ี 5 โครงการบม่ เพาะและพัฒนาอาชีพเชงิ บรู ณาการ ดา้ นเทคโนโลยีสารสนเทศและการสือ่ สาร ภายใตโ้ ครงการปฏริ ปู หลักสูตรการศึกษา พุทธศักราช ๒๕๕๕ 1

คำ�น�ำ ส�ำ นกั งานคณะกรรมการการอดุ มศกึ ษา กระทรวงศกึ ษาธกิ าร ไดม้ ขี อ้ ตกลงความรว่ มมอื กบั มหาวทิ ยาลยั พะเยา ภายใตโ้ ครงการปฏริ ูปหลักสูตรการศกึ ษาแห่งชาติ ไดใ้ หม้ ีการพัฒนาหลักสตู รและแผนการสอน เอกสาร ประกอบการสอน คู่มือครู ท่ีบูรณาการความรู้ด้านเทคโนโลยีสารสนเทศและการสื่อสารกับกลุ่มอาชีพ เพ่ือใช้ ประกอบการเรียนการสอนของสถานศกึ ษาทีเ่ ข้ารว่ มโครงการ เอกสารประกอบการสอนรายวชิ าคอมพวิ เตอรก์ ราฟกิ 2 มติ ิ ชนั้ มธั ยมศกึ ษาปที ี่ ๕ นี้ มเี นอื้ หาสาระเกย่ี ว กบั งานกราฟกิ 2 มติ ิ บทน�ำ เกยี่ วกบั โปรแกรม Photoshop เทคนคิ การตกแตง่ ภาพ และการลบเลอื นรว้ิ รอย กลมุ่ เครอ่ื งมอื ปรบั แตง่ สแี ละตดั ตอ่ การสรา้ งภาพเทคนคิ พเิ ศษและการใชง้ านรว่ มกบั เครอ่ื งมอื กลมุ่ Filter บทน�ำ เกยี่ ว กบั โปรแกรม Illustrator การวาดภาพและการจดั การวตั ถดุ ว้ ยกลมุ่ เครอื่ งมอื ตา่ งๆ การสรา้ งภาพกราฟกิ และการ ปรบั แตง่ วัตถดุ ้วยคำ�ส่ังต่าง ๆ บทน�ำ เกี่ยวกบั โปรแกรม Indesign สร้างหน้าหนังสือจากตัวอยา่ งงานจรงิ การเผย แพรไ่ ฟล์ในรปู แบบตา่ ง ๆ ผจู้ ดั ท�ำ เอกสารประกอบการสอนหวงั เปน็ อยา่ งยงิ่ วา่ เอกสารประกอบการสอนเลม่ นจ้ี ะเปน็ ประโยชนต์ อ่ ผู้เรียนและผู้ท่ีสนใจ เพ่ือให้ผู้เรียนสามารถนำ�ความรู้ที่ได้ไปประยุกต์ใช้ได้ในอนาคต และขอขอบคุณ สำ�นักงาน คณะกรรมการการอดุ มศกึ ษา(สกอ.) ส�ำ นกั งานคณะกรรมการการศกึ ษาขน้ั พนื้ ฐาน (สพฐ.) และสถานศกึ ษาทเ่ี ขา้ รว่ มโครงการ ผจู้ ดั ท�ำ สิริวิชย์ พังสุวรรณ 12 กุมภาพนั ธ์ 2557 2

สารบัญ บทท่ี 1 บทนำ�เก่ยี วกบั โปรแกรม Photoshop.........................................................................................5 1.1 ส่วนประกอบของโปรแกรม Photoshop........................................................................................5 1.2 พ้นื ฐานการใช้โปรแกรม Photoshop เบ้ืองต้น............................................................................12 บทที่ 2 เทคนิคการตกแตง่ ภาพ และการลบเลอื นริ้วรอย....................................................................21 2.1 การลบเลือนริว้ รอยดว้ ยเครอื่ งมอื Spot Heal Brush Tool........................................................21 2.2 การตกแต่งภาพดว้ ย Dodge Tool และ Burn Tool...................................................................24 บทท่ี 3 กล่มุ เครอื่ งมอื ปรับแตง่ สแี ละตัดต่อ............................................................................................31 3.1 การปรบั แต่งสดี ้วย Hue/Saturation...........................................................................................31 3.2 กลมุ่ เครอ่ื งมือในการตัดต่อภาพ....................................................................................................34 บทที่ 4 การสร้างภาพเทคนคิ พเิ ศษและการใช้งานร่วมกับเครือ่ งมอื กลุ่มFilter............................40 4.1 การใช้ Filter เบื้องตน้ ..................................................................................................................40 4.2 การใชฟ้ ิลเตอรพ์ รอ้ มกันดว้ ย Filter Gallery................................................................................42 4.3 การแสดงผลของฟิลเตอรแ์ ต่ละชนิด.............................................................................................46 4.4 การใส่แสงไฟดว้ ยฟิลเตอร์ Lens Flare.........................................................................................51 4.5 การทำ�ภาพล้อเลยี นด้วยเครอ่ื งมอื ในการบิดเบอื นรูปภาพ Liquify...............................................53 4.6 การตัดตอ่ รปู ภาพ..........................................................................................................................55 บทท่ี5บทนำ�เกี่ยวกบั โปรแกรมIllustrator............................................................................................65 5.1 ความแตกต่างระหวา่ ง Vector Graphic กบั Raster Graphic.....................................................65 5.2 ส่วนประกอบของโปรแกรม Illustrator........................................................................................66 5.3 การเร่มิ ต้นสร้างรูปทรงพื้นฐาน......................................................................................................67 5.4 คำ�สง่ั ในการเคลื่อนยา้ ยวัตถดุ ้วย Selection Tool.......................................................................70 5.5 คำ�สง่ั ในการปรับแต่งรปู ทรงของวตั ถ.ุ ...........................................................................................70 5.6 การจัดล�ำ ดบั ตำ�แหนง่ ของวตั ถุ ด้วย Arrange...............................................................................71 5.7 การสรา้ งวตั ถดุ ว้ ย Pen Tool........................................................................................................72 5.8 การสรา้ งตวั การต์ ูนง่าย ๆ ด้วยเครอ่ื งมอื พืน้ ฐานในการสร้างวตั ถ.ุ .................................................75 บทที่ 6 การวาดภาพและการจดั การวัตถดุ ้วยกลุม่ เครอื่ งมอื ตา่ งๆ...................................................86 6.1 การสร้างมิตใิ หก้ บั วตั ถดุ ว้ ย Blending Mode..............................................................................86 6.2 การใชค้ วามหนาของ Stroke เพ่ิมความน่าสนใจใหก้ บั วัตถ.ุ .........................................................90 6.3 การตัดและก�ำ หนดขอบเขตการแสดงผลของภาพดว้ ยคำ�สง่ั Clipping Mask..............................95 บทท่ี 7 การสร้างภาพกราฟกิ และการปรบั แตง่ วตั ถดุ ว้ ยค�ำ สง่ั ต่าง ๆ.............................................103 7.1 การวาดภาพดว้ ยกลมุ่ เครอ่ื งมอื Line , Shape , Brush และ Pencil........................................103 7.2 การปรบั แต่งรปู ทรงวตั ถดุ ว้ ยกลมุ่ เครื่องมอื Liquify และ Envelope Distort...........................114 3

7.3 การสร้างงานกราฟกิ สามมติ ิ ดว้ ย Effect 3D.............................................................................127 บทท่ี 8 บทนำ�เก่ยี วกบั โปรแกรม Indesign.......................................................................................141 8.1 แนะน�ำ ส่วนประกอบของโปรแกรม และการจัดเตรียมเครอื่ งมือ.................................................141 8.2 การสรา้ งเอกสารใหมแ่ ละการจดั การมุมมองเอกสารแบบต่าง ๆ.................................................145 8.3 การพมิ พ์ขอ้ ความและการใชเ้ ครื่องมอื Text Tool.....................................................................152 8.4 การใสร่ ูปภาพ.............................................................................................................................156 บทที่ 9 สรา้ งหนา้ หนังสอื จากตวั อย่างงานจริง..............................................................................171 9.1 การสรา้ งหนา้ Master เพ่ือจัดการกบั เอกสารทีม่ ีจำ�นวนหน้ามาก..............................................171 9.2 การก�ำ หนดเลขหน้าอัตโนมตั ิ ในหนา้ Master............................................................................178 บทท่ี 10 การเผยแพรไ่ ฟลใ์ นรปู แบบต่าง ๆ........................................................................................184 10.1 การ Export ไฟล์ในรูปแบบของ PDF.......................................................................................184 10.2 การ Export ไฟลใ์ นรปู แบบของ E-book และ SWF/html.....................................................187 4

บทที่ 1 บทนำ�เกี่ยวกบั โปรแกรม Photoshop ภาพที่ 1.1 ภาพตวั อย่างโปรแกรม Photoshop โปรแกรม Photoshop เปน็ โปรแกรมกราฟิกท่ีใชง้ านได้หลายประเภทและครอบคลมุ การท�ำงานหลาก หลายสาขาอาชพี ไมเ่ พยี งงานตกแต่งภาพเทา่ นน้ั แต่ยังรวมไปถงึ การจดั การตัวอักษร จดั วางหนา้ สง่ิ พิมพ์ งาน ประเภทเวบ็ ไซต์ หรอื งานดจิ ิทัล อาร์ตอกี ดว้ ย ทัง้ ยังมีการอัพเดทเวอร์ชน่ั ใหม่ ๆ อยา่ งสมำ�่ เสมอ ช่วยใหเ้ ครื่อง มอื ในการใชง้ านเปน็ ไปได้อย่างสะดวกรวดเร็วและไมซ่ บั ซอ้ น โดยหลัก ๆ แลว้ โปรแกรม Photoshop มบี ทบาททสี่ ำ�คญั ในงานกราฟิก คือ การปรบั แตง่ ภาพ ตัง้ แต่ การจดั การกับสนั ของภาพ ความเขม้ ความสวา่ ง ความคมชดั รวมไปถงึ การแกไ้ ขจุดบกพรอ่ งของภาพใหม้ คี วาม สมบูรณ์ เพอ่ื ให้ภาพนัน้ ๆ สามารถน�ำ ไปใชง้ านตรงส่วนอน่ื ได้ อยา่ งมีประสทิ ธิภาพ 1.1 สว่ นประกอบของโปรแกรม Photoshop Menu Bar Option Bar Workspace Toolbox Dock Palette ภาพท่ี 1.2 ภาพสว่ นประกอบของโปรแกรม Photoshop 5

เม่ือเข้าสโู่ ปรแกรม Photoshop จะพบหนา้ จอที่มสี ว่ นประกอบส�ำ คัญตา่ ง ๆ ดังน้ี Menu Bar สว่ นทเ่ี รียกคำ�สงั่ ต่าง ๆ เพ่อื ใชใ้ นการตกแตง่ ภาพ Option Bar เปน็ สว่ นทใ่ี ช้ในการปรบั แตง่ รูปแบบของเครอ่ื งมือ ซงึ่ จะแสดงรายละเอียดไปตามเครื่องมือที่เลอื กใช้ Tool Bar กลอ่ งเครื่องมอื เป็นทร่ี วบรวมเคร่อื งมอื ต่าง ๆ ในการใช้สรา้ ง และปรบั แตง่ ภาพภายในเครอ่ื งมอื แต่ละ อนั จะมีชดุ เคร่ืองมือยอ่ ย สามารถเลือกได้โดยการ คลิกเมาส์คา้ งไว้ คลกิ เมาสค์ ้างไว้ จะมชี ดุ เคร่อื งมือยอ่ ยอยู่ ภาพที่ 1.3 ภาพแถบเครื่องมอื Tool Bar Workspace ใช้เลอื ก WorkSpace แบบตา่ ง ๆ ทีม่ ีความเหมาะสมกบั งาน สามารถปรับแตง่ และ Save เกบ็ ไว้ได้ Dock เปน็ แถบเครอื่ งมือทีใ่ ช้จัดการกบั สว่ นอื่น ๆ นอกจากการปรบั แตง่ รูปทรง เช่น การยอ้ นกลบั ไปแก้งาน หรือ แถบปรับแต่งหวั แปรง เปน็ ตน้ Palette เป็นแถบเคร่อื งมือท่ีใช้จดั การกับการแสดงภาพบนหน้าจอ เราสามารถพบั เกบ็ ไดใ้ นกรณีท่ีไม่ไดใ้ ช้งาน 6

การสรา้ งไฟล์งานใหม่ ภาพที่ 1.4 ภาพแถบเครื่องมอื Palette 1 2 4 3 ภาพท่ี 1.5 ภาพการตั้งค่าการทำ�งาน 1) คลิกเลือกท่ี File > New จะพบกับหน้าตา่ งปรับแต่งค่าของเอกสารใหม่ 2) ท�ำ การตง้ั ชื่อช้นิ งาน 3) ปรับแตง่ ค่าหนา้ กระดาษ 4) OK 7

การกำ�หนดมมุ มองของภาพ กดปมุ่ <Tab>บนคีย์บอร์ด ภาพที่ 1.6 ภาพการกำ�หนดมุมมองของภาพ ในกรณีท่ชี ิน้ งานเป็นรปู ท่ีค่อนขา้ งใหญ่ เวลาซมู เขา้ ไปทำ�งานใกล้ ๆ แล้วไมอ่ าจเหน็ พ้ืนที่การท�ำ งานได้ อย่างครบถ้วนเนื่องจากเครอ่ื งมอื ตา่ ง ๆ บดบังทศั นยี ภาพในการทำ�งาน เราสามารถซอ่ นเคร่อื งมือเหลา่ นี้ไดโ้ ดย การ กดปุ่ม <Tab> บนคียบ์ อรด์ การยอ่ -ขยายหน้าจอ สามารถท�ำ ไดโ้ ดยใชเ้ คร่ืองมือ Zoom Tool ภาพท่ี 1.7 ภาพการใชเ้ คร่อื งมือ Zoom In และ Zoom Out ในกรณที ี่ตอ้ งการ Zoom Out ใหก้ ด <Alt> + Click 8

การปรบั Image Size ในกรณีที่ภาพมขี นาดใหญ่เกนิ ไป เราสามารถปรับขนาดภาพใหล้ ดลง เพื่อใหม้ ีขนาดที่เหมาะสมกบั พ้นื ทีใ่ นการทำ�งานได้โดยการปรบั ที่ Image Size ไฟลร์ ูปมขี นาดคอ่ นขา้ ง ใหญม่ าก ภาพที่ 1.8 ภาพการปรับ Image Size 3 1 2 ภาพท่ี 1.9 ภาพขัน้ ตอนการปรับ Image Size 1) เลอื กที่ Image > Image Size 2) ปรับ Size ให้พอดแี ละกด OK 3) ขนาดของรปู ภาพจะถูกปรบั ใหพ้ อดีตามทไ่ี ด้ต้งั ค่าไว้ท้งั นี้เพราะขนาดไฟล์ทใ่ี หญ่เกินไปอาจใช้ทรพั ยากร เคร่อื งทคี่ อ่ นข้างเยอะ สง่ ผลให้การประมวลผลในการท�ำงานมีประสทิ ธภิ าพที่ต่ำ� ลง 9

การแพนหน้าจอหรอื ขยบั หนา้ จอการทำ�งาน ภาพที่ 1.10 ภาพขน้ั ตอนการแพนหน้าจอ การแพนหน้าจอหรือขยบั หน้าจอการทำ�งานเพ่อื ไปยงั ต�ำ แหนง่ ทเ่ี ราตอ้ งการน้นั สามารถทำ�ไดโ้ ดยการ กด Space Bar บน Keyboard แล้วแดรกเมาสบ์ นหน้าจอไดเ้ ลย การใช้ Crop Tool เพอื่ กำ�หนดขนาดพน้ื ที่ของรูปภาพ ภาพท่ี 1.11 ภาพขนั้ ตอนการใชเ้ ครื่องมือ Crop Tool 1) เลือก Crop Tool 2) แดรกเมาส์เพือ่ เลอื กขอบเขตของรปู ภาพ 3) จากน้ันเมอ่ื ไดข้ อบเขตของรปู ภาพแลว้ ใหก้ ด <Enter> รูปภาพจะเปล่ยี นแปลงไปตามขนาดของการกำ�หนด ขอบเขตเมื่อครู่ 10

Raster Graphic เมือ่ Zoom In เขา้ ไปใกล้กับวตั ถุมาก ๆ เราจะเห็นการ ประกอบกนั ของ Pixel มากมาย ดังภาพ ภาพที่ 1.12 ภาพตวั อย่าง Raster Graphic โปรแกรม Photoshop เป็นโปรแกรม Raster Graphic ซึ่งไฟลป์ ระเภทน้จี ะเรียกอกี อยา่ งวา่ Digital File หรือ Digital Image ซึง่ เกิดจากการประมวลผลของเม็ดสีขนาดเล็ก เรยี กวา่ Pixel หลาย ๆ เมด็ มาประกอบ กันเปน็ ภาพ ซึง่ ภาพทป่ี ระกอบไปดว้ ย Pixel จ�ำ นวนมากจึงเป็นภาพท่มี คี วามละเอียดสงู และมีความคมชัด ดัง นั้นในการปรบั แตง่ รปู ภาพดว้ ยโปรแกรม Photoshop จะตอ้ งมกี ารก�ำ หนดความละเอยี ด (Resolution) ให้ เหมาะสมกบั การท�ำ งานประเภทตา่ ง ๆ ทกุ ครง้ั 11

1.2 พืน้ ฐานการใช้โปรแกรม Photoshop เบื้องต้น 1 ภาพที่ 1.13 ภาพการเริม่ ต้นการท�ำ งานใน Photoshop 1) เปิดไฟล์รปู ข้ึนมา 2 3 4 ภาพท่ี 1.14 ภาพการใชเ้ คร่อื งมอื Crop Tool 2) เลอื ก Crop Tool 3) เปล่ียนสีพื้นหลังเป็นสีขาว 4) แดรกเมาสท์ ัง้ สองจุดใหไ้ ด้บริเวณดังภาพแล้วกด <Enter> 12

5 6 ภาพท่ี 1.15 ภาพการใช้เคร่ืองมอื Selection Tool 5) เลอื ก Selection Tool 6) แดรกเมาสใ์ หค้ ลมุ บริเวณรปู ชน้ั ใน 8 7 ภาพท่ี 1.16 ภาพการใช้ Selection Tool สร้าง Stroke 7) คลิกขวา > Stroke 8) ก�ำ หนดความหนาและสขี อง Stroke แลว้ กด OK 13

9 ภาพท่ี 1.17 ภาพการใช้ Selection Tool สร้าง Stroke 9) จะเหน็ Stroke ท่ีเราได้กำ�หนดไว้ 12 10 11 ภาพท่ี 1.18 ภาพการใช้ Type Tool 10) เลือกเครื่องมือ Type Tool 11) กำ�หนดความหนาและสีของ Font 12) คลกิ ทบ่ี รเิ วณรปู ภาพเพอ่ื กำ�หนดตำ�แหนง่ ของ Font แล้วพิมพ์ Text เขา้ ไป 14

13 14 ภาพท่ี 1.19 ภาพการใช้ Move Tool 13) คลกิ ที่ Move Tool เพอ่ื ยกเลกิ การท�ำ งานของ Type Tool 14) คลกิ ท่ี Edit > Free Transform 15 ภาพที่ 1.20 ภาพการใช้ Free Transform 15) ปรับขนาดและองศาตามตอ้ งการแลว้ กด <Enter> 15

16 17 19 ภาพท่ี 1.21 ภาพการใช้ Effect กับวตั ถุ 16) ท่พี าเลท Layer ดา้ นล่างขวามอื คลกิ ที่ไอคอน FX 17) คลิกท่ี Stroke 18 ภาพที่ 1.22 ภาพการปรับคา่ Effect 18) ก�ำ หนดคา่ Size และ Color ให้กบั Stroke แล้วคลิกท่ี OK 19) จะไดร้ ปู แบบ Font ตามท่เี ราตอ้ งการ 16

20 21 ภาพที่ 1.23 ภาพการใช้ Blending Mode 20) ทพ่ี าเลท Layer คลกิ ท่ี Normal 21) เลือก Overlay 22 ภาพที่ 1.24 ภาพการปรบั ค่า Opacity 22) ปรบั Opacity (ค่าความโปร่งแสง) เหลือ 50 23 ภาพท่ี 1.25 ภาพแสดงผลของ Opacity 23) เมือ่ ท�ำครบทกุ ขั้นตอนเราจะได้รูปภาพที่เปน็ Text ลายน�้ำไว้ เพอ่ื ใชใ้ นการสงวนลขิ สทิ ธิ์ ไฟล์รูปภาพท่เี รา ท�ำการ Public ผา่ นส่ือต่าง ๆ 17

Workshop กิจกรรมท่ี 1 ใบงานท่ี 1.1 พนื้ ฐานการใช้โปรแกรม Photoshop เบอ้ื งตน้ ให้นกั เรียนสร้างสรรค์ผลงานตามโจทยด์ ังต่อไปน้ี ให้นกั เรยี นน�ำรปู ภาพของตนเองมาตกแต่งภาพลายนำ้� เพื่อเปน็ ตน้ แบบในการท�ำ ภาพลขิ สิทธ์ิ ผลงานของตนเอง จ�ำ นวน 4-5 รปู ภาพ 18

Workshop กจิ กรรมที่ 1 ใบงานที่ 1.2 พ้นื ฐานการตกแตง่ รูปภาพและการจัดวางตัวหนงั สอื เบอ้ื งตน้ ใหน้ ักเรียนสรา้ งสรรคผ์ ลงานตามโจทย์ดังต่อไปนี้ ใหน้ ักเรียนน�ำ รปู ภาพของตนเองมาจัดวางตัวอักษรและทำ�กรอบ (Stroke) จดั เปน็ รูปแบบปกนิตยสาร โดยดูจากปกนิตยสารทมี่ ีอยทู่ ่วั ไปตามทอ้ งตลาดเปน็ กรณศี ึกษา จ�ำ นวน 4-5 รปู ภาพ 19

เอกสารอา้ งองิ กษริ า ศิรวิ ัฒนากลุ , วรางคณา ธนสิรติ ระกูล(2551). Computer Art & Graphi Design เส้นทางสนู่ กั กราฟกิ มอื อาชพี กรงุ เทพฯ: โรงเรียนอนิ เทอรเ์ นต็ และการออกแบบ (Net Design) ปิยะบุตร สทุ ธิดารา(2550). Photoshop Workshop สนุกไมย่ ้ังกับงาน ตัด-ต่อ-แตง่ ภาพ นนทบรุ ี : ไอดซี ฯี อนรุ กั ษ์ วิไลวลั ย(์ 2547). Photoshop CS Retouch Master นนทบุรี : ไอดซี ฯี เกียรติพงษ์ บญุ วิจติ ร(2551). Photoshop CS3 Basic นนทบรุ ี : ไอดีซฯี โปรแกรมที่ใช้ประกอบการสอน Adobe Photoshop เวอรช์ ั่น CS 6 20

บทที่ 2 เทคนิคการตกแตง่ ภาพ และการลบเลอื นรวิ้ รอย 2.1 การลบเลือนรวิ้ รอยด้วยเคร่ืองมอื Spot Heal Brush Tool แบบฝกึ หัดในบทนี้ จะพูดถงึ การใช้เครอ่ื งมอื ในกลุ่มของการลบเลอื นร้วิ รอย หรอื ซอ่ มแซมรูปภาพ โดย เคร่อื งมอื ที่มีชือ่ วา่ Spot Heal Brush Tool ซ่งึ เป็นเคร่ืองมือท่ีมีลกั ษณะในการลากหวั แปรงผ่านบริเวณริ้วรอย บนรปู ภาพ จากน้นั ตัวโปรแกรมจะคำ�นวนสีและพนื้ ผวิ ท่ีใกลเ้ คยี งมาจัดเรยี งใหโ้ ดยอัตโนมัติ ช่วยใหก้ ารตกแต่ง รูปภาพเปน็ ไปไดอ้ ยา่ งสะดวกรวดเรว็ ยิง่ ขึ้น 1 1) เปิดไฟลร์ ูปขึ้นมา ภาพที่ 2.1 ภาพการเปดิ ไฟลร์ ูปภาพ 2 3 ภาพท่ี 2.2 ภาพการปรับขนาดหัวแปรง 2) คลิกท่เี ครอ่ื งมือ Spot Heal Brush Tool 3) ปรบั แตง่ คา่ ตามความเหมาะสม ใหห้ วั แปรงใกล้เคียงกับร้วิ รอยท่ีจะลบ 21

4 ภาพท่ี 2.3 ภาพการลาก Spot Heal Brush Tool ผ่านร้วิ รอย 4) ทำ�การปราดหวั แปรงไปตามริ้วรอย ดงั ภาพ 5 ภาพท่ี 2.4 ภาพการแสดงผลของ Spot Heal Brush Tool 5) สังเกตดูผลลพั ธ์จะเหน็ วา่ ร้ิวรอยบรเิ วณท่ลี ากหวั แปรงผา่ นลบเลือนไป 22

6 ภาพท่ี 2.5 ภาพการลาก Spot Heal Brush Tool ผา่ นรว้ิ รอย 6) ท�ำ แบบเดยี วกนั กบั ริ้วรอยอน่ื ๆ บนหน้าผากและบริเวณใกลเ้ คยี ง 7 ภาพท่ี 2.6 ภาพการแสดงผลของ Spot Heal Brush Tool 7) จะเหน็ ได้ว่าร้ิวรอยได้เลือนหายไป และมผี ิวที่เรียบเนียนเสมอกนั 8 ภาพท่ี 2.7 ภาพการแสดงผลของ Spot Heal Brush Tool 8) ท�ำ การเกบ็ รายละเอยี ดตรงจุดอ่ืน ๆ บนใบหน้า พยายามเกลยี่ หัวแปรงให้พอดี เพือ่ ให้รูปท่ที �ำ การตกแต่งดู เปน็ ธรรมชาติ 23

2.2 การตกแต่งภาพด้วย Dodge Tool และ Burn Tool ในแบบฝึกหัดนี้จะเป็นการฝึกใช้เคร่ืองมือในการตกแต่งความเข้มและความสว่างของภาพซึ่งเป็น ลักษณะของการใช้ Brush ปรับแตง่ ในส่วนท่เี ราต้องการ Before After ภาพท่ี 2.8 ภาพการแสดงผลของ Dodge Tool และ Burn Tool 1 1) เปดิ ไฟลร์ ปู ขนึ้ มา ภาพท่ี 2.9 ภาพการเริม่ ตน้ เปดิ ไฟล์งาน 24

2 3 ภาพที่ 2.10 ภาพการปรับขนาดของหัวแปรง 2) ที่แถบเครอื่ งมือ Tool Box เลือกเคร่อื งมอื Burn Tool 3) ปรบั ขนาด รศั มี และความเข้มของแปรงตามความถนัด 4 5 ภาพที่ 2.11 ภาพการใช้เครือ่ งมือ Dodge Tool 4) ปรับความเขม้ บริเวณดวงตาและค้ิวเป็นอนั ดับแรก 5) ปรบั แตง่ ดวงตาให้ดูมนั วาว และ ปรบั แตง่ เปลือกตาดา้ นบนใหด้ ูเข้มข้ึน 25

6 ภาพที่ 2.12 ภาพการใชเ้ คร่อื งมือ Dodge Tool 6) ตกแตง่ บริเวณดวงตาทงั้ สองข้างใหแ้ ลดเู สมอกนั 7 8 ภาพท่ี 2.13 ภาพการปรบั ค่า Exposure 7) ปรบั Exposure ให้นอ้ ยลง เหลอื ประมาณ 25% 8) หลงั จากปรับคา่ Exposure ให้นอ้ ยลง ให้ลดขนาดหวั แปรงลงใหพ้ อดีกับปาก แล้วคอ่ ย ๆ เกลีย่ หวั แปรงไป ตามแนวของปาก (ซ่ึงสีปากดา้ นบนจะต้องเขม้ กว่าเสมอ) 26

9 ภาพท่ี 2.14 ภาพการใช้เครอื่ งมอื Dodge Tool 9) ปรับแตง่ น�ำ้ หนกั แสงและเงาบรเิ วณใบหนา้ ส่วนอ่นื โดยอ้างองิ จากรปู ภาพตน้ ฉบับ 10 ภาพท่ี 2.15 ภาพการใช้เคร่อื งมือ Dodge Tool 10) ปรับความเขม้ ของบรเิ วณรอบ ๆ ตามการตกกระทบของแสงและเงาให้ถกู ต้อง ท�ำ การเกลย่ี บางส่วน เชน่ เสน้ ผม และ ก�ำ แพงใหก้ ลมกลืนไปกับบรรยากาศของภาพ 27

Workshop กิจกรรมท่ี 2 ใบงานที่ 2.1 เทคนิคการตกแตง่ ภาพ และการลบเลือนร้ิวรอย ใหน้ ักเรียนสร้างสรรคผ์ ลงานตามโจทย์ดงั ตอ่ ไปนี้ ใหน้ กั เรียนน�ำ รปู ภาพใบหน้าท่ีมรี ิ้วรอยธรรมชาติในรูปแบบต่าง ๆ ไม่จำ�กดั วา่ จะเป็นรปู ภาพของตนเองหรอื ไม่ น�ำ มาทำ�การรีทชั ซอ่ มแซมริว้ รอยดังกล่าว และ ตกแตง่ ใหเ้ รยี บเนยี น สมจริง 28

Workshop กิจกรรมที่ 2 ใบงานท่ี 2.2 การตกแต่งรปู ภาพใหม้ ีมิติ และการตกแต่งด้วยตวั อักษรแบบงา่ ย ๆ ใหน้ กั เรียนสรา้ งสรรคผ์ ลงานตามโจทย์ดังตอ่ ไปน้ี ใหน้ กั เรยี นน�ำ รปู ภาพของตนเองมาท�ำ การตกแตง่ รปู ภาพใหม้ มี ติ ิแสงเงาท่ี สวยงามและชดั เจนย่งิ ขน้ึ พรอ้ มใส่ตัวอกั ษรช่ือของตนเองลงในชนิ้ งาน จดั องคป์ ระกอบให้สวยงาม 29

เอกสารอา้ งองิ กษริ า ศิรวิ ัฒนากลุ , วรางคณา ธนสิรติ ระกูล(2551). Computer Art & Graphi Design เส้นทางสนู่ กั กราฟกิ มอื อาชพี กรงุ เทพฯ: โรงเรียนอนิ เทอรเ์ นต็ และการออกแบบ (Net Design) ปิยะบุตร สทุ ธิดารา(2550). Photoshop Workshop สนุกไมย่ ้ังกับงาน ตัด-ต่อ-แตง่ ภาพ นนทบรุ ี : ไอดซี ฯี อนรุ กั ษ์ วิไลวลั ย(์ 2547). Photoshop CS Retouch Master นนทบุรี : ไอดซี ฯี เกียรติพงษ์ บญุ วิจติ ร(2551). Photoshop CS3 Basic นนทบรุ ี : ไอดีซฯี โปรแกรมที่ใช้ประกอบการสอน Adobe Photoshop เวอรช์ ั่น CS 6 30

บทที่ 3 กลมุ่ เคร่อื งมือปรับแต่งสแี ละตัดตอ่ 3.1 การปรบั แตง่ สดี ้วย Hue/Saturation ควบคกู่ บั การใช้เคร่ืองมือ Selection Tool ในแบบฝกึ หดั นจ้ี ะเป็นการฝกึ ใช้เครื่องมือในกลุ่มปรับแต่งสี ซ่ึงใช้ร่วมกับเคร่ืองมือในกลุม่ การเลอื กวัตถุ หรือ Selection Tool ด้วย เพือ่ การก�ำ หนดขอบเขตของการปรบั แตง่ สที ีแ่ น่นอน แม่นยำ� 1 1) เปดิ ไฟลร์ ูปขน้ึ มา ภาพท่ี 3.1 ภาพการเร่ิมต้นเปดิ ไฟล์รูป 2 3 4 ภาพท่ี 3.2 ภาพการ Unlock Layer 2) ดบั เบลิ้ คลกิ ที่ Layer 3) เลือก OK 4) เมื่อตง้ั ชื่อและปลดลอ็ ก Layer แลว้ เราจะสามารถ ท�ำ งานรว่ มกบั Selection Tool ได้อยา่ งเต็มประสทิ ธภิ าพ โดยเฉพาะเวลาเราตอ้ งการจะสรา้ ง Alpha Chanal หรือ การเจาะพื้นหลงั ใหเ้ ปน็ แบบโปรง่ นัน่ เอง 31

56 ภาพที่ 3.3 ภาพการกำ�หนดขอบเขตการเลอื กวัตถุดว้ ย Polygonal Lasso Tool 5) คลิกเมาสค์ า้ งไวท้ ี่ Lasso Tool 6) เลอื ก Polygonal Lasso Tool แล้วคลิกเมาส์เลอื กขอบเขต Selection บนบรเิ วณวตั ถทุ ี่ต้องการเปล่ียนสี (ในทน่ี คี้ ือบริเวณเส้อื ) 7 8 ภาพที่ 3.4 ภาพการกำ�หนดขอบเขตการเลือกวตั ถดุ ้วย Polygonal Lasso Tool 7) ใหท้ �ำ การคลิกเลือกทลี่ ะจดุ ให้ตรงกบั ตำ�แหนง่ ของเส้อื ผ้า จนกระทั้งวนกลับมาครบรอบ ท่จี ดุ เรมิ่ ต้น ดังรปู 8) สว่ นบริเวณสอี ่นื ทป่ี ะปนอยู่ดา้ นใน ใหก้ ด Alt + คลิกเมาส์ เลอื กต�ำ แหนง่ ท่ไี ม่ตอ้ งการ เช่นเดยี วกับภาพ ตวั อย่าง (กด Alt + คลกิ คือ Unselection นั่นเอง) 32

9 10 ภาพท่ี 3.5 ภาพการเลือกใชเ้ ครื่องมือ Hue/Saturation 9) คลิกเลอื กท่ี Image>Adjustments 10) คลิกเลือกท่ี Hue/Saturation เพือ่ ปรับสีตามทีต่ ้องการ 11 ภาพท่ี 3.6 ภาพการใช้เครื่องมือ Hue/Saturation 11) ดผู ลลัพธ์จากการปรบั แต่งซึง่ ท�ำ ใหเ้ ราได้ท�ำ การเปล่ยี นสี เฉพาะส่วน ดว้ ยการทำ�งานร่วมกัย Selection Tools และสามารถใชว้ ธิ เี ดยี วกันน้ี ในการปรบั แต่งสีวตั ถอุ น่ื ภายในรูปภาพไดอ้ ีกด้วย 33

3.2 กลมุ่ เครอ่ื งมอื ในการตดั ตอ่ ภาพ ในแบบฝึกหดั นจ้ี ะเปน็ การฝกึ ใชเ้ ครื่องมอื ในกลุม่ การตัดตอ่ ที่มีช่ือว่า Clone Stamp Tool ซงึ่ เปน็ เคร่อื งมือทส่ี ามารถ คัดลอกบริเวณท่ีเราท�ำการเลือกในขอบเขตทีก่ �ำหนดไว้ แลว้ น�ำไป Stamp ใสจ่ ดุ อนื่ ๆ ได้ 1 1) เปิดไฟลร์ ปู ข้นึ มา ภาพท่ี 3.7 ภาพการเร่ิมต้นเปิดไฟลร์ ูป 2 3 ภาพท่ี 3.8 ภาพการกำ�หนดขอบเขตการ Stamp 2) คลกิ เลอื กท่เี คร่อื งมอื Clone Stamp Tools 3) กด Alt ค้างไว้ แลว้ คลกิ ทีด่ วงตาเพอ่ื Stamp สว่ นทีต่ อ้ งการและน�ำ ไปใชก้ ับบรเิ วณอื่นบนร่างกาย 34

4 ภาพที่ 3.9 ภาพการตัดต่อภาพดว้ ย Stamp 4) เลอื กต�ำ แหน่งทบ่ี รเิ วณหน้าผากแลว้ คลกิ 1 คร้ัง เพื่อให้ Stamp ดวงตาลงไป 5 6 ภาพท่ี 3.9 ภาพการตดั ต่อภาพด้วย Stamp 5) ท่แี ถบเคร่ือมือ Tool Box เลอื ก Burn Tool 6) ใช้ Burn Tool ในการปรบั แตง่ สี ใหม้ ีความใกลเ้ คยี งกัน 35

7 8 ภาพที่ 3.10 ภาพใช้ Selection Tool ก�ำ หนดพน้ื ทใี่ นการปรับแต่งรปู ภาพ 7) เลอื กเครอื่ งมอื Elliptical Maquee Tool หรือ เครอื่ งมอื Selection ทรงกลม 8) Crop เลือกดวงตาทั้งสามดวง ดงั รูป (การใช้ Selection tool มากกว่า 1 ชิ้น ให้ กด Shift + Crop เมาส)์ 9 10 11 ภาพที่ 3.10 ภาพใช้ Selection Tool ก�ำ หนดพืน้ ที่ในการปรบั แต่งรปู ภาพ 9) คลิกเลือกท่ี Image>Adjustments 10) คลิกเลอื กท่ี Hue/Saturation เพ่อื ปรับสีตามท่ตี อ้ งการ 11) ตรวจสอบดูผลลพั ธจ์ ากการ ปรบั แตง่ สี 36

Workshop กิจกรรมท่ี 3 ใบงานท่ี 3.1 กลุ่มเคร่ืองมอื ปรบั แตง่ สีและตกแต่งภาพ ให้นักเรียนสรา้ งสรรคผ์ ลงานตามโจทย์ดังตอ่ ไปนี้ ใหน้ กั เรยี นนำ�ภาพของตนเองหรอื ดาราทตี่ นเองชืน่ ชอบมาทำ�การปรับเปล่ยี นสี เสอื้ ผา้ เคร่ืองแตง่ กายโดยจัดวางภาพตน้ ฉบับและภาพที่ปรบั แตง่ เรยี บรอ้ ยแลว้ ไว้คู่กนั จ�ำ นวน 4-5 รูป 37

Workshop กจิ กรรมที่ 3 ใบงานที่ 3.2 กล่มุ เคร่อื งมอื การตัดต่อและตกแต่งภาพ ใหน้ ักเรียนสรา้ งสรรค์ผลงานตามโจทย์ดังต่อไปน้ี ให้นักเรยี นน�ำ ภาพหนา้ คนมาตกแตง่ รที ชั ใหเ้ กดิ ความเหนอื จรงิ โดยใช้เทคนคิ และ เครือ่ งมือเบอ้ื งตน้ มาตกแตง่ ใหเ้ กิดความสมจรงิ จ�ำ นวน 3-4 รปู 38

เอกสารอ้างองิ กษริ า ศริ วิ ัฒนากลุ , วรางคณา ธนสริ ิตระกลู (2551). Computer Art & Graphi Design เส้นทางสู่นกั กราฟกิ มอื อาชพี กรงุ เทพฯ: โรงเรยี นอนิ เทอร์เน็ตและการออกแบบ (Net Design) ปิยะบตุ ร สทุ ธิดารา(2550). Photoshop Workshop สนกุ ไมย่ ง้ั กบั งาน ตดั -ต่อ-แต่งภาพ นนทบรุ ี : ไอดีซฯี อนรุ ักษ์ วิไลวัลย์(2547). Photoshop CS Retouch Master นนทบรุ ี : ไอดีซฯี เกยี รตพิ งษ์ บญุ วจิ ิตร(2551). Photoshop CS3 Basic นนทบรุ ี : ไอดซี ีฯ โปรแกรมท่ใี ช้ประกอบการสอน Adobe Photoshop เวอร์ชนั่ CS 6 39

บทท่ี 4 การสรา้ งภาพเทคนิคพิเศษและการใช้งานร่วมกบั เครอื่ งมอื กลุ่ม Filter ภาพท่ี 4.1 ภาพตัวอย่างการใช้ Filter นอกจากการใช้เครือ่ งมอื ต่าง ๆ ในการตกแต่งภาพแล้ว ยงั มีกลุ่มเครือ่ งมอื อีกประเภทหนง่ึ ท่ีผู้ใช้ Photoshop สามารถนำ�มาใชใ้ นการสร้างสรรคผ์ ลงานใหม้ ีความหลากหลายได้ นั่นคอื เครอ่ื งมอื กลุ่ม ฟลิ เตอร์ (Filter) ซึ่งนอกจากจะใชใ้ นการตกแต่งภาพแล้ว ผใู้ ช้ยังสามารถสรา้ งสรรค์ แตง่ เติมภาพทีไ่ มม่ อี ยู่จริงไดอ้ กี ด้วย นอกจากน้ีฟิลเตอร์ หรอื Plug-in อนื่ ๆ นัน้ ผู้ใชย้ งั สามารถหาซื้อ หรือโหลดมาเพิม่ เติมไดต้ ามความหลากหลาย และการใชง้ านของผใู้ ช้อีกดว้ ย 4.1 การใช้ Filter เบ้ืองต้นการท�ำ ภาพถ่ายให้เปน็ ภาพลวดลายบนแผน่ โลหะดว้ ย ฟลิ เตอร์ Emboss ภาพท่ี 4.2 ภาพตัวอยา่ งการใช้ Filter Emboss ใน Workshop นี้จะเปน็ ตวั อยา่ งการตกแต่งภาพดว้ ยฟลิ เตอร์ Emboss ซ่งึ จะท�ำ ให้ภาพธรรมดา กลายเปน็ ภาพลวดลายบนแผ่นโลหะ ซง่ึ ท�ำ ได้งา่ ย ๆ เพียงไมก่ ข่ี นั้ ตอนทั้งยงั สามารถปรบั คา่ ไดต้ ามความ ต้องการของผู้ใช้ ซ่งึ ในการปรบั แตง่ น้นั เองกม็ หี นา้ ตา่ ง Preview เพอ่ืิ ใหเ้ หน็ ผลลพั ธข์ องการใชง้ าน 40

1 ภาพท่ี 4.3 ภาพการเริม่ ต้นเปดิ ไฟลร์ ปู 1) เปดิ โปรแกรม Photoshop พรอ้ มทั้งไฟล์รูปภาพขึน้ มา 2 3 ภาพท่ี 4.4 ภาพการปรับแตง่ ค่า Emboss Filter 2) ท่ี Menu Bar เลือกที่ Filter > Stylize > Emboss 3) ปรับแตง่ ค่าในหน้าตา่ ง Filter Emboss ตามความต้องการ 41

4 4) ตรวจสอบดผู ลลัพธ์ท่ไี ด้ ภาพที่ 4.5 ภาพการใช้ Filter Emboss 4.2 การใชฟ้ ิลเตอรพ์ รอ้ มกันดว้ ย Filter Gallery การทำ�งานของ Photoshop ในเวอร์ชั่น CS เปน็ ต้นไปน้ัน ได้มกี ารปรับระบบในการใชฟ้ ิลเตอร์ ให้ สามารถใสฟ่ ลิ เตอรไ์ ดห้ ลายฟลิ เตอรพ์ รอ้ ม ๆ กัน มีช่ือวา่ Filter Gallery ซึ่งท�ำ งานดว้ ยระบบ Layer ซึ่งท�ำ ให้ผู้ ใชส้ ามารถปรบั แตง่ ภาพได้อย่างหลากหลาย ซ่ึงมขี ้นั ตอนในการใชง้ าน ดงั ตอ่ ไปน ้ี 1 ภาพที่ 4.6 ภาพการเร่ิมตน้ เปดิ ไฟลร์ ปู 1) เปิดโปรแกรม Photoshop และ รปู ภาพทต่ี ้องการข้นึ มา 42

3 2 ภาพท่ี 4.7 ภาพการเปดิ Filter Gallery 2) ที่ Menu Bar คลิกท่ี Filter > Filter Gallery 3) จะมีหน้าต่าง Filter ปรากฏข้ึนมา 4 5 ภาพท่ี 4.8 ภาพการเลือกใช้ Filter ต่าง ๆ ใน Filter Gallery 4) เลือกท่โี ฟลเดอร์ Artistic > Cutout 5) ปรบั แตง่ ค่าตามใจชอบ > ตรวจดูผลลัพธ์ 43

6 ภาพท่ี 4.9 ภาพการ add Layer ใน Filter Gallery 6) จากน้ันให้สงั เกตดทู ่ีบริเวณมมุ ขวาล่างของหนา้ ตา่ งฟลิ เตอร์จะมไี อคอนเล็ก ๆ อยซู่ ึง่ มชี ื่อวา่ New Effect Layer 7 ภาพที่ 4.10 ภาพการ add Layer ใน Filter Gallery 7) เม่ือคลกิ เข้าไปแล้ว สงั เกตดูวา่ โปรแกรมจะท�ำ การ Copy ฟลิ เตอรต์ ัวท่เี ราปรบั แตง่ ตวั ลา่ สดุ ขึน้ มา > จากนน้ั ให้คลกิ เลือกท่เี ลเยอรบ์ นสดุ 44

8 ภาพที่ 4.11 ภาพการเลือกใช้ Filter ต่าง ๆ ใน Filter Gallery 8) เลือกที่โฟลเดอร์ Artistic > Poster Edges > ปรับแต่งคา่ ตามความตอ้ งการ 9 ภาพที่ 4.12 ภาพผลลัพธจ์ ากการใช้ Filter ตา่ ง ๆ ใน Filter Gallery 9) ตรวจสอบดูผลลัพธท์ ีไ่ ด้ 45

4.3 การแสดงผลของฟิลเตอรแ์ ตล่ ะชนดิ การท�ำ งานของฟลิ เตอร์ใน Photoshop น้ันมมี ากมาย หลากหลายข้ึนอยู่กบั ลักษณะของโพรเจกผูใ้ ช้ ซง่ึ ฟิลเตอรแ์ ต่ละหมวดหมกู่ จ็ ะมีจดุ เดน่ และความสวยงามท่ีแตกต่างกนั ซงึ่ การแสดงผลของแตล่ ะฟลิ เตอร์ มี ดังน้ี Artistic ภาพต้นแบบ Colored Pencil Cutout Dry Brush Film Grain Fresco Neon Glow Paint Daubs Paletts Knife Plastic Wrap Poster Edges Rough Pastels Smudge Stick ภาพท่ี 4.13 ภาพ Filter ในหมวด Artistic 46

Sponge Underpainting Watercolor ภาพท่ี 4.13 ภาพ Filter ในหมวด Artistic Brush Strokes ภาพตน้ แบบ Accented Edges Angled Stroke Crosshatch Dark Strokes Ink Outlines Spatter Sprated Stroke Sumi-e ภาพที่ 4.14 ภาพ Filter ในหมวด Brush Stroke 47

Distort ภาพตน้ แบบ Diffuse Glow Glass Ocean Ripple ภาพที่ 4.15 ภาพ Filter ในหมวด Distort Sketch ภาพตน้ แบบ Bas Relief Chalk & Charcoal Charcoal ภาพท่ี 4.16 ภาพ Filter ในหมวด Sketch 48

Chrome Conte’ Crayon Graphic Pen Halftone Pattern Note Paper Photocopy Plaster Reticulation Stamp Torn Edges Water Paper ภาพท่ี 4.16 ภาพ Filter ในหมวด Sketch 49

Stylize ภาพต้นแบบ Glowing Edges ภาพที่ 4.17 ภาพ Filter ในหมวด Stylize Texture ภาพต้นแบบ Craquelure Grain Mosaic Tiles Patchwork Stained Glass Texturizer ภาพที่ 4.18 ภาพ Filter ในหมวด Texture 50