當前位置:首頁>ps入門教程>動圖教程>動畫教程>教程內容

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度(4)

來源:公眾號 作者:PS實用教程 學習:4368人次

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

效果圖:

 動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

 動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

操作步驟:

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

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn搜索公眾號photoshop教程論壇,免費領取自學福利

2.選擇橢圓工具,鼠標放在中心點位置上,同時按住shift+alt+鼠標左鍵,鼠標往外拉,就可以畫好一個以鼠標初始位置為中心的正圓,重復一次l;如圖畫好同中心的一個大圓和一個小圓。

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

3.用圓角矩形工具,在兩圓之間,畫好一個矩形;再用變形工具,將上兩角往外拉一些,調整一下四邊弧度,畫好如圖長條圓弧。

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

4.點擊圓角矩形工具,更改矩形填充為藍色,更改矩形邊框為無色。(這個填充色隨便選一個就可以,后面會調整)

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

5.復制矩形圖層,點擊編輯>變換>旋轉,將矩形2旋轉到對應位置;重復第5步,做好8個矩形并旋轉到對應位置,如下圖。

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

6.刪除作為基準線的幾個圖層。

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

7.合并矩形圖層。

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

8.新建圖層,右鍵建立此圖層為剪貼蒙版http://tgudhdp.cn/tags/38847/;點擊圖層欄下標fx,選擇漸變疊加。

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

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

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

10.窗口調出時間軸,將蒙版圖層1時間長度拖到05f。

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

11.復制蒙版圖層1,得到蒙版圖層2 ;選擇蒙版圖層2,點擊編輯>變換>旋轉。

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

12.修改選轉角度為45度即可。

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

12.復制前一個蒙版圖層,重復11、12步驟,每次角度都順時鐘旋轉45度。共復制7次即可完成整個動作。

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

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

動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn


動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

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

無背景

 動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

有背景

 動態(tài)圖片,可用于網頁或視頻加載中的動態(tài)過度_tgudhdp.cn

以上就是加載中動圖的基本制作

學習 · 提示

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

關注大神微博加入>>

網友求助,請回答!