-
การทำภาพแนว "Cinemagraph" หรือ "ภาพถ่ายมีชีวิต
(http://1.bp.blogspot.com/-ba4OuaRWFqI/TiJ0ziCKRcI/AAAAAAAAAGE/V67-jncyd6o/s1600/cinemagraphs-160.gif)
วันนึงบนโลก.. Jamie Beck (ช่างภาพแฟชั่น) และ Kevin Burg (ดีไซเนอร์) นึกครึ้ม ..จับเอาภาพถ่ายสวยๆมายัดรวมกับวิดีโอเบาๆ ปรับแต่งนิดหน่อย จนกำเนิดเกิดเป็นงานศิลปะที่โดดเด่นเตะตาสร้างความน่าสนใจให้กับชาวโลกเรียกขานกันทั่วไปว่า "Cinemagraph" หรือ "ภาพถ่ายมีชีวิต"
จริงๆแล้วภาพ Cinemagraph ก็คือ ภาพ Gif Animation ธรรมดานั้นเอง ซึ่งมีวิธีการทำที่ไม่ยากเลย วันนี้เรามาเรียนรู้วิธีการทำภาพชนิดนี้ไปพร้อมๆกันครับ
-------------------------------------------------------------
การทำภาพ Cinemagraph นั้น มี 3 วิธี
วิธีแรก ...คือการถ่ายภาพแบบ Multi Shot แล้วนำไฟล์มาเรียงต่อกันทำเป็นไฟล์ Gif ซึ่งวิธีการทำก็เหมือนการทำไฟล์ Gif ทั่วไป
วิธีที่ 2 ...คือการเอาไฟล์ Video มาทำ ซึ่งผมขอนำเสนอบทความด้วยวิธีการนี้ เพราะผมคิดว่าถ้าทำด้วยวิธีนี้เป็นแล้ว ...วิธีแรกก็จะง่ายมาก ^^
วิธีสุดท้าย ..คือการนำรูปภาพธรรมดาๆรูปเดียว มาก๊อปปี้ ตกแต่ง และตัดต่อ ให้เป็นภาพเคลื่อนไหว ที่ละช๊อตๆ ซึ่งเป็นวิธีที่ต้องใช้เทคนิคเฉพาะตัวสูงมาก ทำยาก จึงไม่ค่อยมีใครใช้วิธีนี้กันกัน
มาเริ่มวิธีการทำภาพ Cinemagraph กันเลยดีกว่าคร้าบ...
Step 1. "เลือกไฟล์ Video "
การเลือกช๊อตที่จะนำมาทำนี่แหละครับที่ยากที่สุด ถ้าเป็นVideoที่ถ่ายขึ้นเพื่อตั้งใจเอามาทำเลยก็ไม่มีปัญหา แต่ถ้าเป็น Video ที่ไม่ได้จัดฉากขึ้นเพื่อทำ Cinemagraphs โดยเฉพาะแล้ว แนะนำให้เลือกช๊อตที่ไม่มีการเคลื่อนไหวในซีนนั้นมากครับ เพราะส่วนที่เราต้องการให้เป็นภาพนิ่งกับส่วนที่เราต้องการให้เคลื่อนไหว ...อาจจะไม่สัมพันธ์กัน ทำให้งานออกมาไม่สวย
แต่ไม่ต้องห่วงครับ ผมแนบไฟล์videoที่ใช้ในการสอนครั้งนี้ มาให้เพื่อนๆใช้ลองมือกันก่อนด้วยครับ
ซึ่งvideoที่นำมาเป็นตัวอย่างนี้ เป็นส่วนหนึ่งใน MV เพลง Pyramid ของ charice pempengco สุดที่รักของผมเอง(อันนี้ส่วนตัว คริคริ) ช๊อตที่เลือกใช้เป็นช๊อตที่เธอระเบิดพลังเสียงออกมา อย่างกับซุนหงอคงระเบิดพลังซุปเปอร์ไซย่าก็ไม่ปาน ฮ่ะๆๆ
(คลิ๊ก เพื่อ Download video ) (http://www.tempf.com/getfile.php?id=990699&key=4e219be42cb23)
• ใช้โปรแกมตัดต่อ เช่น "Windows Live Movie Maker" ตัดไฟล์Videoเฉพาะส่วนที่ต้องการทำเป็น Cinemagraphs (อาจจะแค่ 2-5 วินาที) เพื่อให้ไฟล์มีขนาดเล็ก จะได้ง่ายต่อการแปลงไฟล์ และ Import เข้า PhotoShop ครับ
• แปลงไฟล์ให้เป็น ตระกูล "Quick Time Movie" (.MOV,.AVI,.MPG,.MPEG,.MP4) ด้วยโปรแกรมแปลงไฟล์ เช่น Adobe Media Encoder ( ไฟล์ตะกูลอื่นเปิดใน PhotoShop ไม่ได้ครับ อ่อ..ผมไม่แน่ใจนะครับว่า PhotoShop เปิดไฟล์ Movie ได้ตั้งแต่เวอร์ชั่นไหน เท่าที่รู้ก็ CS3 ขึ้นมาครับ ก่อนหน้านั้น ไม่ทราบนะครับ TT-TT )
• ลากไฟล์ที่เตรียมไว้เข้ามาในโปรแกรม PhotoShop เลยครับ
(http://1.bp.blogspot.com/-hYfZXEgfdDM/TiGAFDSlMDI/AAAAAAAAAB0/U-80C1l4SjE/s640/1-1.jpg)
Step 2. "ตัดเฉพาะส่วนที่ใช้"
• เมื่อเปิดไฟล์Videoแล้ว สังเกตุในพาเนล Layer จะได้ Layer Video ที่มีสัญลักษณ์รูปฟิมล์อยู่มุมขวาล่าง
• ลองกดเครื่องหมาย Play ใน"ANIMATION (TIMELINE)" (วงกลมสีแดงตามรูปตัวอย่าง)
ดูการเคลื่อนไหวของไฟล์Video ..แล้วเลือกเฉพาะส่วนที่เราต้องการ โดยเลื่อน "Work Area" ด้านซ้าย-ขวาเข้ามาตรงช่วงเฟรมที่เราเลือก(ลูกศรสีเหลืองตามรูปตัวอย่าง)
• จากนั้นกดมุมขวาบนของพาเนล ANIMATION (TIMELINE) เลือก "Trim Document Duration to Work Area" ...เราจะได้ไฟล์เฉพาะส่วนที่เราใช้ครับ
(http://1.bp.blogspot.com/-5k4CkoRKArg/TiGBUEri87I/AAAAAAAAAB8/i8B6mUmyvUg/s640/1-2.jpg)
Step 3. "สร้างภาพนิ่ง"
• เลื่อน Current Time Indicator(ขีดแดงๆแสดงตำแหน่งการเล่นว่าอยู่เฟรมไหน) ..หาเฟรมที่เราต้องการให้เป็นภาพหลัก เมื่อได้แล้วกด "Ctrl+A" เพื่อเลือกพื้นที่ทั้งหมด (สังเกตุจะเกิด Selection รอบภาพ)
• กด "Ctrl+J" เพื่อCopyเอาภาพในเฟรมนั้น ขึ้นมาเป็นภาพธรรมดาใน Layer ใหม่
(สังเกตุในพาเนลLayer จะมี Layer เพิ่มใหม่ขึ้นมา1Layer ...เป็นภาพนิ่งที่ไม่มีสัญลักษณ์Videoอยู่มุมขาวล่าง)
(http://1.bp.blogspot.com/-cTECO9004i8/TiGBV0Lp02I/AAAAAAAAACA/-5-jIZeHc04/s640/1-3.jpg)
• คลิ๊กเลือกที่ Layer ภาพนิ่ง( Layer 2 ) กด "Q" เพื่อเข้าสู้่โหมด Ouick Mask ใช้ Brush ระบายมาร์คส่วนที่เราไม่ต้องการให้เคลื่อนไหว
(http://1.bp.blogspot.com/-ps3D6plHBlc/TiGBZci_OQI/AAAAAAAAACE/uUPVeGoDq8M/s640/1-4.jpg)
เมื่อเสร็จแล้ว กด "Q" อีกครั้ง เพื่อออกจากโหมด Ouick Mask จะเห็นว่ามี Selection ขึ้นนอกส่วนที่เราไม่ต้องการให้เคลื่อนไหว
• กด "Shift+Ctrl+I" 1ครั้ง เพื่อสลับด้านพื้นที่ Selection
• กดสัญลักษณ์ "Add Layer Mask" จะได้ Layer Mask ตามรูป
(http://2.bp.blogspot.com/-emNVxagf6ms/TiGBcAo6QtI/AAAAAAAAACI/OlyCaRNNT2c/s600/1-5.jpg)
Step 4."เสร็จ"
• ถึงตรงนี้ ..ถ้าลองกด Play ดูแล้วได้ผลลัพธ์ที่พอใจ ก็สามารถ Save งานได้เลยครับ โดยการเซฟเป็น Gif นั้น ให้กด"Alt+Shift+Ctrl+S" หรือใช้เมนู File > Save for Web..นะครับ
(http://3.bp.blogspot.com/-qBzPt8TCY78/TiGBipvymzI/AAAAAAAAACM/2C1gyq25wZw/s640/1-6.jpg)
(http://4.bp.blogspot.com/-71BGSRqsLVk/TiGHDHGZpiI/AAAAAAAAADI/1eaASwsLrPU/s1600/4.gif%22)
... เสร็จแว้วว ว
Step 5. "ตกแต่ง"
• หากยังไม่สาแก่ใจ ก็ตกแต่งเพิ่มเติมได้ ขั้นแรกเราจะเปลี่ยนการทำงานให้เป็นโหมด FRAMES ก่อน จะได้แก้ไขง่าย ...โดยการกดปุ่ม"มุมขวาบน"ของพาเนล ANIMATION(ตามรูป) ....เลือก Flatten Frames Into Layer
(http://2.bp.blogspot.com/-xcf53do6oFM/TiGBj6jrNmI/AAAAAAAAACQ/NIykspGiku0/s320/1-7.jpg)
จะมีเลเยอร์ใหม่ขึ้นมาประมาณ 10 เลเยอร์ และ 2 เลเยอร์แรกของเราจะกลายเป็นเลเยอร์ซ่อน(ตาปิด) ...ลบ2เลเยอร์แรกของเราทิ้งเลยครับ
(http://2.bp.blogspot.com/-IfBCu_3mLgo/TiGBlSuK2LI/AAAAAAAAACU/uz6Lwz-CJv8/s320/1-8.jpg)
• กดปุ่ม"มุมขวาบน"ของพาเนล ANIMATION อีกครั้ง เลือก "Make Frames From Layer" เพื่อสร้างคีย์เฟรมให้ภาพเคลื่อนไหว
• กดปุ่ม"มุมขวาล่าง"ของพาเนล ANIMATION (ดูรูป) เลือก "Convert to Frame Animation" เพื่อเปลี่ยนโหมดพาเนลเป็นแบบ ANIMATION (FRAMES)
(http://2.bp.blogspot.com/-yj4FiWheTKE/TiGBoOeu1KI/AAAAAAAAACY/5xLQ0sWWmPA/s640/1-9.jpg)
• หลังจากนี้ เราก็สามารถปรับแต่งได้ตามใจชอบ โดยใช่้พื้นฐานแบบการทำไฟล์Gif ทั่วไปเลยครับ ^^
-------------------------------------------------------------
• • ตกแต่ง Style "เอาแต่ใจ" • •
...เพิ่มดวงไฟไป 2 ดวง ใส่เลเยอร์ปรับสี แสงนิดโหน่ย ก็เสร็จตามสไตล์เอาแต่ใจละครับ
(http://4.bp.blogspot.com/-Mz1b2x6yMXE/TiGBsAfsG6I/AAAAAAAAACc/Nw-JN7yb3RM/s640/1-10.jpg)
ผลลัพธ์ ^^
(http://3.bp.blogspot.com/-l59wL2Sf4h0/TiGC3mxih9I/AAAAAAAAADE/MELi-8nb2pE/s1600/5.gif)
หวังว่าเพื่อนๆคงสนุกกับกับการทำภาพแนว "Cinemagraph" นะครับ เดี๋ยวผมจะทำเป็น Clip Video ด้วย และเทคนิคอื่นๆอีกมากมาย รอติดตามได้ (แต่เสร็จเมื่อไหร่ไม่รู้.. อุอุ )
มีอะไรแนะนำกันมาได้นะครับ อยากรู้เทคนิคไรเพิ่มเติมก็แนะนำกันเข้ามา ส่วนจะทำหรือเปล่าอีกเรื่อง..(เอาแต่ใจสุดๆ ฮ่ะๆๆ) ..สำหรับวันนี้ พอแค่นี้ก่อน บายคร๊าบ
.. :13: Thank You So Much For : เว็บเอาแต่ใจ (http://profile.ak.fbcdn.net/hprofile-ak-snc4/277041_182464845147828_7169068_n.jpg) (http://aowtaejai.blogspot.com/2011/07/cinemagraph.html#more)
=∩_∩= มากมายนะฮะ .. :19:
-
:yoyo015: รวมภาพถ่ายแนว"Cinemagraph" หรือ "ภาพถ่ายมีชีวิต
ทั้งจากฝีมือคนไทยและชาวต่างชาติ ^^
(https://lh5.googleusercontent.com/-F55YkaZUZWE/TimL6CazJ_I/AAAAAAAAAUE/uiZX8QPwN5Y/shane.gif)
(https://lh5.googleusercontent.com/-N8tbb1IoLTc/TiqDgAlKHLI/AAAAAAAAAWI/oEdt6mK9-DY/test2-1.gif)
2ภาพนี้ เป็นผลงานเจ๋งๆฝีมือคนไทย คือ (http://strikebacktactics.com/forums/index.php?action=dlattach;attach=996;type=avatar) คุณช้าง แห่งเว็บ strikebacktactics.com นะฮะ ก็ขอร่วมชื่นชมและขอบคุณท่านเจ้าของภาพมาณ.ตรงนี้ด้วยนะฮะ ^^
-
(http://i.kapook.com/tripplep/5-7-54/Cinemagraph1.jpg)
(http://i.kapook.com/tripplep/5-7-54/Cinemagraph2.jpg)
(http://i.kapook.com/tripplep/5-7-54/Cinemagraph3.jpg)
(http://i.kapook.com/tripplep/5-7-54/Cinemagraph4.jpg)
-
(http://i.kapook.com/tripplep/5-7-54/Cinemagraph5.jpg)
(http://i.kapook.com/tripplep/5-7-54/Cinemagraph6.jpg)
(http://i.kapook.com/tripplep/5-7-54/Cinemagraph7.jpg)
(http://i.kapook.com/tripplep/5-7-54/Cinemagraph8.jpg)
-
(http://i.kapook.com/tripplep/5-7-54/Cinemagraph9.jpg)
(http://i.kapook.com/tripplep/5-7-54/Cinemagraph10.jpg)
(http://i.kapook.com/tripplep/5-7-54/Cinemagraph11.jpg)
(http://i.kapook.com/tripplep/5-7-54/Cinemagraph12.jpg)
-
(http://i.kapook.com/tripplep/5-7-54/Cinemagraph13.jpg)
(http://i.kapook.com/tripplep/5-7-54/Cinemagraph14.jpg)
(http://i.kapook.com/tripplep/5-7-54/Cinemagraph15.jpg)
(http://i.kapook.com/tripplep/5-7-54/Cinemagraph16.jpg)
-
(http://i.kapook.com/tripplep/5-7-54/Cinemagraph17.jpg)
(http://i.kapook.com/tripplep/5-7-54/Cinemagraph18.jpg)
(http://i.kapook.com/tripplep/5-7-54/Cinemagraph20.jpg)
(http://www.jadtem.com/wp-content/uploads/2011/07/5882826248_5ac3dc679c_o.gif)
-
(http://www.jadtem.com/wp-content/uploads/2011/07/Cinemagraph-4.gif)
(http://www.jadtem.com/wp-content/uploads/2011/07/Cinemagraph-5.gif)
(http://www.jadtem.com/wp-content/uploads/2011/07/Cinemagraph-10.gif)
(http://www.jadtem.com/wp-content/uploads/2011/07/Cinemagraph-9.gif)
** ยังมีภาพสวยๆอีกหลายภาพฮะ ไว้จะ นำมาแบ่งปันให้ดูกันอีกนะฮะ .. ^^
ขอขอบคุณ :19: สำหรับที่มาของภาพทั้งหมดเหล่านั้นจาก : เว็บกระปุกดอทคอม และ เว็บจัดเต็มดอทคอม =∩_∩= .. มากมายด้วยฮะ .. :13:
-
:43: :13: :19:
-
คุณนิเก่งจัง
ขอบคุณนะคะที่นำเทคนิคดีๆมาฝากค่ะ ^_^
:13:
-
:06: โหสุดยอดมากเลยครับพี่กระต่ายของผม ชอบภาพ นี้ครับเหมือนพี่น้ำฝนเลี้ยงหลาน
(https://lh5.googleusercontent.com/-N8tbb1IoLTc/TiqDgAlKHLI/AAAAAAAAAWI/oEdt6mK9-DY/test2-1.gif)
-
สวดยอดครับ :13:
-
(http://kevinburg.com/tumblr/fm2ugifs/train-repeat-615.gif)
(http://farm4.static.flickr.com/3586/5698521247_6da5d66288_o.gif)
(http://kevinburg.com/tumblr/fm2ugifs/subway-newspaper-615.gif)
~ :13: ..
-
(http://farm4.static.flickr.com/3025/5698564979_1686a328ef_o.gif)
(http://kevinburg.com/tumblr/fm2ugifs/bday-615.gif)
(http://farm4.static.flickr.com/3605/5739526869_e47d3616f3_o.gif)
~ :13: .. :yoyo095:
-
(http://farm6.static.flickr.com/5186/5659126388_3f56c8807f_o.gif)
(http://farm6.static.flickr.com/5065/5733843611_c354ae62fe_o.gif)
(http://farm6.static.flickr.com/5029/5658551241_8852d44b38_o.gif)
~ :13: .. :yoyo100:
-
(http://popgazine.com/wp-content/uploads/2012/08/Cinemagraph-Amazing-Animated-GIF-29.gif)
(http://popgazine.com/wp-content/uploads/2012/08/Cinemagraph-Amazing-Animated-GIF-19.gif)
(http://popgazine.com/wp-content/uploads/2012/08/Cinemagraph-Amazing-Animated-GIF-30.gif)
~ :13: .. :yoyo100: