Writer Note - muit.mahidol.ac.th · Photoshop, Adobe Illustrater...

Writer Note การออกแบบสอประชาสมพนธ เพอการโฆษณาหนวยงาน

โฆษณาสนคา บรการ หรอเผยแพรความรตาง ฯลฯ เพอเผยแพรใน

ชองทางการสอสารตาง ๆ ในปจจบน ไดมการเปลยนรปแบบไป

จากเดมมาก เมอกอนในการออกแบบ Design เราจะเนนการใช

ขอความจำานวนมาก เพออธบายเรองราวตาง ๆ ใชภาพถายมา

เปนหลกในการถายทอดเนอหา เรองราว เนนภาพถายเปนหลก

ประกอบในการออกแบบ แตในปจจบนนกกราฟกดไซนทกคน

คงจะตองปรบรปแบบการทำางาน ตามแนวทางการออกแบบใหม ๆ

ซงนยมแนวอนโฟกราฟก (Infographic) มากขน

การออกแบบในแนวอนโฟกราฟก (Infographic) นน

ไดรบความนยมมาอยางตอเนองหลายป การออกแบบพฒนามา

เรอย ๆ จนเกด Infographic แบบขยบไดหรอเรยกวา Gifographic หรอ

Motion graphic ขนมา โดยเนนการใชงานเพอเผยแพรบนสอสงคม

ออนไลนเพอการโฆษณาสนคาและบรการ เผยแพรบนเวบไซต

ในลกษณะแบนเนอรโฆษณา หรอ ใชบนหนา Page เวบไซตตาง ๆ

ทายทสดนผเขยนหวงเปนอยางยงวา ผอานจะสามารถนำา

ความรทไดไปประยกตใชไดเตมประสทธภาพ และหากมขอผด

พลาดประการใด ผเขยนตองขออภยมา ณ ทนดวย

ศภลกษณ จเครอ

มนาคม 2561

สารบญ

ทำาความรจกกบ Infographic & Gifographic

- InfoGraphic คออะไร

- ประเภทของ InfoGraphic

- Gifographic คออะไร

การใชงานโปรแกรม Adobe Photoshop CC เบองตน

- สวนประกอบของโปรแกรม

- การสรางไฟลใหม (New file)

- การบนทกไฟล (Save File)

- การเลอกพนทบนรปภาพ

- การใชงาน Layer

- การ ยอ-ขยาย หมน Object

- การวาดภาพแบบ Vector

- การสรางตวอกษร

ขนตอนการสราง Gifographic - ขนตอนการเตรยมไฟล PSD กอนทำา Gif Animation

- ขนตอนการทำา Gif Animation

- ขนตอน Export File

8

9

11

39

48

51

52

55

61

64

68

74

85

90

Chapter 01

ทำาความรจกกบ InfographicGifographic&

Gifographic เปนการนำา Infographic

มาประยกตเพมเตม ใสลกเลนการนำาเสนอใหม

ลกษณะเปนภาพเคลอนไหว เพมความนาสนใจ

ใหการสอประชาสมพนธ หรอสอกราฟกดไซน

มความนาสนใจ มประสทธภาพในการสอสาร

ขอมลไดดยงขน

Gifographic

เขยนโดย ศภลกษณ จเครอ นกวชาการโสตทศนศกษา กองเทคโนโลยสารสนเทศ มหาวทยาลยมหดล 8 9

ในยคปจจบนการออกแบบสอในรปแบบ Infographic ไดรบความนยมมมากบน

โลกออนไลน รวมถงสถตอนๆ ททกคนหนมาใชอนโฟกราฟกมากขน เพราะ Infographic

เปนรปแบบการนำาเสนอขอมลทเหมาะสมตอสมองมนษย อนโฟกราฟกเปนรปแบบใน

การนำาเสนอขอมล สถต ความรและตวเลขตางๆ ทคอนขางซบซอน มาแสดงเปนรปภาพ

ตวเลขและขอความ ทเขาใจงายและสามารถสอสารถงผรบไดอยางนาสนใจ ความงายและ

เขาใจไดเรวทำาใหอนโฟกราฟฟกสามารถตอบสนองความตองการของคนในยคปจจบนทม

รปแบบการใชชวตเรงรบ และมเวลาทจำากดในการรบขอมลขาวสาร

ทำ�คว�มรจกกบ InfoGraphic

Infographic มาจากคำา 2 คำา คอ Information และคำาวา Graphic

หมายถง การนำาขอมลหรอความร มาสรปเปนสารสนเทศ ในลกษณะของขอมลและ

กราฟกทออกแบบเปนภาพนง หรอภาพ เคลอนไหวดแลวเขาใจงายในเวลารวดเรวและ

ชดเจน เพอการนำาเสนอขาวสาร-ขอมล ขนตอนการดำาเนนงาน การใหความร บอกเลาเรอง

ราว ตำานานหรอววฒนาการ อธบายผลสำารวจและงานวจย ประกาศแจงเตอน การแนะนำา

เรองตางๆ

InfoGraphic คออะไร

การออกแบบอนโฟกราฟก คอการนำาขอมลมาเสนอ อยางสรางสรรค โดยรวบรวมขอมล วเราะห เรยบเรยง ประมวลผล และอางองขอมลจากแหลงอางองทมความนาเชอถอ โดยการออกแบบอาศยองคประกอบทางศลปะ เพอความสวยงาม เนนการสอสารดวยการใชภาพสญลกษณ แผนภม แผนผง ทางสถต แทนการอธบายดวยตวอกษร เพอสงตอขอมลขาวสารทเราตองการไปยง ทำาใหผรบสาร หรอกลมเปาหมายไดอยางถกตอง กระชบ และเขาใจขอมลไดอยางชดเจน รวดเรว

โดยทวไปเราสามารถแบง Infographic ออกเปน 3 ประเภท ไดแก

ประเภทของ InfoGraphic

1) แบบภาพนง (Static infographics) เชน แผนพบ โปสเตอร หนงสอ

ภาพ หรอเปนสวนหนงในบทความในนตยสารหรอหนงสอพมพ ภาพ กราฟกประกอบขาว

โทรทศน ฯลฯ ซงพรอมสงตอในสอดจทลไดงาย เชน การสงอเมล การนำาไปใชประกอบ

บทความในเวบไซต การสงตอใน Social Media เชน LINE, Facebook, Instagram

เปนตน อนโฟกราฟกสประเภทนจะไมมการเปลยนแปลงหรอปรบปรงเนอหา

ขอบคณขอมลจาก https://www.bumrungrad.com/th/infographic

http://www.lovefitt.com/

Gifographic


2) แบบมปฏสมพนธ (Interactive infographics) เหมาะกบการบรรยายขอมลทมปรมาณมากและซบซอน ผอานสามารถดขอมล

เชงลกเพมเตมได ผสรางชนงานสามารถเปลยนแปลงเนอหาหรอปรบปรงขอมลใหเปน

ปจจบนได คลกดตวอยางไดทเวบไซต

http://inequality.is/fixable

http://www.bbc.com/news/technology-34066941

3 ) แบบภาพเคลอนไหว (Motion graphic/ gifographic) เปนการสรางภาพกราฟกใหมการเคลอนไหวไดในหลายมต แตกตางจากแอนเมชน

(animation) ตรงทไมมตวละครเปนตวดำาเนนเรอง หรอมบทพด และตดฉากสลบเหมอน

ภาพยนตร แตจะเปนการสรางการเคลอนไหวใหกราฟกและใชการพากยเสยงบรรยาย

ประกอบ

คลกดตวอยางไดทเวบไซต

http://muit.mahidol.ac.th/rfid2560/RFID-APP.gif

Gifographic Gifographic คอ สวนผสมระหวางสามอยาง คอ

GIF + Graphic + Infographic = Gifographic

เปนววฒนาการของ Infographic คอมการเพมรปแบบใหมความนาสนใจขน ดวย

การเพมทำาใหบางสวนของภาพเปนภาพเคลอนไหว แลวปรบนามสกลไฟล จากเดมเรามก

จะ Save ไฟลเปน JPG เปลยนใหเปน นามสกล Gif (Graphics Interchange Format)

แทน ซงเมอไฟลภาพขยบไดจะชวยสรางความบนเทงใหเนอหา ทำาใหการจดจำาไดอยางม

ประสทธภาพมากยงขน Gifographic ประกอบดวย ขอมล กราฟก และภาพเคลอนไหว

จดเดนของ Gifographic • สรางความนาสนใจไดมากกวา Infographic

ดวยการแสดงผลเปนภาพเคลอนไหว

• แสดงผลไดบน Twitter และ Google+

เพยงแคอพโหลดภาพไฟล .gif กสามารถแสดงผล

เปนภาพเคลอนไหวไดทนท

• มคำาอธบายทกระชบ เขาใจไดโดยงาย

เพราะมนษยสามารถจดจำาภาพไดดกวาขอมล

ทซบซอน

• มเอกลกษณทำาใหงายตอการจดจำา มการใชสสน

ทสะดดตา พรอมกบภาพกราฟกทสามารถ

เคลอนไหวได

• รองรบการแสดงผลบนสมารทโฟน

ขอบคณขอมล

http://infographic.in.th/infographic/

http://inequality.is/fixable

http://www.bbc.com/news/technology-34066941

http://muit.mahidol.ac.th/rfid2560/RFID-APP.gif

http://infographic.in.th/infographic/%E0%B8%9F%E0%B9%89%E0%B8%B2%E0%B8%9C%E0%B9%88%E0%B8%B2%E0%B8%99%E0%B8%A1%E0%B8%B5%E0%B9%82%E0%B8%AD%E0%B8%81%E0%B8%B2%E0%B8%AA%E0%B9%82%E0%B8%94%E0%B8%99%E0%B9%80%E0%B9%80%E0%B8%84%E0%B9%88%E0%B9%84%E0%B8%AB%E0%B8%99

Gifographic


เกยวกบ ไฟล Gif (Graphics Interlace File) Infographic ภาพกราฟกสกล GIF (Graphics Interlace File) พฒนาโดย

บรษท CompuServe จดเปนไฟลภาพสำาหรบการเผยแพรผานอนเทอรเนตตงแตยคแรก

เนองจากมลกษณะเดน คอ

• สามารถใชงานขามระบบ (Cross Platform) หมายความวา คอมพวเตอรทกระบบ

ไมวาจะใช Windows, Unix กสามารถเรยกใชไฟลภาพสกลนได

• มขนาดไฟลตำา จากเทคโนโลยการบบอดภาพ ทำาใหสามารถสงไฟลภาพไดรวดเรว

• สามารถทำาพนของภาพใหเปนพนแบบโปรงใสได (Transparent)

• มระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสละเอยดในระบบ Interlace

• มโปรแกรมสนบสนนการสรางจำานวนมาก

