LevelUp! Studio » animated https://blog.levelup.in.th Experience the new world. Fri, 26 May 2017 10:06:07 +0000 th hourly 1 http://wordpress.org/?v=3.8.1 การผูก bone กับภาพเข้าด้วยกันใน Spine https://blog.levelup.in.th/2016/06/28/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%9c%e0%b8%b9%e0%b8%81-bone-%e0%b8%81%e0%b8%b1%e0%b8%9a%e0%b8%a0%e0%b8%b2%e0%b8%9e%e0%b9%80%e0%b8%82%e0%b9%89%e0%b8%b2%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2%e0%b8%81/ https://blog.levelup.in.th/2016/06/28/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%9c%e0%b8%b9%e0%b8%81-bone-%e0%b8%81%e0%b8%b1%e0%b8%9a%e0%b8%a0%e0%b8%b2%e0%b8%9e%e0%b9%80%e0%b8%82%e0%b9%89%e0%b8%b2%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2%e0%b8%81/#comments Tue, 28 Jun 2016 11:03:29 +0000 http://blog.levelup.in.th/?p=5613  

หลังจากเราได้รู้วิธีสร้าง skeleton กันไปแล้ว ต่อมาเราจะเรียนรู้วิธีผูก skeleton กับภาพเข้าด้วยกัน

1 เตรียมภาพคาแรคเตอร์ที่เราต้องการทำอนิเมท

sample27a

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

sample27b

3 เปิด Spine ขึ้นมา ที่เมนู Image นี่เป็นตัวที่จะชี้ไปยังโฟลเดอร์ภาพต้นทาง โดยเราจะเลือกโฟลเดอร์ที่ Browse

sample27c

4 เมื่อเลือกโฟลเดอร์ต้นทางแล้ว รายชื่อภาพในโฟลเดอร์จะแสดงขึ้นมา ไอคอนสีแดงคือภาพที่ยังไม่ถูกใช้ในโปรเจค ส่วนภาพที่ถูกใช้แล้วจะแสดงด้วยสีเขียว

sample27d

5 ลากไฟล์ลงมาบน work space เรียงลำดับบนล่างที่ Draw Order

sample27e

Tip : เราสามารถใช้สคริปของโฟโตชอปหรืออิลลัสที่ทาง Spine แถมมา สร้างไฟล์ json ที่ระบุตำแหน่งและลำดับเลเยอร์ของภาพชิ้นส่วนแต่ละชิ้น และ import data เข้ามาได้ โดยกดที่นี่ โดยภาพที่ถูกอิพอร์ตเข้ามาจะเรียงลำดับบนล่างแบบเดียวกับในไฟล์โฟโตชอปหรืออิลลัสต้นฉบับ

sample27f

6 สร้าง bone ตามชิ้นส่วนของตัวละครโดยคำนึงตามวิธีดังนี้ http://goo.gl/VyMiY9

sample27g

7 เมื่อทำแล้ว ชิ้น bone และชิ้นของภาพจะถูกแสดงไว้ที่นี่

sample27h

8 เราสามารถคลิกเมาส์ลากชื่อไฟล์ภาพแต่ละชิ้นเข้าไปในชิ้น bone

sample27i

9 เมื่อเราขยับ/ หมุน/ ย่อ/ ขยาย bone แต่ละชิ้น ภาพที่ผูกอยู่ก็จะขยับตามไปด้วย

sample27j

]]> https://blog.levelup.in.th/2016/06/28/%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%9c%e0%b8%b9%e0%b8%81-bone-%e0%b8%81%e0%b8%b1%e0%b8%9a%e0%b8%a0%e0%b8%b2%e0%b8%9e%e0%b9%80%e0%b8%82%e0%b9%89%e0%b8%b2%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2%e0%b8%81/feed/ 0 เปิด Animated GIF เป็น frame ด้วย Photoshop https://blog.levelup.in.th/2011/02/21/import-animated-gif-to-photoshop%e0%b9%80%e0%b8%9b%e0%b8%b4%e0%b8%94-animated-gif-%e0%b9%80%e0%b8%9b%e0%b9%87%e0%b8%99-frame-%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-photoshop/ https://blog.levelup.in.th/2011/02/21/import-animated-gif-to-photoshop%e0%b9%80%e0%b8%9b%e0%b8%b4%e0%b8%94-animated-gif-%e0%b9%80%e0%b8%9b%e0%b9%87%e0%b8%99-frame-%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-photoshop/#comments Mon, 21 Feb 2011 15:57:35 +0000 http://blog.levelup.in.th/?p=851 ปัญหาหลักๆในการที่จะ edit รูป animated gif แบบรูปด้านล่างนี้
ที่หลายๆคนมักจะเจอนะครับ ก็คือเปิดมันใ้้ห้ออกมาเป็น frame ๆไม่ได้
พอลากไฟล์ .gif เข้าไปใน photoshop ทีไร มันก็ขึ้นหน้าต่างนี้ขึ้นมา
แล้วภาพ .gif ของเราก็กลายเป็นภาพเดียวตลอดเลย
ถ้าเป็นเมื่อก่อนก็ไม่มีปัญหาหรอกครับ ถ้าเราัยังมีเจ้า Imageready อยู่
แต่ ณ วันนี้(CS3+ มั้ง) เขาก็ได้จากเราไปแล้วครับ
แต่ว่าเราก็ยังมีความหวังอยู่ครับ วิธีการนั้นก็ไม่ได้ยากเลยครับ แค่ไม่รู้เท่านั้นเอง
วิธีการคือ
1. ไปที่ File > Import > Video Frames to Layers
2. จากนั้น Photoshop ก็จะขึ้นหน้าต่างเลือกไฟล์ที่จะเิปิดมาครับ
ให้เราเลือกไปที่ Folder ที่มีไฟล์ .gif ของเราอยู่ แต่เมื่อเข้าไปถึงก็จะพบว่าไม่มีไฟล์ของเราให้เลือก
แถมกดไปที่ File type: ก็ไม่มีให้เลือกอย่างอื่นอีกต่างหาก
3. ถึงขั้นนี้แล้วเราก็อย่างไปยอมครับ พิมพ์ชื่อไฟล์ของเราเข้าไปดื้อๆเลย!
เมื่อกด Load ปุปเราก็จะได้ของที่เราอยากได้ครับ ไฟล์ gif ที่แบ่งออกมาเป็น frame แล้ว
]]> https://blog.levelup.in.th/2011/02/21/import-animated-gif-to-photoshop%e0%b9%80%e0%b8%9b%e0%b8%b4%e0%b8%94-animated-gif-%e0%b9%80%e0%b8%9b%e0%b9%87%e0%b8%99-frame-%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-photoshop/feed/ 2