สร้างแผนที่ 3 มิติ สวยๆ ผ่านเว็บไซต์ Icograms ทั้งง่ายและฟรี

วิธีการใช้งานเว็บไซต์ Icograms วาดแผนที่สามมิติแบบ step by step

ตัวอย่างแผนภาพที่วาดด้วย Icograms

ขั้นตอนการสร้างใน Icograms

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

nocteam จึงได้ลองค้นหาวิธีและเครื่องมือที่จะช่วยให้เราทำแผนที่ของเราเองง่ายๆ เพื่อช่วยให้ทุกคนสามารถทำกันเองได้มาฝากครับ และที่เราจะนำมาแบ่งปันวันนี้ก็คือเว็บไซต์ Icograms ครับ ซึ่งเป็นเครื่องมือสนุกๆ ที่ช่วยให้ผู้คนสร้างอินโฟกราฟิก แผนที่แบบ 3 มิติ ไดอะแกรม และภาพประกอบได้ “ฟรี” ในวิธีที่ง่ายที่สุดในเวลาไม่กี่นาที และยังสามารถนำงานที่สร้างไปต่อยอดในการนำเสนอด้านเอกสาร เว็บไซต์ เกม หรือ วีดีโอ และอื่นๆ อีกมากมาย

Icograms มีไอคอนให้ใช้มากกว่า 3,730 แบบ สามารถอัพโหลดไอคอนมาใช้ในงานได้เอง มีเทมเพลตให้เลือกใช้ถึง 515 เทมเพลตเลยทีเดียว นับว่าเป็นอีกหนึ่งเว็บไซต์ที่น่าลองใช้งานมากๆ ซึ่งทีมงานของเราก็ได้ไปลองใช้งานแล้วถือว่าเว็บไซต์ทำงานได้รวดเร็ว ใช้งานง่าย และเหมาะกับบุคคลทั่วไปที่ไม่ได้มีความเชี่ยวชาญด้านการออกแบบมากมายแต่อยากทำแผนที่สวยๆ ไว้ใช้งาน วันนี nocteam จึงอยากนำวิธีการใช้งานมาแชร์ให้ชมกันครับ ไปติดตามกันเลย

สร้างแผนที่ 3 มิติ ด้วย icograms — YouTube

เริ่มใช้งาน Icograms อย่างไร?

ในการใช้งานเราสามารถเลือกที่จะสมัครสมาชิก (ฟรี) หรือ ไม่สมัครก็ได้ครับ แต่ในบทความนี้ nocteam ขอทำแบบสมัครสมาชิกนะครับเผื่อมีใครอยากทราบเริ่มจากอันดับแรกก็ให้เข้าไปที่เว็บไซต์ https://icograms.com/ ก่อนเลย

หน้าแรกของเว็บ Icograms

จากนั้นที่ด้านบนขวาให้เลือกเมนู Register และดำเนินการกรอกข้อมูลลงทะเบียน ดังนี้

แถบเลือกเมนูด้านบนในหน้าแรกของ Icograms

จากนั้นจะมีหน้าจอให้เรากรอกข้อมูลดังนี้ครับ
1 กรอกชื่อ-นามสกุล (ภาษาอังกฤษ)
2 กรอกอีเมล์
3 กรอกรหัสผ่าน
4 กรอกรหัสผ่านอีกครั้ง
5 กดปุ่ม Register

หน้ากรอกข้อมูลสมัครเข้าใช้งาน

กรณีไม่สมัครสมาชิก ให้เลือกเมนู Designer และใช้งานได้ทันที

หมายเหตุ กรณีใช้งานแบบไม่สมัครสมาชิก เมื่อได้ออกแบบไว้แล้ว หากเปิดด้วย Browser เดิมที่เคยใช้งาน ผลงานที่ออกแบบไว้จะกลับมาแสดงเหมือนเดิม แต่หากเปิดด้วย Browser อื่นจะไม่แสดง

แนะนำเมนูหลัก

หากได้สมัครสมาชิกแล้วเข้าสู่ระบบของเว็บไซต์เรียบร้อยแล้ว จะแสดงมีเมนูหลักให้เลือก 6 เมนู ได้แก่

เมนู HOME หน้าหลักของเว็บไซต์

ภาพตัวอย่างหน้า Home ใน Icograms

เมนู DESIGNER หน้าการออกแบบผลงาน ผู้ใช้จะเข้ามาออกแบบผลงานในหน้านี้

