使用Photoshop和ImageReady,你可以為你的網頁動畫添加多變的效果。在這篇教程中,你將學習如何使一個物體在屏幕上移動時改變顏色。先來看看效果。
1.建立調整圖層
打開Photoshop,把你想使之運動的物體放置在透明背景的中心。(當使用文字時,在應用調整圖層之前需先將文字層柵格化 )
在圖層菜單中,選擇新建一個調整層,其內容為色相/飽和度。
在色相/飽和度對話框中,首先確定打開預覽;然後分別拖動色相、飽和度和明度滑塊來改變物體顏色,滿意後點擊確認。(圖step01)

2.在Photoshop工具箱裡,點擊「跳轉到ImageReady」按鈕,用ImageReady打開文件
存儲文檔,選擇文件名稱和存儲路徑。提示:雖然調整圖層只能在Photoshop中使用,但當你用ImageReady打開圖像時,它仍然可以被保留。(圖step02)

3.創建動畫的第一幀
在ImageReady的圖層面板中,選擇圖層1(包含圖像的一層),選擇移動工具,在圖像窗口拖動這一層到動畫的起始位置。注意,動畫面板第一幀的圖像位置也跟著改變。(圖step03)

4.創建動畫的最後一幀
在動畫面板中,點擊新建幀按鈕,在動畫面板中選擇第二幀,而在圖層面板中選擇圖層1。
在圖像窗口,用移動工具把圖層1拖至動畫的終點位置。可以看到,動畫面板第二幀的圖像位置改變了。(圖step04)

在第二幀被選擇的情況下,選擇色相/飽和度調整層,把圖層不透明度改為1%。
現在,第一幀的層不透明度為100%,第二幀的不透明度為1%,兩幀之間不透明度的差異會造成物體顏色的改變。(圖step05)

6.創建動畫的中間幀
在動畫面板中,選擇「動畫幀過渡」,在參數欄中,確定位置、不透明度、效果均被選擇,然後在「添加幀」中輸入要增加的幀的數量。
點擊動畫面板上的播放鍵,預覽動畫,在觀看之後,你可以添加,刪除或是修改幀,如果需要,可以設置重放選項。(圖step06)

7.從動畫面板中選擇優化動畫
點擊動畫面板最右端的黑色小三角,從彈出菜單中選擇「優化動畫」,在優化動畫對話框中,選擇「定界框」和「刪除冗余像素」,然後選擇自動重建選項,保留幀不透明度。
在優化面板中,從「優化的文件格式」菜單中選擇GIF,然後選擇其它選項來優化圖像在Web上的顯示。
選擇文件>將優化文件存儲為,存儲圖像。(圖step07)

Design類圖書裝幀設計圖 |
Michael 滑板圖案設計 |
靳埭強設計作品—中國銀 |
bekker廣告設計精選 |
靳埭強設計作品—Pacifi |
倫敦國際書展—台灣出版 |
Jason Levesque 滑板圖案 |
HORNALL ANDERSON 設計作 |
美國VMP市場咨詢設計公司 |
朗意品牌顧問 |
設計·生活·創業---山東 |
''東方之星''大學生設計 |
雜誌封面設計圖片003 |
雜誌封面設計圖片002 |
雜誌封面設計圖片001 |
DAF2005(美國地區)獲獎作 |
圖形招貼設計圖片(COPYRIG |
shirly kasmara 封面設計圖 |
Robert Mangrobang 封面設 |
Angela Mercado 雜誌設計 |
Matt Sams 雜誌封面設計圖 |
David Tobin 雜誌封面設計 |
北京方寸神韻設計的名片 |
名片設計圖片 |
國外精典名片設計圖片(三) |
國外精典名片設計圖片(二) |
日本創意名片設計圖片一 |
春節吉祥剪紙圖片 |
婚慶吉祥剪紙圖片 |
壽星剪紙圖片 |
情人節甜蜜賀卡 |
日本名片設計圖片 |
onMessage 名片設計圖片 |
名片設計圖片 |