คู่มือสร้างอินโฟกราฟิกด้วยเว็บแอปพลิเคชั่น Piktochart วิธีการสร้าง นำออกข้อมูล แหล่ง download ข้อมูลที่คำคัญ

1. คู่มือการใช้งานโปรแกรม
PIKTOCHART ปี 2564 สาหรับสร้าง InfoGraphic
โดย
ดุสิต ศรีสร้อย
dusit.s@ubu.ac.th
คณะบริหารศาสตร์ มหาวิทยาลัยอุบลราชธานี

2. ก
สารบัญ
หน้า
การใช้งานเบื้องต้น 1
1.1 การเข้าสู่ระบบ Piktochart 1
การจัดการงานออกแบบ 4
2.1 การเพิ่ม หรือ ทาสาเนา Block 4
2.2 การปรับตาแหน่งของ Block 4
2.3 การกาหนดขนาดของหน้ากระดาษ 5
การจัดการวัตถุเบื้องต้น 6
3.1 การแทรกวัตถุสาคัญ 6
3.2 การจัดกลุ่มวัตถุ 7
3.3 การกาหนดความโปร่งใสให้กับวัตถุ 7
3.4 การกลับด้านวัตถุ 8
3.5 การเรียงลาดับวัตถุ 9
3.6 การจัดระนาบวัตถุ 9
3.7 การเปลี่ยนสีวัตถุ 10
3.8 การ Upload ภาพกราฟิกเพิ่มเติม 11
3.9 การใช้งาน Mark 13
3.10 Photo frame 15
3.11 การพิมพ์ตัวอักษร 17
กราฟ 21

3. ข
4.1 การสร้างกราฟ 21
4.2 การเปลี่ยนรูปแบบของกราฟ 22
4.3 การเปลี่ยนข้อมูลของกราฟ 23
4.4 การปรับแต่งข้อมูลในกราฟ 24
4.5 การแทรกกราฟ 25
แผนที่ 26
5.1 แทรกแผนที่ 26
5.2 ปรับแต่งแผนที่ 27
5.3 เพิ่มข้อมูลที่ต้องการแสดงผล 27
5.4 แทรกแผนที่ 28
5.5 วิธีลบการออกแบบ 29
การ Preview 31
6.1 การ Preview 31
6.2 การออกจากมุมมอง Preview 31
การนาผลงานไปใช้งาน 32
7.1 การ Download ผลงาน 32
ภาพประกอบจาก Flaticon.com 33
8.1 การโหลดภาพประกอบจากเว็บไซต์ flaticon.com 33
8.2 การ download ภาพแบบ PNG 38

4. การใช้งานเบื้องต้น
1.1 การเข้าสู่ระบบ Piktochart
1. เข้าสู่เว็บไซต์ piktochart.com
2. คลิกปุ่ม login
ภาพที่ 1
3. ระบุวิธีเข้าสู่ระบบของเว็บไซต์ สามารถ Login ด้วยบัญชี google หรือ facebook
ภาพที่ 2

5. 2
4. จะปรากฏหน้าจอเริ่มต้นใช้งาน
5. สามารถคลิกที่ปุ่ม Create New เพื่อสร้างชิ้นงานใหม่ หรือ ในกรณีของ Infographic สามารถ
คลิกเลือกรายการ Infographic ได้โดยตรง
ภาพที่ 3
6. หากปรากฏหน้าต่าง What would you like to create today? คลิกเลือก Infographic
7. จากนั้นเลือกสร้าง Create a New infographic หรือเลือกสร้างจากตัวช่วยสร้าง
ภาพที่ 4

6. 3
ภาพที่ 5

7. การจัดการงานออกแบบ
2.1 การเพิ่ม หรือ ทาสาเนา Block
ภาพที่ 6
2.2 การปรับตาแหน่งของ Block
ภาพที่ 7 การปรับตาแหน่ง Block ขึ้น 1 ระดับ
ภาพที่ 8 การปรับตาแหน่ง Block ลง 1 ระดับ

