PS教你打造流暢酷炫的動態演示

 

 　　靜態設計

　　步驟1

　　新建畫布

　　步驟2

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

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

　　完成後效果如下圖。

　　步驟 3

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

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

　　下一步，創建新圖層，然後在40px和128px之間創建選區，填充顏色#2c3137.

　　步驟4

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

　　步驟5

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

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

　　步驟6

　　在128和220px水平參考線之間的區域創建選區，填充顏色和上一選區顏色一樣。

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

　　步驟7

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

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

　　其他用普通粗細，暗色。

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

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

　　步驟8

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

　　步驟9

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

　　步驟10

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

　　添加圖層樣式，描邊，內陰影，外發光。具體參數如下。

　　步驟11

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

　　設置圖層樣式內發光。(圖層樣式若不滿意可不設置)

　　步驟12

　　添加圖像，然後創建剪貼蒙版.

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

　　最後添加幾個按鈕圖標。

　　步驟13

　　其他幾個矩形同理

　　步驟14

　　先把主要區域的矩形圖層全部隱藏，然後構建一個較大的矩形區域，這將應用到選擇具體卡片後的細節界面。

　　做完後，此圖層組不透明度設置為0%

　　觸控點

　　步驟1

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

　　步驟2

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

　　繼續復制，擴大，描邊2pt

　　完事後居中對齊

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

　　滾動效果

　　步驟1

　　現在，終於開始做UI動態演示效果了，打開時間軸面板，創建幀動畫

　　按下圖那個紅色劃線按鈕，創建新幀

　　步驟2

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