• เรยกดไดกบ Graphics Browser ทกตว

• ความสามารถดานการนำาเสนอแบบภาพเคลอนไหว (GIF Animation)

คณสมบตของ ไฟล Gif ไฟลชนดนกมจดดอยในเรองของการแสดงส ซงแสดงไดเพยง 256 ส ทำาให การนำา

เสนอภาพถาย หรอภาพทตองการความคมชดหรอภาพสดใส จะตองอาศยฟอรแมตอน

Transparent คณสมบตของไฟล GIF ในดาน Transparent หรอความโปรงแสงของภาพนบ

เปนคณสมบตทเดนมาก ซงเปนคณลกษณะของภาพทมการดรอป (Drop) การแสดงสท

ตองการ มกจะเปนสพน เพอใหสทเลอกโปรงใส และแสดงผลตามสพนของเบราวเซอร

Interlaced เปนคณสมบตทเกยวกบการแสดงผล เนองจากเปนการแสดงผลแบบโครงราง และ

คอยๆ แสดงแบบละเอยด โดยใชหลกการแทรกสอดของเสนส โดยปกตการแสดงผลภาพ

บนอนเทอรเนต จะแสดงผลไลจากขอบบนของภาพจนถงขอบลาง ซงมกจะแสดงผลชา

มาก เพราะตองรอใหแตละสวนแสดงผลครบทกความละเอยด แตดวยเทคนคการแทรก

สอด ภาพจะแสดงแบบเตมรป แตแสดงผลแบบหยาบๆ คลายๆ กบการแสดงผลแบบเบลอ

แลวคอยๆ ชดเจนขนตามเวลา ทำาใหผใชเหนภาพโครงรางกอน หากไมพอใจจะดกสามารถ

ขามการแสดงผลไปไดเลยทนท เทคนคนจะอาศยการแสดงผลของเสนสทละเสนใหแสดง

ผลแทรกสอดกนไปเรอยๆ จนครบทกเสน

6 ขนตอนง�ย ๆ สำ�หรบก�รทำ� Infographic & Gifographic

ใหประสบคว�มสำ�เรจ

1. การวางแผน-วเคราะหกลมเปาหมาย Infographic เปนเครองมอสำาหรบการเลาเรอง ถายทอดเรองราวแการสอสาร

ประชาสมพนธเรองราวตาง ๆ ใหผรบสารเขาใจในสงทเราตองการสอ ดงนนเราจะตองม

วเคราะหกลมเปาหมาย อะไรคอสงทกลมเปาหมายอยากร หรออะไรคอปญหาหรอ สงเรา

ตองการใหเคาทราบ จากนนคดกรองหวขอทสำาคญเรยงลำาดบลงไปตามปญหาทเกดขน

2. หาขอมล-รวบรวมขอมล นกออกแบบจะตองคดกอนวา ประเดนหรอหวขอทหยบมานำาเสนอตรงกบความ

สนใจของกลมเปาหมายของเราหรอไม หรอตองทำาอยางไรใหเปนทสนใจ และเมอไดเรองท

ตองการแลว จงหาทำาการคนหาขอมลทเกยวของกบเนอหานนๆ โดยขอมลทเราอางองจะ

ตองเปนขอมลทถกตองและทนสมย อาจจคนควาเพมเตมจากหนงสอ หรอจาก Internet

ทงขอมลดาน Social Media สถต แหลงอางองจะตองเชอถอได

3. การจดระเบยบขอมล เรยบเรยงเรองราว เขยนหวขอใหโดน การคนควาหาขอมล ถาเราไดขอมลตาง ๆ มาจำานวนมาก การทเราจะนำามาออกแบบ

หรอจดวางเลเอาท ในขนตอนการออกแบบใหพอด สวยงามลงตวนน เราจะตองทำาการคด

แยก จดระเบยบ เรยบเรยง จดกลมขอมลออกมาให สน กระชบ และเขาใจงายทสดเทาท

จะทำาได การใชขอความกจะตองสอดคลองกบกลมเปาหมาย เชนถาเปนวยรน เรากอาจจะ

สามารถใชศพททเปนวยรน ไมเปนทางการจนเกนไป เพอดงดดความสนใจ โดยการเขยน

ขอมลตาง ๆ ไว และอยาลมจดแหลงอางองทเราคนควาเนอหามาดวย

4. ออกแบบ-ดไซน การออกแบบดไซนถอเปนขนตอนทมความสำาคญมาก เราจะตองเลอกใชโปรแกรม

ใหมความเหมาะสม บางครงอาจจะตองใชหลาย ๆ โปรแกรมรวมกน อาทเชน Adobe

Photoshop, Adobe Illustrater ในการออกแบบเราจะตองคำานงถงเนอหาของเราวา

Gifographic


เหมาะสมกบโครงสราง หรอ Layout การออกแบบ Info Graphic แบบใด การเลอกใช

สสรรทดงดดความสนใจ และตองคำานงถงความสบายตาในการอาน อานงายดวย สวยดวย

และการใสแหลงอางองขอมล Logo ของหนวยงาน หรอใสเวบไซต หรอเบอรตดตอไวดวย

5. สวนใดขยบ สวนใดนง ในขณะทเราออกแบบชนงาน เราจะตองคดไปดวยวาเเมอเราตองการปรบ Info-

graphic ใหกลายเปน Gifographic เพอไปใชเผยแพรบนเวบไซตและสอสงคมออนไลนตาง

ๆ ในอนาคตเราจะกำาหนดใหตรงสวนใดบางทสามารถขยบได แตไมควรใหจดทสามารถ

ขยบไดนนมมากจนเกนไป จรงอยเมอมจดทขยบไดจะดงดดความสนใจของผชม แตถา

ขยบหลายจดจนเกนไป จะเเปนการรบกวนสายตาของผชม ในขณะทอานเนอหา สวนท

เปนขอความหรอตวอกษรได

6. เผยแพร การเผยแพร Infographic

& Gifographic เปนขนตอนสดทาย

ของการทำางาน โดยเราสามารถสง

ชนงานไปยงกลมเปาหมายไดหลาย

ชองทาง เชน การสง e-mail การ

เผยแพรบนเวบไซต หรอ Social

Media เชน ทวสเตอร อนสตาแกรม

แตถาตองการโพสลง Facebook

ถาเปน Infographic สามารถโพสไดทนท ถาเปน Gifographic จะตองโพสในลกษณะการ

ฝาก Link

ก�รแบงรปแบบโครงสร�ง (layout) ของ Infographic

ในการออกแบบ Infographic นนไมมรปแบบทตายตว เพราะขนอยกบความคด

สรางสรรคของผออกแบบ แตกอาจจะใชหลกการวางรปแบบโดยดจากเนอหาขอมลทเรา

ตองการนำาเสนอวา มรปแบบขอมลในหมวดหมใด ลกษณะใด จากนนนำามารางโดยดจาก

การจำาแนกรปแบบ Layout ดงน (อางองจาก เวบไซต infographic.in.th)

1. รปแบบ Visualized Article : การนำาเสนอขอมลแบบบทความ เหมาะสำาหรบการนำาบทความ--งานเขยนมาเลาเปนภาพอนโฟกราฟฟก โดยใช

หลกการสรปบทความใหสนลง และเลอกประเดนสำาคญกอนนำาเสนอ รปแบบนจะตองใช

การนำาเสนอทเหมาะสมกบขอมลแตละชนด เชน ถามตวเลขกควรนำาเสนอผานกราฟแบบ

ตางๆ หรอตวหนงสอกสามารถสอสารดวยภาพประกอบ หรอ icon เปนตน

Gifographic


ตวอย�ง : โครงสร�งแบบการนำาเสนอขอมลแบบบทความ

2. รปแบบ Listed : การนำาเสนอขอมลแบบมหวขอยอย โครงสรางนเหมาะการกบออกแบบขอมลทมหวขอหลกเพยงหวขอเดยวแลวมหวขอ

ยอ แตไมยาวนก

ตวอย�ง : โครงสร�งแบบก�รนำ�เสนอขอมลแบบมหวขอยอย

3. รปแบบ Comparison : การนำาเสนอขอมลแบบเปรยบเทยบขอมล การนำาเสนอขอมลแบบเปรยบเทยบขอมล (Comparison) เปน Layout ทมลกษณะ

การแบงขอมลตามแนวตงเพอเปนการใหการเปรยบเทยบกนใหเหนชดเจนขน เรามกใช

Layout แบบนเมอตองการบอกใหผอานทราบถงความแตกตาง หรอ ความเหมอนกน

ระหวางของสองสง ยงถาเรามขอมลยอย ทเปรยบเทยบกนไดหลายขอกจะยงด โดยการนำา

เสนอคกน ทำาใหเหนภาพกนชดเจนวาแตกตางกนอยางไร ใชคสตรงขามเปนตวแบงฝง

Gifographic


ตวอย�ง : โครงสร�งแบบก�รเปรยบเทยบขอมล

4. Structure : การนำาเสนอขอมลแบบอธบายสวนประกอบ การนำาเสนอขอมลทเกยวกบเรองใดเรองหนง โดยใหเหนโครงสรางภายในของสง

นน วามอะไรบางเปนสวนประกอบ เชน ภาพเหมอนสแกนเขาไปภายใน หรอการแยก

แตละสวนออกหางกน ไมซอนกน เพอใหอานงาย ดงาย

Gifographic


ตวอย�ง : โครงสร�งแบบนำ�เสนอขอมลแบบอธบ�ยสวนประกอบ 5. Timeline : การนำาเสนอขอมลแบบบอกประวตความเปนมา เปนลกษณะโครงสรางทเราใชในการอธบายเหตการณตางๆ การแสดงขอมลทมการ

เรยงตามลำาดบเวลา เชน ประวตศาสตร ความเปนมา หรอชวประวตของบคคลสำาคญ

ตวอย�ง :

โครงสร�งแบบก�รนำ�เสนอขอมลแบบ Timeline

Gifographic

เขยนโดย ศภลกษณ จเครอ นกวชาการโสตทศนศกษา กองเทคโนโลยสารสนเทศ มหาวทยาลยมหดล 22 23https://venngage.com/blog/9-types-of-infographic-template/

6. Road Map : การนำาเสนอขอมลแบบอธบายขนตอนการทำางาน

เปนลกษณะโครงสรางทเราใชในการอธบายกระบวนการ หรอบอกเลาเรองราวตาง ๆ

เปนการอธบายทละขนตอน เหมาะกบการอธบายขนตอนการทำางานในเรองใดเรองหนง

เชน ขนตอนการทำางานจากเรมตนจนสดกระบวนการ โดยจำาลองการดำาเนนการตามขน

ตอนเปรยบเสมอนรถทวงไปยงจดหมาย

ตวอย�ง : Roadmap:ก�รนำ�เสนอขอมลแบบอธบ�ยขนตอนก�รทำ�ง�น

