คู่มือกลุ่ม-8-V-Director

1

มหาวทิ ยาลัยเทคโนโลยีราชมงคลสุวรรณภมู ิ ศนู ย์สพุ รรณบุรี

ทำ AR ด้วยตนเองง่ำย ๆ ดว้ ยโปรแกรมออนไลน์ V-Director by VIDINOTI แนว
กำรสรำ้ ง Portfolio ใหม่ ด้วยเทคโนโลยี QR code (แบบเป็นภำพกไ็ ด)้ มำใชใ้ นกำรสร้ำง
Portfolio ออนไลน์กัน ประหยดั กระดำษ สะดวกสบำย

เครอื่ งมอื ทใี่ ช้
1. E-mail เพอ่ื สมัครเข้ำใชง้ ำน
2. Adobe Photoshop CC
3. เวบ็ ไซต์ vidinoti
4. เวบ็ ไซต์ 3d warehouse
5. Microsoft PowerPoint

2

Step 1 สมคั รใชง้ าน
1.1 เข้ำ Website vidinoti จำกนั้น
คลิก Free sign up เพื่อลงทะเบียนในระบบและ
ลงทะเบยี นยนื ยันอเี มลของตนเอง

Step 2 เข้าส่รู ะบบ
2.1 Login เข้ำส่รู ะบบ AR Manager ที่เปน็ เวบ็ ในกำรสร้ำง AR ของเรำ โดยใช้

Email และ Password ทสี่ มัครในขั้นตอนท่แี ล้ว

3

Step 3 สร้างหนา้ ปก
3.1 สร้ำงหน้ำปก โดยใช้ QR Code จำกหนำ้ Dashboard เพ่ือไว้ทำกำรแสดง
ช้ินงำนในแอพพลเิ คช่ัน V-Player โดยให้บนั ทึกภำพ QR code

3.2 เปิดโปรแกรม Adobe Photoshop CC > ให้กำหนดไซต์ 480*480 > กด
Create
3.3 ให้ขยำย QRcode ให้ไดข้ นำดภำพ 480*480 > เลือกSave as > เลอื ก
นำมสกุลไฟลเ์ ปน็ Jpg > กดตกลง

4

Step 4 เร่มิ ตน้ การใช้โปรแกรม
4.1 เข้ำโปรแกรม V-Director จะเขำ้ สู่หน้ำ Dashboard เร่ิมสร้ำง AR ของเรำ

โดยกำรคลิก Create new Content > เลอื ก Content Type Selection เป็น Image
AR แล้วเลือกรปู หน้ำปกของเรำทส่ี ร้ำงไว้ > กดตกลง

Step 5 ปรับสดั ส่วนหนา้ ปก
5.1 Region Selection หำกรูปของเรำมสี ่วนที่เรำไมต่ อ้ งกำร เรำสำมำรถ Crop

เลือกเฉพำะส่วนท่ีเรำตอ้ งกำรใหเ้ กดิ AR ขึ้นได้ โดยกำรปรบั แต่ละดำ้ นของภำพ > จำกนั้น
กด Continue

5

Step 6 Content Setting
6.1 ให้เรำตง้ั ชื่อ Content และคำอธิบำย Content ของเรำ > จำกน้นั กด

Continue

Step 7 Content Creation
7.1 ขน้ั ตอนในกำรสรำ้ ง AR โดยกำรปรบั แตง่ บนรูปของเรำนน้ั เองให้เรำกดท่ีรูป

PixLive Editor เพ่ือเข้ำสู่หนำ้ กำรปรับแตง่ ได้เลย

Step 8 ออกแบบหน้าแรก
8.1 กำหนดภำพเป็น Full screen made ทำงด้ำนบนขวำ

6

8.2 สร้ำงภำพไวส้ ำหรบั วำงปุ่ม Link โดยกำรเลอื ก Image > upload ภำพตำมรูปข้ำงต้น
> จำกน้นั กด Apply Changes

Step 9 สรา้ งปุ่ม Link โดยโปรแกรม Adobe photoshop CC เพื่อพมิ พ์

9.1 เปิดโปแกรม Adobe Photoshop CC > ใช้เครื่องมอื Type tool
ข้อควำม > ปรบั สที ำงขวำ

