文章彙整

Photoshop教學:【基礎篇】製作載入中的GIF

Astral WebBy Astral Web 3 years agoNo Comments
首頁  /  網頁視覺設計  /  Photoshop教學  /  Photoshop基本美化修飾  /  Photoshop教學:【基礎篇】製作載入中的GIF

photoshop

今天astralweb要與大家分享使用Photoshop來製作簡單的GIF動畫,可以用在網頁下載的時後,一起來看看如何製作吧!

※本教學需先對工具使用有基本認識

1.開啟檔案(使用網頁尺寸)

01

2.使用繪圖工具繪製出我們要的載入畫面

02

3.本範例先畫出4個變化的元素

03

4.依此四個元素,排出每一格時間的畫面

04

5.並將每一個時間放在同一資料夾中,並將它們對齊同一位置與命名,方便製作

05

6.使用裁切工具

06

7.切出我們需要的圖片大小

07

8.在右上角切換至動態

08

9.就會出現動態介面

09

10.在下方點選建立影格動畫

10

11.此時代表第一個動態的畫面,所以只開啟第一個圖層

11

12.將停留時間選擇我們需要的長度

12

13.在下方新增第二個影格

13

14.一樣此時代表第二個動態的畫面,所以只開啟第二個圖層

14

15.依此方式建立完所有影格

15

16.在下方選擇動態重複方式

16

17.我們選擇 檔案>轉存>儲存為網頁用(新舊版路徑不同)

17

18.選擇GIF後儲存

18

19.完成

19

Photoshop 教學導覽

 

 

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  Photoshop基本美化修飾

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。