ภาพตัวอย่างหน้า Designer ใน Icograms

เมนู TEMPLATES หน้าเทมเพลตหรือแม่แบบสำเร็จรูป ผู้ใช้สามารถนำเทมเพลตมาใช้ได้โดยไม่ต้องเริ่มออกแบบเองแต่ต้น

ตัวอย่างหน้า Templates ใน Icograms

เมนู PRICING หน้ารายละเอียดการสมัครสมาชิกแบบฟรีและเสียเงิน โดยnocteam ขอยกเนื้อหาส่วนนี้ไปไว้ข้างท้ายนะครับ

ในทีนี้ทางทีมงานของเราได้ใช้งานแบบฟรี (Basic Plan) ซึ่งครอบคลุมต่อการใช้งานทั่วไปแล้ว แต่ในการนำไปใช้งาน มีเงื่อนไขว่าจะต้องมีสัญลักษณ์ลายน้ำของเว็บไซต์ Icograms อยู่ในรูปภาพ ห้ามนำไปใช้ในเชิงพาณิชย์ และ Export รูปผลงานได้ 2 นามสกุล คือ PNG และ JPG เท่านั้น

ภาพ หน้าตาเมนู PRICING

เมนู MY ICOGRAMS หน้ารายละเอียดอีเมลผู้ใช้ ระดับแพ็คเก็จสมาชิกที่ใช้งานอยู่ และจำนวนผลงานทั้งหมดที่ผู้ใช้สร้างไว้

เมนู MY ICOGRAMS

เมนู Username (ในที่นี้ใช้ nocteam) เมื่อกดที่ชื่อ username ของเรา จะมีหน้าแสดงข้อมูลอีเมลผู้ใช้ ระดับแพ็คเก็จสมาชิกที่ใช้งานอยู่ คล้ายกับเมนู MY ICOGRAMS แต่จะมีเพิ่มเติมในส่วนของการออกจากระบบ และการลบบัญชีผู้ใช้

เมนู Username

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

รูปแสดงหน้า Designer

1 เมนูเครื่องมือส่วนบน (Tools bar) เมนูเครื่องมือสำหรับการปรับมุมมองต่างๆ สีสัน และขนาดของไอคอน ที่เรานำมาวางบนพื้นที่สร้าง รวมถึงการ Import และการ Export ผลงานออกมาใช้ การ Copy / Paste / Delete และการปรับระดับ Layer และ Lock ไอคอน โดยเครื่องมือจะมีลักษณะคล้ายๆ ในโปรแกรม Microsoft Powerpoint ซึ่งสามารถใช้งานได้ง่ายและปรับแต่งได้สะดวก โดยจะมีหน้าตาดังภาพด้านล่างครับ

แถบเครื่องมือส่วนบนในหน้า Designer

2 เมนูไอคอน (Icon set) เมนูสำหรับเลือกไอคอนต่างๆ มาใส่ในงานออกแบบของเรา โดยมีไอคอนให้ใช้ถึง 3,730 แบบ ซึ่งแบ่งออกเป็น 29 หมวดหมู่ เช่น หมวดหมู่อาคารในเมือง (City Basic) กีฬา (Sport) ไอที (IT/Network) เป็นต้น รวมถึงมีเทมเพลตให้ใช้มากถึง 515 แบบ (จำนวนไอคอนและเทมเพลตที่ให้ใช้ฟรี
มีจำนวนเท่ากับแบบเสียเงินเลยนะ แจ่มมากๆ) แถมยังสามารถอัพโหลดไอคอนของเราเองขึ้นไปใช้ได้อีกด้วย เพียงแค่เลือกที่หัวข้อ Uploads จากนั้นเลือกไอคอนของเรา ตั้งชื่อ แล้วกดปุ่ม Upload เพียงแค่นี้ก็สามารถนำไอคอนของเรามาใช้ได้แล้ว

หมายเหตุ รองรับไฟล์ไอคอนที่เป็นนามสกุล PNG JPG GIF และ SVG ที่มีขนาดไม่เกิน 620 KB เท่านั้นครับ

การอัพโหลดไอคอนของเราเองผ่านเมนู Icon set ในหน้า Designer

3 พื้นที่ออกแบบ (Workspace) พื้นที่สำหรับออกแบบผลงานของเรา โดยลากไอคอนที่ต้องการมาวางในพื้นที่ และปรับแต่งสีสัน ขนาด และมุมมองได้จากเมนูเครื่องมือส่วนบน (Tools bar)

