Photoshop設(shè)計(jì)動(dòng)態(tài)APP演示動(dòng)畫(huà)

2023-12-04 17:38:55 來(lái)源/作者: / 己有:0人學(xué)習(xí)過(guò)

本教程使用了PS CC,但是CS5和CS6依然能夠支持本教程。

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

步驟1

新建畫(huà)布

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

步驟2

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

視圖>新建參考線,水平,在40px,128px,220px處設(shè)置水平參考線。

完成后效果如下圖。

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

步驟 3

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

不過(guò)這里我用了iOS 7 UI Kit的動(dòng)作包>>>>微盤(pán)下載

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

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

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

步驟4

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

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

步驟5

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

再畫(huà)一個(gè)選項(xiàng)icon,圓角矩形即可,顏色和App Logo相同。

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