關於本報

網頁研習室【網頁製作系列報導】
報主:李文能
創刊日期:2002-06-25
發報頻率:月刊
訂閱人數:6,166
官網:
http://www.webpage.idv.tw/maillist/

近期電子報


訂閱便利貼


將貼紙語法置入您的網站或部落格當中, 訪客可以輸入mail取得認證信,並按下確認連結後, 快速訂閱您的報紙。
預覽圖
訂閱網頁研習室【網頁製作系列報導】報
網頁研習室【網頁製作系列報導】
-----------------------------------------------------------------------------------------------------
Plurk FaceBook Twitter 收進你的MyShare個人書籤 MyShare
  顯示內嵌語法

網頁研習室【網頁製作系列報導】
發報時間: 2010-02-27 11:00:00 / 報主:李文能
[公益聯播]官網首頁
本期目錄
壹、報導前言:
貳、使用 Reflection.js 自動產生倒影 JavaScript 程式:
參、捌款在線圖片(文字)倒影生成器:
肆、使用 Image Flip 為圖片加上倒影和動畫效果:
伍、使用 CSS + JavaScript 製作圖片倒影效果:
陸、使用 Java Applet 製作水波倒影特效:
柒、使用 Reflection generator V2.6 圖文處理倒影軟體:(很抱歉!僅提供完成範例)
捌、柒、使用 Sqirlz Water Reflections 2.5 水中倒影特效軟體:(很抱歉!僅提供完成範例)
玖、如何完整取得所有資料:
拾、結論與建議:
壹、報導前言:
我們經常會看到許多商業網站,為產品照片製作出倒影特效,其目的就是提高產品的價值感及不一樣的效果外觀。
自從 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
請記得按瀏覽器的檢視肆、使用 Image Flip 為圖片加上倒影和動畫效果:原始碼查看它是怎麼做出來了。
創建者網站: 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
注意:本段教材除教材會員可完整取得及教學會員可接受線上指導外,訪客與訂閱戶請自行參考所提供網址免費學習

玖、如何完整取得所有資料:
更多 Photoshop、PhotoImpact、Silverlight、Word 2007 等相關教學,教材或教學會員請打開 ptoto/01/say.txt 檔案參考研習。
你想學習與取得這份完整報導資料嗎?你學習上有困難嗎?您想永久長期取得網頁研習室有關網頁製作教材嗎?
如果您想完整取得電子報等所有檔案資料,我們提供燒錄光碟片給您 Go
凡加入教學會員者,就有機會獲得半年期線上指導、所有報導完整的資料光碟乙片及 10 MB 主機空間。
教材詳細內容:語法教學第一電子報第二電子報第三期電子報網頁圖窟
為讓您學習不終斷,即日起推出凡參加教學會員或購買教材會員,可加選第四期電子報報導畢後補送完整教材一片!
凡參加教學會員 + 第四期電子報者,即日起贈送無廣告快速 10 MB 主機空間,讓您更輕鬆學習網頁製作。
特別聲明:本站教學使用軟體或檔案,著作權與版權均屬原創公司所有,屬完全免費性質,不含於教學 (材) 費用內。
拾、結論與建議:
本站所有報導資料,歡迎網友加入鏈結或轉載內容,惟請保留文章完整,並註明此 引用來源 ,謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿,絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會 HTML 語法 ,她真的簡單易學,懂了她您就能駕馭她,讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質, 索取教材資料 屬個人自由意願,而回饋給您的光碟片,則是我們的誠意而已
一篇保證前所未見的 HTML 教學課程,絕對是您學習 HTML 的好教材,強烈建議您進入實際體驗一下。
本電子報報導資料,未來將繼續每隔 30 日發表一次,以嘉惠更多想學會 HTML 網友,歡迎 繼續訂閱
本報導內容或資料,因限人力、時間,非教學會員,不接受任何疑惑解答,敬請見諒。
推薦訂閱
介紹一個免費資訊與網路新知網站@【網頁研習室【網頁製作系列報導】】
「邊看電視,邊購物」的電視互動應用程式@【資策會 FIND科技報】
轉寄『為你的產品照片製作倒影特殊效果』這期電子報

寄信人暱稱  寄信人email
收信人暱稱  收信人email

  • 社群留言
  • 留言報主