จากที่เคยทำภาพเงาสะท้อนน้ำด้วย photoshop วันนี้เรามาทำภาพเงาสะท้อนน้ำโดยการใช้ Reflection.js ทำให้ Effects มาสวยงามและสามารถปรับ option ได้อีกด้วยเช่นความโปร่งใสของเงา ขนาดเงาสะท้อนเป็นต้น เอาหละเรามาเริ่มทำกันเลย
ขั้นตอนที่1.
ให้เข้าไปเวปเจ้าของโปรแกรมก่อนโดยคลิ๊กไปที่
http://cow.neondragon.net/stuff/reflection/
แล้วทำการดาวโหลดสคริ๊บมาโดยคลิ๊กที่
http://cow.neondragon.net/stuff/reflection/reflection.zip
หรือจากไทยกราฟ http://www.thaigraph.com/training/jsreflect/reflection.zip
ขั้นตอนที่2.
ให้ทำการแตกไฟล์ reflection.zip แล้วจะเห็นมีหลายไฟล์ด้วยกัน ตรงนี้จะเป็นพวกแนวทางปรับแต่งตัวอย่างตัวสำคัญคือไฟล์
reflection.js
ขั้นตอนที่3.
ทำการติดตั้งโคส javascripts ใว้ที่หน้าเวปเราโดยใส่โคสใว้ด้านล่าง <title></title> ดังตัวอย่าง
<head>
<title>Reflection.js Testsuite</title>
<script type="text/javascript" src="reflection.js"></script>
ขั้นตอนที่4.
ในการนำไปใช้โดยทำการแทรกโคสลงใน tag img โดยใส่โคสคำว่า class="reflect" ลงไปใน tag img ดังตัวอย่าง
<img src="example.jpg" class="reflect" alt="" />
(ถ้าอยากให้ภาพไหนในเวปเราติด reflect ก็ใส่โคสไปดั่งตัวอย่าง)
ขั้นตอนที่5.
ขั้นตอนที่ 4 เราก็จะได้ภาพเขาสะท้อนสวยงามหละ ทีนี้ก็มาปรับแต่งตามที่ต้องการ เช่นทำให้เงาสะท้อนจางต้องใส่โคสแบบไหน หรือ ปรับขนาดเขาสะท้อนเป็นต้น
5.1 ทำภาพเขาสะท้อนให้สูงหรือสั้นก็เปลี่ยนจาก class="reflect" ให้เป็น class="reflect rheight20" โดยใส่ค่าลงไปในที่นี้จะใส่ 20
<img src="example.jpg" class="reflect rheight20" alt="" />
5.2 ทำภาพเงาสะท้อนให้เข้มหรือจางลงโดยเปลี่ยนจาก class="reflect" ให้เป็น class="reflect ropacity20" โดยค่าความเข้มจางเริ่มต้นที่ 20
หรือจะปรับตามที่เราต้องการ
<img src="example.jpg" class="reflect ropacity20" alt="" />
5.3 ถ้าต้องการปรับทั้งความสูงและเข้มจางพร้อมกันก็ใส่โคสผสมไปได้เลยจาก class="reflect" มาเป็น
class="reflect rheight20 ropacity20" ดังตัวอย่าง
<img src="example.jpg" class="reflect rheight20 ropacity20" alt="" />
คลิ๊กที่นี่เพื่อชมตัวอย่าง effects
เป็นไงขอรับไม่ยากเลยใช่ไหม แค่ใส่ตัว reflection.js ตัวเดียวถ้าจะต้องการให้ effects เกิดกับรูปภาพก็ใส่ค่าตามขั้นตอนที่5 ได้เลย
ไม่ยากกว่าที่คิดใช่ไหม ...
สรุป ... Effects นี้มีข้อดีคือสะดวกรวดเร็วและมีความโปร่งใสมองเห้นพื้นหลังทำให้ดูสมจริงยิ่งขึ้น ข้อเสียคือไม่สามารถ save เป็นภาพได้เพราะ เงาที่เกิดไม่ได้เป็นภาพรวมกับภาพหลังแต่เกิดจากการสร้าง Effects ด้วยไฟล์ js เท่านั้น ไม่เหมือนเราทำใน photoshop เราสามารถใส่ Effects และรวมให้เป็นภาพๆ หนึ่งได้สามารถ save ได้ ...
ขอปัญญาเกิดแด่ท่าน
ไทยกราฟ ดอท คอม | 
สมาชิก VIP (รายเดือน)
โพสต์เมื่อ 2-1-2009 12:51
โพสต์เมื่อ 18-11-2010 16:25