7

9.2 ลบ Background ทีเ่ ลเยอร์ดำ้ นขวำลำ่ ง ออกเพื่อทำใหโ้ ปร่งใส
9.3 ใชเ้ ครื่องมือ Slice tool เพื่อเลอื กใชเ้ ฉพำะรปู ทเี่ รำต้องกำร

8

9.4 เลอื กบนั ทกึ โดยไปที่เมนู Fill > Export > Save for web > เลอื กสกุลไฟลเ์ ป็น
PNG-24 > จำกน้ันกด Save

Step 10 ออกแบบ Scene วีดีทัศนม์ หาวิทยาลยั
10.1 เข้ำโปรแกรม V-Director ทำกำรสรำ้ งป่มุ โดยกำรเลอื ก Image button ที่

เมนดู ำ้ นซ้ำย > แลว้ เลอื กไฟลป์ ่มุ วีดทิ ศั น์มหำวิทยำลัย ท่ีเรำสร้ำงไว้ > จำกนั้นกด Apply
Changes

9

10.2 จะเหน็ ได้วำ่ มี Scene 2 ข้ึนมำ ให้เปล่ียนชอ่ื Scene title ทมี่ มุ ขวำด้ำนบน
เป็น วดี ิทศั นม์ หำวิทยำลัย

10.3 จำก Scene วดิ ที ศั นม์ หำวิทยำลัย ให้ทำกำรเลือกรูปภำพพืน้ หลัง โดยกำรกด
Image > Upload รปู ภำพหนำ้ จอคอมพวิ เตอร์ขึ้นมำ > แล้วกด Apply Changes

10.4 ทำกำร Upload วดิ โี อ โดย
กำรเลือก Video ในแท็บเมนู >
เลอื กไฟลว์ ิดีโอแนะนำรำชมงคล >
แลว้ กด Apply Changes

10

10.5 รอ Upload สกั คร่แู ลว้ จดั วำงใหอ้ ยู่ในจอ
รูปภำพที่ Upload ไว้

Step 12 สร้างปมุ่ รูปภาพกจิ กรรมมหาวทิ ยาลัย
12.1 สร้ำงป่มุ โดยกำรเลือก Image button > เลือกไฟลป์ ุม่ รูปภำพกิจกรรม ท่ี

เรำสรำ้ งไว้ > จำกนั้นกด Apply Changes

12.2 จะเหน็ ไดว้ ่ำมี Scene 3 ข้ึนมำ ให้เปลย่ี นชื่อท่ี Scene title มมุ ขวำดำ้ นบน
เปน็ รูปภำพกิจกรรมภำยในมหำลัย

11

Step 13 Upload รปู ภาพกจิ กรรมภายในมหาวทิ ยาลยั
13.1 จำก Scene รปู ภำพกิจกรรมมหำวิทยำลัย ใหเ้ ลอื ก Full screen made

ออกก่อน > จำกน้ันเลอื ก Image Carousel > แล้ว Upload รูปภำพกิจกรรมทัง้ หมด >
เลือกกำรแสดงผลเป็น Open fullscreen image on click > แล้วกด Apply Changes

Step 14 สรา้ งหน้ารบั สมคั รนกั ศกึ ษาใหม่
14.1 สร้ำงปุ่ม โดยกำรเลอื ก Image button > แลว้ เลือกไฟลป์ ุ่ม รบั สมคั ร

นักศกึ ษำใหม่ ที่เรำสรำ้ งไว้ > จำกนน้ั กด Apply Changes

12

14.2 จะเห็นไดว้ ่ำมี Scene 4 ขึ้นมำ ให้เปลี่ยนชอื่ ที่ Scene title มมุ ขวำดำ้ นบน
เป็น รับสมัครนกั ศกึ ษำใหม่

14.3 จำก Scene 4 ใชเ้ คร่อื งมือ PDF > แลว้ เลือกไฟลป์ ระกำศท่เี ตรียมไว้ > แล้ว
กด Apply Changes

13

Step 15 สร้างปมุ่ เพลงประจามหาวทิ ยาลยั
15.1 สร้ำงปุ่ม โดยกำรเลือก Image button > แล้วเลอื กไฟลป์ มุ่ เพลงประจำ

