Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Webmaster Tip การทำภาพเงาสะท้อนง่ายๆ ...
Maple Avatar ห้องแต่งตัวใหม่วิธีการเขียน Blog ส่วนตัววิธีโพสคลิปจาก Youtubeตารางข้อมูล เครดิต + Moneyวิธีการโพสกระทู้แบบรวดเร็ว
ดู: 9937|ตอบ: 3
go

การทำภาพเงาสะท้อนง่ายๆ

Rank: 9Rank: 9Rank: 9

โพสต์เมื่อ 2-1-2009 12:51 |แสดงโพสต์ทั้งหมด

 

reflectpic.jpg

 

จากที่เคยทำภาพเงาสะท้อนน้ำด้วย 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 ได้ ...

 

ขอปัญญาเกิดแด่ท่าน

ไทยกราฟ ดอท คอม

Rank: 2

โพสต์เมื่อ 18-11-2010 16:25 |แสดงโพสต์ทั้งหมด
งงแฮะ แต่ก็ขอบคุน

Rank: 5Rank: 5

โพสต์เมื่อ 28-12-2010 15:09 |แสดงโพสต์ทั้งหมด
อาจจะไม่เนียนแบบเทพ แต่ก็ใช้ได้ครับ

Rank: 2

โพสต์เมื่อ 12-10-2011 16:12 |แสดงโพสต์ทั้งหมด
สวยมากค่ะ จะพยายามหัดทำดูค่ะ

Thaigraph

GMT+7, 16-7-2019 11:01 , Processed in 0.057723 second(s), 21 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc. Thai Language by DiscuzThai! Team.

Top 10 Best Sellers in Clothing for 2017 Top 10 Best Sellers in Clothing Best Sellers in Clothing
Top 10 Best Sellers in Books reviewer 2017 Top 10 Best Sellers in Books Best Sellers in Books