Gifographic


7. Flowchart : การนำาเสนอขอมลแบบอธบายลำาดบขนตอน

เปนลกษณะโครงสรางมตวเลอกเปนคำาตอบแตกแขนงออกมาไปเรอยๆ ไปจนถงคำา

ตอบสดทาย ทสำาคญคอตองทำาใหดงาย ไมยงเหยงซบซอน เพอทผรบสารจะไดไมสบสน

8. Useful bait : การนำาเสนอขอมลแบบอธบายวธการทำา เปนโครงสรางทเหมาะสมกบเนอหาทมลกษณะเปนการ อธบายวธการ หรอขนตอน

การทำางานอยางใดอยางหนง มหวขอหลก กระบวนการรองแยกยอยออกมาเรอย ๆ เปน

รปแบบทวไปทคนนยมใช เนนการเขาใจงาย เขาใจทนท ตวอยางการออกแบบทเปน แบบ

Useful Bait Layout เชน

Gifographic


9. Number porn : การนำาเสนอขอมลแบบขอมลทเปนตวเลข

เปนโครงสรางทใชนำาเสนอขอมลทมขอมลตวเลขและกราฟ ทมความนาสนใจ แต

ตวเลขเหลานนตองมความนาสนใจมากพอทคนจะอาน และควรเลอกไตลกราฟกแบบ

เดยวกนทงภาพ

ตวอย�ง : Roadmap:ก�รนำ�เสนอขอมลแบบอธบ�ยขนตอนก�รทำ�ง�น

ขอแนะนำ�ในก�รเลอกใชสในก�รออกแบบ

ทำาความเขาใจกบหลกการใชสในการออกแบบเรองทฤษฎส

Color wheel คอทฤษฎสทเราควรจะเรยนรเอาไวบาง ซงสจะประกอบไปดวย

3 ขนคอ

ขนท 1 (Primary) – แมส ไดแก สแดง ส

เหลอง สนำาเงน

ขนท 2 (Secondary) คอ สทเกดจากสขนท

1 หรอแมสผสมกนในอตราสวนทเทากน จะทำาให

เกดสใหม 3 ส ไดแก สสม สมวง สเขยว

ขนท 3 (Tertiary) คอ สทเกดจากสขนท 1 ผสม

กบสขนท 2 ในอตราสวนทเทากน จะไดสอก 6 ส

คอ สสมแดง สมวงแดง สเขยวเหลอง สเขยวนำาเงน

สมวงนำาเงน สสมเหลอง

Gifographic


1. Monochromatic –คอ การใชสแบบสเดยว แตมการลดระดบความเขมของสลง

2. Analogous คอ การใชสทใกลเคยงกนทอยลำาดบตดกนในวงลอส

3. Complementary คอ การใชสคตรงขามกนในวงลอส

4. Split-Complementary คอ การใชส ถดจากสคตรงขาม ในวงลอส

5. Triadic คอใชส - ส หลก - เหลยมดานเทา

6. Tetradic (Double-complementary) ใชสตรงขาม แบบ 2 ค พรอมกน

ตวอย�ง : ตวอย�งก�รเรยงลำ�ดบโทนส

Gifographic


เมอทำาความเขาใจเกยวกบเรองวงลอของสแลวจะขอแนะนำาวธรการเลอกใชสใน

งานกราฟกดไซน ในดานการออกแบบ Infographic ดงน

1. ตองวเคราะหงานกอนวา งานทเราออกแบบควรใชสโทนใด

ถาการออกแบบไมไดถกบงคบดวยสทเปนอตลกษณ หรอสญลกษณของสนคาหรอ

สประจำาองคกร เราควรเลอกใชสโดยนำาหลกจตวทยาของสมาใช เนองจากสแตละสจะให

ความรสก มผลตอจตใจของมนษย โดยสตางๆ จะใหความรสกทแตกตางกน ดงนนเราจง

มกใชสเพอสอความรสกและความหมายตางๆ กนไป เชน

• สแดง ใหความรสกเรารอน รนแรง อนตราย ตนเตน

• สเหลอง ใหความรสก สวาง อบอน แจมแจง ราเรง ศรทธา มงคง

• สเขยว ใหความรสก สดใส สดชน เยน ปลอดภย สบายตา มงหวง

• สฟา ใหความรสก ปลอดโปลง แจมใส กวาง ปราดเปรอง

• สมวง ใหความรสก เศรา หมนหมอง ลกลบ

• สดำา ใหความรสก มดมด เศรา นากลว หนกแนน

• สขาว ใหความรสก บรสทธ ผดผอง วางเปลา จดชด

• สแสด ใหความรสก สดใส รอนแรง เจดจา มพลง อำานาจ

• สเทา ใหความรสก เศรา เงยบขรม สงบ แกชรา

• สนำาเงน ใหความรสก เงยบขรม สงบสข จรงจง มสมาธ

• สนำาตาล ใหความรสก แหงแลง ไมสดชน นาเบอ

• สชมพ ใหความรสก ออนหวาน เปนผหญง ประณต ราเรง

• สทอง ใหความรสก มงคง อดมสมบรณ

เมอทราบจตวทยาของสแตละสแลว กตองคดวางานหรอหวขอทเราตองออกแบบ

นนควรทจะใชสใด ตวอยางการออกแบบทเลอกใชสทสอดคลองกบเนอหา

Gifographic


Infographic หลกก�รใช กฏ 3 ส

หลกการใช กฏ 3 ส เปน หลกการออกแบบดไซนทสำาคำาคญ

สหลก, สท 1 หรอสทเราใชเปนสพน หรอมปรมาณมากทสดในชนงาน ประมาณ

60% ของพนททงหมด

โดยหลกการทเราจะเลอกวาจะใชส

ใดนน ควรคำานงถงหวขอทเราตองออกแบบ

เชน เนอหา Infographic ทเราตองทำาคอเรอง

วายนำาทาน แคลอรเทาไหร?----เรากเลอกใชส

ฟา (สของหยดนำา) และเมอเลอกไดแลวกคอย

หาสรอง 2 – 3 มาประกอบการออกแบบ

12 3 3

สรอง สท 2-3-4 เลอกอยางไร เมอเราเลอกสหลกไดแลว จากนน กเลอกส รอง โดยดวา สอะไร ทอยกบสหลกแลว

สวย กลมกลนไมโดด ไมควรใชสทเปนสขนตน หรอแมส ลวนๆ หรอสทสดเกนไปมาใช

หรอถาจำาเปนตองใช กตองเปนปรมาณทเหมาะสม (ดอางองจากเรองวงลอของส ทฤษฎ ส)

สวนใหญแลวในการออกแบบ infographic เรามกจะใชสชนท 3 เนองจากมความสดไม

มากจนเกนไป หรอสสะทอนแสบตามากนก และการเลอกใชสทงหมดในชนงาน กไมควร

จะเกน 4 ส เพราะจะลายตา อานเนอหายากขน สวนการจบคสรอง จะตองดนมนวล กบ

สหลก ตวอยางภาพหลกการใชสในการออกแบบโดยยดหลกวงลอของส อาจจะใชสคตรง

ขาม แบบ 3 ส (60 : 30 : 10 )หรอใชสตรงขามแบบ 2 ค กได ตวอยาง ส ในงาน Info-

graphic

COLOR

1 2 31

COLOR

1 2 31 2

Gifographic


COLOR 2 2 31 1

Infographic หลกก�รใชสเอกรงค

ใชสเอกรงค (Monochrome) โดยดวรรณะส วา

วรรณะส อะไรเขากบหวของานทจะออกแบบ สเอกรงค (Monochrome) เปนการใชสเพยงสเดยว แตมหลาย ๆ นำาหนก ซงไล

เรยงจากนำาหนกออนไปแก เปนการใชสทเนนไปทางสโทนใดโทนหนง ใชสใดสหนงเปนส

สดยนพนเพยงสเดยวแลวลดคา นำาหนกออนแก ในระยะตางๆเปนรปแบบการออกแบบ

ทเนนความกลมกลนกน หลกการใชสแบบเอกรงคคอ เมอเอาสทสดใสสใดสหนงเปนจด

เดนของภาพแลว สทเปนสวนประกอบรอบๆตองลดคาความสดลง สวนประกอบรอบๆนน

จะใชสเดยวกนแตลดความสดของสใหนอยกวาสหลก สทนำามาเปนสวนประกอบอาจแบง

นำาหนกไดตงแต 3 - 6 ส ขอดของงานออกแบบทใชสแบบเอกรงคคอ ไดผลงานทงดงาม

เพราะโครงสรางสจะดไมรนแรง ดนมนวล

Gifographic

36

ตวอย�ง : Infographic ทเนนใชสแบบ Monochrome

แนะนำาเวบไซตทชวยในการเลอกโทนสในการออกแบบ

- https://coolors.co/

- http://www.colourlovers.com/home/palettes

Chapter 02

การใชงานโปรแกรม Adobe Photoshop CC&

โปรแกรม Adobe Photoshop CC เปนโปรแกรม

สำาหรบงานกราฟกดไซนทสามารถมาประยกตใชในการ

ออกแบบ Infographic และ Gifographic ได โดยการใช

เครองมอในโปรแกรมเบองตนงาย ๆ ได อกทงยงสามารถ

Export ไฟล นำาไปใชเผยแพรงานบนเวบไซต และชองทาง

อน ๆ ไดดวย

เบองตน

Gifographic

เขยนโดย ศภลกษณ จเครอ นกวชาการโสตทศนศกษา กองเทคโนโลยสารสนเทศ มหาวทยาลยมหดล 39

ก�รใชง�น Adobe Photoshop CC เบองตน

อธบายโปรแกรมอปกรณเครองมอตาง ๆ โปรแกรม Adobe Photoshop CC เปนโปรแกรมทมความสามารถในการออกแบบ

กราฟกดไซน เพอนำาไปใชรวมกบงานในดานตาง ๆ เชน งานกราฟกทเกยวกบสอสงพมพ

ทกประเภท งานกราฟกบนเวบไซตและการตกแตงภาพถายจากกลองดจตอล ซงอาจกลาว

ไดวาเปนโปรแกรมทมผนยมนำามาใชในการออกแบบและตกแตงภาพถายกนมากทสด

Adobe Photoshop CC เปนโปรแกรมทใชในการสรางภาพและ การตกแตงภาพทกำาลง

เปนทนยมอยางสงสด ในปจจบนเนองจากเปนโปรแกรมททำางานไดอยางมประสทธภาพ

และผลงานทไดเหมาะทจะใชกบงานสงพมพ นตยสารงานมลตมเดยและสรางกราฟกตางๆ

เปดโปรแกรม Adobe Photoshop CC ม 2 วธ ดงน

