網(wǎng)站制作

Photoshop制作流暢的動(dòng)態(tài)APP演示動(dòng)畫(huà)

更新時(shí)間：2025-01-11 11:56:48

動(dòng)態(tài)已成趨勢(shì)，相比靜態(tài)，更直觀，更能展示產(chǎn)品效果。本教程將教你用PS制作動(dòng)態(tài)演示GIF教程，本教程使用了PS CC，但是CS5和CS6依然能夠支持本教程。然后您還需要下載手機(jī)Mock UP效果模板和一些圖庫(kù)照片。

1、靜態(tài)設(shè)計(jì)

步驟1：新建畫(huà)布

步驟2：視圖>新建參考線，垂直，間隔15px，左面4條，右面4條；視圖>新建參考線，水平，在40px,128px,220px處設(shè)置水平參考線，完成后效果如下圖。

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

或者參考IFEC翻譯的這篇文章：Photoshop設(shè)計(jì)iOS7風(fēng)格的郵件軟件應(yīng)用

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

步驟4：在標(biāo)題欄添加應(yīng)用的標(biāo)題和Logo

步驟5：畫(huà)一個(gè)放大鏡icon，圓形結(jié)合圓角矩形即可，顏色和App Logo相同。再畫(huà)一個(gè)選項(xiàng)icon，圓角矩形即可，顏色和App Logo相同。

步驟6：在128和220px水平參考線之間的區(qū)域創(chuàng)建選區(qū)，填充顏色和上一選區(qū)顏色一樣。然后在兩個(gè)區(qū)域之間添加2px，不透明度80%的亮色的分割線。

步驟7：選擇文字工具，添加分類；為了暗示所選中的分類，所選中的分類要用粗體、亮色；其他用普通粗細(xì)，暗色。

然后“雜志”復(fù)制一份，使用粗體+亮色，然后不透明度設(shè)置為0%，暫時(shí)隱藏，“首頁(yè)復(fù)制一份”，常規(guī)體+暗色，不透明度設(shè)置為0%，暫時(shí)隱藏

標(biāo)簽： photoshop制作流暢的動(dòng)態(tài)app演示動(dòng)畫(huà)