下載吧 - 綠色安全的游戲和軟件下載中心

軟件下載吧

當(dāng)前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > Photoshop設(shè)計動態(tài)APP演示動畫

Photoshop設(shè)計動態(tài)APP演示動畫

時間:2024-03-07 09:01作者:下載吧人氣:26

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

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

步驟1

新建畫布

Photoshop設(shè)計動態(tài)APP演示動畫

步驟2

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

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

完成后效果如下圖。

Photoshop設(shè)計動態(tài)APP演示動畫

步驟 3

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

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

Photoshop設(shè)計動態(tài)APP演示動畫

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

Photoshop設(shè)計動態(tài)APP演示動畫

步驟4

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

Photoshop設(shè)計動態(tài)APP演示動畫

步驟5

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

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

Photoshop設(shè)計動態(tài)APP演示動畫

步驟6

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

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

Photoshop設(shè)計動態(tài)APP演示動畫

步驟7

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

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

其他用普通粗細(xì),暗色。

然后“雜志”復(fù)制一份,使用粗體+亮色,然后不透明度設(shè)置為0%,暫時隱藏

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

Photoshop設(shè)計動態(tài)APP演示動畫

Photoshop設(shè)計動態(tài)APP演示動畫

步驟8

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

Photoshop設(shè)計動態(tài)APP演示動畫

步驟9

背景填充為標(biāo)題欄和菜單欄的顏色,確保背景圖層處于GUI元素下方。

Photoshop設(shè)計動態(tài)APP演示動畫

步驟10

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

Photoshop設(shè)計動態(tài)APP演示動畫

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

Photoshop設(shè)計動態(tài)APP演示動畫

Photoshop設(shè)計動態(tài)APP演示動畫

Photoshop設(shè)計動態(tài)APP演示動畫

步驟11

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

Photoshop設(shè)計動態(tài)APP演示動畫

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

Photoshop設(shè)計動態(tài)APP演示動畫

步驟12

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

Photoshop設(shè)計動態(tài)APP演示動畫

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

最后添加幾個按鈕圖標(biāo)。

Photoshop設(shè)計動態(tài)APP演示動畫

步驟13

其他幾個矩形同理

Photoshop設(shè)計動態(tài)APP演示動畫

步驟14

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

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

Photoshop設(shè)計動態(tài)APP演示動畫

觸控點

步驟1

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

Photoshop設(shè)計動態(tài)APP演示動畫

步驟2

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

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

完事后居中對齊

Photoshop設(shè)計動態(tài)APP演示動畫

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

滾動效果

步驟1

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

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

Photoshop設(shè)計動態(tài)APP演示動畫

Photoshop設(shè)計動態(tài)APP演示動畫

步驟2

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

Photoshop設(shè)計動態(tài)APP演示動畫

步驟3

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

Photoshop設(shè)計動態(tài)APP演示動畫

步驟4

添加幀

Photoshop設(shè)計動態(tài)APP演示動畫

步驟5

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

Photoshop設(shè)計動態(tài)APP演示動畫

步驟6

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

設(shè)置如下

Photoshop設(shè)計動態(tài)APP演示動畫

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

Photoshop設(shè)計動態(tài)APP演示動畫

步驟7

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

Photoshop設(shè)計動態(tài)APP演示動畫

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

Photoshop設(shè)計動態(tài)APP演示動畫

步驟8

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

拷貝單幀

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

Photoshop設(shè)計動態(tài)APP演示動畫

Photoshop設(shè)計動態(tài)APP演示動畫

步驟9

同步驟7,選擇過渡

Photoshop設(shè)計動態(tài)APP演示動畫

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

Photoshop設(shè)計動態(tài)APP演示動畫

效果演示:

Photoshop設(shè)計動態(tài)APP演示動畫

點擊菜單分類項效果

步驟1

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

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

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

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

Photoshop設(shè)計動態(tài)APP演示動畫

步驟2

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

Photoshop設(shè)計動態(tài)APP演示動畫

步驟3

創(chuàng)建新幀,延遲0.1s,隱藏tap圖層組中最細(xì)的描邊

Photoshop設(shè)計動態(tài)APP演示動畫

步驟4

再添加一幀,再隱藏剩下的那個描邊

Photoshop設(shè)計動態(tài)APP演示動畫

步驟5

添加新幀,隱藏tap圓

Photoshop設(shè)計動態(tài)APP演示動畫

步驟6