1. เลอกคำาสง Start / All program /Adobe Photoshop CC

2. Dubble click ท shortcut Icon Adobe Photoshop CC ทหนาจอ desktop

เรมตนก�รทำ�ง�น : Adobe Photoshop CC

Gifographic

เขยนโดย ศภลกษณ จเครอ นกวชาการโสตทศนศกษา กองเทคโนโลยสารสนเทศ มหาวทยาลยมหดล 41

Gifographic

Infographic & Gifographic

1. Title bar เปนสวนทอยดานบนสดของหนาตาง แสดงชอโปรแกรม ทาง

ดานขวาสดจะมปม เปด ปด ยอ ขยาย หนาตางโปรแกรม

2. Menu bar เปนสวนทอยถดจาก ไตเตลบาร ประกอบไปดวยชดคำาสง

ตาง ๆ ทใชในการทำางาน อาทเชานการจดการไฟล การจดการรรปภาพ การปรบแตง

สวนตาง ๆ ของโปรแกรม โดยในแตละเมนหลกจะมเมนยอย ๆ ซอนอย โดยดจาก

เครองหมาย ทอยดานหลงเมนนนน ๆ เมอคลกคางไวจะแสดงเมนยอย

วธก�รใชง�นเมน ม 2 วธ 1. คลกทชอเมนทตองการ แลวใชงาน

2. เลอกใชเมนคำาสงตาง ๆ โดยใช คยลด เชน สรางรปภาพใหม = Ctrl + N

ปดไฟลรปภาพทเปดอย = Ctrl + W ฯลฯ

ร�ยละเอยดของเมนต�ง ๆ File เปนชดคำาสงทใชจดการไฟล เชนการสรางไฟลใหม การเปด ปด บนทกไฟล

การนำาเขาไฟลจากแหลงอน (Import)

Edit เปนชดคำาสงทเกยวกบการแกไขภาพ และปรบการทำางานของโปรแกรม

เชน การ Copy Paste การแกไขเครองมออน ๆ

Image เปนชดคสงทเกยวกบการทำางานของภาพ การปรบแตงส จดการขนาด

ของภาพ แสงและเงาภายในภาพ

Layer เปนชดคำาสงทเดยวกบการจดการ เลเยอร การสราง copy การลบ ฯลฯ

Select เปนชดคำาสงทเกยวกบการเลอกวตถหรอเลอกพนทภายในภาพ และการ

ยกเลการเลอก

filter เปนชดคำาสงทเกยวกบการปรบแตงภาพใหมลกษณะพเศษตาง ๆ เชนการ

ทำาภาพเบลอ ภาพวาดสนำา เปนตน

3D ( Photoshop Extended ) ใชสำาหรบการปรบแตงภาพไฟล 3D ทนำามาใช

งานในโปรแกรม รวมถงการสรางรป 3 มต

สวนประกอบของโปรแกรม : Adobe Photoshop CC

View เปนชดคำาสงทเกยวกบการปรบมมมองขณะทเราทำางาน เชน การซอน

แสดง ไมบรรทด ยอขยายหนาตาง

Analysis ( Photoshop Extended ) ใชวเคราะหขอมลจากการใชเครองมอ

Count tool Ruler Tool

window เปนเมนทเกยวกบการปรบการแสดงผล หนาจอโปรแกรม เชน การ

จดการ พาเนลตาง ๆ การจดการเครองมอการทำางาน

help เปนเครองมอชวยการทำางาน และชวยแนะนำาการใชงานเครองมอตางๆ

3. Toolbox Toolbox เปนกลองเครองมอซงประกอบไปดวยเครองมอตาง ๆ จำานวนมาก

โดยเครองมอทมลกษณะการทำางานคลาย ๆ กน จะถกจดเกบไวในหมวดเดยวกน ซงเรา

สงเกตไดจากทมมลางขวาทเครองมอนนจะมลกศรสดำา สามารถเลอกใชเครองมอเพมเตม

ได

วธเลอกใชง�นเครองมอใน Toolbox • ถาหากภาพของปมไอคอนเครองมอทตองการใชงานแสดงอยเราสามารถคลกเพอ

ใชงานไดทนท

• ถาตองการใชเครองมอทซอนอยใหเลอกทลกศรมมลางขวาในหใวดเดยวกบเครอง

มอ น จะปรากฏเครองมอทตองการเลอกใชขนมาหลงจากนนคลกทเครองมอดงกลาวเพอ

ใชงาน

• หรอคลกขวาบนปมหมวดเครองมอเดยวกบทตองการใชงานจากนนเลอกเครองมอ

Gifographic


คลก ... ดเครองมอเพมเตม

เปนเครองมอทเกยวกบการสรางเสน Selection โดยเราสามารถเลอกพนทใน

ลกษณะตางๆ กน ไมวาจะเปนการเลอกพนทแบบรปทรงเลขาคณต และรปทรงอสระ โดย

กลมเครองมอทเดยวกบการเลอกนนประกอบไปดวย

กลมเครองมอ Marquee tool ใชสำาหรบเลอกพนท ในรปทรงเลขาคณต

ทงสเหลยม วงกลม วงรประกอบดวยเครองมอ 4 ชน คอ

• Rectangular Marquee ใชสราง Selection เปนพนทสเหลยม

• Elliptical Marquee ใชสราง Selection เปนพนทวงกลมหรอวงร

• Single Row Marquee ใชสรางเสน Selection แนวนนอนขนาด 1 พกเซล

• Single Column Marquee ใชสรางเสน Selection แนวตงขนาด 1 พกเซล

กลมเครองมอเกยวกบก�รเลอก

กลมเครองมอ Lesso tool ใชสำาหรบเลอกพนท ในรปทรงอสระ โดยไม

ยดตดกบรปทรงเรขาคณตเหมอนเครองมอกลม Marquee Tool ประกอบดวย

Lasso ใชสราง Selection แบบอสระ

Polygonal Lasso ใชสราง Selection ทเปนรปหลายเหลยม

Marnetic Lasso ใชสราง Selection ทมการวางตำาแหนงโดยอตโนมต โดย

พจารณาจากความแตกตางของสในพนททเมาสพอยเตอรเคลอนผานไป

เครองมอ Move tool เปนเครองมอทใชสำาหรบการยายวตถ หรอพนท ๆ เลอกไวไปยงตำาแหนงตาง ๆ

ในพนทการทำางานรวมถงการยายเสน Guide เสนไมบรรทดตาง ๆ

กลมเครองมอ Quick Selection เปนการเลอกพนทแบบอตโนมต โดยดปรแกรมจะเลอกพนท หรอสรางเสน

Selection ใหเองโดยเลอกจากสทใกลเคยงกน โดยดจากโทนสและพนท ๆ ตดตอกน

เครองมอทเกยวกบก�รตดและแบงภ�พ

Crop tool ใชในการตดสวนของภาพท

ตองการ หรอการตดขอบภาพ

Perspective Crop Tool เปนเครองมอ

ทชวยแกปญหาภาพทมความผดเพยน ซงเกดจาก

มมมองของการถายภาพ ไมวาจะเปนการมมภาพ

ทมองมาจากระดบทตำากวาระดบสายตา Bird Eye View หรอสงกวาระดบสายตา Ant

Eye View Perspective ทไดจากการถายแบบ Ant Eye View นนจะมลกษณะลขน โดย

จะเหนพนทดานลางทปะทะสายตามากทสด

Gifographic


Slice tool เปนเครองมอทใชในการตดภาพออกเปนชนเลก ๆ เพอนำาไปใชในงาน

ดาน Website

Slice Selection tool เปนเครองมอทใชเลอกภาพทเราสไลดไว แลวเพอแกไข

ขนาดของชนภาพ

กลมเครองมอเกยวกบก�รแกไขภ�พ

กลม Healing Brush

เปนการลบจดบกพรองภายในภาพดวยการ

Copy บรเวณภาพทตองการเปนสวนตนฉบบมาผสม

กบส แสงเงาของบรเวณภาพทเราตองการแกไข กลม

เครองมอนประกอบดวยเครองมอยอย ๆ ดงน

Spot Healing Brush Tool เปนเครองมอลบรวรอยและตกแตงสวนทตองการ

ของรปภาพ โดยคลกไปบนพนททตองการแกไข โปรแกรมจะทำาการลบรวรอยของภาพ

โดยการเกบตวอยางจากพนททตองการและเกลยสใหเหมอนกบพนทรอบๆ แตเครอง

Spot Healing Brush จะมขอจำากดคอ ไมสามารถทำางานบรเวณพนททมสตดกนมากๆ

เพราะโปรแกรมจะสบสนในการเลอกสทจะมาใช ทำาใหสทไดไมกลมกลนกน

Healing Brush เปนเครองมอทมรปแบบการทำางานโดยการคดลอกพนทท

ตองการแลวนำาไปแทนทพนททตองการตกแตง และมลกษณะคลายกบรปแบบการทำางาน

ของ Spot Healing Tool

คอ จะทำาการเกลยสทนำาไปแทนทใหเขากบสของพนทเดมจงทำาใหภาพดเปนธรรมชาต

ลดปญหาการเกดรอยดางบนรปภาพซงเกดจากสของพนททนำาไปแทนทและพนททจะ

ตองการตกแตงแตกตางกน

Patch Tool เปนเครองมอทมรปแบบการทำางานเหมอนเครองมอ Healing

Brush คอจะตองคดลอกพนททตองการนำาไปใชแทนท และนำาไปแทนททตองการแกไข

แต Patch Tool จะแตกตางตรงทผใชกำาหนดพนททตองการแกไขกอนโดยลากคลมพนท

ๆ ตองการแกไขจากนนจงเลอกพนททตองการนำามาแทนทแลวโปรแกรมจะทำาการคดลอก

และนำาพนททตองการใชมาใชแทนทสวนทตองการแกไขโดย

Content-Aware move tool เมอเราตองการเคลอนยายหรอลบบางสวนของ

ภาพหรอวตถในภาพดวยการจดการแสงและเงา ใหภาพดกลมกลนกนมากขนดวย

Red eye Tool เปนเครองมอทใชในการกำาจดจดแดงทเกดจากการถายภาพ

กลม Clone Stamp Tool เปนเครองมอทใชสำาหรบการลบรวรอยในรปภาพ โดยมหลกการทำางาน คอ การคดลอก

สวนหนงในรปภาพตามตองการใหเปนสวนตนฉบบ แลวนำาไปแทนทสวนทตองการตกแตง

หรอแกไข ใชลดรวรอยหรอชอมแซมรปภาพ

กลม Eraser Tool เปนเครองมอทใชลบสวนของภาพทไมตองการออก แบงเปน

เครองมอ Eraser Tool ใชลบ และ

แทนทดวยส Background

เครองมอ Magic Eraser tool