ภาพแสดงการดึงภาพดึงไอคอนจากเมนู Icon set ไปไว้วางในพื้นที่ออกแบบ (Workspace)

4 เมนูปรับสีพื้นหลังและขนาดพื้นที่งาน (Workspace Setting) สามารถเปลี่ยนชื่อ ปรับขนาดพื้นที่ สีพื้นหลัง และดูสถานการณ์บันทึกงานออกแบบของเราได้ที่เมนูนี้ อ้อ เว็บไซต์ Icograms จะบันทึกงานให้เราแบบ Realtime เลยนะ ทำให้ไม่ต้องกังวล เรื่องปิด Browser แล้วไม่ได้บันทึกงานครับ (แต่อย่างไรก็ตรวจสอบสถานะการบันทึกงานด้านล่างก่อนปิดด้วยนะครับว่าขึ้น Icograms Design Saved หรือยัง รวมถึง Internet ด้วย)

การตั้งค่าขนาดพื่นที่ทำงานในเมนู Workspace Setting

เครื่องมือในหน้า Designer นี้แต่ละชิ้นใช้ไม่ยากครับจะว่าไปก็เหมือนการหยิบเอาภาพนั้นภาพนี้มาวางแปะให้ได้มุมได้องศาครับ คือพอทำไปแล้วก็จะได้แผนที่เหมือนตัวอย่างด้านล่างครับ

ภาพตัวอย่างแผนที่ 3 มิติที่สร้างด้วย ICOGRAMS

เราสามารถ Export ไฟล์ไปเปิดใน Browser อื่นหรือเครื่องอื่นเพื่อให้แสดงผลงานได้โดยเริ่มจากดูแถบเมนูเครื่องมือแล้วก็ปุ่มที่เป็นรูปลูกศรลงครับ

ภาพแถบเมนูด้านบนในหน้า Designer

Export ไฟล์จาก Browser เดิม โดยเลือกไอคอนดังภาพด้านล่างในแถบเมนูแล้วเลือกไฟล์ json จากนั้นกดปุ่ม Download

แสดงการ export ไฟล์งานจาก Icograms

จากนั้นเรานำไฟล์ไปที่เครื่องใหม่หรือ Import ไฟล์เข้า Browser ใหม่ โดยเลือกไอคอนดังภาพด้านล่างในแถบเมนูจากนั้นกดปุ่ม เรียกดูไฟล์.. และเลือกไฟล์ json เพียงเท่านี้ Browser ใหม่ก็จะแสดงผลงานที่เคยทำไว้แล้ว

ภาพตัวอย่างการ import ไฟล์งาน Icograms ไปเครื่องใหม่หรือ browser ใหม่

หรือเราสามารถ export ออกมาเป็นไฟล์ภาพทั่วๆ ไปอย่าง .png หรือ .jpg ก็จะได้ลักษณะแบบภาพด้านล่างครับ

ภาพ export แผนที่ 3 มิติที่สร้างด้วย ICOGRAMS

Nocteam ทำคลิปการทำแผนที่ 3 มิติ สั้นๆ ไว้ให้ดูด้านล่างนะครับ

นอกจากจะใช้ทำงานได้แล้ว Icograms มีเวอร์ชั่นสำหรับผู้สอนและผู้เรียนด้วย

เว็บไซต์ Icograms สามารถนำมาประยุกต์ใช้ในการเรียนการสอนระหว่างผู้สอนและผู้เรียนได้ด้วย หรือที่เรียกว่า Icograms Education ซึ่งเมื่อเข้าสู่ระบบแล้ว อาจารย์ผู้สอนสามารถสร้างห้องเรียนในเมนู My Classes และให้นักเรียน นักศึกษานำผลงานที่ออกแบบส่งให้กับอาจารย์ในห้องเรียนได้ เหมือนการทำแบบฝึกหัดส่งอาจารย์เลย เรามาดูขั้นตอนการสร้างและใช้งานกันครับ

เริ่มจากเข้าที่เว็บไซต์ https://education.icograms.com/

หน้าแรกของ Icograms Education

ในส่วนของการใช้งานแบบเรียนและสอนผู้สอนและผู้เรียนต้องสมัครสมาชิกหรือเข้าสู่ระบบก่อน ซึ่งวิธีการสมัครสามารถดูที่หัวข้อ “สมัครสมาชิก Icograms อย่างไร?” ได้ที่ข้างต้นครับ

