使用Photoshop構(gòu)建動態(tài)演示GIF動畫(2)

步驟11

在形狀上方畫一個白色圓角矩形，我們會在這個區(qū)域放置圖像。

設(shè)置圖層樣式內(nèi)發(fā)光。(圖層樣式若不滿意可不設(shè)置)

步驟12

添加圖像，然后創(chuàng)建剪貼蒙版.

然后添加文本圖層，利用尺寸，顏色，粗細，來營造清晰的閱讀層級。

最后添加幾個按鈕圖標。

步驟13

其他幾個矩形同理

步驟14

先把主要區(qū)域的矩形圖層全部隱藏，然后構(gòu)建一個較大的矩形區(qū)域，這將應(yīng)用到選擇具體卡片后的細節(jié)界面。

做完后，此圖層組不透明度設(shè)置為0%

觸控點

步驟1

創(chuàng)建新圖層，命名為”Tap”，畫一個白色形狀，不透明度70%

步驟2

復制這個圓形，擴大，去掉填充，描邊設(shè)置為3pt白色

繼續(xù)復制，擴大，描邊2pt

完事后居中對齊

隱藏tap圖層組，因為剛加載完界面是不會顯示觸控點的，但是當選擇元素產(chǎn)生轉(zhuǎn)場時會出現(xiàn)。

滾動效果

步驟1

現(xiàn)在，終于開始做UI動態(tài)演示效果了，打開時間軸面板，創(chuàng)建幀動畫

按下圖那個紅色劃線按鈕，創(chuàng)建新幀

步驟2

顯示Tap圖層組，隱藏兩個描邊圓，用來代表滾動手勢。當開始滾動時，兩個描邊圈也出現(xiàn)，漣漪效果能夠突出滾動手勢。

步驟3

第一幀1s，第二幀開始幀延遲設(shè)置為0.2s

步驟4

添加幀

步驟5

顯示Tap圖層組所有突出。使用移動工具，來上移Tap圖層組和主要內(nèi)容圖層組

步驟6

為了讓滾動效果更流暢，選中當前幀和前一幀，點擊時間軸面板中得選項，選擇過渡

設(shè)置如下

現(xiàn)在，便有稍微流暢的效果了。

步驟7

如果感覺動效有點慢，想讓它快點，那么可以將幀延遲設(shè)置為0.1s

播放一下，不要忘記循環(huán)次數(shù)選擇永遠，更好地觀摩效果以便調(diào)試

步驟8

現(xiàn)在我們想讓界面滾動回來，我們需要復制第二幀到最后一幀

拷貝單幀

選擇粘貼單幀，將其移動到最后一幀。

步驟9

同步驟7，選擇過渡

添加新幀，隱藏Tap圖層組。

效果演示：

點擊菜單分類項效果

步驟1

現(xiàn)在想要設(shè)置點擊菜單項后的效果。首先，創(chuàng)建新的幀0.5s。

然后再創(chuàng)建一個幀，在這個幀里面，

將首頁加（粗版）不透明度設(shè)置為0%，常規(guī)從0%->100%

雜志（粗版）不透明度設(shè)置為100%。常規(guī)從100%->0%

步驟2

激活Tap圖層組，將其移動到雜志選項附近，然后將幀延遲設(shè)置成0.2s