ใชลบอตโนมตโดยดจากโทนสทใกลเคยงกน ลบโดยการคลกเพยงครงเดยว

เครองมอ Background Eraser Tool ใชลบ และไมแทนทดวยส Background

พนท ๆ ถกลบกลายเปนสโปรงใส

กลม ใสสลงบนพนท เปนเครองมอทใชสำาหรบการเทสลงในพนท ๆ

เรากำาหนด โดยจะเทสแบบสเดยว หรอแบบไลสกได

กลม ปรบคว�มคมชดในพนท

กลม ระบ�ยสในพนท

Gifographic


กลม ก�รปรบค�คว�มสว�งของภ�พ Dodge Tool คอการทำาภาพใหสวาง เปนแสงสขาวขน

Burn Tool คอทำาใหภาพมดลงตรงจดทเราตองการ

Sponge Tool คอทำาการดดซบส ความสดของสในจดทเราตองการออก

ภาพใหมลกษณะสเทา

กลมเครองมอเกยวกบสร�ง

กลม Pen Tool เปนเครองมอทใชวาดเสนพาธ (Path)

หรอรปทรงทเปน shape ตางๆ

กลม Type Tool เปนเครองมอสรางขอความหรอตว

อกษร ในชนงาน

กลม Selection tool ใชเลอกและปรบแตงรปทรงของเสนพาธ

กลม Shape tool ใชวาดรปทรงเรขาคณตหรอรปทรงสำาเรจรป

กลมเครองมอเกยวกบก�รจดก�รมมมองของภ�พ

View tool / Hand Tool เปนเครองมอเกยวกบการจดการมมมองในรป เชน

การ Zoom ดภาพ โดยละเอยด และ HandTool ยาย

ดมมมองภายในภาพ ขณะทเรา Zoom ดใกลๆ ได

กลมเครองมอเกยวกบก�รเลอกส กำ�หนดส ในชนง�น

Foreground Color / Background Color เปนเครองมอเกยวกบการจดการส เตมส กำาหนดส

4. Option Bar Option Bar (ออปชนบาร) เปนสวนทใชปรบแตงคาการทำางานของเครองมอตาง ๆ

โดยรายละเอยดในออปชนบารจะเปลยนไปตามเครองมอทเราเลอกจากทลบอกซในขณะ

นน เชน เมอเราเลอกเครองมอ Brush (พกน) บนออปชนบารจะปรากฏออปชนทใชใน

การกำาหนดขนาด และลกษณะหวแปรง, โหมดในการระบายความโปรงใสของส และอตรา

การไหลของส เปนตน

5. Panel (พ�เนล) Panel (พาเนล) เปนวนโดวยอย ๆ ทใชเลอกรายละเอยด หรอคำาสงควบคมการ

ทำางานตาง ๆ ของโปรแกรม ใน Photoshop มพาเนลอยเปนจำานวนมาก เชน พาเนล

Color ใชสำาหรบเลอกส, พาเนล Layers ใชสำาหรบจดการกบเลเยอร และพาเนล Info ใช

แสดงคาสตรงตำาแหนงทชเมาส รวมถงขนาด/ตำาแหนงของพนททเลอกไว

Properties Layer Character

ยอพ�เนล

กด แลวเลอก Closeเพอ ปดหน�ต�ง

Gifographic


ในการสรางชนงานนนนกอนอนเราจะตองกำาหนดขนาดของชนงานทจำาทำาการ

ออกแบบกอน โดยคำานงถงจดมงหมายในการใชงานวาเราจะออกแบบอะไร ใชงานกบสอ

ประเภทไหน เชน ออกแบบสอสงพมพ ออกแบบกราฟฟกทใชงานสำาหรบงาน website

หรอใชกบหนาจอคอมพวเตอร การออกแบบเพอใชงานดาน วดโอ เพอทเราจะสามารถ

กำาหนดคาคณสมบตตาง ๆ คาความละเอยดของชนงานไมเทากน ซงตองกำาหนดให

สมพนธกนกบงานนน ๆ ได ซงขนตอนการสรางไฟลใหมมดงน

1. ไปทแถบเมน File เลอก New จะปรากฎ หนาตางใหเรากำาหนดคณสมบตอน ๆ

เพมเตม

ก�ร New file สร�งไฟลใหม

ตงชอไฟล

ตวอยางขนาด

ความละเอยด

ขนาดไฟล

ร�ยละเอยดต�ง ในหน�ต�ง New file มดงน

Preset detail (Name) : คอสำาหรบตงชอไฟลตามตองการ

การตงคาขนาดของไฟลวาตองการขนาดทาไหร และใชกบงานอะไร

ขนาดของชนงานทนยมใช โดยสามสารถเลอกตามหมวดหม อำานวยความสะดวก

ใหเรา อาทเชน ขนาดงานทเกยวกบการทำางานเวบไซต (web)

ขนาดของงานทเกยวกบการออกแบบงานวดโอ (Film &Video)

International Paper ขนาดของงานทเกยวกบการออกแบบสอสงพมพ แบบ

สากล (International Paper), (Photo),(Us paper)

Wide : คอขนาดความกวางของชนงานทเรากำาหนดดวยตนเอง

High : คอขนาดความสงชองชนงานทเรากำาหนดเอง

โดยกำาหนดหนวยมาตรวดไดหลายรปแบบ ดงน

Resolution : คอ คาความละเอยด

ของภาพ ซงกำาหนดจากจำานวนเมดส (Pixels)

ตอหนงพนทหนวยตารางของภาพ โดยสามารถ

กำาหนดได 2 แบบ

1. Pixels / Inch คอจำานวนเมดสตอ

หนงตารางนว

2. Pixels / cm คอจำานวนเมดสตอ

หนงตารางเซนตเมตร

ยกตวอยางเชน

ถาเรากำาหนดคา Resolution 150 Pixels / Inch นน หมายความวา ในพนทหนง

ตารางนว จะมจำานวนจดสทงหมด 150 จด ดงนน ยงถาเรา กำาหนดคา Resolution สง

ๆ ความคมชดของภาพ / ชนงานทเราสรางกจะยงมความคมชดมาก ซงเปนขอด แตถา

เรากำาหนดคา Resolution สง ๆ ขนาดของไฟลงานกจะสงตามไปดวย พดงาย ๆ วา คา

Resolution สง ความคมชดสง ขนาดของไฟลกจะใหญตามไปดวยนนเอง ถาไฟลงานม

ขนาดใหญมากเกนไป ผลทตามมากคอ การประมวลผลการทำางานของคอมพวเตอรชาลง

ไปดวย ดงนนเราควรกำาหนดคา Resolution ใหเหมาะสมกบการใชงาน

Gifographic


ซงโดยทวไปแลวนยมใชดงน

1. ถาเปนการออกแบบเกยวกบงาน Website หรองานทนำาไปใชในการแสดงผลบน

หนาจอ คอมพวเตอร นยมกำาหนดคา Resolution อยท 72 Pixels/inch

2. ถาเปนงานออกแบบสอสงพมพ หรองานพมพลงบนวสดอน ๆ เชน กระดาษ โลหะ

ฯลฯ นยมกำาหนดคา Resolution อยท 150-300 Pixels/inch

Color Mode : Color mode คอ โหมดของส เราจะตองกำาหนดโหมดสในการออกแบบให

เหมาะสม โดยการออกแบบชนงานทเปนงานสงพมพ เราจะใชโหมดส CMYK ถาเปนงาน

ออกแบบ Website / หนาจอแสดงผลตาง ๆ ใชโหมด RGB ซงนอกจากโหมดสทงสองแบบ

นแลว โปรแกรมยงมโหมดสใหเลอกใชไดอกหลากหลายดงน ซงการออกแบบงานกราฟก

แตละครงเราจะตองคำานงถงรปแบบงานทเราจะนำา

ไปใช วาใชกบงานแบบใด ถาเปนงานออกแบบทใชส

เพยง 2 ส เชนงานออกแบบโลโก ลายเสนแบบขาว

ดำา ใหเลอกใชโหมด Bitmap ถาเปนงานพมพใม

นระดบสงทตองมการทรานเฟอรไฟลกนระหวาง

ระบบปฏบตการ IOS กบ windows ควรตองใช

โหมด Lab color

กำ�หนดลกษณะพนหลง Background Content • Background คอใหสพนหลงเปนสเดยวกบส Background Toolbox

• White คอใหพนหลงเปนสขาว

• Transparent คอใหพนหลงเปนสโปรงใส

ก�รบนทกไฟล (Save File)

การบนทกงานแบงออกไดหลายแบบ เชน บนทกเปนไฟลงาน Photoshop (PSD),

TIFF, PNG, JPEG เพอใหเหมาะสมกบงานแตละประเภททจะนำาไปใชตอไป

ในขณะทเราทำางานเราจะตองบนทกงานเปนไฟล PSD ไวทกครงและทำาใหเราสามารถกลบ

มาแกไขงานไดอก เพราะจะมเลเยอรตาง ๆ อยครบถวน หลงจากนนจงSave เปนไฟลใน

รปแบบอน ๆ ตอไป

ก�รบนทกไฟลในรปแบบอน ๆ 1. บนทกงานเปนไฟล TIFF เปนรปแบบทเหมาะสมกบการเกบภาพบทแมพ

คณภาพสง อาทเชน ภาพระดบสงกอนสงโรงพมพ ขอดของไฟลประเภทนคอ สามารถเกบ

รายละเอยดของขอมลของภาพไดอยางครบถวน มความละเอยดสงเปดไดกบทกโปรแกรม

กราฟก ขอเสยคอไฟลมขนาดใหญมาก

2. บนทกงานเปนไฟล JPG เปนรปแบบศงไมตองการคณภาพๆสงมากนก เชน ภาพ

จากกลองดจตอล ภาพ JPG สามารถนำาเสนอบนหนาจอ คอมพวเตอร งาน Website ขอด

คอไฟลมขนาดเลก เลอกบบขอมลไดหลายระดบ ขอเสยคอคณภาพของภาพจะถกปรบให

ลดลงตามระดบการบบอด

3. บนทกงานเปนไฟล PDF เปนรปแบบทไดรบความนยมในการแลกเปลยนไฟล

กนบนInternet เนองจากมขนาดเลก สามารถเรยกดขอมลไดจากทคอมพวเตอรทมระบบ

ปฏบตการตางกนได ขอเสยคอตองอาศยโปรแกรมเฉพาะในการเปด เชน Adobe Reader

4. BMP เปนรปแบบไฟลพนฐานของระบบ Window ใชไดกบทกโปรแกรม แตมขอ

เสยคอ มขนาดใหญ และไมสามารถเกบขอมลแบบเวกเตอรได

ขนตอนก�ร Save1. เลอกไฟล Save as เลอกโฟลเดอรตองการจดเกบ

2. ตงชอไฟลและเลอกรปแบบไฟลทตองการ จากนนกด Save

