ก่อนเริ่มอ่าน ฝากอันเดียวครับ: ผมเปิด community ฟรีชื่อ One Percent AI ไว้สอนเรื่อง AI แบบเดียวกับ guide นี้ ทั้งของที่เขียนลงบล็อกและของที่ยังไม่ได้เขียน ทำตามแล้วติดตรงไหนก็เข้ามาถามกันได้เลย
เข้า One Percent AI (ฟรี)ลองเลื่อนเล่นของจริงตรงนี้ก่อน
อธิบายด้วยตัวหนังสือยังไงก็ไม่เท่าลองเอง ค่อยๆ เลื่อนหน้าจอลงช้าๆ แล้วดูภาพข้างล่างนี้ประกอบตัวเองตามจังหวะนิ้วเรา เลื่อนกลับขึ้นมันก็ถอยกลับ
ที่เพิ่งเห็นไปคือเทคนิค scroll-linked image sequence: ภาพนิ่งหลายสิบเฟรมถูกวาดลง canvas ทีละเฟรมตามตำแหน่ง scroll เทคนิคเดียวกับที่ Apple ใช้ในหน้า product ของเขา (ลองนึกหน้า AirPods ที่เลื่อนแล้วหูฟังหมุนเอง) ตัวอย่างข้างบนนี้ผมสร้างเฟรมเองทั้งชุด แล้วให้ AI เขียนโค้ด canvas ให้ตาม flow ข้างล่างนี้เลย
อีกตัวอย่าง : เอาไปทำหน้าโปรโมทของจริง
อันข้างบนคือโชว์เทคนิคเฉยๆ ทีนี้ดูของที่ผมทำใช้จริง หน้าโปรโมท community AI-Sthetics ของผม ประโยคมันค่อยๆ ประกอบตัวเองตามที่เพื่อนๆ เลื่อน จบที่โลโก้กับปุ่มเข้ากลุ่ม คนละโทนสีกับอันแรกเลย เพราะคนละแบรนด์กัน
เห็นไหมครับว่าเทคนิคเดียวกัน แต่พอเปลี่ยนเฟรมเป็นสไตล์แบรนด์ตัวเอง มันก็กลายเป็นหน้าโปรโมทที่คนหยุดดูได้เลย ไม่ต้องจ้าง dev สักบาท ใครสนใจสาย AI ที่งานมี taste จนคนแยกไม่ออกว่าเป็น AI แวะมาที่ AI-Sthetics ได้เลยครับ
01Google Flow: สร้างภาพเริ่มกับภาพจบ
แอนิเมชั่นทั้งเส้นเกิดจากภาพแค่ 2 ใบ: จุดเริ่ม (เช่น ชิ้นส่วนสินค้ากระจาย) กับจุดจบ (สินค้าประกอบเสร็จ)
- เข้า Google Flow (labs.google/flow) แล้วเริ่มโปรเจกต์ใหม่
- Generate ภาพที่ 1: สภาพ "เริ่มต้น" เช่น ชิ้นส่วนสินค้าลอยกระจายบนพื้นหลังเรียบๆ
- Generate ภาพที่ 2: สภาพ "จบ" สินค้าประกอบเสร็จ มุมกล้องเดียวกัน พื้นหลังเดียวกัน
- เคล็ดลับ: ทั้ง 2 ภาพต้องคุมมุมกล้อง แสง และพื้นหลังให้เหมือนกันที่สุด ไม่งั้นช่วงเปลี่ยนภาพจะกระตุก
02frames-to-video: ให้มันเติมภาพระหว่างกลาง
ยังอยู่ใน Flow: เลือกโหมด frames-to-video แล้วอัปภาพเริ่มกับภาพจบเข้าไป ระบบจะสร้างทุกเฟรมระหว่างกลางให้เอง
ผลที่ได้คือคลิปสั้นๆ ที่สินค้า "ประกอบตัวเอง" จากภาพแรกไปภาพสอง ความยาวไม่ต้องมาก 3-5 วินาทีก็พอ เพราะเดี๋ยวเราจะเอาไปแตกเป็นเฟรมอยู่ดี
03EZGIF: แตกคลิปเป็นเฟรม
เอาคลิปที่ได้ไปที่ ezgif.com เลือกเมนู video-to-image-sequence เพื่อแตกคลิปกลับเป็นภาพนิ่งเรียงลำดับ
- อัปโหลดคลิปเข้า EZGIF เลือก Video to JPG (image sequence)
- ตั้งค่า 30 เฟรมต่อวินาที หรือน้อยกว่านั้นถ้าอยากให้ไฟล์เบา คลิป 3 วิที่ 12 fps ก็ได้เฟรมพอแล้ว
- กด convert แล้วโหลดเฟรมทั้งหมดเป็นไฟล์ zip มาแตกไว้ในโฟลเดอร์เดียว
04AI coding tool: ทำ scroll-linked canvas
ขั้นสุดท้าย โยนโฟลเดอร์เฟรมเข้า AI coding tool (Claude Code หรือตัวที่คุณใช้) แล้วสั่งด้วย prompt นี้ ก็อปไปวางได้เลย
Prompt (ก็อปไปวางได้เลย)แปลไทยสั้นๆ ว่าเราสั่งอะไรมันบ้าง: โหลดเฟรมทั้งหมดล่วงหน้า, ผูกตำแหน่ง scroll เข้ากับเลขเฟรม, ตรึง canvas ไว้ระหว่างเล่น, ให้ลื่นไม่กระตุก, รองรับมือถือ และส่งมาเป็นไฟล์เดียวจบ
Dewvikoตัวอย่างที่เพื่อนๆ เลื่อนเล่นด้านบน ผมก็ทำด้วย prompt แนวนี้แหละครับ ต่างแค่เฟรมของผม generate จากสคริปต์แทน Google Flow เพราะอยากได้กราฟิกสีแบรนด์ตัวเอง ขั้นตอนที่เหลือเหมือนกันเป๊ะ
05สรุป + ไอเดียเอาไปใช้
เอาไปใช้กับ: หน้า product ที่อยากโชว์ของ (สินค้า กล่อง แพ็กเกจ), หน้า portfolio ที่อยากให้คนหยุดดู, landing แคมเปญ, หรือหน้า about ที่เล่าเรื่องแบรนด์เป็นซีน
ข้อควรรู้: [1] จำนวนเฟรมยิ่งเยอะยิ่งลื่นแต่หน้าก็ยิ่งหนัก ผมแนะนำ 30-60 เฟรม บีบเป็น JPG คุณภาพ ~80 [2] scroll-linked sequence เป็นเทคนิคจริงที่เว็บใหญ่ระดับ Apple ใช้ในหน้า product ของเขา [3] บนมือถือ ทดสอบด้วยนิ้วจริงก่อนปล่อยเสมอ
สรุปแบบดิววิโกะของแบบนี้เมื่อก่อนผมเห็นแล้วคิดเลยว่าต้องเป็น dev สายหน้าเว็บตัวท็อปถึงทำได้ พอแกะออกมาแล้วมันคือการต่อ tool 4 ขั้น ผมนี่ อ้าว แค่นี้เองเหรอ 555
ใครเอาไปใส่เว็บตัวเองแล้ว ส่งลิงก์มาโชว์กันหน่อยนะครับ อยากเห็นว่าเพื่อนๆ เอาไปเล่นท่าไหน
อยากได้ guide แบบนี้อีก?
ผมเขียนเรื่อง AI ใช้ได้จริงกับงานประจำวัน ทั้งเว็บ ภาพ วิดีโอ automation
ใส่อีเมลไว้ เดี๋ยวส่งของใหม่ให้ถึงกล่องเลยครับ