8. 5
2.3 การกาหนดขนาดของหน้ากระดาษ
ภาพที่ 9

9. การจัดการวัตถุเบื้องต้น
3.1 การแทรกวัตถุสาคัญ
1. การแทรกภาพกราฟิก (Graphics) ที่โปรแกรมเตรียมไว้ให้
2. เลือกที่หมวด Graphics จากนั้นคลิกเลือกวัตถุที่ต้องการเพื่อนาไปวางลงในชิ้นงาน
ภาพที่ 10
3. สามารถเลือกหมวดของ Graphics เพิ่มเติมจากตัวเลือกเพิ่มเติมได้
ภาพที่ 11

10. 7
3.2 การจัดกลุ่มวัตถุ
3.2.1 เลือกวัตถุตั้งแต่สองชิ้นขึ้นไปที่ต้องการนามาจัดกลุ่มพร้อมๆ กัน
3.2.2 คลิกเลือกที่เครื่องมือจัดกลุ่ม (Group)
ภาพที่ 12
3.3 การกาหนดความโปร่งใสให้กับวัตถุ
ภาพที่ 13

11. 8
3.4 การกลับด้านวัตถุ
ภาพที่ 14 การกลับด้านวัตถุในแนวแกนตั้ง
ภาพที่ 15 การกลับด้านวัตถุในแนวตั้ง

12. 9
3.5 การเรียงลาดับวัตถุ
ภาพที่ 16
3.6 การจัดระนาบวัตถุ
ภาพที่ 17

13. 10
3.7 การเปลี่ยนสีวัตถุ
3.7.1 คลิกเลือกที่วัตถุ
3.7.2 จากนั้นคลิกเลือกเครื่องมือลงสี
3.7.3 เลือกสีหรือกาหนดรหัสสีให้กับวัตถุ
ภาพที่ 18

14. 11
3.8 การ Upload ภาพกราฟิกเพิ่มเติม
3.8.1 คลิกเลือกที่คาสั่ง Uploads
3.8.2 คลิกปุ่ม Browse Images
ภาพที่ 19
3.8.3 เลือกภาพตามความต้องการ
ภาพที่ 20

15. 12
3.8.4 ภาพจะถูกโหลดขึ้นมา > สามารถคลิกเลือกเพื่อแทรกภาพดังกล่าวลงในชิ้นงาน
ภาพที่ 21

16. 13
3.9 การใช้งาน Mark
3.9.1 เลือกภาพที่ต้องการใช้งานจากหมวด Graphics > Photos
ภาพที่ 22
3.9.2 เลือกรูปร่างสาหรับกาหนดเป็น Mark จากหมวด Graphics > Shapes & Icon
ภาพที่ 23

17. 14
3.9.3 จัดวางตาแหน่งของรูปร่างไว้บนภาพประกอบ
3.9.4 เลือกวัตถุทั้งสองชิ้นพร้อมๆ กัน
เช่นจากภาพตัวอย่าง คลิกเลือกรูปหัวใจ + กดแป้น shift + คลิกภาพประกอบด้านหลัง
3.9.5 ที่เครื่องมือ Mask (select an image + icon to mark)
ภาพที่ 24
ภาพที่ 25

18. 15
3.10 Photo frame
Photo frame เป็นเครื่องสาหรับกาหนดกรอบหรือพื้นที่สาหรับแสดงผลภาพประกอบในชิ้นงาน
เป็นเครื่องมือที่มีความสามารถเช่นเดียวกันกับลักษณะของการทา Image mask ในหัวข้อที่ผ่านมา
3.10.1 ที่กลุ่มเครื่องมือคลิกเลือก Graphics > แล้วคลิกเลือก Photframe
ภาพที่ 26
3.10.2 คลิกเลือกรูปแบบของ Photo frame ที่ต้องการ
ภาพที่ 27