Gifographic


file > save as

ตงชอ แลวกด Save

ก�ร Open file ก�รเปดไฟล ในการออกแบบชนงาน เราจำาเปนจะตองใชภาพประกอบจากแหลงอน ๆ ทอยใน

เครองคอมพวเตอร เวลาทจะนำามาใชในโปรแกรมใหใชคำาสง File Open

เปดไฟล 1. เลอกเมน File > Open

ก�รเลอกพนทบนรปภ�พ โปรแกรม Adobe Photoshop เปนโปรแกรมทมความโดดเดนในดานการตกแตง

แกไข จดบกพรองตาง ๆ ของภาพ ไมวาจะเปนภาพทไดมาจากกลองดจตอล หรอภาพจาก

แหลงอน ๆ ดงนนการทำางานในโปรแกรม จงตอวเลอกพนท ๆ เราตองการแกไขบนภาพ

ซงการเลอกพนทภายในภาพนน เราเรยกวาการ Selection หรอการสรางเสน Selection

และเมอเราใชคำาสงใด ๆ ไมวาจะเปน การ Cut การ Copy ใส Effect พเศษ ฯลฯ จะมผล

เฉพาะ ในพนท ๆ เราเลอกไวเทานน ในทางกลบกน ถาเราไมไดเลอกพนท (Selection) ไว

กอน เมอเราใชคำาสงใด ๆ กจะมผลกบทงภาพ

เครองมอทใชในการเลอกพนท (Selection) ในโปรแกรม Adobe Photoshop ม

อยมากมายซงแตละเครองมอ จะมลกษณะและรปแบบความเหมาะสมในการทำางานแตก

ตางกนไป เครองมอทเกยวกบการเลอกพนทมดงน

เครองมอในกลม Marquee Tool เปนเครองมอทใชในการสราง Selection ในลกษณะรปทรงเรขาคณต โดยประกอบ

ดวย

• Rectangular Marquee Tool ใชสราง Selection เปนพนทสเหลยม

• Elliptical Marquee Tool ใชสราง Selection เปนพนทวงกลมหรอวงร

• Single Row Marquee Tool ใชสรางเสน Selection แนวนอนขนาด 1 พกเซล

• Single Column Marquee Tool ใชสรางเสน Selection แนวตงขนาด 1

พกเซล

ก�รเลอกพนทสเหลยม / วงกลม ดวยเครองมอ Rectangular Marquee Tool / Elliptical Marquee Tool

1. เปดภาพดวยคำาสง File Open แลวเลอกภาพทตองการ

2. เลอกเครองมอ Rectangular Marquee / Elliptical Marquee Tool

เมอเลอกครองมอแลวจะปรากฏแถบ Option Bar เพอกำาหนดคณสมบตกราฟกตาง ๆ

เพมเตม

Option ของกลมเครองมอ Marquee Tool มรายละเอยดดงน

รปแบบการเลอก

1. สราง Selection ใหม

2. เพมพนท Selection ใหกบพนท Selection เดม

3. ลดพนทท Selection ไวเหลอไวเฉพาะสวนทไมซอนทบกน

4. เลอกพนทเฉพาะพนท ๆ มสวนซอนทบกนของ Selection เดมและ

Selection ใหม

Feather คอ คาความฟงกระจายของเสน Selection หรอคาทกำาหนดความ

เบลอของขอบ สามารถกำาหนดคาได ตงแต 0-250 โดยยงคาตวเลขมาก ยงมความฟง

กระจายมาก ขอบภาพ จะมความนมนวลมากขน

Gifographic


ตวอยางการใชงาน Option Feather

1. เปดรปภาพทตองการ

2. เลกเครองมอ Marquee Tool

3. กำาหนดคา Feather บน Option bar ตามความตองการโดย กำาหนดเปน 10 px

4. เลอกเมน Edit / Copy

5. เลอกคำาสง File / New เพอสรางไฟลใหม โดยกำาหนด ขนาดเปน A4 พนหลงส

ขาว

6. เลอกเมน Edit / Paste

Option Anti Alias

คอ การกำาหนดขอบของเสน Selection วาตองการใหเรยบหรอมลกษณะเปนรอยหยก

ตาม Pixel ของภาพ

- ถาเราเลอก /Anti Alias = ขอบภาพจะเรยบ

- ถาไมเลอก Anti Alias ขอบภาพจะหยก

Option Style คอการกำาหนดรปแบบของการเลอก หรอ

การสราง Selection

Normal คลกเมาทลากแบบปกต โดยขนาดของเสน Selection จะเทากบขนาดทเรา

ลากคลมพนท

Fix Ratio คลกเมาทลากแตกำาหนด ขนาดความกวางxยาว ตามสดสวนทตงคาไว

Fix Size คลกเมาทแลวจะไดขนาดตามพนทๆ กำาหนดทนท

ก�รยกเลกก�รเลอก Selection Tool การยกเลกเสน Selection ทำาได 2 วธคอ

1. เลอกคำาสง Select / Deselect

2. คลกเลอก พนทนอกเสน Selection

ก�รใชง�น Layer เพอจดลำ�ดบก�รซอนภ�พแบบต�ง ๆ

Layer คอ ลกษณะการวางภาพเปนชน ๆ เรยงกน โดยมลกษณะเหมอนแผน

พลาสตกใส จะทำาใหเราสามารถมองภาพทซอนทบกนเหลานน เหมอนเปนภาพเดยวกน

ภาพหรอวตถทอยในLayerดานบนกจะซอนทบเลยเยอรดานลาง ลกษณะการทำางานแบบ

เลเยอรกจะชวยใหเราสามารถทำางานออกแบบหรอตกแตงภาพไดอยางอสระและม

ความสวยงามหลากหลายยงขน ชวยใหสามารถแกไขงานไดดดยไมเสยหายตอภาพตนฉบบ

เนองจากเราสามารถสลบลำาดบ ลบ ซอน เลยเยอรตาง ๆ ได ชวยใหสามารถทดสอบหรอ

เปลยนมมมอง จดองคประกอบกอนไปใชงานจรงได

ก�รเรยกใชง�น Panel Layer ใชคำาสง Window / Layer เพอเปด Panel Layer

1 = วธการผสมสระหวางเลเยอร

2 = การปรบความโปรงใสของ Layer(Opacity)

3 = ลบ Layer

4 = การเชอมโยงLayer

5 = การสราง Group Layer

6 = การสราง Mask Layer

7 = สงซอน หรอแสดงLayer

8 = สราง Layer ใหม

9 = ใส Effect ใหกบ Layer

10 = ปรบใหภาพใน Layerโปรงใส

แตไมมผลกบ Effect ทใสใหกบLayerนน

11 = Lock Layer

12 = การปรบแตงภาพในLayerดวยการ fill layer

และ Adjustment

10

11

4

3

7

2

5

1

69

12

8

Gifographic


ประเภทของ Layer Layer มอย 2 ประเภท คอ Layer Back ground และ Layer ทวไป

1.Layer Background คอ Layer แรกเมอเราเปดไฟลภาพจากภาพถาย หรอไฟล

ภาพตาง ๆขนมาใชงาน โดย Layer background จะมลกษณะคอ

- จะเปน Layer ทอยลาสดของพาเนล Layer เสมอ

- ไมสามารถ ลบ ยาย หรอเปลยนชอได

2. Layerทวไป คอLayerทเราสรางขน จะอยเหนอ Layer back ground สามารถ

ตงชอ ยาย ลบ copy กำาหนดคณสมบตพเศษได

1. ก�รสร�งเลเยอรใหม การสราง Layer ขนมาใหม จะทำาเมอเรา

ตองการวางวตถ รปภาพ หรอ object ตาง ๆ

ทสรางขน โดย Layer ทสรางขนใหมน จะอยเหนอ

Layer background การสรางLayer ใหมจะชวยให

เราสามารถทำางานไดงายขน การเคลอนยายตำาแหนง

การจดวางจดองคประกอบตาง ๆ ไดอยางอสระ

ก�รสร�งเลเยอรใหม ม 3 วธคอ 1. เลอกปม ทอยดานลางพาเนลLayer

2. เลอกเมน Layer / New / Layer

2. ก�รลบ Layer เมอเราไมตองการ Layer ทสรางขนเรา

สามารถลบ Layer ทงได โดยมหลายวธดงน

2.1 คลกลาก Layer ทไมตองการไปไวท

ไอคอนถงขยะดานลางพาเนล Layer

2.2 ลบ Layer โดยใชเมนในพาเนล Layer

คลกเลอกท Layer ทตองการลบ แลวคลกปมดานขาง แลวเลอกคำาสง Delete Layer

แลวกด yes เพอยนยน

คลกขวา Delete Layer

2.3 ลบ Layer โดยใชเมนLayer

เลอกLayerทตองการลบ แลวเลอกเมน Layer เลอก Delete

2.4 คลกขวาท Layer ทตองการลบ แลวเลอกคำาสง Delete Layer

Gifographic


ก�รเลอก Layer และสลบลำ�ดบ Layer เมอเราตองการทำางานใน Layer ใดๆ เราจะตองเลอก Layer ทตองการในพาเนล

Layerใหถกตอง เมอคลกเลอก Layer นนแลว เลเยอร จะมสเขมขนเราเรยกวา Active Layer

- การเลอก Layer ทอยตดกน หลายๆ Layer พรอม ๆ กนใหกดปม Shift (เลอก

หลาย ๆ LayerพรอมกนLayerอยตดกน)

- การเลอก Layer ทอยไมตดกน หลายๆ Layerพรอม ๆ กนใหกดปม Control

(เลอกหลาย ๆ LayerพรอมกนLayerอยไมตดกน)

การเลอก Layer ใหเลอกเครองมอ Move Tool ท Toolbox เมอเลอกแลว

ใหกำาหนด Option ของ Move Tool

Option bar ของ Move Tool ประกอบไปดวย • Auto Select Layer คอ การกำาหนดการเลอกของเครองมอ MoveTool

ใหเปลยนการทำางานมาทLayer หรอ Group ทเราคลกโดยอตโนมต (ทำาใหเคลอนยายวตถ

บน Layer วตถทง Group ไดทนทโดยไมตอง Active layer ท พาเนลLayer)

• Show Transform Control คอการกำาหนดใหสามารถยอขยายวตถใน

Layer ทเลอกไดทนทโดยไมตองเลอกคำาสง Edit / Transform

ก�รซอน / แสดง Layer การซอนแสดง Layer สามารถชวยใหเราแกไขงานไดสะดวกขน เนองจากบางครง

เราอาจจะวางวตถตาง ๆ ซอนทบกนจำานวนมาก การซอนLayerไว โดยยงไมตองลบทง

เพอดภาพเปรยบเทยบและจดองคประกอบตาง ๆ ไดอยางเหมาะสม

