การใช้ Effect Outer Glow สร้างเอฟเฟ็คเวทมนตร์ by

31
Jan
0

เมื่อเราวาดภาพตัวละครเสร็จแล้ว เราอยากใส่เอฟเฟ็คจ๊าบๆให้กับตัวละครของเรา เราสามารถทำได้หลายวิธี โดยวิธีง่ายๆอย่างหนึ่งคือ Effect Outer Glow

1 วาดตัวละครโดยคำนึงถึงแสงจากเอฟเฟ็คที่เราจะใส่่ที่กระทบลงบนวัตถุแล้ว จากภาพจะเห็นแสงจากมือที่กระทบลงบนใบหน้าและเสื้อผ้า

sample33a

 

 

2 ใช้สีสว่างวาดเอ็ฟเฟ็คลงบนภาพ โดยคำนึงถึงไดเร็คชั่นของภาพ

sample33b

 

 

 

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

sample33c1

sample33c2

 

4 ใส่ Effect Outer Glow ให้กับเลเยอร์ทั้ง 2 กำหนด blend mode เป็น overlay กำหนด opacity และ size พองาม

sample33d

 

5 เติมเส้นแสงเล็กๆและลูกแสงเพื่อเพิ่มลูกเล่นให้กับเอฟเฟ็ค ใส่ Effect Outer Glow พองาม

sample33e

 

6 งดงาม

sample33f

 

วิธีนำ animation จาก Spine ไปใส่ใน vdo (Adobe Premier) by

29
Jan
0

แม้ว่าการทำ 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

29
Jan
1

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

29
Feb
0

ใน 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 ได้ในตัวครับ

รูปก่อนทำ Anti-Alias

รูปก่อนทำ 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)” />

บรรทัดเดียวก็ “เอาอยู่” ละครับ :D ชีวิตง่ายขึ้นเยอะจริงๆ

รูปหลังทำ Anti-Alias

รูปหลังทำ Anti-Alias

 เราชนะรอบ 4 | ยืมเงิน 3000 ด่วน | แอพกู้เงิน | แอพเงินด่วน | สินเชื่อออนไลน์อนุมัติทันที | Site Map | กู้เงินก้อน | กระเป๋าตัง | thisshop และ ยืมเงินฉุกเฉิน 5000 ด่วน