screenshot-42

สร้างลูกเล่นให้ภาพ 360 องศา ให้ไม่ใช่แค่ภาพถ่าย

Print Friendly

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

มาสร้างภาพ 360 องศา ด้วยโปรแกรมออกแบบงานกราฟิค อย่าง photoshop กันเถอะ

ก่อนที่จะเริ่มสร้างงาน เราจะต้องเข้าใจหลักของภาพถ่าย 360 องศาเสียก่อน ภาพถ่าย 360 องศา คือการเก็บภาพแบบทุกทิศทางแล้วมาประมวลผลให้กลายเป็นภาพหนึ่งภาพ เราเรียกภาพ panorama แบบนี้ว่า Equirectangular

ในปัจจุบันก็มีกล้องที่สามารถถ่ายภาพและวิดีโอ 360 ได้แล้ว อย่างเช่นกล้อง RICOH THETA ซึ่งหากเราลองคลี่ภาพให้เป็น 2 มิติ ก็จะมีลักษณะดังนี้

classroom-small-pic

ภาพหมุนๆ ที่เราเห็นบน facebook นั้น คือการนำภาพ 2 มิติดังกล่าว มาม้วนเป็นลูกกลมๆ ที่เราสามารถดูได้รอบทิศทางแบบ 360 องศานั่นเอง

หากเราอยากจะเริ่มสร้างภาพจากกระดาษเปล่าๆเลย สิ่งที่เราจำเป็นต้องมี คือเจ้านี้ ที่เรียกว่า เส้นตารางกล่อง ที่จะช่วยเป็นเส้น guide ให้เรา สำหรับการสร้างงาน

wn5162fb6427l2

เพื่อเสริมความเข้าใจมากขึ้น ลองมองภาพนี้ให้เหมือนห้องๆนึง ที่คลี่ออกมา เราก็จะเหนเป็นมุมห้องต่างๆ ด้านหน้า ด้านซ้าย ด้านขวา และด้านหลัง

screenshot-30

