การใช้ Effect Outer Glow สร้างเอฟเฟ็คเวทมนตร์ by Tua Poonsurapun
Jan0
เมื่อเราวาดภาพตัวละครเสร็จแล้ว เราอยากใส่เอฟเฟ็คจ๊าบๆให้กับตัวละครของเรา เราสามารถทำได้หลายวิธี โดยวิธีง่ายๆอย่างหนึ่งคือ Effect Outer Glow
1 วาดตัวละครโดยคำนึงถึงแสงจากเอฟเฟ็คที่เราจะใส่่ที่กระทบลงบนวัตถุแล้ว จากภาพจะเห็นแสงจากมือที่กระทบลงบนใบหน้าและเสื้อผ้า
2 ใช้สีสว่างวาดเอ็ฟเฟ็คลงบนภาพ โดยคำนึงถึงไดเร็คชั่นของภาพ
3 เปิดเลเยอร์ใหม่ใต้เลเยอร์ในข้อ 2 ใช้สีที่เราต้องการให้เป็นแสง ในที่นี้คือสีฟ้า วาดเอฟเฟคลงไปอีกชั้นหนึ่ง
4 ใส่ Effect Outer Glow ให้กับเลเยอร์ทั้ง 2 กำหนด blend mode เป็น overlay กำหนด opacity และ size พองาม
5 เติมเส้นแสงเล็กๆและลูกแสงเพื่อเพิ่มลูกเล่นให้กับเอฟเฟ็ค ใส่ Effect Outer Glow พองาม
6 งดงาม
วิธีนำ animation จาก Spine ไปใส่ใน vdo (Adobe Premier) by akara
Jan0
แม้ว่าการทำ Animation ในโปรแกรม Spine จะมี default background เป็น transparent เมื่อนำไปใช้ใน unity ก็ไม่จำเป็นต้องทำอะไรเป็นพิเศษเพื่อให้พื้นหลังเป็น transparent
แต่ว่าถ้าต้องการนำไปใส่ใน vdo แล้วจะทำไม่ได้ เพราะเมื่อ export จาก spine เป็น vdo แล้ว พื้นหลังจะไม่เป็น transparent ทันที ดังนั้นให้เราเลือกสี bg ตอนที่จะ export เป็นสีอะไรก็ได้ที่ไม่ชนกับสีของตัว animation เอง เช่น สีเขียวสดๆ สีชมพูสดๆ (ในรูปตัวอย่างใช้สีเขียว #00FF00)
เมื่อเรานำ vdo ที่ export มาแล้วไปใส่ใน vdo editor เช่น adobe premier จะได้ลักษณะดังรูป
ใช้ effect Keying > Ultra Key
ตั้งค่า Ultra key ตรง Key color เป็นสีเดียวกับ bg ที่ export มาจาก spine ขั้นตอนนี้จะใช้ตัวดูดสีก็ได้
เท่านี้ก็เสร็จเรียบร้อย
[photoshop]วิธีการทำหมอกควัน by akara
Jan1
1.ลาก Selection เป็นโค้งๆยังไงก็ได้
2.เท Gradient ขาว-ดำ ในแนวตั้ง
3.Filter > Distort > Wave
4.ปรับค่าต่างๆแล้วลองกดปุ่ม Randomize ดู
5.เมื่อทำคำสั่ง Wave เสร็จแล้ว เลือกคำสั่ง Edit > Fade Wave
ปรับ opacity ไปที่ 50%
6.ทำคำสั่ง Wave, Fade Wave ไปเรื่อยๆจนกว่าจะพอใจ
7.เวลาใช้งานจริงให้ปรับ layer เป็น Screen เพื่อเอาสีดำของหมอกออกไป
หากต้องการให้หมอกชัดเจนขึ้น สามารถปรับ Level ได้
วิธีทำให้รูปที่โหลดมาโดย tag mx:Image เป็น anti-alias โดยอัตโนมัติ by heha
Feb0
ใน Flex นั้นโดยปกติจะมี tag ที่ใช้โหลดรูปเข้ามาในตัว app ได้อย่างง่ายๆ โดยแค่ใช้
<mx:Image id=”imgReward” source=”image.png” />
ก็สามารถโหลดรูปมาแสดงได้ทันที ไม่ต้องสร้าง Loader มาโหลดให้วุ่นวายถ้าใช้เป็น as3 เพียวๆ และใน Flex 4 จะมี tag
<s:BitmapImage ai:embed=”1″ smooth=”true” source=”@Embed(‘image.png’)” />
ใช้โหลดรูปเข้ามาเช่นกัน แถมยังทำ Anti-Alias ให้ด้วย เพียงแต่ว่ามันใช้กับรูปในลักษณะของ Embed มาตั้งแต่ตอน compile ได้เท่านั้น ไม่สามารถสั่ง Load path ที่ต้องการขณะ Run-time ได้จึงเป็นที่มาของปัญหานี้ ในบทความนี้เราจะแนะนำวิธีทำให้ <mx:Image> สามารถทำ Anti-Alias ได้ในตัวครับ
ก่อนอื่นให้สร้าง function ขึ้นมาใส่ไว้ใน class ที่เก็บ function ที่ใช้งานบ่อยๆ ของเราเอง (มันใช้บ่อยแน่ๆ ละครับ) แล้วใส่ function ดังนี้ (ของผมใช้ชื่อ class EffectHelper)
public static function smoothImage(evt:Event):void{
var myBitmap:Bitmap = ((evt.target as Image).content as Bitmap);
if (myBitmap != null) {
myBitmap.smoothing = true;
}
}
ทีนี้ตอนเรียกใช้งาน ก็เรียกแบบนี้ครับ
<mx:Image id=”imgReward” source=”image.png” complete=”EffectHelper.smoothImage(event)” />
บรรทัดเดียวก็ “เอาอยู่” ละครับ ชีวิตง่ายขึ้นเยอะจริงๆ