首頁 web前端 PS教程 Photoshop CS3教程:动画的设计思想

Photoshop CS3教程:动画的设计思想

Mar 21, 2017 pm 04:33 PM
製作 動畫 播放 教學 網頁 觀看

  通过前面三课的学习,我们已经掌握了制作动画的方法,尽管做出来的动画还十分简陋。还记得学习基础部分的时候,曾在很长一段时间内接触的都是单一的色块吗?那并未影响大家现在的水平发挥。同样的,很快我们就要开始制作较为精细的动画了。但是在这一切到来之前,大家还必须学习一些必备的设计思维。所谓设计思维就是指在制作动画前的规划考虑,这规划包括很多方面。
  首先讲一下图层的组织,最终的成品动画是不包含图层信息的。这里所说的图层仅指制作中。对于利用图层位置变化来制作的动画而言,有一个显而易见的问题就是必须合理安排图层,因为移动的最小单位是图层,因此如果需要制作多个运动轨迹各异的物体时,它们就必须分布在不同的图层中。也需要事先考虑好移动的距离,图像的尺寸以及摆放的位置需要为移动留下足够的空间,这是其一。

  其二就是考虑好是否会与其他图层相交,以及相交时候的处理,谁遮盖谁,也就是图层的层次安排,如下图中就列出了3种相交的方式,最左边的是两个图层均为100%时候,绿色覆盖红色。另外两个则显示了在50%的不透明度下,不同层次造成的不同覆盖效果。如绿色遮盖红色,那么相交部位就偏绿,反而反之。这都是在正常混合模式下,如果选择了其他的混合模式如叠加等,就要更加注意层次。
  Photoshop CS3教程:动画的设计思想
  以上说的都是技术问题,现在来说一下情节方面的问题。一般来说,如果一个物体始终都在图像中运动,则无需对其进行交代。但如果物体原本不在画面中,是后来进入画面的,或原本在画面中后来移出了画面,则需要对物体的出现和消失做一个交代,这个交代就是过渡,让观看者有一个比较自然的心理转变。常见的手法就是让物体逐渐显现(也称淡入)或逐渐消失(也称淡出)。如下图所示,演示了在同样的一个文字移动中,是否采取淡入和淡出处理的效果对比。
  Photoshop制作平面动画:设计思维_天极设计在线发布
  可将鼠标移入到播放区观看实际的动画效果,移出播放区将停止播放。通过比较,相信大家都会觉得添加了淡入淡出处理的效果更好。
  Photoshop CS3教程:动画的设计思想 Photoshop CS3教程:动画的设计思想
  除此之外,循环设定也是属于情节方面的问题,这个我们其实在之前有提到过,就是有些场合下可以使用无限循环的动画,而有些场合则不适合。比如一个栏目标题文字淡入的动画,如果不断地重复,就会使得网页整体看上去显得很乱,会令观看者感到不舒服。此时最适合的做法就是播放一次,这样既可以展现效果,又不会影响网页整体。设定为2到3次的循环一般也可接受,再多就不好了。
  不过只播放一次的动画最好是放在网页的上部,这样一进入网页就可以看到。如果放在网页底部,可能观看者阅读到该处时动画已经播放完了。那样的话就制作动画就没有意义了,还不如就用静态的图片代替。
  Photoshop CS3教程:动画的设计思想 Photoshop CS3教程:动画的设计思想
  需要注意的是,GIF动画图片每调用一次就会重新播放。如果有些人已经具备了网页制作的知识,可以利用这个性质在网页制作软件中设定相应的动作。比如大家在这里移动鼠标观看范例的动画就是如此。每次移入后动画总是从头开始播放。这样即便是只播放一次的动画,也可以令它在网页中多次播放。没有网页制作知识也不用担心,这并不影响我们后面的动画学习。如果想要了解一下,可观看GoLive的视频教程。
  对于看上去很不错的淡入淡出效果而言,有一个重要的问题需要考虑,那就是浏览器可以被设置为禁止播放动画。此时动画只会显示其第1帧时候的画面。那么类似上面的“悄然来去”的动画在网页中将是一片空白,因为其第1帧本来就是空白的。这就容易引起观看者的误会。
  也许大家会觉得没有人会刻意关闭动画显示,但既然不能排除这个因素,我们就需要从最广泛的层面去考虑访问者的情况。在网页的整体布局中,应避免在重要的文字或指示部位使用淡入淡出动画。在将动画放入网页中后,最好自己手动关闭动画播放检查是否存在问题。除了关闭动画播放以外,在页面显示时如果访问者按下ESC键也会中断动画播放,画面将停留在中断的那一刻。
  如要同时照顾到禁止和允许播放动画的访问者,在两者之间取得平衡点,那么在动画的制作上就应该遵循一个原则,那就是主体部分不动,修饰部分作动画。如下图所示,文字本身不做动画,只是在文字的边缘制作了动画效果。这样即使静止动画播放或播放时中断,也不会影响观看者对内容的理解。
  不过,只要保证能在任何时候准确地反映内容,避免文字的消失或过于剧烈的变形,主体文字也是可以动的。
  Photoshop CS3教程:动画的设计思想
  本节课中所讲述的内容和制作动画的技术并不相关,不过在大家要将动画应用于网页中的时候,就要从大方面来考虑动画的制作及表现方法。单纯学习这些内容有些枯燥,大家留下印象就好,在以后的制作中会有应用到的时候。

  这次的作业是将“悄然来去”那个动画制作出来。另外将下面两个派生的动画也制作出来。
  Photoshop CS3教程:动画的设计思想 Photoshop CS3教程:动画的设计思想
  下一节我们介绍动画中淡入淡出的表现方式。