สำหรับครั้งนี้เรามาสร้างภาพง่ายๆกันก่อนดีกว่า จากการนำภาพถ่าย 360 องศาที่มีอยู่แล้ว มาแต่งในโปรแกรม photoshop เพิ่มเข้าไป วันนี้เลือกภาพฉากหลังเป็นห้องเรียน ที่เหมาะกับ เนื้อหาที่เราอยากจะทำ ภาพที่เลือกมานี้เป็นภาพที่เสิร์ทมาจาก internet น้า (อ้างอิง: http://www.iimahd.ernet.in/institute/campus/tour/classroom.html) อ้อ ภาพที่ใช้ ต้องมีอัตราส่วน 2:1 เช่น 3000×1500 pixel

tt5422si5171fs

และนี่คือ object ต่างๆ ที่เราอยากจะใส่ลงไปในภาพข้างบน เพื่อประชาสัมพันธ์งาน Problem-Based Learning in a blended learning environment ในวันที่ 27 กันยายน 2559x490835o3937dx

คราวนี้มาดูกันว่าเราจะใส่ Object เหล่านี้เข้าไปได้ยังได้ คำตอบก็คือ Protoshop นั่นเอง

อ้อออออ ~~~  ถึงบางอ้อกันแล้วใช่ไหม เปิดโปรแกรมเลยจ้า

ขั้นแรก เรามาดูตัวภาพของเรากันก่อน ว่าอยากให้มุมไหนอยู่ตรงกลาง ทำไมต้องตรงกลาง? เพราะเวลาเราเปิด facebook มา ส่วนที่อยู่ตรงกลางของภาพ ก็คือส่วนที่คนจะมองเห็นก่อนเป็นอันดับแรก เพราะฉะนั้น จึงต้องเป็นส่วนที่มีเนื้อหาสำคัญ หรือดึงดูดสายตามากที่สุด ในที่นี้ ขอเลือกมุมโต๊ะอาจารย์ เป็นส่วนกลางของภาพ เพื่อที่จะใส่รายละเอียดสำคัญที่สุด ก็คือ ชื่องาน และวันที่ ไว้บนกระดาน

sh6264re5466h3

งั้นเราก็ตัดส่วนภาพทางซ้าย มาอยู่ทางขวาซะ ด้วย photoshop

  1. หลังจากเปิดไฟล์ภาพแล้ว ให้ทำการ ปลดล็อคภาพซะก่อน เพื่อให้สามารถแก้ไขได้ โดย double click ที่ layer “Background” จะมีหน้าต่างขึ้นเราสามารถเปลี่ยนชื่อ layer ได้ จากนั้น กด OK จะเห็นได้ว่า icon แม่กุญแจหายไปแล้ว

screenshot-33

2. duplicate layer  เพิ่ม 1 layer โดย คลิกที่ layer “Layer 0” ลากไปที่ icon “Create a new layer” ก็จะเห็น layer เพิ่มขึ้นมาด้านบน ชื่อ “Layer 0 copy”

303351mz1376m9

3. ทำการเลื่อนตำแหน่งของภาพ ให้ภาพส่วนของโต๊ะอาจารย์อยู่ตรงกลาง ในที่นี่เราเลื่อน layer 0 copy ไปทางซ้าย และเลื่อน layer 0 มาทางขวา ให้บรรจบกัน นั่นไง โต๊ะอาจารย์อยู่กลางภาพแล้ว

228763ie2885t0

4. ทำการรวม 2 layer เป็น layer เดียว ด้วยการ กด shift  เลือกทั้ง 2 layer คลิกขวา เลือก merge layer

8a3934kk6670yq

เท่านี้ฉากหลังของเราก็เตรียมพร้อมแล้ว ต่อไปก็เริ่มนำ object เข้ามาใส่บนฉากหลัง แล้วเราก็บิด object ให้โค้งเว้าตามฉากหลัง

iy4105ki54543z

จากเส้นประสีน้ำเงิน คือความโค้งของฉาก ซึ่งจะทำให้เราสามารถกะได้ว่า object ของเราควรจะโค้งประมาณไหน  ในที่นี้จะปรับให้ object มีความโค้งตามเส้นสีเหลือง โดยเข้าไปที่ เมนู Edit > Transform > Warp

screenshot-40

จะมีเส้นตารางแสดงขึ้นบน object  ซึ่งเราสามารถปรับจุดต่างๆ ได้ ดึงเส้นแขนได้ ตามต้องการscreenshot-42

สำหรับใครที่เห็นว่า อยากจะปรับส่วนไหนเพิ่มเติม เราก็มีอีกหนึ่งเครื่องมือมาแนะนำ ที่ช่วยในการบิดรูปได้เช่นกัน โดย เข้าไปที่เมนู Filter>Liquify

screenshot-43

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

screenshot-44

จากนั้น เราก็ทำลักษณะเดียวกันกับ ทุกๆ object ที่นำมาใส่ในฉาก เท่านี้ก็เป็นอันเรียบร้อย

***สำหรับ เทคนิคที่ใช้ ใน photoshop ก็แล้วแต่ความถนัดของแต่ละคนเลยนะคะ ไม่มีผิดไม่มีถูก ขอแค่ผลลัพธ์ได้ออกมาเหมือนกัน ^^

และนี้คือรูปสำเร็จ จากการนำ object ต่างๆ มาใส่ไว้เพื่อประชาสัมพันธ์ ไม่ว่าจะเป็น ชื่องาน, วิทยากร, กำหนดการ, QR code, logo หรือเราจะแต่งเติมไอเดียให้บรรเจิดกว่านี้ก็ได้เลยน้า

classroom2

จากนั้นเราก็ save รูปออกมาเป็น jpeg แต่ก่อนที่เราจะโพสลง facebook เราจะต้องทำให้ facebook เข้าใจก่อนว่า รูปนี้เป็นรูปที่ถ่ายด้วยกล้อง 360 องศาซะก่อน โดยการเข้าไปที่ www.thexifer.net เพื่อเปลี่ยน properties ของรูป โดยมีขั้นตอนดังนี้

  1. ลากรูปเข้ามาในพื้นที่ที่กำหนดให้ แล้วกด eXif.me

f34157wp2249l3

2. หน้าเว็บจะแสดง pop up ขึ้นมา ให้เราพิมพ์ในช่อง Make ว่า RICOH ช่อง Model ว่า RICOH THETA S และกดปุ่ม  Go.eXfing

4p4510xd28695t

kv3729gm3468ye

3. หน้า pop up จะแสดงข้อความว่า ทำการเปลี่ยนแปลงสำเร็จแล้ว เราก็คลิกปิด pop up เพื่อกลับไปยังหน้าเว็บ

6d6229cb8797d3

4. จะสังเกตได้ว่ามีปุ่มใหม่เกิดขึ้นมา คือปุ่มสีเขียว ให้เราทำการ download รูปภาพมาได้ในคอมพิวเตอร์

kt5207q53842fe

พอเราได้รูปภาพแล้วก็ลองอัพโหลดลง facebook ได้เลย อย่างไรก็ตาม ลองทดสอบด้วยการ ตั้งค่าการแชร์ แบบ only me ก่อน ดูสิว่า รูปภาพของเราส่วนไหน บิดเบี้ยวหรือไม่ ก็ค่อยๆปรับแก้กันไป อาจจะปรับแก้หลายรอบ แต่ผลงานออกมา รับรองว่าคุ้มค่าแน่นอน

พอเราได้ภาพออกมาตามต้องการแล้ว ก็ตั้ง publish หรือ แชร์ให้เพื่อนๆได้เล้ย เท่านี้ก็เป็นอันเรียบร้อยแล้ว สำหรับภาพ 360 องศา ที่มีลูกเล่นใหม่ๆ

ชมภาพ 360 องศา จากศูนย์ CELT https://www.facebook.com/celtkmutt/photos/a.981672698578577.1073741830.968764359869411/1095064860572693/?type=3&theater

อ้างอิง

เบื้องหลังการทำ-infographic-แบบ-360

วิธีเปลี่ยนภาพถ่ายหรือภาพกราฟฟิคให้กลายเป็น Facebook 360 Photo