Zi 字媒體

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廣告條動畫