หมายเหตุ เนื่องจากในเวอร์ชั่น Icograms Education ต้องเข้าสู่ระบบผ่าน https://education.icograms.com/ แทน ซึ่งเป็นคนละ URL กับเว็บไซต์หลัก (https://icograms.com) โดยผู้สอนและผู้เรียนเข้าสู่ระบบใหม่อีกครั้งโดยไม่ต้องสมัครสมาชิกใหม่ครับ

พอสมัครกันเรียนร้อยแล้วก็เริ่มใช้งานกันครับ ขออธิบายโดยเริ่มจากฝั่งผู้สอนก่อนนะครับ

1 เข้าไปที่เมนู Username (Teacher) แล้วเลือกเมนู My Designs

ขั้นตอนแรกของการใช้ Icograms สำหรับผู้สอน

2 เลือกเมนูย่อย My Classes จากนั้นกดปุ่ม Add Class

การสร้างห้องเรียนบน Icograms

3 กรอกชื่อห้องเรียน และกดปุ่ม Save

การตั้งชื่อห้องเรียนใน Icograms

4 จากนั้นจะแสดงตารางสำหรับการเพิ่มชื่อผู้เรียนเข้าในห้องเรียน โดยสามารถแก้ไขชื่อและลบห้องเรียนได้ที่ลิงก์ Edit และ Delete หากเพิ่มอีเมลผู้เรียนให้กดไอคอนเครื่องหมายบวกดังภาพด้านล่าง

แสดงหน้าจอสำหรับเพิ่มหรือลบผู้เข้าร่วมห้องเรียนใน Icograms

5 เพิ่มอีเมลผู้เรียน แล้วกดไอคอนรูปเครื่องหมายบวก (หมายเลข 1)อีกครั้ง รายชื่ออีเมลจะถูกบันทึกในตาราง และจะมีสถานะ Invited คือได้เชิญให้ผู้เรียนเข้าสู่ห้องเรียนที่อาจารย์สร้างไว้ หากต้องการลบอีเมล ให้กดไอคอนรูปถังขยะสีแดง (หมายเลข 2) เมื่อเพิ่มอีเมลเรียบร้อย ผู้เรียนจะเห็นคำเชิญเข้าห้องจากนั้นผู้เรียนจะสร้างผลงานและส่งกลับมายังผู้สอน

หมายเหตุอีเมลที่จะใช้เชิญเข้าห้องเรียนควรเป็นอีเมลเดียวกับที่ผู้เรียนใช้สมัครใช้งาน Icograms นะครับ

ภาพการเพิ่มและลบอีเมลของผู้เข้าร่วมชั้ห้องเรียน

6 ผู้สอนทำการ Submitted Assignments ให้นักเรียนโดยกดที่รูปผลงานผู้เรียน ดังภาพด้านล่าง (ในสี่เหลี่ยมสีแดง)

ภาพตัวอย่างการตรวจงานของผู้เข้าร่วมห้องเรียน

7 ให้ความคิดเห็นและกดปุ่ม Save Comment เพียงเท่านี้ก็เสร็จสิ้นขั้นการตรวจงานของผู้สอนครับ

ภาพตัวอย่างการลงคอมเม้นในผลงานของผู้ร่วมห้องเรียน

จบฝั่งผู้สอนแล้วคราวนี้มาดูฝั่งผู้เรียนบ้างครับต้องทำอย่างไรบ้าง

1 เข้าไปที่เมนู Username (Student) แล้วเลือกเมนู My Designs จากนั้นเข้าที่เมนูย่อย My Classes เช่นเดียวกับฝ่ายผู้สอน เมื่อเข้ามาแล้วจะพบการแจ้งเตือนว่าผู้เรียนถูกเชิญให้เข้าห้องเรียน จากนั้นกดปุ่ม Accept เพื่อยอมรับ

ภาพแสดงการแจ้งเตือนว่าถูกเชิญเข้าห้องเรียนใน Icograms

2 เมื่อเข้าร่วมแล้ว กดที่ปุ่ม Create New Design เพื่อสร้างผลงานของผู้เรียน โดยสามารถดูขั้นตอนการสร้างผลงานได้ที่หัวข้อ “เมนูเครื่องมือทำอะไรได้บ้าง ?” หากผู้เรียนกดเข้าห้องเรียนผิด หรือ ต้องการออกจากห้องเรียน ให้กดที่ลิงก์ Reject

