前言:想要寫出一篇令人眼前一亮的文章嗎?我們特意為您整理了5篇gif動畫范文,相信會為您的寫作帶來幫助,發(fā)現(xiàn)更多的寫作思路和靈感。
醒目的gif動畫電子郵件不會使你的用戶注意力被分散,還能很好地補(bǔ)充了營銷信息。國內(nèi)最大的郵件營銷服務(wù)商webpower中國區(qū)(我工作的地方),做了許多關(guān)于如何有效地在電子郵件內(nèi)容中使用GIF的實(shí)踐及策略探索,以下是8個使用GIF動畫后郵件營銷效果表現(xiàn)突出的例子,以及5個幫助你快速掌握GIF應(yīng)用的秘訣,趕快一起來看看吧。
1、講故事
當(dāng)洛杉磯的設(shè)計師Paul Marra搬遷陳列室到一個新的位置,他使用GIF動畫去講述整個故事,從地圖上的線路軌跡到“We moved!”橫幅,再到新的地址列表。整個郵件顯得輕快,時尚,溫馨。太平洋保險的例子,也是告訴我們,有時候一個枯燥的公式化的通告,也能變得有趣!
2、把注意力吸引到最重要的事情
Method,J..Jill非常善于產(chǎn)品布局、文本樣式及空間的綜合協(xié)調(diào)布局,以在郵件中創(chuàng)造輕快或成穩(wěn)的感覺。在以下電子郵件中,它們分別使用GIF動畫著重突出其折扣促銷、價格優(yōu)惠。這種微妙的處理,體現(xiàn)了審美和促銷推廣的巧妙融合。
3、展示多個產(chǎn)品
如果你是一個在線零售商,GIF動畫可以改變電子郵件用戶與你的產(chǎn)品進(jìn)行互動的方式??紤]模仿下面2個例子:這個動畫形象是不是遠(yuǎn)比靜態(tài)網(wǎng)格的產(chǎn)品陳列更引人注目?
4、營造現(xiàn)場直播效果
及時直播分享來自社交等渠道的互動信息,不但為品牌活動的多渠道聲音擴(kuò)散吶喊助力,最重要的是品牌與用戶的互動性增強(qiáng),渠道與渠道間聯(lián)系更加緊密,郵件頁面表現(xiàn)更為生動活潑,用戶體驗(yàn)也更好,進(jìn)一步試想,當(dāng)用戶在郵件中正好看到了自己的留言,一定會大叫,“哇,是我耶”。
5、裝飾及活躍頁面內(nèi)容
下面案例,只是利用Gif動畫裝飾及活躍郵件頁面內(nèi)容的表現(xiàn)方式之一,如何突破傳統(tǒng)靜態(tài)平面、毫無新意的頁面設(shè)計,把Gif動畫最佳的運(yùn)用到你的設(shè)計創(chuàng)新中,制造驚嘆、醒目、獨(dú)一無二的用戶體驗(yàn)感,是郵件營銷設(shè)計人員們新的一年的必修課之一。
郵件營銷,及郵件與短信、微信、APP等等多渠道個性化會員營銷服務(wù)商webpower中國區(qū)提供5個在郵件營銷中應(yīng)用GIF動畫的快速提示:
①保持動畫簡單。如果能以四幀同樣說清楚八幀的事情,那么選擇用更短的。
②請確保動畫使你的郵件營銷活動加強(qiáng)或增加亮點(diǎn),而非僅僅作秀。
③考慮結(jié)合GIF動畫與Flash。如果在您的網(wǎng)站有一個引人注目的Flash演示文稿,那么把它轉(zhuǎn)換成一個簡單的GIF動畫版本。然后,在電子郵件中加入這個GIF,并鏈接到Flash版本的頁面。
一、利用Flash制作動畫
Flash 是網(wǎng)頁動畫設(shè)計軟件,隨著不斷升級與完善,其功能也日趨強(qiáng)大,成為專業(yè)化的Web 創(chuàng)作工具,用它可以將文字、圖形圖像、音樂、聲效、動畫等各種富有新意的界面融合在一起,以制作出高品質(zhì)的網(wǎng)頁動態(tài)效果。Flash 中制作動畫,是以“時間軸”為基礎(chǔ)的動畫編制和播放。利用時間軸面板可以查看每一幀的畫面,調(diào)整動畫播放速度,安排幀的內(nèi)容,改變幀與幀之間的關(guān)系。
(一)制作逐幀動畫的步驟
1.在舞臺的第一幀創(chuàng)建對象;2.將某一幀轉(zhuǎn)換為關(guān)鍵幀,在其中創(chuàng)建對象;3.以此類推,把其他的幀轉(zhuǎn)換為關(guān)鍵幀后再創(chuàng)建對象;4.導(dǎo)入聲音文件,結(jié)合動畫成為 MTV。
(二)制作補(bǔ)間動畫的步驟
1.創(chuàng)建元件,在舞臺的第一幀導(dǎo)入元件;2.將某一幀轉(zhuǎn)換為關(guān)鍵幀,改變元件的位置、大小等屬性,以此類推把其他的幀轉(zhuǎn)換為關(guān)鍵幀后再修改元件的屬性;3.在每兩個關(guān)鍵幀中進(jìn)行動作補(bǔ)間或形狀補(bǔ)間;4.導(dǎo)入聲音文件,結(jié)合動畫成為 MTV。
(三)播放動畫的步驟
1.在屬性面板中通過設(shè)置幀頻來調(diào)整動畫的速度;2.將制作好的動畫使用文件菜單中的保存命令,生成擴(kuò)展名為.fla的可編輯文件;3.使用文件菜單中的命令,生成擴(kuò)展名為.swf的文件,打開擴(kuò)展名為.swf的文件進(jìn)行觀看。
(四)動畫的品質(zhì)和特點(diǎn)
Fash 文件較小,是基于矢量圖形的動畫,支持 Alpha 通道,它可以使用Alpha通道定義或控制矢量圖形中色彩的透明度和漸變效果。它還支持導(dǎo)入位圖圖形攜帶的Alpha通道信息。動畫播放時支持事件響應(yīng)和交互功能,一個對象可以有多個事件響應(yīng),事件響應(yīng)由程序代碼實(shí)現(xiàn)。Fash 動畫可以與聲音文件結(jié)合制作出聲形并茂的MTV,而 Fireworks 和 Adobe Image ready 沒有這個功能,只能制作出 GIF 動態(tài)圖片。
二、利用Fireworks制作動畫
Fireworks 是圖形處理軟件,它將位圖與矢量圖形合二為一,它既能處理靜態(tài)圖形圖像,又能制作動畫,由它制作的GIF 動畫是網(wǎng)絡(luò)上應(yīng)用最廣泛的動畫。GIF 動畫是由一系列的 GIF 格式圖像順序播放而成,每一幅 GIF 圖稱為動畫中的一幀,每秒鐘播放動畫的幀數(shù)決定了動畫的流暢程度。
(一)制作逐幀動畫的步驟
1.在畫布中制作第一幀中的畫面;2.選擇窗口菜單中的幀命令,使用幀面板上的選項(xiàng)菜單添加或重置幀,在這一幀的畫布上制作第二個畫面;3.以此類推,在每個幀分別把動畫的每個場景制作出來。
(二)利用元件制作動畫
1.在畫布中制作第一幀中的對象;2.選擇對象,使用修改菜單中動畫命令下的選擇動畫,設(shè)置動畫的參數(shù)并確定;3.對象添加了實(shí)例標(biāo)志,并且自動在“庫”中生成了元件。
(三)播放動畫的步驟
1.使用幀面板的選項(xiàng)菜單中屬性命令修改幀延遲時間,這樣可以調(diào)整動畫的播放速度;2.選擇窗口菜單中的優(yōu)化命令,將導(dǎo)出文件格式設(shè)置成 GIF動畫;3.文件菜單中導(dǎo)出命令,將動畫導(dǎo)出后打開文件觀看動畫效果
(四)動畫的品質(zhì)和特點(diǎn)
GIF 格式動畫是為跨平臺市場開發(fā)的,兼容性好,所有的瀏覽器都支持這種圖像格式。GIF 動畫的圖形格式只支持 256 種顏色,但支持透明,很適合制作網(wǎng)頁上的徽標(biāo)或橫幅。GIF 格式動畫通過優(yōu)化可以減小文件大小。利用元件制作動畫的方法是自動生成元件,而Flash中必須先創(chuàng)建元件后使用元件。
三、利用Adobe Image ready制作動畫
Adobe 公司的 Photoshop 軟件提供了運(yùn)用工具來創(chuàng)建和制作在Web上使用的靜態(tài)圖像的功能,而Image ready軟件提供了和它相同的編輯功能外,還包括了一些工具和調(diào)板,用來進(jìn)行創(chuàng)建動態(tài)的動畫功能。Adobe Image ready 是通過在不同的時間顯示不同的圖層來實(shí)現(xiàn)動畫效果,比起Flash,操作更為直觀而簡便,只要掌握好圖層的編輯方法和不同幀的相關(guān)控制要領(lǐng)就能輕松編輯動畫,可用于普通的動態(tài)網(wǎng)頁制作及較復(fù)雜的影視廣告的后期制作。
(一)制作動畫步驟
1.打開各個幀中需要的圖像,對圖像分別進(jìn)行編輯,再通過Photoshop 工具面板上的“選擇移動工具”按鈕拖拽圖像到新文件中并成為多個圖層;2.調(diào)整圖層中的對象,進(jìn)入 Adobe Image ready 動畫編輯界面,利用Animation 動畫控制板來設(shè)置動畫的幀頻;3.新建多個幀并制作每一個幀的畫面。
(二)播放動畫步驟
1.單擊 Animation 動畫控制板下方的播放按鈕,預(yù)覽動畫的效果;2.將制作好的動畫保存,選擇保存類型為 GIF。
(三)動畫的品質(zhì)和特點(diǎn)
制作GIF 動畫,類似 Fireworks 軟件的使用,但 Image R eady不支持 CMYK 色彩模式,無法進(jìn)行與印刷相關(guān)的圖像操作,它是專門的網(wǎng)絡(luò)圖像處理工具,可以做一些QQ 表情等。我們通過各種工具和參數(shù)可以進(jìn)行精確調(diào)整,在圖像質(zhì)量不明顯削弱的前提下,文件的體積會盡可能的小。
四、利用Dreamweaver制作動畫
在 Dreamweaver 中制作動畫可以采用時間軸和行為互相支持的方法,還可以利用腳本語言編寫程序來實(shí)現(xiàn)動態(tài)效果。
(一)利用時間軸來制作動畫
時間軸與行為結(jié)合制作動畫。時間軸通過隨時間變化改變層的位置、大小、可見性和疊放順序等來創(chuàng)建動畫,網(wǎng)頁設(shè)計者既可以在時間軸中添加行為,也可以使用行為來控制時間軸。1.制作動畫的步驟。新建一個層,在層中插入對象,選擇層厚進(jìn)入時間軸面板,選擇動畫對象條末尾的關(guān)鍵幀,把層移動到動畫結(jié)束位置。2.添加行為的步驟。選擇要添加行為的對象,在行為面板中選擇相應(yīng)的行為命令,設(shè)置觸發(fā)行為的事件。3.播放動畫的步驟。播放磁頭置于首幀,按住時間軸面板中的播放按鈕,預(yù)覽動畫效果。
(二)動畫的品質(zhì)和特點(diǎn)
時間軸和行為互相支持使 Dreamweaver 制作動態(tài)網(wǎng)頁的能力大大加強(qiáng),在一個時間軸中可以同時為多個對象制作時間進(jìn)程,這樣可以實(shí)現(xiàn)多個對象的動態(tài)效果。
(三)利用腳本語言編寫程序來實(shí)現(xiàn)動態(tài)效果
1.利用JavaScript腳本語言編寫程序來實(shí)現(xiàn)動態(tài)效果。JavaScript是通過嵌入在標(biāo)準(zhǔn)的HTML語言中使用的。JavaScript代碼放在<script>與<script>標(biāo)記之間,以便將腳本代碼與HTML標(biāo)記符區(qū)分開來。Script塊可以放在<head>與<head>之間,也可以放在<body>與<body>之間?;窘Y(jié)構(gòu)如下:<script language=“JavaScript”>JavaScript 腳本代碼<script>
2.動畫的品質(zhì)和特點(diǎn)。使用腳本語言與 HTML 結(jié)合使靜態(tài)的網(wǎng)頁變成動態(tài),可以在網(wǎng)頁中建立各種動態(tài)效果,使網(wǎng)頁生動活潑,如飛舞的圖片、彈出式窗口、鼠標(biāo)滾動,自動變色的超級鏈接。當(dāng)需要使用數(shù)據(jù)庫,建立用戶與數(shù)據(jù)庫的信息交互,就要使用服務(wù)器端動態(tài)頁面技術(shù)。
關(guān)鍵詞:GIF;Cinemagraph ;靜態(tài)變動態(tài);摳圖;后期合成
中圖分類號:TP37 文獻(xiàn)標(biāo)識碼:A 文章編號:1009-3044(2016)22-0185-02
GIF是CompuServe公司在1987年開發(fā)的圖像文件格式。但是普通的動態(tài)GIF作品總給人以一種畫面粗糙、畫質(zhì)不清的印象,在大眾審美逐漸提高的今天,普通的動態(tài)效果已不能滿足大家需要,這個時候就需要將以往的動畫形式進(jìn)行改進(jìn)。
1 普通動態(tài)GIF畫質(zhì)創(chuàng)意分析
GIF(Graphics Interchange Format)格式是一種應(yīng)用比較廣泛的動畫格式,支持多平臺,文件容量不大,很適合網(wǎng)絡(luò)的傳輸。常見的有視頻實(shí)時截取GIF、或者是一些小型動態(tài)圖和搞笑短片,得到的效果要不就是畫面質(zhì)量低,要不就是一些缺乏創(chuàng)意制作粗糙、畫質(zhì)不清的動畫效果。
一張照片變成動態(tài)效果,通常的處理方法就是上下左右進(jìn)行位移、放大縮小、淡入淡出等,這樣做出來的動畫,缺乏“生命”缺少創(chuàng)意,隨著大眾審美的不斷提高,人們對畫面質(zhì)感和藝術(shù)追求也有了全新改變,那么我們要用什么樣的方法才能讓它煥發(fā)新的生命,并提升其藝術(shù)價值呢?為了改變以往GIF格式粗糙畫質(zhì)差等給人們的印象,我們將以另一種形式將它呈現(xiàn)出來。
2 用Cinemagraph的形式重新演繹GIF動圖
Cinemagraph是一種基于GIF格式制作的全新的藝術(shù)表現(xiàn)形式,顧名思義cinema是電影graph是圖片,是將動態(tài)效果和靜態(tài)的圖片相結(jié)合。它是一種超越照片,又并非完全是電影的微動照片形式。這項(xiàng)藝術(shù)是來自美國紐約的Jamie和Kevin兩位藝術(shù)家共同的創(chuàng)舉,目前谷歌、Tiffany、Donna Karan等知名品牌都是他們的客戶,除此之外,許多商業(yè)品牌也逐步在將Cinemagraph作品融入在網(wǎng)絡(luò)宣傳之中??梢?,這一藝術(shù)形式已經(jīng)得到了很多網(wǎng)絡(luò)、媒體及品牌的注意,這是任何一個階段的GIF格式作品都沒有達(dá)到過的一種高度。
Cinemagraph對于視頻來說,是縮減了視頻運(yùn)動的信息量,但把注意點(diǎn)集中在某一處細(xì)節(jié),形式感比較強(qiáng),你會發(fā)現(xiàn)畫面中某個重要細(xì)節(jié)在神秘地活動著。知名旅行攝影師Matt Braga發(fā)表文章時說到“要感謝這個叫Cinemagraph的小東西,居然讓一個古老到快要崩潰的動畫格式有了一次新的生命?!痹u論界甚至認(rèn)為Cinemagraph正逐漸將動態(tài)GIF藝術(shù)提升到藝術(shù)品的范疇。
在Cinemagraph的世界里,所有的作品不僅僅是普通的GIF動態(tài)圖片,而是畫面大部分呈現(xiàn)靜止?fàn)顟B(tài),僅某個細(xì)節(jié)之處有著細(xì)膩的動畫,從而營造出奇妙的視覺效果和氛圍。設(shè)計制作Cinemagraph需要分兩個部分,第一部分是設(shè)計,理清思路,因?yàn)槲覀円獙⒁粡?維的照片做出仿3維的效果,就必須了解物體的運(yùn)動規(guī)律和透視關(guān)系,比方說近大遠(yuǎn)小、重疊遮擋、空氣感以及控制景深等。第二部分就是動手制作,我們將會利用Photoshop 以及AfterEffect來完成,將照片當(dāng)中需要變?yōu)閯討B(tài)效果的圖像都分別在Photoshop里摳出來,作為獨(dú)立的一層,再利用After Effect在后期做上一些關(guān)鍵幀動畫,然后再從新擺放它們的空間位置關(guān)系,最后再加上一點(diǎn)點(diǎn)攝影機(jī)的運(yùn)動來完成這一動態(tài)效果。
3 實(shí)現(xiàn)Cinemagraph的步驟
第一步、利用Photoshop進(jìn)行摳像處理并保存
選擇一張照片,以“蕩秋千”為例,將“蕩秋千.jpg”在Photoshop里打開,復(fù)制一層作為背景層,將女孩頭部單獨(dú)分離出來。
將“女孩”從背景中分離出來。利用Photoshop里的“快速選擇工具”進(jìn)行摳像。按住鼠標(biāo)在人物區(qū)域進(jìn)行摳像,按住“ALT鍵”不動,拖動鼠標(biāo)減去不需要扣出的地方,待想要的人物都在選區(qū)內(nèi)以后,點(diǎn)擊右鍵選擇“調(diào)整邊緣”,加一點(diǎn)平滑后點(diǎn)擊確定。復(fù)制一層背景層,取名為“女孩”,再在“女孩”這層點(diǎn)擊右鍵,點(diǎn)擊“選擇反向”按DELETE鍵刪除選區(qū)之外的內(nèi)容,這樣就先扣出“女孩”的部分。
將“女孩”頭部單獨(dú)摳出。復(fù)制“女孩”這一層,取名“女孩頭部”,同樣利用“快讀選擇工具”選擇頭部,將頭部單獨(dú)摳出,在“女孩”這層按DELETE鍵刪除頭部,回到“女孩頭部”,右鍵選擇反向選擇,刪除選擇部分,只留下頭部。
最后處理背景,回到背景層利用仿制圖章工具,將人物的區(qū)域替換成旁邊的空景避免穿幫。最后我們得到了背景的空景層,和人物的單獨(dú)層,把文件保存為PSD格式。
第二步、After Effect進(jìn)行后期的合成處理
Photoshop摳圖的部分已經(jīng)完成,接下來就需要將文件導(dǎo)入到After Effect里面進(jìn)行后期的合成處理,接下來就開始后期合成的部分。
首先將“蕩秋千.psd”導(dǎo)入After Effect,將圖像合成設(shè)置持續(xù)時間設(shè)置為4秒。將關(guān)鍵幀拖動到2秒位置,設(shè)置“女孩頭部”Z軸順時針旋轉(zhuǎn)6度,將關(guān)鍵幀分別拖動到0秒和4秒位置,設(shè)置Z軸旋轉(zhuǎn)保持為0度。
新建一個空白對象(圖層/新建/空白對象),將“女孩”“女孩頭部”“空白1”設(shè)置一個父級關(guān)系。將關(guān)鍵幀拖放到2秒位置,選擇空白對象將“位置”“比例”“X軸旋轉(zhuǎn)”打上關(guān)鍵幀,接著將關(guān)鍵幀分別拖動到0秒和4秒位置,設(shè)置“位置”參數(shù)為(500,307,0),將比例縮小到85,設(shè)置X軸旋轉(zhuǎn)10度。需要注意的是0秒和4秒位置的參數(shù)必須同步。
將“空白1”“女孩”“女孩頭部”進(jìn)行預(yù)合成。選擇“空白1”“女孩”“女孩頭部”點(diǎn)擊快捷鍵(CTRL+SHIFT+C)得到一個新的合成層,這樣動作的部分我們就調(diào)完了。
接下來設(shè)置攝像機(jī)運(yùn)動。把所以圖層的3D圖層打開,新建一個攝像機(jī),在“3D視圖彈出式菜單”選擇“頂視圖”,移動每個層的空間位置,把背景層放最后,“女孩”層放中間?;氐健坝行z影機(jī)”視圖,然后選擇“統(tǒng)一攝像機(jī)”工具,快捷鍵“C ” ,選擇“攝像機(jī)”層,第1秒和第4秒分別打上變換屬性關(guān)鍵幀,再將時間線拉到第2秒,按住鼠標(biāo)右鍵不動向前推移,模擬攝影機(jī)運(yùn)動,按住鼠標(biāo)中鍵可以移動視圖,確定好位置之后,預(yù)覽效果。接下來我們在細(xì)節(jié)上做一些處理,給背景層添加“攝影機(jī)鏡頭模糊”效果,再給模糊半徑打上關(guān)鍵幀,這樣整個效果就完成了。
動態(tài)部分做完,接下來需要渲染輸出成GIF格式的文件。選擇(圖像合成/制作影片),輸出組件選擇無損GIF,設(shè)置輸出路徑,最后點(diǎn)渲染,最后一張GIF動態(tài)圖就制作完成了。
4 結(jié)論
總之,Cinemagraph作品比起靜態(tài)圖片更具時間上的表現(xiàn)力和創(chuàng)意上的新鮮感,比起動態(tài)視頻又具備加載方便、傳播快速的特點(diǎn)。通過專業(yè)的拍攝與專業(yè)的軟件制作保證了作品的質(zhì)量,動態(tài)與靜態(tài)之間的把握是創(chuàng)意的突破口,與創(chuàng)意攝影的結(jié)合、與繪畫的結(jié)合或是運(yùn)用獨(dú)特的拍攝手法都能成為Cinemagraph帶來更多的創(chuàng)意可能性。創(chuàng)意讓我們的生活有了更多色彩,敢于創(chuàng)新敢于實(shí)踐把平時學(xué)到的知識運(yùn)用到實(shí)踐中去,多做多練,知識不是單一的,它是互相聯(lián)系的,讓它在現(xiàn)實(shí)生活中得到充分的應(yīng)用,從而解決一些問題,這才是學(xué)習(xí)的根本目的。
參考文獻(xiàn):
1.1課件編輯器的設(shè)計
該開發(fā)平臺對課件的設(shè)計沒有“合成”或“編譯”等過程,它是對課件資料進(jìn)行組合,就像搭積木一樣,把每一個時間點(diǎn)應(yīng)完成的任務(wù)寫在時間點(diǎn)上就可以了。為了方便組合,我們特設(shè)計了一個課件編輯器。從圖中可看出,該編輯器具有所見之所得的效果,如,在時間點(diǎn)②,顯示2號圖片,播放2.mp3,講解實(shí)驗(yàn)?zāi)康?,延長時間填多少呢?點(diǎn)擊時間點(diǎn)②后面延時計時器的“開始”,就會講解實(shí)驗(yàn)?zāi)康?,講完后,再點(diǎn)擊“結(jié)束”,延長時間18000毫秒就自動填入了;在時間點(diǎn)③,顯示3號圖片,顯示1號GIF動畫,延時15000毫秒,即15秒;在時間點(diǎn)④,顯示4號圖片,消去1號GIF動畫,延時2000毫秒。這個編輯器還有插入幀、刪除幀、設(shè)置幀數(shù)、設(shè)置開始幀以及保存和播放等功能,有了這些功能就可靈活地組合課件,輕松地設(shè)計出所需要的課件。
1.2課件進(jìn)程控制器的設(shè)計課件播放器只能按時間順序號
OrdinalNumber從頭到尾地播放課件資料,完成圖像顯示和語音解說等功能,無法控制播放進(jìn)程,使用起來有點(diǎn)不便。課件進(jìn)程控制器,能有選擇地播放課件內(nèi)容,便于學(xué)生對某些內(nèi)容進(jìn)行反復(fù)性地觀看。利用VB中橫向滾動條控件HscrollBar1,見圖4下部的滾動框,將HScroll1.Max設(shè)為課件的幀數(shù),HScroll1.Min設(shè)為1,拖動滾動滑塊可選擇開始播放的內(nèi)容,點(diǎn)擊講解就調(diào)用主程序從選擇的內(nèi)容開始講解。
2應(yīng)用實(shí)例
2.1雙液系氣—液平衡相圖繪制課件的設(shè)計
該實(shí)驗(yàn)用回流冷凝法測定12個不同濃度的環(huán)己烷-異丙醇溶液的沸點(diǎn)和氣液兩相平衡的組成后,再繪出T-x相圖。實(shí)驗(yàn)牽涉到的儀器多、過程雜、時間長,實(shí)驗(yàn)課講短了,很多問題說不清,講長了,又耽誤做實(shí)驗(yàn)的時間。為了緩解這一矛盾,我們將課件拷給學(xué)生,讓他們自由觀看,一進(jìn)實(shí)驗(yàn)室就做,結(jié)果,效果良好,大部分學(xué)生都能按課件的要求完成實(shí)驗(yàn)任務(wù)。該實(shí)驗(yàn)課件的結(jié)構(gòu),1~2幀講解實(shí)驗(yàn)?zāi)康呐c要求;3~5幀講解實(shí)驗(yàn)原理,其中第5幀,用GIF動畫模擬溶液在沸點(diǎn)儀中平衡和分別取出平衡后氣、液兩相溶液的方法;6~8幀講環(huán)己烷-異丙醇溶液與折射率關(guān)系的標(biāo)準(zhǔn)曲線的繪制的方法,其中第7幀用錄像講解阿貝折射儀的使用方法;9~10幀講解實(shí)驗(yàn)步驟;第11幀講解實(shí)驗(yàn)數(shù)據(jù)處理方法和技巧;12~14幀講解實(shí)驗(yàn)中要注意的問題。用多媒體課件講解實(shí)驗(yàn)比較符合物理化學(xué)實(shí)驗(yàn)教學(xué)的特點(diǎn),圖文聲結(jié)合,能直觀形象地講清實(shí)驗(yàn)?zāi)康暮蛯?shí)驗(yàn)原理,動靜圖像結(jié)合能模擬實(shí)驗(yàn)過程和演示儀器使用的方法,反復(fù)觀看可讓學(xué)生弄懂實(shí)驗(yàn)的各個環(huán)節(jié),從而達(dá)到明明白白做實(shí)驗(yàn)的目的。另外用多媒體課件講解實(shí)驗(yàn),還可擴(kuò)充實(shí)驗(yàn)內(nèi)容,將實(shí)驗(yàn)原理、儀器原理以及問題討論講得更加細(xì)致,使學(xué)生對實(shí)驗(yàn)內(nèi)容有一個更加深入和全面地了解,從而達(dá)到提高學(xué)生探究問題能力的培養(yǎng)的目的。
2.2電極制備和電池電動勢測定課件的更新
該課件的結(jié)構(gòu)如圖6所示,以前使用的是SDC-Ⅱ型的電位差計,現(xiàn)在用的是EM-3C型的,課件更新時,只需修改7~12幀的內(nèi)容就可以了。更新方法是這樣的,先將新的課件資料分別放在Image、GIF、Sound和Video四個文件夾中,然后更改7~12號時間點(diǎn)中各點(diǎn)應(yīng)顯示或播放的資料,再適當(dāng)調(diào)整一下時間間隔就完成了更新任務(wù)。在這一更新過程中,不需對整個課件進(jìn)行重新調(diào)整,只對部分幀進(jìn)行重組,顯得簡捷容易,它體現(xiàn)了開放式課件的優(yōu)勢。
2.3GIF動畫在課件中的作用
GIF動畫能將多幅圖片逐一反復(fù)地顯示在屏幕上。在物理化學(xué)實(shí)驗(yàn)課件開發(fā)平臺中嵌入GIF動畫,具有得天獨(dú)厚的優(yōu)勢,它能模擬如旋轉(zhuǎn)、沸騰、鼓泡以及反復(fù)運(yùn)動等過程的動作或?qū)嶒?yàn)現(xiàn)象,使課件表現(xiàn)更加真實(shí)、設(shè)計更加容易;它能強(qiáng)調(diào)教學(xué)重點(diǎn),用動畫的形式提醒學(xué)生關(guān)注屏幕中某些重要的內(nèi)容;它能增強(qiáng)課件的動感,引起學(xué)生的興趣,提高課件的感染力。例如,在溶液表面張力測定課件中,可用GIF動畫描述“滴液鼓氣氣泡增大壓力增高氣泡逸出壓力降低”這一反復(fù)性的動作,如果平臺中沒有嵌入GIF動畫,對這一反復(fù)出現(xiàn)的實(shí)驗(yàn)現(xiàn)象的描述就復(fù)雜多了;在液體飽和蒸氣壓測定課件中,不銹鋼穩(wěn)壓罐上有3個閥,可用GIF動畫強(qiáng)調(diào)在抽氣、開關(guān)真空泵、檢漏和測量等過程中應(yīng)該開或關(guān)哪一個閥。用動畫強(qiáng)調(diào)的優(yōu)勢是更能引起學(xué)生的注意,從而使學(xué)生看得更明白。
2.4AVI錄像在課件中的作用
AVI是主流視頻文件,WINDOWS能直接播放它。在開發(fā)平臺中嵌入AVI播放器有利于實(shí)驗(yàn)現(xiàn)象的描述、實(shí)驗(yàn)過程的演示,增加學(xué)生的感性認(rèn)識,提高教學(xué)的效果和效率。如燃燒熱測定實(shí)驗(yàn),實(shí)驗(yàn)過程復(fù)雜,實(shí)驗(yàn)步驟較多,總的來說包括四個大的部分,即:壓片、充氧、測量和數(shù)據(jù)處理,在實(shí)驗(yàn)課教學(xué)中,教師要講很長時間,結(jié)果學(xué)生印象模糊,首次實(shí)驗(yàn)往往是以失敗而告終。在我們的課件中將講解與錄像結(jié)合起來,實(shí)驗(yàn)內(nèi)容講完后,讓學(xué)生看實(shí)驗(yàn)過程錄像,這樣將理性認(rèn)識與感性認(rèn)識結(jié)合起來后,學(xué)生實(shí)驗(yàn)基本上是一次性成功,既節(jié)約了時間,又降低了教學(xué)成本。
3結(jié)果及討論
(1)設(shè)計了依時間順序顯示課件資料的課件開發(fā)平臺,該平臺使課件開發(fā)顯得非常簡單,不需對開發(fā)者進(jìn)行專門的培訓(xùn),利用編輯器將課件資料組合起來就可形成課件。
(2)該課件平臺將圖片、聲音、動畫和視頻融為一體,使課件的組合方便靈活,實(shí)驗(yàn)現(xiàn)象和過程的模擬形象生動,特別適合于物理化學(xué)實(shí)驗(yàn)課件的制作。
關(guān)鍵詞:Photoshop 網(wǎng)頁制作 圖像
0 引言
信息化時代,網(wǎng)絡(luò)技術(shù)得到快速發(fā)展。網(wǎng)絡(luò)發(fā)展離不開網(wǎng)頁的作用,網(wǎng)頁作為網(wǎng)絡(luò)發(fā)展中最主要的元素,在其中起到了決定性的作用。網(wǎng)頁制作是介于網(wǎng)像處理技術(shù)和編程技術(shù)之間的學(xué)科,網(wǎng)頁作為一種媒體.必須要有一定的藝術(shù)感染力。網(wǎng)頁制作的工具很多,Photoshop因其圖像處理的強(qiáng)大功能在網(wǎng)頁制作中也發(fā)揮著巨大的作用。正確使用Photoshop處理圖像可以增加網(wǎng)頁的美觀,提高網(wǎng)頁的下載速度,提高網(wǎng)頁的制作效率。
1 網(wǎng)頁中的圖像制作
1.1 網(wǎng)站Logo圖標(biāo)的制作
Logo圖標(biāo)是一個網(wǎng)站的形象標(biāo)志。一個優(yōu)秀的Logo圖標(biāo),不但能點(diǎn)綴界面,而且還可以加深瀏覽者對該網(wǎng)站的印象,提高網(wǎng)站的點(diǎn)擊率和知名度。
Photoshop提供了矢量圖繪制功能。使用鋼筆( 或形狀)工具,可直接繪制出矢量線條;也可以首先建立選區(qū),再通過路徑調(diào)板上的“將選區(qū)轉(zhuǎn)化為路徑”按鈕,實(shí)現(xiàn)矢量線條的繪制。然后,通過路徑調(diào)板上的“ 填充路徑”按鈕,為路徑填充上顏色。最終實(shí)現(xiàn)矢量圖形的繪制。使用這種方法制作出的Logo圖標(biāo),具有任意放大不失真的優(yōu)點(diǎn)。
1.2 網(wǎng)頁頂部圖片制作
網(wǎng)頁頂部圖片一般位于網(wǎng)頁的頂端,同時包含了網(wǎng)站Logo圖標(biāo)和網(wǎng)站名稱等重要信息。此圖片的制作工作,在網(wǎng)頁設(shè)計中占有舉足輕重的地位。
在Photoshop環(huán)境下,先把網(wǎng)站Logo圖標(biāo)的圖像復(fù)制到頂部圖片文件中,并將其調(diào)至背景層上方;然后,在圖層調(diào)板上按“添加圖層蒙版”按鈕,為該層添加圖層蒙版;再利用畫筆或漸變工具在圖層蒙版上處理,使兩層圖片實(shí)現(xiàn)“無縫”銜接。最后利用文字工具添加網(wǎng)站標(biāo)題;將文件保存成JPG文件完成頂部圖片制作的同時,將文件另存為PSD文件,保留各圖層的圖層信息,以便將來對頂部圖片的再編輯。
1.3 網(wǎng)頁背景圖片的制作
網(wǎng)頁背景圖片是網(wǎng)頁制作過程中不可缺少的基本元素之一,是網(wǎng)頁美工的基礎(chǔ)。
GIF和JPEG是網(wǎng)頁制作中最常見的兩種圖像文件格式。在Photoshop環(huán)境下,可通過“圖像/模式/...”命令,將圖像文件轉(zhuǎn)換成相應(yīng)的顏色模式;然后,在保存文件時的“格式”選擇項(xiàng)中,選取相應(yīng)的文件格式進(jìn)行保存,即可實(shí)現(xiàn)兩種文件格式間的相互轉(zhuǎn)換。同時,GIF文件還支持圖片背景透明效果。
1.4 網(wǎng)頁中按鈕的制作
按鈕是網(wǎng)頁中經(jīng)常需要使用的素材,漂亮的按鈕必將給網(wǎng)站增添不少色彩,使網(wǎng)頁更加精美,有會隨著鼠標(biāo)的接觸而變色的按鈕,還有立體按鈕、水晶按鈕、發(fā)光按鈕等等。而這些按鈕的制作最常使用的工具是Photoshop。
2 網(wǎng)頁中的動畫制作
在網(wǎng)頁制作過程中,動畫制作和圖片制作占有著同樣重要的地位。精美的動畫不但能美化網(wǎng)頁,而且還可以增加網(wǎng)頁的信息容量。Photoshop所整合的ImageReady軟件包,可以方便地制作出GIF和SWF動畫。其中GIF動畫具有文件體積小、IE支持穩(wěn)定、網(wǎng)絡(luò)傳輸速度快等優(yōu)點(diǎn),被廣泛應(yīng)用于網(wǎng)頁制作。
這里是一個簡單的動畫制作實(shí)例,介紹利用ImageReady來創(chuàng)建動畫的做法。
在ImageReady環(huán)境下打開兩張GIF格式的素材圖片(素材1是睜著眼睛的人物;素材2是閉著眼睛的人物,其它部位完全相同),并通過“窗口/動畫”打開動畫調(diào)板。把素材2文件中的人物圖層,復(fù)制到素材1文件中,并將該圖層命名為“圖層2”;在動畫調(diào)板上點(diǎn)擊“復(fù)制當(dāng)前幀”按鈕,復(fù)制一個動畫幀;在動畫調(diào)板中選中第1幀,在圖層調(diào)板中隱藏“圖層2”的顯示,并在第1幀下方的“選擇幀延遲時間”設(shè)置為“1秒”;然后選擇第2幀,在圖層調(diào)板中將“圖層2”顯示出來;在動畫調(diào)板上,設(shè)置循環(huán)次數(shù)為“一直有效”;點(diǎn)擊動畫調(diào)板上的“播放/停止”按鈕,即可預(yù)覽動畫效果(每隔1秒鐘,人物眨一下眼睛);最后,執(zhí)行菜單“文件/將優(yōu)化結(jié)果存儲為”命令,打開“將優(yōu)化結(jié)果存儲為”對話框,將“保存類型”設(shè)為“*.gif”,點(diǎn)擊“保存”,即可生成GIF動畫。 利用Photoshop制作SWF動畫,與上述的制作GIF動畫十分相似,僅在保存文件時有所不同。預(yù)覽動畫后,執(zhí)行菜單“文件 /導(dǎo)出/MacromediaRFlashTM SWF”,即可生成SWF動畫。
3 設(shè)計簡單WEB頁面
設(shè)計WEB頁的軟件有很多,但是大部分的專業(yè)設(shè)計師還是喜歡使用Photoshop來進(jìn)行初稿設(shè)計。因?yàn)樵赑hotoshop環(huán)境中,進(jìn)行彩色搭配十分方便、直觀,將其用于網(wǎng)頁制作的初稿設(shè)計上是極為合理。
第一步:用Photoshop把整個頁面的大體輪廓設(shè)計出來,可保留各圖層信息,因?yàn)樵诶们衅ぞ哌M(jìn)行切割圖片時,可以基于圖層進(jìn)行切割。相應(yīng)的就產(chǎn)生了流行于網(wǎng)絡(luò)的PSD網(wǎng)頁模板,這種網(wǎng)頁模板大多是利用Photoshop來進(jìn)行設(shè)計的。大體輪廓做好之后,利用切片工具和切片選擇工具,對圖像進(jìn)行分割,將文件分割成若干個小的圖片組。切割圖像的原因是在瀏覽器中,一組小幅圖像比單個大幅圖像下載起來要快速得多。運(yùn)行 ImageReady環(huán)境,創(chuàng)建動畫效果,使部分圖像動起來。第二步:創(chuàng)建網(wǎng)站地圖定義交互區(qū)域,以及翻轉(zhuǎn)圖片等。第三步:將文件進(jìn)行優(yōu)化,并存儲為網(wǎng)頁文件格式。
利用Photoshop設(shè)計WEB頁面時,也可以通過第三方的軟件來配合設(shè)計。如常見的網(wǎng)頁制作軟件Dreamweaver、FrontPage等。
4 前景與背景的配合
網(wǎng)頁是一個有機(jī)整體,其前景與背景必須緊密配合,效果才能協(xié)調(diào)美觀。網(wǎng)頁上的圖像都是一個矩型區(qū)域,采用圖案的邊緣部分與背景會有一定的差異,用這樣的廣塊圖置于網(wǎng)頁中,必然形成前景與背景之間的突兀變化,即前景圖好象是打在背景圖上的一塊“補(bǔ)丁”,影響了畫面的整體效果。因此,必須對前景圖的邊緣及圖中的空白部分進(jìn)行相應(yīng)處理,使之與背景融合為一體。用Photoshop處理前景圖時,通常采用透明、羽化及過渡填充等技術(shù)來實(shí)現(xiàn)這一目標(biāo)。當(dāng)前景圖色彩要求較低、圖案周圍留白較多時,可選用透明的GIF格式做為圖像應(yīng)用格式,即選取圖像中的有效部分,復(fù)制到一張大小適中的透明背景圖層上,將該圖存成透明底GIF格式文件即可。對圖像色素較多,或邊界與背景差異太大的情況,應(yīng)選用JPEG格式做為圖像最終應(yīng)用格式,在圖像邊緣做適當(dāng)寬度的羽化或者做從前景到背景的過渡填充,從而消除前景與背景之間的突兀變化,形成協(xié)調(diào)的網(wǎng)頁布局。
5 提高網(wǎng)絡(luò)傳輸?shù)男?/p>
制作網(wǎng)頁時,不僅要考慮圖像的藝術(shù)性,也要注意其傳輸效率。圖像做得越大越精細(xì),則在網(wǎng)絡(luò)上的傳輸時間就越長,從而降低用戶訪問網(wǎng)站的興趣。用Photoshop處理可以提高圖像的傳輸效率:一是采用交錯格式的GIF文件,該類文件不增加圖像的額外尺寸,但在視覺上會有傳輸速度略快的感覺;二是對圖像進(jìn)行減色處理,去除圖像上不必要的顏色,使圖像更為小巧,但這樣做的結(jié)果可能會造成圖像質(zhì)量的下降;三是對圖像進(jìn)行分塊,將一幅大圖像分割成數(shù)塊小圖像,這樣就可以充分利用網(wǎng)絡(luò)帶寬的資源,多幅圖像同時傳送,以提高傳輸效率,這是網(wǎng)絡(luò)上用得較多的方法。
6 結(jié)束語
Photoshop在網(wǎng)頁制作中的應(yīng)用還有很多,如導(dǎo)航欄設(shè)計等方面的內(nèi)容。應(yīng)用Photoshop制作網(wǎng)頁是動手性很強(qiáng)的工作,需要制作人員不斷積累經(jīng)驗(yàn),熟練掌握各類技巧,借鑒他人好的做法,這樣才能能博采眾長,不斷提高網(wǎng)頁制作水平。
參考文獻(xiàn)
[1]丁曉燕 Photoshop在網(wǎng)頁制作中的應(yīng)用 《計算機(jī)時代》 200 第8期 - 維普資訊網(wǎng)