วธซอน-แสดง Layer ทำาไดโดยคลกท ชองดานหนาของแตละ Layer

ก�รกำ�หนดคณสมบต Layer การทำางานกบ Layer จำานวนมาก เราควรกำาหนดคณสมบตตาง ๆ ใหกบ Layer

แตละเลเยอรเชน ตงชอLayerใหสอดคลองกบวตถทอยบนLayer การกำาหนดส Layer

ก�รตงชอ Layer จะชวยลดระยะเวลาในการหา Layer ถางานของเราม

Layer จำานวนมาก วธการตงชอ ทำาไดโดยการ Double Click Layer ทตองการ

แลวพมพชอลงไป แลวกด Enter

ก�รกำ�หนดส Layer เพอแยก Layer ใหสามารถหาไดงายและ

จดประเภท Layer ไดตามตองการ ทำาไดโดย

คลกขวา Layerทตองการแลวเลอกส

Double Click แลวตงชอเลเยอร

คลกขวาทเลเยอร แลวเลอกส

Gifographic


ก�ร Copy Layer 1. ลาก Layer ทตองการไปวางทปม สงเกตไดวาจะเกด Layer ขนมา

ใหมโดยอยดานบน Layer เดมทเหมอน Layer ตนฉบบ และชอ Layerใหมจะเปนชอ

Layer เดม ตอทายดวยคำาวา Copy

2. เลอกLayerทตองการ เลอก ทพาเนล Layer แลวเลอกคำาสง Duplicate Layer

แลวตงชอเลเยอร แลวกด ok

3. เลอก Layer ทตองการ คลกขวา แลวเลอก

คำาสง Duplicate Layer แลวตงชอเลเยอร แลวกด ok

ก�ร ยอ-ขย�ย หมน Object ดวยคำ�สงEdit / Transform

เมอเรานำาภาพจากกลองดจตล หรอ Internet มาใชเราอาจจะตองปรบรปทรง

หรอขนาดภาพใหเหมาะสมกบชนงานทเราออกแบบ โดยการปรบขนาดภาพสามารถทำาได

2 วธคอ

1. การปรบโดยกำาหนดคาควยคำาสง Edit

2. การปรบโดยใช option bar

1. ก�รปรบขน�ดของภ�พดวยคำ�สง Edit / Free Transform วธทำา

1. คลกทเลเยอรภาพทตองการปรบขนาดและรปทรงของภาพ

2. เลอกเมน Edit / free Transform แลวจะเกด Bounding box (เสนขอบภาพ)

3. ปรบขนาดดวยMouse ถาตองการใหสดสวนภาพเหมอนเดมใหกด Shift พรอม ๆ

กบการปรบดวย เมอไดขนาดทตองการใหกด Enter หรอ กดเครองหมาย ถก ดานบน

Option Bar

Gifographic


ลาก Mouse ปรบขนาด

2. ก�รปรบขน�ดดวย Option bar คลกทเลเยอรภาพทตองการปรบขนาดและรปทรงของภาพ Option bar จะเปลยนไปดงน

หมนภาพปรบขนาดของภาพกวาง-ยาว

ปรบตำาแหนงภาพ กรอกตวเลขลงไปตามตองการ

ก�รปรบภ�พดวยคำ�สง Edit / Transform คำาสง Edit / Transform ประกอบไปดวยคำาสงทเกยวกบการปรบภาพหลายแบบ

ดวยกน โดยการใชงานทำาไดโดย

1. คลกทเลเยอรภาพทตองการปรบขนาดและรปทรงของภาพ

2. เลอกเมน Edit / Transform แลวเลอกคำาสงทตองการ จากนนกด Enter

เมนก�รปรบภ�พแบงออกเปนหล�ยรปแบบดงน

• Scale = ปรบขนาดของภาพ

• Rotate = หมนภาพ

• Skew = การบดภาพในแนวนอนและแนวตง

• Distort = ปดภาพทงแนวนอนและแนวตงพรอม ๆ กน

• Perspective = การปรบภาพในลกษณะมเสนนำาสายตา

• Warp = การบดภาพอยางอสระ ตามตองการ ชวยในการปรบภาพเพอวางวางบน

วสดทมรปทรงพเศษตาง ๆ เชน แกว กระปอง

• Rotate 180 = หมนภาพ 180 องศา อตโนมต

• Rotate 90c = หมนภาพ 90 องศา ทศตามเขมนาฬกา อตโนมต

• Rotate 190 ccw = หมนภาพ 90 องศา ทศทวนเขมนาฬกา อตโนมต

• Flip Herizental = กลบภาพแนวนอน (จากซายเปนขวา ขวาเปนซาย) อตโนมต

• Flip Vertical = กลบภาพแนวนอน (จากซายเปนขวา ขวาเปนซาย) อตโนมต

Gifographic


ก�รว�ดภ�พแบบ Vectorดวยเครองมอ Shape tool

การทำางานดานกราฟกนน จะจำาแนกรปแบบภาพออกเปน 2 ประเภทคอ Bitmap

และ Vector

ภาพกราฟกสแบบ Bitmap หรอภาพแบบราสเตอร (Raster) คอภาพทเกดจาก

จดสทเรยกวา Pixel ซงประกอบกนเปนรปรางบนพนท ทมลกษณะเปนเสนตาราง (กรด)

แตละพกเซลจะมคาของตำาแหนง และคาสของตวเอง ภาพหนงภาพ จะประกอบดวย

พกเซลหลายๆ พกเซลผสมกน

ภาพกราฟกสเวกเตอร (vector graphics) โดยทวไปคอคอมพวเตอรกราฟกส

ทเกดจากการกำาหนดพกดและการคำานวณคาบนระนาบสองมต รวมทงมมและระยะทาง

ตามทฤษฎเวกเตอรในทางคณตศาสตร ในการกอใหเกดเปน เสน หรอรปภาพ ขอดคอ

สามารถยอขยายได โดยคณภาพไมเปลยนแปลง

โปรแกรม Adobe Photoshop นนมเครองมอทรองรบการสรางภาพในรปแบบ

Vector อย 2 เครองมอคอ Shape Tool และ Pen tool

Vector ทสรางจาก Pen tool นน แบงออกเปน 2 สวนคอ เสน Path และรปทรง

Shape เสนพาธ คอเสนทอยดานขาง Shape สวนรปทรงคอเสนพาธทถกเตมสลงไป ใน

การจดการภาพวาดแบบเวกเตอรนนจะมเครองมอทเกยวของอย 3 เครองมอ คอ

1. Shape tool

2. Direct Selection tool

3. Pen tool

ก�รว�ดภ�พรปทรงเรข�คณตดวยเครองมอ Shape tool การวาดภาพรปทรงเรขาคณตและรปทรงพนฐานดวยเครองมอ Shape tool แบง

ออกเปน

• Retangle tool เปนการสรางรปทรงสเหลยม

• Rounded Retangle tool สรางรปทรงสเหลยมมมมน

• Ellipse Tool สรางวงร

• Polygon Tool สรางรปหลายเหลยม

• Line Tool วาดเสนตรง/ลกศร

• Custom Shape Tool สรางรปทรงสำาเรจรป

วธก�รว�ดรปภ�พดวยเครองมอ Shape tool

1. New File แลวสราง layer ขนมาใหม

2. เลอกเครองมอ Shape tool จาก Toolbox

เลอก Shape

เลอกสเสนขอบ ความหนาของเสน

Gifographic


3.ลากเมาสเพอสรางรปทรงทตองการ ทพาเนลเลเยอรจะเกดเลเยอรของ shape เกดขน

4. การเปลยนส Shape ทำาไดโดยการ Double Click ท เลเยอร แลวเลอกสใหม

ดบเบลคลก เพอเปลยนส

เลอกสใหมแลวกด OK

Gifographic


ก�รสร�งตวอกษร และเทคนคก�รใสแสงเง�ใหตวอกษรดวยเครองมอ Type tool

เครองมอทใชในการพมพหรอสรางขอความมชอวา Type tool

การสรางขอความในงานกราฟกเปนเครองมอทชวยใหการออกแบบของเรามความนา

สนใจ และสามารถสอความหมายไดอยางชดเจนมากขน โดยขอความแบงเปน

1. ขอความประเภทหวขอ มบรรทดเดยวตอเนองไปจนกระทงกด enter จงขน

บรรทดใหม

2. ขอความประเภทกลองขอความหรอ

paragraph เหมาะกบขอความจำานวนมากๆ ม

รายละเอยดมาก ๆ ใชวธการลากเมาสเพอสรางกลองขอความ ขอความในกลองขอความ

จะถกจดและตดบรรทดแบบอตโนมต

3. ขอความในแนวเสน parth ทสรางขน โดยขอความจะมรปแบบการจดวางท

แปลกตา ตามเสน parth ทสรางขน

ก�รสร�งขอคว�มประเภทหวขอ 1. เลอกเครองมอ Horizontal type tool ท toolbox กำาหนด option bar ดงภาพ

2. แลวพมพขอความ ลงในชนงาน เมอพมพเสรจแลว กด ถก ท option bar

การแกไขส หรอรปแบบกลองขอความหลงจากทพมพขอความไปแลว ทำาไดโดย

การลากคลมขอความแลวกำาหนดรปแบบ ท option bar ใหม

ชอฟอนต รปแบบฟอนต

ลกษณะการจดขอความ

สตวอกษร

พมพขอความ

ก�รสร�งขอคว�มประเภทกลองขอคว�ม 1. เลอกเครองมอ Horizontal type tool ท toolbox กำาหนด option bar

2. ลากเมาสเพอสรางกลองขอความ

Gifographic


3. กำาหนดขนาดฟอนต ลกษณะฟอนต และกำาหนดลกษระการจดขอความ

4. พมพขอความตามตองการ เมอพมพเสรจแลว กด Enter หรอคลกทเครองหมาย

ถก ท option bar

ก�รก�รใชง�น พ�เนล character • การเรยกใช พาเนล character เพอ

กำาหนดคณสมบตเพมเตม เลอกเมน Window

/ character

ระยะหางระหวางบรรทด

ขนาดฟอนต

ชอฟอนต

ก�รใส Effect ใหกบขอคว�ม 1. เลอกเลเยอรขอความ แลวเลอกปม ดานลางพาเนลเลเยอร

2. เลอกเอฟเฟกทตองการ

เลอก Effect

Gifographic

72

3. กำาหนดลกษณะเอฟเฟก ตามตองการจากนน กดปม ok

กำาหนดคา แลวกด OK

Chapter 03

ขนตอนการสรางGifographic

โปรแกรม Adobe Photoshop CC เปนโปรแกรม

สำาหรบงานกราฟกดไซนทสามารถมาประยกตใชในการ

ออกแบบ Infographic และ Gifographic ได โดยการใช

