| 網站首頁 | Ps下載中心 | 字體下載 | 筆刷下載 | PSD素材 | 矢量素材 | 圖片素材 | Ps教程 | 設計學院 | Photoshop作品 | 書法藝術 | 
CS6動畫制作入門教程-04動畫的設計思維
(載入中...)

通過學習photoshop cs6動畫制作入門教程的前3章,我們已經掌握了photoshop cs6制作動畫的方法,盡管做出來的動畫還十分簡陋。還記得學習基礎部分的時候,曾在很長一段時間內接觸的都是單一的色塊嗎?那并未影響大家現在的水平發揮。同樣的,很快我們就要開始制作較為精細的動畫了。但是在這一切到來之前,大家還必須學習一些必備的設計思維。所謂設計思維就是指在制作動畫前的規劃考慮,這規劃包括很多方面。

首先講一下圖層的組織,最終的成品動畫是不包含圖層信息的。這里所說的圖層僅指制作中。對于利用圖層位置變化來制作的動畫而言,有一個顯而易見的問題就是必須合理安排圖層,因為移動的最小單位是圖層,因此如果需要制作多個運動軌跡各異的物體時,它們就必須分布在不同的圖層中。也需要事先考慮好移動的距離,圖像的尺寸以及擺放的位置需要為移動留下足夠的空間,這是其一。
其二就是考慮好是否會與其他圖層相交,以及相交時候的處理,誰遮蓋誰,也就是圖層的層次安排,如下圖中就列出了3種相交的方式,最左邊的是兩個圖層均為100%時候,綠色覆蓋紅色。另外兩個則顯示了在50%的不透明度下,不同層次造成的不同覆蓋效果。如綠色遮蓋紅色,那么相交部位就偏綠,反而反之。這都是在正常混合模式下,如果選擇了其他的混合模式如疊加等,就要更加注意層次。

cs6動畫的圖層關系

以上說的都是技術問題,現在來說一下情節方面的問題。一般來說,如果一個物體始終都在圖像中運動,則無需對其進行交代。但如果物體原本不在畫面中,是后來進入畫面的,或原本在畫面中后來移出了畫面,則需要對物體的出現和消失做一個交代,這個交代就是過渡,讓觀看者有一個比較自然的心理轉變。常見的手法就是讓物體逐漸顯現(也稱淡入)或逐漸消失(也稱淡出)。如下圖所示,演示了在同樣的一個文字移動中,是否采取淡入和淡出處理的效果對比。

cs6動畫的設計思維-淡入淡出

通過下面兩個范例比較,相信大家都會覺得添加了淡入淡出處理的效果更好。

范例動畫1                                                                 范例動畫2

donghuashejishiwei01                            donghuashejishiwei02

除此之外,循環設定也是屬于情節方面的問題,這個我們其實在之前有提到過,就是有些場合下可以使用無限循環的動畫,而有些場合則不適合。比如一個欄目標題文字淡入的動畫,如果不斷地重復,就會使得網頁整體看上去顯得很亂,會令觀看者感到不舒服。此時最適合的做法就是播放一次,這樣既可以展現效果,又不會影響網頁整體。設定為2到3次的循環一般也可接受,再多就不好了。
不過只播放一次的動畫最好是放在網頁的上部,這樣一進入網頁就可以看到。如果放在網頁底部,可能觀看者閱讀到該處時動畫已經播放完了。那樣的話就制作動畫就沒有意義了,還不如就用靜態的圖片代替。

            范例動畫3                                                      范例動畫4

2010083107555567                               2013083107555662

需要注意的是,GIF動畫圖片每調用一次就會重新播放。如果有些人已經具備了網頁制作的知識,可以利用這個性質在網頁制作軟件中設定相應的動作。比如大家在這里移動鼠標觀看范例的動畫就是如此。每次移入后動畫總是從頭開始播放。這樣即便是只播放一次的動畫,也可以令它在網頁中多次播放。沒有網頁制作知識也不用擔心,這并不影響我們后面的動畫學習。

對于看上去很不錯的淡入淡出效果而言,有一個重要的問題需要考慮,那就是瀏覽器可以被設置為禁止播放動畫。此時動畫只會顯示其第1幀時候的畫面。那么類似上面的“悄然來去”的動畫在網頁中將是一片空白,因為其第1幀本來就是空白的。這就容易引起觀看者的誤會。
也許大家會覺得沒有人會刻意關閉動畫顯示,但既然不能排除這個因素,我們就需要從最廣泛的層面去考慮訪問者的情況。在網頁的整體布局中,應避免在重要的文字或指示部位使用淡入淡出動畫。在將動畫放入網頁中后,最好自己手動關閉動畫播放檢查是否存在問題。除了關閉動畫播放以外,在頁面顯示時如果訪問者按下ESC鍵也會中斷動畫播放,畫面將停留在中斷的那一刻。

如要同時照顧到禁止和允許播放動畫的訪問者,在兩者之間取得平衡點,那么在動畫的制作上就應該遵循一個原則,那就是主體部分不動,修飾部分作動畫。如下圖所示,文字本身不做動畫,只是在文字的邊緣制作了動畫效果。這樣即使靜止動畫播放或播放時中斷,也不會影響觀看者對內容的理解。
不過,只要保證能在任何時候準確地反映內容,避免文字的消失或過于劇烈的變形,主體文字也是可以動的。

      范例動畫5

      2010083107555652

本節課中所講述的內容和制作動畫的技術并不相關,不過在大家要將動畫應用于網頁中的時候,就要從大方面來考慮動畫的制作及表現方法。單純學習這些內容有些枯燥,大家留下印象就好,在以后的制作中會有應用到的時候。
這次的作業是將“悄然來去”那個動畫制作出來。另外將下面兩個派生的動畫也制作出來。

范例動畫6                                         范例動畫7

     w7cnsoa8e295              tzdf46tnxgyz

本類熱門教程:

Photoshop給風景圖片加上流

Photoshop放射的霓虹燈GIF

用Photoshop時間軸動畫打造

使用ps和IR制作超級搞笑浣

Photoshop制作相冊自動翻頁
最新更新教程:
Powered by:www.jllllh.com.cn〖粵ICP備09027937號〗〖粵公網安備44078402440812號〗All Rights Reserved.
赛车北京pk10历史记录
极速时时彩 排列3 股票涨跌原理 赤盈配资 腾讯分分彩 秒速飞艇 福建快三 河北快三 新浪体育nba比分直播 胜分差 中国股票指数变化 足球即时指数球探 足彩 基金理财平台大的排行 极速时时彩 竞彩篮球大小分 作者:三人行ps學堂    教程來源:ren3.cn    點擊數:    更新時間:2013-4-10