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

教程信息

本教程使用了PS CC，但是CS5和CS6依然能夠支持本教程。
然后您還需要下載手機Mock UP效果模板和一些圖庫照片。

靜態(tài)設計

步驟1

新建畫布

步驟2

視圖>新建參考線，垂直，間隔15px，左面4條，右面4條

視圖>新建參考線，水平，在40px，128px，220px處設置水平參考線。

完成后效果如下圖。

步驟 3

在畫布上添加狀態(tài)欄（也就是第一條水平參考線上方40px處），狀態(tài)欄各位可以從源文件里面直接復制獲取。

不過這里我用了iOS 7 UI Kit的動作包>>>>微盤下載

下一步，創(chuàng)建新圖層，然后在40px和128px之間創(chuàng)建選區(qū)，填充顏色#2c3137.

步驟4

在標題欄添加應用的標題和Logo

步驟5

畫一個放大鏡icon，圓形結(jié)合圓角矩形即可，顏色和App Logo相同。

再畫一個選項icon，圓角矩形即可，顏色和App Logo相同。

步驟6

在128和220px水平參考線之間的區(qū)域創(chuàng)建選區(qū)，填充顏色和上一選區(qū)顏色一樣。

然后在兩個區(qū)域之間添加2px，不透明度80%的亮色的分割線。

步驟7

選擇文字工具，添加分類。

為了暗示所選中的分類，所選中的分類要用粗體、亮色。

其他用普通粗細，暗色。

然后”雜志”復制一份，使用粗體+亮色，然后不透明度設置為0%，暫時隱藏

“首頁復制一份”，常規(guī)體+暗色，不透明度設置為0%，暫時隱藏

步驟8

在菜單項的左右添加箭頭，使用圓角矩形即可。

步驟9

背景填充為標題欄和菜單欄的顏色，確保背景圖層處于GUI元素下方。

步驟10

在主題區(qū)域中，劃出如下圖選區(qū)，填充顏色#3f464e

添加圖層樣式，描邊，內(nèi)陰影，外發(fā)光。具體參數(shù)如下。