มหำวทิ ยำลยั ท่ีเรำสรำ้ งไว้ > จำกน้นั กด Apply Changes

15.2 จะเห็นไดว้ ำ่ มี Scene 4 ขนึ้ มำ ให้เปล่ียนชอ่ื ท่ี Scene title มุมขวำด้ำนบน
เป็น เพลงประจำมหำวิทยำลัย

14

Step 16 ออกแบบ Scene เพลงประจามหาวิทยาลยั
16.1 จำก Scene ให้ทำกำรใช้เครอ่ื งมือ audio player > upload ไฟลเ์ สียง

มำร์ช มทรส. และรปู ภำพประกอบ > จำกนนั้ เพ่มิ text ดำ้ นลำ่ ง โดยใช้เนื้อหำทเี่ ติมไวใ้ ห้
Copy ไฟล์เน้อื เพลงมำวำง > แล้วกด Apply Changes

Step 17 สร้างปมุ่ แผนที่ตดิ ตอ่ มหาลัย
17.1 สรำ้ งปมุ่ โดยกำรเลือก Image button > เลอื กไฟลป์ ุม่ แผนที่มหำวิทยำลัย

ที่เรำสร้ำงไว้ > จำกนนั้ กด Apply Changes

15

17.2 จะเห็นไดว้ ำ่ มี Scene 5 ขึน้ มำ ให้เปลี่ยนช่ือท่ีscene title มุมขวำดำ้ นบน
เป็น แผนทม่ี หำวทิ ยำลัย

17.3 จำก Scene แผนที่มหำวิทยำลยั ให้ทำกำร Upload ภำพพน้ื หลัง โดยกำร
เลือก Image ทีแ่ ท็บเมนู > เลือกไฟลภ์ ำพ maps ท่เี ตรยี มไว้ > แล้วกด Apply Changes

Step 18 สร้างรูปภาพ 3 มิติ
18.1 เมอ่ื Upload พ้ืนหลังมำแลว้

ใหข้ ยำยภำพใหก้ วำ้ ง > จำกนน้ั ให้ Upload
ไฟล์ 3D โดยกำรเลือก 3D on image >
เลือกไฟล์ท่ีเตรียมไว้ > แลว้ กด Apply
Changes
(แนะนำว่ำควรจะเป็นนำมสกุล .dae, .3ds, .obj)

16

Step 19 สร้างปมุ่ เว็บไซต์ มทร.สวุ รรณภูมิ
19.1 สร้ำงป่มุ โดยกำรเลอื ก Image button > เลอื กไฟลป์ ุ่ม เว็บไซต์

มหำวทิ ยำลยั ที่เรำสร้ำงไว้ > จำกนัน้ กด Apply Changes

19.2 จะเหน็ ได้วำ่ มี Scene 6 ขึ้นมำ ให้เปลีย่ นชื่อท่ี scene title มุมขวำด้ำนบน
เปน็ เวบ็ ไซต์ มหำวิทยำลัย

17

** เว็บไซต์ของมหำวิทยำลัย

Step 20 ออกแบบ Scene เวบ็ ไซต์
มทร.สวุ รรณภูมิ

20.1 จำก Scene เวบ็ ไซต์ มทร.
สวุ รรณภูมิ ให้กด > Open web page
> จำกนนั้ ใหเ้ ขำ้ หน้ำเว็บไซต์
www.rmutsb.ac.th > แลว้ ใหท้ ำกำร
คดั ลอก URl
20.2 นำมำวำงในหนำ้ Scene ท่ี Address >จำกน้ันกด Apply Changes

Step 21 ออกแบบหน้าผจู้ ัดทา
21.1 สร้ำงปุ่ม โดยกำรเลอื ก Image button > เลือกไฟล์ปุ่ม ผจู้ ดั ทำ ทีเ่ รำสร้ำงไว้

> จำกน้ันกด Apply Changes

18

21.2 จะเหน็ ได้ว่ำมี Scene 7 ขึน้ มำ ให้เปล่ียนชื่อที่ scene title มมุ ขวำดำ้ นบน
เป็น ผจู้ ดั ทำ

