【 PS動畫教學 】Photoshop Cs5製作Gif Banner廣告條動畫 - PS筆刷工廠PS筆刷工廠

Photoshop Cs5製作Gif Banner廣告條動畫

這一次的教學是屬於PS教程領域中的動畫教程的相關教學。

文章出處是來自活力盒子的PS教程類文章，寫教學的作者是luycas翻譯，感謝luycas翻譯提供動畫教程的實作教學。

教學大綱:

本教程主要使用Photoshop CS5製作Banner廣告條動畫，Gif動畫想必是眾多設計交流活動中的笑柄。因為Gif以善於破壞頁面的整體感而臭名卓著。如果使用得當的話，Gif動畫可以把訪客吸引到頁面的某一板塊。今天，我們就來講述如何使用Photoshop製作Gif動畫，讓我們

動畫教程教學開始

最終效果圖

1.新建文件250px*250px，分辨率設為70px，背景用#f2f2f2填充.

2.放置Logo到靠近畫布頂端的中間位置。

3.在Logo下發輸入宣傳標語。

4.繪製矩形選區，填充“#b90909”。

打開圖層樣式面板，選擇“投影”，降低投影距離和大小為2px。

選擇“漸變疊加”，設置混合模式為“正片疊底”，不透明度28%。

選擇“描邊”，描邊大小1px，描邊顏色設為“#a31b1b”.

5.增加關鍵內容。我們規劃的是，在紅色塊上依次顯示：Tutorials, Articles, Tips, Freebies, Basix, Videos, Premuim。

柵格化文字，並且為文字創建剪切蒙版(選擇文字層，Ctrl+Alt+G創建剪切蒙版)。

6.放置一張引人注目的圖片。本例中我們使用了Psdtuts會員圖標，當然你可以使用符合應用場合的所有其他圖標。

7.放入更多文字內容如圖所示，擺放在第6步所導入圖片的下方靠近畫布底部的位置，所有內容均居中對齊。

8.創建圓角矩形選區，填充#fdfcfc.

打開圖層樣式對話框，應用“投影”，降低投影半徑和投影大小為1px。

應用“內發光”，參數保持默認值。

應用“漸變疊加”，顏色設置為#a10000到#fffff的漸變，不透明度設為6%。

9.現在我們所有的圖層內容製作完成，下面就開始製作動畫。首先，打開動畫面板(窗口-動畫)。我們將使用時間軸動畫面板，並不是幀面板。注意：這僅作為Photoshop的擴展功能。現在，把所有圖層的不透明度設為0%。

KeyFrame：關鍵幀

Click to the stopwatch to toggle the ability of this property to change during animation:

點擊鐘表圖標來設置動畫中要改變的屬性。

Play/pause the animation:播放/暫停動畫

Delete the keyframe or layer：刪除關鍵幀或者圖層

10.參照下圖的註釋學習：如何插入關鍵幀和在哪裡增加透明度。

11.您的時間軸此時應該如下圖所示：

12.動畫製作完成。我們按play預覽效果，發現不連貫或者不滿意的地方隨時調整它非常重要。文件-存為“WEB文檔格式”。然後參照下圖所示進行設置並保存。

最終效果

後記：使用時間軸面板比使用幀面板製作的動畫，變化更加柔和、控制更加細膩到位。

–本文轉載自 http://www.missyuan.net 教學網 —

文章永久連結為: Photoshop Cs5製作Gif Banner廣告條動畫