當(dāng)前位置:首頁(yè)>ps入門教程>動(dòng)圖教程>動(dòng)畫教程>教程內(nèi)容

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度(4)

來(lái)源:公眾號(hào) 作者:PS實(shí)用教程 學(xué)習(xí):4368人次

加載中動(dòng)態(tài)圖制作,適用于網(wǎng)頁(yè)、app、視頻等等加載中狀態(tài)的動(dòng)態(tài)效果。

效果圖:

 動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

 動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

操作步驟:

1.調(diào)出標(biāo)尺,可以直接拉參考線或者用畫筆工具,直接用shift+兩點(diǎn)畫直線,畫好米字線。(這里我們直接用直線工具拉了一下。)

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn搜索公眾號(hào)photoshop教程論壇,免費(fèi)領(lǐng)取自學(xué)福利

2.選擇橢圓工具,鼠標(biāo)放在中心點(diǎn)位置上,同時(shí)按住shift+alt+鼠標(biāo)左鍵,鼠標(biāo)往外拉,就可以畫好一個(gè)以鼠標(biāo)初始位置為中心的正圓,重復(fù)一次l;如圖畫好同中心的一個(gè)大圓和一個(gè)小圓。

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

3.用圓角矩形工具,在兩圓之間,畫好一個(gè)矩形;再用變形工具,將上兩角往外拉一些,調(diào)整一下四邊弧度,畫好如圖長(zhǎng)條圓弧。

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

4.點(diǎn)擊圓角矩形工具,更改矩形填充為藍(lán)色,更改矩形邊框?yàn)闊o(wú)色。(這個(gè)填充色隨便選一個(gè)就可以,后面會(huì)調(diào)整)

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

5.復(fù)制矩形圖層,點(diǎn)擊編輯>變換>旋轉(zhuǎn),將矩形2旋轉(zhuǎn)到對(duì)應(yīng)位置;重復(fù)第5步,做好8個(gè)矩形并旋轉(zhuǎn)到對(duì)應(yīng)位置,如下圖。

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

6.刪除作為基準(zhǔn)線的幾個(gè)圖層。

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

7.合并矩形圖層。

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

8.新建圖層,右鍵建立此圖層為剪貼蒙版http://theoat.com.cn/tags/38847/;點(diǎn)擊圖層欄下標(biāo)fx,選擇漸變疊加。

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

9.漸變疊加,樣式選角度,角度設(shè)置為71;再點(diǎn)擊漸變,修改漸變狀態(tài)和顏色,邊修改邊看畫面顯示,改到合適狀態(tài)即可。

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

10.窗口調(diào)出時(shí)間軸,將蒙版圖層1時(shí)間長(zhǎng)度拖到05f。

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

11.復(fù)制蒙版圖層1,得到蒙版圖層2 ;選擇蒙版圖層2,點(diǎn)擊編輯>變換>旋轉(zhuǎn)。

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

12.修改選轉(zhuǎn)角度為45度即可。

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

12.復(fù)制前一個(gè)蒙版圖層,重復(fù)11、12步驟,每次角度都順時(shí)鐘旋轉(zhuǎn)45度。共復(fù)制7次即可完成整個(gè)動(dòng)作。

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

13.動(dòng)作在上部就完成了。這里講一下導(dǎo)出。如果不要背景,那么把背景圖層前面的眼睛點(diǎn)掉,然后存儲(chǔ)為web所用形式,gif格式,循環(huán)選永久,確認(rèn)既可以;如果要背景,直接存儲(chǔ)為web所用形式,gif格式,循環(huán)選永久,確認(rèn)既可以。

動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn


動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

14.看一下沒(méi)背景和有背景的動(dòng)態(tài)加載圖最終效果。

無(wú)背景

 動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

有背景

 動(dòng)態(tài)圖片,可用于網(wǎng)頁(yè)或視頻加載中的動(dòng)態(tài)過(guò)度_theoat.com.cn

以上就是加載中動(dòng)圖的基本制作

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
暫無(wú)評(píng)論,交個(gè)作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請(qǐng)回答!