創(chuàng)建新幀,將和雜志無關(guān)的內(nèi)容項不透明度設(shè)置為0%(這里修改了最后一個作品)

Photoshop設(shè)計動態(tài)APP演示動畫

步驟7

依舊在這一幀中,將和雜志相關(guān)項上移

Photoshop設(shè)計動態(tài)APP演示動畫

步驟8

在當(dāng)前幀和上一幀直接選擇過渡,為了加速動效,要添加的幀數(shù)選擇3

步驟9

最后一幀設(shè)置延遲1s

Photoshop設(shè)計動態(tài)APP演示動畫

效果展示:

Photoshop設(shè)計動態(tài)APP演示動畫

點擊具體項效果

步驟1

創(chuàng)建關(guān)鍵幀,延遲0.2s,顯示Tap圖層組(移動到具體項位置)

Photoshop設(shè)計動態(tài)APP演示動畫

步驟2

添加新幀,延遲0.1s,隱藏最細(xì)的描邊

再添加新幀,隱藏次細(xì)描邊

Photoshop設(shè)計動態(tài)APP演示動畫

步驟 3

添加幀,隱藏Tap圓圖層。

添加幀,將具體項大圖不透明度設(shè)置為100%,將圖中的小項不透明度設(shè)置為0%

Photoshop設(shè)計動態(tài)APP演示動畫

步驟4

在當(dāng)前幀和前一幀添加過渡,要添加的幀數(shù)5

效果:

Photoshop設(shè)計動態(tài)APP演示動畫

嵌入到手機模板里

步驟1

時間軸面板,選擇將幀數(shù)拼合到圖層

Photoshop設(shè)計動態(tài)APP演示動畫

每一幀都變成了圖層

步驟2

在圖層面板中選擇所有幀,轉(zhuǎn)換為智能對象,然后點擊轉(zhuǎn)換為視頻時間軸

Photoshop設(shè)計動態(tài)APP演示動畫

Photoshop設(shè)計動態(tài)APP演示動畫

步驟3

將智能對象復(fù)制到模板PSD里面

Photoshop設(shè)計動態(tài)APP演示動畫

Photoshop設(shè)計動態(tài)APP演示動畫

步驟4

選擇智能對象,按cmd+(Control-T),按住CMD/Control來調(diào)整每個點。

Photoshop設(shè)計動態(tài)APP演示動畫

Photoshop設(shè)計動態(tài)APP演示動畫

步驟5

保存為web所用格式,ok,成功。

(如果對效果不滿意,可以導(dǎo)出城視頻,然后導(dǎo)入到AE中合成)

Photoshop設(shè)計動態(tài)APP演示動畫

動態(tài)技巧干貨!

標(biāo)簽PS教程, ui設(shè)計, 經(jīng)驗分享
查看所有評論+

網(wǎng)友評論

網(wǎng)友
您的評論需要經(jīng)過審核才能顯示

公眾號

盖楼回复X

(您的评论需要经过审核才能显示)

主站蜘蛛池模板: 狠狠躁夜夜躁人人爽天天不| jizz国产丝袜18老师美女| 亚洲欧美日韩久久精品第一区| 中文字幕julia中文字幕| 青青草国产免费国产| 老司机一级毛片| 日本久久综合网| 国产国语一级毛片中文| 久久精品国产亚洲av不卡| 久久精品老司机| 日韩在线天堂免费观看| 国产女人18毛片水真多18精品| 久久精品亚洲精品国产欧美| 高清无码一区二区在线观看吞精| 日韩欧美亚洲乱码中文字幕| 国产妇女馒头高清泬20p多| 久久精品视频16| 车车好快的车车流水网站入口| 日本特黄高清免费大片爽| 国产中文字幕在线观看视频| 中文字幕日韩在线观看| 自拍偷在线精品自拍偷| 成人年无码AV片在线观看| 十分钟在线观看免费视频www| www.在线视频yy| 波多野结衣痴女系列73| 国产色欲AV一区二区三区| 亚洲欧美偷自乱图片| 男女无遮挡动态图| 日韩欧美国产亚洲| 国产乱子伦精品无码专区| 下面一进一出好爽视频| 男人边吃奶边摸下边的视频| 在线精品自拍亚洲第一区 | 亚洲国产成人久久综合碰| 美女网站在线观看视频免费的| 末成年女av片一区二区| 天堂av无码av一区二区三区| 亚洲欧美日韩另类精品一区二区三区| 香蕉狠狠再啪线视频| 日韩欧美一区二区三区在线|