本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
威爾R.E.P.O.有交叉遊戲嗎?
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

ppt怎麼做圓形的圖片和文字 ppt怎麼做圓形的圖片和文字 Mar 26, 2024 am 10:23 AM

首先,在 PPT 中繪製一個圓圈,然後插入一個文字框,輸入文字內容。最後,設定文字方塊的填滿和輪廓為無,即可完成圓形圖片和文字的製作。

得物使用教程 得物使用教程 Mar 21, 2024 pm 01:40 PM

得物APP是當前十分火爆品牌購物的軟體,但是多數的用戶不知道得物APP中功能如何的使用,下方會整理最詳細的使用教程攻略,接下來就是小編為用戶帶來的得物多功能使用教學匯總,有興趣的用戶快來一起看看吧!得物使用教學【2024-03-20】得物分期購怎麼使用【2024-03-20】得物優惠券怎麼獲得【2024-03-20】得物人工客服怎麼找【2024-03-20】得物取件碼怎麼查看【2024-03-20】得物求購在哪裡看【2024-03-20】得物vip怎麼開【2024-03-20】得物怎麼申請退換貨

word中怎麼給文字加點? word中怎麼給文字加點? Mar 19, 2024 pm 08:04 PM

我們在日常製作Word文件時,有時需要給文檔中的某些文字下方加點,尤其是出試題的時候。來用於重點突出這部分內容,小編給大家分享下word中怎麼給文字加點的技巧,希望能幫助到您。 1.開啟一個空白word文檔。  2.舉例例如給「如何為文字加點」幾個字的下面加上點。  3.我們先把「如何給文字加點」幾個字用滑鼠左鍵選擇了,注意以後你想給那個字加點就先用滑鼠的左鍵選擇哪個字。今天我們給這幾個字都加一點,所以幾個字都選了。選中這幾個字後右鍵,在彈出的功能框中點擊字體。  4.然後就會出現一個這樣的

夏天,一定要試試拍攝彩虹 夏天,一定要試試拍攝彩虹 Jul 21, 2024 pm 05:16 PM

夏天雨後,常常能見到美麗又神奇的特殊天氣景象-彩虹。這也是攝影中可遇而不可求的難得景象,非常出片。彩虹出現有這樣幾個條件:一是空氣中有充足的水滴,二是太陽以較低的角度照射。所以下午雨過天晴後的一段時間內,是最容易看到彩虹的時候。不過彩虹的形成受天氣、光線等條件的影響較大,因此一般只會持續一小段時間,而最佳觀賞、拍攝時間更為短暫。那麼遇到彩虹,怎樣才能合理地記錄下來並拍出質感呢? 1.尋找彩虹除了上面提到的條件外,彩虹通常出現在陽光照射的方向,即如果太陽由西向東照射,彩虹更有可能出現在東

ppt動畫如何設定先進入再退出 ppt動畫如何設定先進入再退出 Mar 20, 2024 am 09:30 AM

我們在日常的辦公中常常會使用到ppt,那麼你是否對ppt裡邊的每個操作功能都很了解呢?例如:ppt中怎麼設定動畫效果、怎麼設定切換效果、每個動畫的效果長度是多少?每個投影片能不能自動播放、ppt動畫先進入再退出等等,那麼今天這期我就先跟大家分享ppt動畫先進入再退出的具體操作步驟,就在下方,小伙伴們快來看一看吧! 1.首先,我們在電腦中開啟ppt,點選文字方塊外側選取文字框,(如下圖紅色圈出部分所示)。 2.然後,點選選單列中的【動畫】,選取【擦除】的效果,(如圖紅色圈出部分所示)。 3.接下來,點擊【

微信關收款聲音的步驟教程 微信關收款聲音的步驟教程 Mar 26, 2024 am 08:30 AM

1.首先打開微信。 2.點選右上角【+】。 3.點選二維碼收款。 4.點擊右上角三個小點。 5.點選關閉收款到帳語音提醒。

photoshopcs5是什麼軟體? -photoshopcs5使用教學課程 photoshopcs5是什麼軟體? -photoshopcs5使用教學課程 Mar 19, 2024 am 09:04 AM

PhotoshopCS是PhotoshopCreativeSuite的縮寫,由Adobe公司出品的軟體,被廣泛用於平面設計和圖像處理,作為新手學習PS,今天就讓小編為您解答一下photoshopcs5是什麼軟體以及photoshopcs5使用教程。一、photoshopcs5是什麼軟體AdobePhotoshopCS5Extended是電影、視訊和多媒體領域的專業人士,使用3D和動畫的圖形和Web設計人員,以及工程和科學領域的專業人士的理想選擇。呈現3D影像並將它合併到2D複合影像中。輕鬆編輯視

php怎麼在網頁打開 php怎麼在網頁打開 Mar 22, 2024 pm 03:20 PM

在網頁中執行 PHP 程式碼需要確保 Web 伺服器支援並已正確配置 PHP。可以透過三種方式開啟 PHP: * **伺服器環境:**將 PHP 檔案放置在伺服器根目錄並透過瀏覽器存取。 * **整合開發環境:**將 PHP 檔案放置在指定 Web 根目錄並透過瀏覽器存取。 * **遠端伺服器:**透過伺服器提供的 URL 位址存取託管在遠端伺服器上的 PHP 檔案。

See all articles