19. 16
3.10.3 ลักษณะของเฟรม (Photo frame) ที่เลือกจะปรากฏขึ้นบนพี้นที่ทางาน
สามารถปรับขนาดและปรับตาแหน่งได้ตามความต้องการ
ภาพที่ 28
3.10.4 เลือกรูปภาพที่ต้องการนาไปใช้กับเฟรม
โดยการคลิกเลือกที่ภาพแล้วลากไปวางทับ Photo frame
(สามารถเลือกภาพจากหมวด Upload หรือ Graphics > Photos)
ภาพที่ 29

20. 17
3.11 การพิมพ์ตัวอักษร
3.11.1 คลิกที่ตัวช่วยสร้างตัวอักษร
ภาพที่ 30
3.11.2 เลือกระดับตัวอักษร
ภาพที่ 31

21. 18
3.11.3 พิมพ์ตัวอักษรและปรับเปลี่ยนตัวอักษรตามความต้องการ
ภาพที่ 32

22. 19
Design components
Design Components เป็นเครื่องมือสาหรับ
สร้างเลเอาท์ของอินโฟกราฟิก เช่น Lists,
Timelines, comparisons ทาให้การสร้าง
อินโฟกราฟิกในกลุ่มของการแสดงรายละอียด
แสดงลาดับเวลา หรือการเปรียบเทียบข้อมูล
ทาได้ง่ายและสะดวกมากยิ่งขึ้น
ตัวอย่างเครื่องมือดังแสดงในภาพ

23. 20
1) Lists 2) Timelines 3) Comparisons

24. กราฟ
5.1 การสร้างกราฟ
5.1.1 คลิกเลือกที่ Tools
5.1.2 จากนั้นคลิกเลือก Charts
ภาพที่ 33
5.1.3 กรณี Excel มีข้อมูลหลาย Sheet ระบบจะให้เลือก Sheet ของข้อมูลที่ต้องการจะนามาสร้าง
กราฟ
ภาพที่ 34

25. 22
5.1.4 จะปรากฏหน้าต่างบันทึกข้อมูลขึ้นมา สามารถบันทึกข้อมูลใหม่ หรือสามารถนาข้อมูลจาก
Excel เข้าสู่โปรแกรมได้ทันที
ภาพที่ 35
5.2 การเปลี่ยนรูปแบบของกราฟ
ภาพที่ 36

26. 23
5.3 การเปลี่ยนข้อมูลของกราฟ
5.3.1 กรณีที่เคยสร้างกราฟไว้แล้ว Double คลิก ที่กราฟ หรือ คลิกที่รูปดินสอที่กราฟ
5.3.2 จะปรากฏหน้าต่างปรับกราฟขึ้นมา > แล้วคลิกที่รูปเฟือง
5.3.3 เลือกกาหนดค่าสีตามความต้องการ
ภาพที่ 37

27. 24
5.4 การปรับแต่งข้อมูลในกราฟ
5.4.1 Legend กาหนดแสดงหรือซ่อนคาอธิบายกราฟ
5.4.2 Axis กาหนดการแสดงหรือซ่อนข้อมูลค่าสเกลของกราฟ
5.4.3 Grid กาหนดการแสดงหรือซ่อนเส้นกริดในกราฟ
ภาพที่ 38

28. 25
5.5 การแทรกกราฟ
5.5.1 คลิกที่ปุ่ม Insert Chart
ภาพที่ 39
5.5.2 จะปรากฏกราฟขึ้นมา สามารถปรับความกว้างและความสูงได้ตามต้องการ
ภาพที่ 40

29. แผนที่
6.1 แทรกแผนที่
6.1.1 คลิกเลือกเครื่องมือ Tools
6.1.2 จากนั้นคลิกเลือก Maps
ภาพที่ 41
6.1.3 ค้นหาแผนที่ > จากนั้นคลิกเลือกชื่อแผนที่ เช่น แผนที่ประเทศไทย
ภาพที่ 42

30. 27
6.2 ปรับแต่งแผนที่
คลิกที่ปุ่ม Edit This Map
ภาพที่ 43
6.3 เพิ่มข้อมูลที่ต้องการแสดงผล

31. 28
6.4 แทรกแผนที่
ภาพที่ 44