Step 22 การสร้าง
22.1 เปดิ โปรแกรม Microsoft PowerPoint > เลอื กเครอื่ งมือ เพอ่ื นำภำพ
พ้ืนหลังเขำ้ มำ

แลว้ ปรบั ภำพให้เหมำะสม > นำภำพผู้จัดทำมำวำงไวท้ ีด่ ้ำนซำ้ ย > นำภำพตรำสญั ลักษณ์
คณะบริหำรฯ มำวำงไว้ทด่ี ำ้ นขวำ > นำภำพตรำสัญลกั ษณค์ ณะบริหำรฯ
มำวำงไว้ทด่ี ำ้ นล่ำง

22.2 เลือกเครอ่ื งมอื เพ่ือนำอกั ษรเข้ำมำพิมพ์ช่ือผู้จดั ทำ, สำขำวชิ ำ, ชือ่
มหำวทิ ยำลัย
22.3 สำเรจ็ ! ใหท้ ำกำร Save โดยกำรเลอื กเมนไู ฟล์ > Save as > เลอื กนำมสกลุ
ไฟลเ์ ป็น JPEG แล้วกดตกลง

19

Step 23 ออกแบบหนา้ Scene ผ้จู ดั ทา
23.1 เข้ำโปรแกรม V-Director ทำกำร Upload รูปภำพประวตั ิยอ่ ของเรำ

โดยกำรกด Image > แล้วเลอื กไฟลท์ ่ีเรำสร้ำง > จำกน้ันกด Apply Changes

Step 24 เปลย่ี นหน้าปกหนา้ Start Scene

24.1 กลับไปสู่หน้ำ Start Scene ใหท้ ำกำรเปลี่ยนรูปภำพหนำ้ ปก โดยกำรเลือก
เครอื่ งมือ Image > แลว้ นำไฟลภ์ ำพหนำ้ ปกเข้ำมำ > ปรบั ภำพ ขยำยให้เหมำะสม

24.2 แทรกหวั ข้อ มำวำงไวด้ ำ้ นบน

20

24.3 นำตรำสัญลักษณม์ ำวำง โดยเลอื ก image > จำกนน้ั เลอื กตรำสญั ลกั ษณ์ของ

คณะบริหำรฯ มำวำง

Step 25 แทรกเสียงประกอบ
25.1 เพ่มิ เสียงของหนำ้ ปกโดยกำรเลอื ก Audio > เลือกไฟลเ์ สยี ง MP3 รั้ว
สีทอง > แล้วกด ตกลง

Step 26 สร้างปุ่มยอ้ นกลับ
26.1 เปน็ กำรสร้ำงปมุ่ กลับหนำ้ Start Scene โดยกำรเลอื ก Image Button >

เลือกรปู แบบปมุ่ > เลอื ก Tap Settings ตรง Go to ใหเ้ ลอื กเป็น Start Scene เพอื่ ให้กด

21

ยอ้ นกลับไปหน้ำแรก > แลว้ กด Apply changes (ใหท้ ำแบบนี้ทกุ หน้ำเพ่ือทจ่ี ะได้มีป่มุ
ย้อนกลับไปหน้ำแรก)

Step 27 Save
สำเรจ็ !! เรำสำมำรถดูภำพรวมของงำนได้ท่ี Scenerio Tab เมอ่ื เรำปรับแตง่ จน

พอใจ ให้กด Save ท่ีมุมบน ขวำ

22

Step 28 Publish

หลังจำกนนั้ เข้ำมำทีห่ น้ำตำ่ ง My Contents อตั โนมตั ิ งำนของเรำจะ Publish

อัตโนมตั เิ ชน่ กนั ใหร้ อเครื่องหมำย เป็นเครือ่ งหมำย ก็จะสำมำรถเลน่ ได้
แล้ว โดยกำรเลอื กชน้ิ งำนท่มี มุ ขวำ

Step 31 ดาวน์โหลด Application

Download Application ทชี่ อ่ื V-Player
ลงในโทรศัพทต์ นเอง เปดิ Application จะข้นึ หน้ำจอให้สแกน

23

Step 32
เปิดหนำ้ My contents จะเห็นผลงำนท่ีเรำสร้ำงสำมำรถสแกนเพ่ือดผู ลงำนได้เลย