เครองมอในโปรแกรมเบองตนงาย ๆ ได อกทงยงสามารถ

Export ไฟล นำาไปใชเผยแพรงานบนเวบไซต และชองทาง

อน ๆ ไดดวย

Gifographic


ขนตอนก�รสร�ง Gifographic

1. เปดโปรแกรม Adobe Photoshop CC โดยไปท Start > Program > Adobe

Photoshop CC

2. เลอกเมน File > open > D:\Data file PSD > เลอกไฟลชอ ตวอยางไฟล สำาหรบ

สอน Gifographic_battery smartphone.psd

3. คลกเลอกเลเยอร “แบตเตอร 4 ขด” แลวคลกขวา เลอก duplicate layer ตงชอ

วา แบตเตอร 3 ขด แลวกด OK

1. ขนตอนการเตรยมไฟล PSD กอนทำา Gif Animationตงชอวา แบตเตอร 3 ขด แลวกด OK

คลกขวา > Duplicate layer

3.คลกเลอกเลเยอร “แบตเตอร 4 ขด” แลวกดปม lock layer ไว จากนนปด

ตาทดานหนาเลเยอร “แบตเตอร 4 ขด” เพอซอนเลเยอรไว

Lock layer “แบตเตอร 4 ขดไว

Gifographic


4. คลกทเลเยอร “แบตเตอร 3 ขด” เลอกเครองมอ Rectangular Marquee

Tool ท Tool box แลวลากคลมพนทสเขยวขดท 4 แลวเลอก Edit > Fill >

White > OK

Marquee Tool > ลากคลม > Edit > fill

กดปม OK จะไดลกษณะดงภาพ จากนน

ยกเลกเสน Selection โดยการเลอกเมน

Select > Deselect

ใสสขาว จากนน เลอกเมน Select > Deselect

5. Copy เลเยอร แบตเตอร 3 ขด โดยคลกขวาทเลเยอร “แบตเตอร 3 ขด” คลกขวา

เลอก duplicate layer ตงชอวา แบตเตอร 2 ขด แลวกด OK

ตงชอวา แบตเตอร 2 ขด แลวกด OKคลกขวา > Duplicate layer

Gifographic


4. คลกทเลเยอร “แบตเตอร 2 ขด” เลอกเครองมอ Rectangular Marquee

Tool ท Tool box แลวลากคลมพนทสเขยวขดท 3 แลวเลอก Edit > Fill > White

> OK

Marquee Tool > ลากคลม > Edit > fill

Lock เลเยอร 3 ขด เลอกเลเยอร 2 ขด

กดปม OK จะไดลกษณะดงภาพ จากนนยกเลกเสน Selection โดยการเลอกเมน

Select > Deselect

7. เลอกเลเยอร ”สายชารจ” จากนนคลกขวา เลอก Duplicate layer

ตงชอวา “สายชารจ 2”

คลกเลอกเลเยอร”สายชารท” คลกขวา

Duplicate > ตงชอ สายชารท 2

Gifographic


ตงชอสายชารท 2 ขด แลวกด ok

lock เลเยอร สายชารท แลวซอนเลเยอรไว

9. คลกเลอกเลเยอร “สายชารท” แลวกดปม lock layer ไว จากนนปดตาท

ดานหนาเลเยอร “สายชารท” เพอซอนเลเยอรไว

10. เลอกเครองมอ Move tool จากนนยายตำาแหนงสายชารท ไปทางขวามอ ตาม

ภาพดานลาง

ยาย “ตำาแหนงสายชารท2” ไปทางขวา

11. เลอกเลเยอร ”สายชารจ2” จากนนคลกขวา เลอก Duplicate layer

ตงชอวา “สายชารจ 3”

Gifographic


12. คลกเลอกเลเยอร “สายชารท 2” แลวกดปม lock layer ไว จากนนปดตา

ทดานหนาเลเยอร “สายชารท2” เพอซอนเลเยอรไว

13. เลอกเครองมอ Move tool จากนนยายตำาแหนงสายชารท 3 ไปทางขวา

มอ ตามภาพดานลาง

ยาย “ตำาแหนงสายชารท3” ไปทางขวา

จากนนตองทำาการกำาหนดสใหกบเลเยอร เพอจะไดชวยใหเราจดหมวดหม

เวลาทำา Gif animation ไดงายขน

จากทเรากำาหนดกอนทำางาน เราจะแยก Step ของการขยบ เปน 3 step

- แบตเตอร ดงภาพ

Step :

แบตฯเพมขน3 จงหวะ

Step :

ส�ยช�รจเคลอนท3 จงหวะ

กำาหนดสใหเลเยอรมวธดงน

คลกเลอกเลเยอรทเราตองการกำาหนดส จากนนคลกขวาทเลเยอร แลวเลอกสทตองการ

Gifographic


แยกสตาม Step Animation

2. ขนตอนการสราง Gif Animation ในหนาตาง Timeline1. เปดหนาตาง Timeline โดยเลอกเมน Window > Timeline

หนาตาง timeline

2. เราสามารถเลอกรปแบบในหนาตาง Timeline ได 2 แบบคอ Create Video Timeline

หรอ Create frame Animation ในทนใหเลอกแบบ Create frame Animation แลวกด

ปม Create frame Animation จะไดหนาตางตามรปดานลาง

เลอก Create frame Animation

กด Create frame Animation

3. ในหนาตาง Timeline จะมรปเลก ๆ ทแสดงลำาดบการมองเหนของภาพ ซงถาเรา

ตองการใหตอนแรกเหนภาพเปนอยางไรกใหเปดตาเลเยอรทตองการใหแสดงนนไว

ตวอยางเชน วนาทแรกตองการเหนแบตเตอร 2 ขด กใหเปดตาเลเยอรไว คลกปม Dupli-

cate selected frame ทอยดานลางของเลเยอร Timeline

Gifographic


เลอก แสดงเลเยอรทตองการ

สวนประกอบของ Timeline

Duplicate Select frame

ลบเฟรมเฟรมท 1

กำาหนดเวลา

4. คลกปม Duplicate selected frame ทอยดานลางของเลเยอร Timeline จะเปนการ

Copy เฟรมใน step แรกขนมาอก 1 เฟรม

5. จะไดภาพในจงหวะท 2 จากนนคลก ทหนาเลเยอรทตองการใหแสดง เปนฉากท 2

และปดตาหนาเลเยอรท ไมตองการแสดงในฉากท 2

frame ท 2frame ท 1

frame ท 3

Gifographic


เฟรมท 2 เปด แบตเตอร 3 ขด สายชารจจงหวะ 2 และปดตาเลเยอรเครองหมาย x , /

6.ตงคาเวลาของแตละฉากวาตองการใหแสดงกวนาท โดยคลกทลก

ศร ดานลางของแตละฉากแลวเลอกจำานวนวนาททตองการ

ฉากท 1-3 ท Timeline

7.การกำาหนดจำานวนครงของการเลน Animation ใหคลกทปมลกศรชลงดานหลงคำาวา

Once แลวเลอกจำานวนตามตองการ แตถาตองการใหแสดงวน Loop ไปเรอย ๆ ใหเลอก

Forever ทดลองกดปม Play

Gifographic


3. ขนตอนการ Export file เพอนำาไปใชงาน1.การนำาไปใชงาน ใหเลอกเมน File > Export > Save for web (Legacy)

Save for web (Legacy)

Preset = การตงคา เซตการเซฟไฟลรปภาพ แบงไดเปน 4 กลมหลกๆ คอ ไฟล

Gif, JPEG, PNG,WBMP

การตงคาในการปรบภาพทำาไดโดย :

- Color = ขนแรกใหปรบคาปรมาณสโดยเรมจากคาสงสดท 256 แลวดวาขนาด

ไฟลเปนเทาไร แลวคอยปรบลดลงเทาทรบได

- Transparent = ถาเปนภาพทม Background เปน Transparent จะตองคลก

เลอก ไมนนโปรแกรมจะนำาสในชอง Matte มาเตมให

- No Dither = ชวยทำาใหขนาดไฟลลดลง แตจะทำาใหขอบของภาพไมเรยบ

- Dither Pattern = Pattern เพมความคมชดโดยการเพม Noise ซงบางครงมาก

เกนไป ถาตองการเพมความคมชดควรใชสองตวนจะดกวา Diffusion and Noise เมอ

เลอกแบบใดแบบหนงแลว ใหทำาการลดเปอรเซนตในชอง Dither เหลอประมาณ 50%

เพอเปนการลด Noise ลงบาง

- Color Table = แสดงรายการของแตละประเภท Selective, Perspective,

Adaptive, Restrictive ลองเชคดวาแบบใหนเหมาะทสด แตแนะนำาใหใช Selective จะ

ดกวา

- Lossy = เพมการบบอด แตจะเสยคณภาพของภาพบางสวน ใชในกรณทจำาเปน

Transparency หากในภาพมสวนทโปรงแสง

ใหเราเลอกตวนเพอคงใหสวนทงหมดทโปรงแสงนน

ยงคงโปรงแสงตอไป

- Nearest Neighbor เปนเทคนคททำางานรวดเรวทสด แตไมคอยมความ

แมนยำาจงไมเหมาะกบการใชงานทวไป ควรใชเฉพาะกบภาพกราฟฟคทตองการรกษาขอบ

ภาพทชดเจน

- Bilinear เปนเทคนคอกตวหนง ทใหผลลพธระดบปานกลางและไมเปนท

นยม ควรใชเทคนคแบบ Bicubic แทน เพราะใหผลลพธทดกวา

- Bicubic เปนเทคนคทใหผลลพธทดกวาสองแบบแรก เพราะจะมการไลโทน

ภาพทสวยงามกวา เหมาะสมกบการตกแตงภาพถายทกประเภท***

รปแบบการปรบขนาด หรอ Quality

เลอก Gif

เลอก Foreverกด save

เลอก none

Gifographic

92

- Bicubic Smoother เปนเทคนคทฐานอยบนเทคนคแบบ Bicubic แตเหมาะ

สำาหรบการขยายภาพโดยเฉพาะ

- Bicubic Sharper เปนเทคนคทฐานอยบนเทคนคแบบ Bicubic เชนกน แต

จะเหมาะสำาหรบการยอภาพ เพราะวาจะมการรกษารายละเอยด และเพมความคมชดให

กบภาพดวย แตในบางกรณจะทำาใหภาพคมมากจนเกนไป (over-sharpen) หรอทำาให

ภาพแตก

(อางองจาก http://www.snowwhite.co.th/articles/38-processing/25-image-in-

terpolation.html)

เลอก Save

Writer Note - muit.mahidol.ac.th · Photoshop, Adobe Illustrater...

Documents

Transcript of Writer Note - muit.mahidol.ac.th · Photoshop, Adobe Illustrater...