32. 29
6.5 วิธีลบการออกแบบ
6.5.1 คลิกเลือกเครื่องหมาย Option (จุดสามจุด) ของการออกแบบใดๆ
6.5.2 แล้วเลือกรายการ Delete
ภาพที่ 45
6.5.3 คลิกเลือกตัวเลือกการออกแบบที่ต้องการลบ
ภาพที่ 46

33. 30
6.5.4 คลิกที่ปุ่ม Delete Visuals
ภาพที่ 47
6.5.5 คลิกที่ปุ่ม Delete
ภาพที่ 48

34. การ Preview
7.1 การ Preview
ภาพที่ 49
7.2 การออกจากมุมมอง Preview
ภาพที่ 50

35. การนาผลงานไปใช้งาน
8.1 การ Download ผลงาน
8.1.1 คลิกรายการ Download
ภาพที่ 51
8.1.2 เลือกกาหนดความละเอียดเป็น Medium
8.1.3 คลิกปุ่ม Download as PNG
ภาพที่ 52

36. ภาพประกอบจาก Flaticon.com
9.1 การโหลดภาพประกอบจากเว็บไซต์ flaticon.com
Flaticon.com คือเว็บไซต์ให้บริการ download ภาพประกอบแบบสัญลักษณ์ฟรี ผู้ใช้งาน
สามารถเลือกภาพประเภทต่างๆ ได้หลากหลาย ทั้งแบบที่สามารถนามาแก้ไขต่อด้วยซอฟต์แวร์เฉพาะได้ เช่น
ภาพชนิด AI หรือ อาจจะเลือกโหลดภาพที่สามารถนามาใช้งานกับสื่อชนิดต่างๆ ได้ทันทีเช่นภาพแบบ PNG
เป็นต้น กรณี Google Slide สามารถใช้งานภาพประกอบจากเว็บไซต์ flaticon.com ได้ 2 วิธีคือ การเพิ่ม
เป็นส่วนเสริม หรือ download ภาพประกอบมาเก็บไว้และเรียกใช้ในภายหลัง
ขั้นตอนการ download ข้อมูลจากเว็บไซต์ flation.com มีดังต่อไปนี้
1. เข้าสู่เว็บไซต์ www.flaticon.com
ภาพที่ 53

37. 34
2. สามารถ login เข้าสู่ระบบด้วย facebook account เช่นเดียวกับเว็บไซต์ freepik.com
> ค้นหาภาพที่ต้องการจากคาค้นในช่อง Search
ภาพที่ 54
3. สามารถเลือกโหลดภาพเป็นชุดหรือเป็นแบบภาพเดี่ยว
ภาพที่ 55

38. 35
4. จากภาพตัวอย่าง คือการเลือกโหลดแบบภาพเดี่ยว
ภาพที่ 56
5. เลือกภาพแบบ PNG เนื่องจากเป็นภาพที่สามารถนาไปใช้ไดทันที
ภาพที่ 57

39. 36
6. เลือกขนาดภาพที่ต้องการโหลด แนะนาให้เลือกขนาดเป็น 512 หรือขนาดที่ใหญ่ที่สุด
เพื่อให้ได้ภาพที่มีความละเอียดและสวยงาม
ภาพที่ 58
7. เลือก Free download

40. 37
ภาพที่ 59
8. เปิดแฟ้มข้อมูลภาพที่โหลดมาเพื่อใช้งาน
ภาพที่ 60

41. 38
9.2 การ download ภาพแบบ PNG
หากต้องการนาภาพที่ได้ไปตกต่อสามารถเลือก Download ไฟล์เป็นแบบ SVG
ภาพที่ 61
https://infograph.venngage.com/

42. 39

43. 40

44. ผู้เขียน
ดุสิต ศรีสร้อย
คณะบริหารศาสตร์ มหาวิทยาลัยอุบลราชธานี
Digital marketing, Content marketing, Infographic, Motion Infographic, Graphic design,
Animation
SEO, Web Application, Database Design
dusit.s@ubu.ac.th
dusit.sri@gmail.com
facebook.com/dusit.sri
www.contenttactical.com