ภาพแสดงการเลือกสร้างผลงานเพื่อส่งให้ห้องเรียนใน Icograms

3 เมื่อผู้เรียนสร้างผลงานเสร็จแล้ว กดส่งผลงานที่ปุ่มส่ง (ในสี่เหลี่มสีแดงบนขวา) ดังภาพครับ

ภาพแสดงการส่งงานที่ทำเสร็จแล้วใน Icograms

4 จะแสดงหน้าต่างให้กรอกข้อมูล จากนั้นกดปุ่ม Submit และกดลิงก์ Review Submitted assignments

ภาพตัวอย่างการส่งงานและใส่ข้อความเพิ่มเติม

5 จะกลับมาที่หน้าผลงานของผู้เรียน

หน้าจอแสดงผลงานของผู้เรียน

6 หลังจากส่งผลงานแล้ว ผู้สอนจะทำการ Submitted Assignments เมื่อผ่านการตรวจ ให้ผู้เรียนเข้ามาดูความคิดเห็นของผู้สอน เพียงเท่านี้ก็เสร็จสิ้นขั้นตอนการส่งผลงานของผู้เรียนครับ

ภาพแสดงคอมเม้นจากผู้สอนในผลงานของผู้เรียน

ก่อนจะสรุปขอย้อนกลับไปอธิบายเรื่องสมัครสมาชิกแบบเสียเงินสักนิดครับ เพราะความแตกต่างกับการใช้ฟรีคือ เราสามารถนำไปใช้ได้ทุกรูปแบบโดยไม่ต้องติดสัญลักษณ์ลายน้ำ และ Export รูปผลงานเพิ่มเติมในรูปแบบนามสกุล SVG โดยสามารถนำไปใช้งานในโปรแกรมออกแบบต่าง ๆ ได้ เช่น Adobe Illustrators ฯลฯ รวมถึงสามารถใช้งานร่วมกันกับภายในทีมงานได้มากขึ้นตามแพ็คเก็จที่เลือก ซึ่งค่าสมัครสมาชิกแบบเสียเงินมีให้เลือก 3 แบบ ได้แก่

• Pro Plan ค่าบริการรายเดือน $19 (ประมาณ 630 บาท) รายปี $171 (ประมาณ 5650 บาท)
• Expert Plan ค่าบริการรายเดือน $34 (ประมาณ 1,125 บาท) หรือรายปี $306 (ประมาณ 10,100 บาท)
• Custom Icons Plan เป็นแพ็คเก็จบริการจัดทำไอคอนให้ตามที่ผู้ใช้ต้องการเพื่อนำมาใช้ในงานได้ โดยมีราคาเริ่มต้นที่ $5 — $50 (ประมาณ 165 บาท — 1,650 บาท) ต่อ 1 ไอคอน

ภาพ หน้าตาเมนู PRICING

จุดเด่นและข้อสังเกต

จุดเด่น

1. ใช้งานฟรี
2. เว็บไซต์มีความเสถียร
3. บักทึกงานแบบ Realtime
4. นำไปประยุกต์ใช้ในการเรียนการสอนได้

ข้อสังเกต

1. แพ็คเก็จแบบฟรี ไม่สามารถนำไปใช้ในเชิงพาณิชย์ได้
2. ใช้งานผ่านระบบ Internet
3. ยังไม่รองรับการใช้งานผ่าน Smartphone

เป็นอย่างไรกันบ้างครับสำหรับการขั้นตอนสร้างแผนที่ 3 มิติ แบบออนไลน์ ผ่านเว็บไซต์ Icograms ง่ายไหมครับ เพียงไม่กี่ขั้นตอนก็สามารถสร้างแผนที่ 3 มิติเพื่อนำไปใช้งานได้แล้ว และยังสามารถนำไปใช้งานการเรียนการสอนได้อีกด้วย หวังว่าท่านผู้ชมจะได้รับประโยชน์จากขั้นตอนการใช้งานเว็บไซต์ icograms ที่ทีมงานของเรานำเสนอไปไม่มากก็น้อยนะครับ แล้วอย่าลืมติดตามผลงานของเราได้ที่เว็บไซต์ Medium และช่องทาง Facebook เพื่อเป็นกำลังใจในการทำบทความดีๆ ให้พวกเราด้วยนะครับ แล้วพบกันใหม่ครับ

..Nocteam..