|
|
---|
壹、報導前言: 我們經常會看到許多商業網站,為產品照片製作出倒影特效,其目的就是提高產品的價值感及不一樣的效果外觀。 自從 Apple 電腦開始使用 Cover Flow 之後,倒影變的很流行,倒影也是一種增加平面物體立體感最簡單的方式。 倒影效果照片 (Reflection) 也可稱為鏡面反射圖像 (Mirror Effect),以現在的科技已有很多方式可以快速產生。 製作倒影特效與水波倒影兩者有點不一樣,前者屬於靜態的倒影特效,後者屬於含有靜態或動態的水波倒影效果。 要製作這樣的鏡射倒影或水波倒影效果,並不會很難或很麻煩,今天就為各位介紹幾種特殊的製作方式與快速要領。 製作這些特效,大多得使用專業級的美工繪圖軟體,當然也可以使用 JavaScript 程式或線上產生器 Generator。 網頁研習室 - 電子報系列報導,就是長期免費的為大家提供網站上必用的各種實用工具與學習特殊技巧的園地。 強烈建議想好網頁製作朋友,不論你使用任何網頁編輯器,學會最基本的 HTML 標籤,絕對能提昇你的網頁水準。 聲明:非本站付費教學學會員,站長因限於時間與工作,無法提供線上諮詢服務,有需要者請加入教學會員,謝謝支持。 這一篇我們就來講解怎麼作這種倒影,為各位逐一介紹這些運用方式與技巧: |
貳、使用 Reflection.js 自動產生倒影 JavaScript 程式: Reflection 2.0 是能夠讓圖片自動產生倒影的 JavaScript 程式,它能夠與背景顏色融為一體,檔案確只有 5 KB。 自動產生倒影 Reflection.js 特性如下: 它支援大多數瀏覽器。 有趣,易於實現!只需添加 class="reflect" 到您的圖像即可。 可自動與背景顏色或圖像融合。 很容易的改變反射的高度和不透明度。 經由 JavaScript 程式可以反應用戶的操作。 在舊的瀏覽器會降低,他們不會注意到的事情! Reflection.js 程式的檔案只有 5 KB 而已! 完成範例與詳細介紹 Go 。 |
參、捌款在線圖片(文字)倒影生成器: 01.Reflectz。 02.Picreflect。 03.Reflection。 04.WaveMyPic。 05.Wet Floor Maker。 06.watereffect。 07.Web2.0 stylr。 08.Cool Image Effect。 完成範例與詳細介紹 Go 。 |
肆、使用 Image Flip 為圖片加上倒影和動畫效果: 這是使用 jQuery 程式,讓圖像產生翻轉的視覺效果。 範例一(倒影效果翻轉):記得點擊圖檔看看喔 Go 範例二(垂直翻轉效果):記得點擊圖檔看看喔 Go 請記得按瀏覽器的檢視 ![]() 創建者網站: Go |
伍、使用 CSS + JavaScript 製作圖片倒影效果: 使用 IE 特有濾鏡: Go 。 使用 CSS + JavaScript: Go ,你也可以改變倒影角度 Go 或 Go 。 使用 DHTML Scripts: Go ,你也可以將水波倒影放於右側 Go 。 使用 Interactive DHTML: Go 。 |
陸、使用 Java Applet 製作水波倒影特效: 祇要使用下面這幾段語法及檔案,就可以快速製作一個水波倒影特效。 <applet code="lake.class" width="80" height="150"> <param name="image" value="user.png"> <param name="href" value="01.htm#dd"> </applet> 完成範例與詳細介紹 Go 。 |
柒、使用 Reflection generator V2.6 圖文處理倒影軟體:(很抱歉!僅提供完成範例) 想把你的圖片做成美麗的水中倒影嗎?想有一種在水邊的感覺嗎?那麼就不要錯過這個軟體了。 【軟體名稱】:Reflection generator V2.6 【軟體分類】:圖文處理 \ 水波倒影動畫製作 【軟體性質】:免費軟體 \ 台灣正體 【檔案大小】:531 KB (543,752 位元組) 【下載位置】: Go 1 、 Go 2
完成範例及免責聲明介紹 Go 。 |
捌、使用 Sqirlz Water Reflections 2.5 水中倒影特效軟體:(很抱歉!僅提供完成範例) 想幫您的圖片加上水波倒影、下雨或是下雪的效果呢? Sqirlz Water Reflections 可以幫您輕鬆做到,這是一款圖片加工軟體,可以幫您的圖片加入水波等特效,並且能存成 flash、avi 或是 gif 的檔案格式。 覺得您的照片太單調了嗎?快來試試這款 Sqirlz Water Reflections 吧。 【軟體名稱】:Sqirlz Water Reflections 2.5 【軟體種類】:圖片工具 (綠色版) 【軟體授權】:免費 【軟體語言】:繁體中文 【運行環境】:Windows XP, Windows Vista 【軟體網站】: Go 【下載位置】: Go 1 、 Go 2
完成 Flash 範例介紹 Go 。 |
玖、如何取得: |
拾、結論與建議: |