當前位置:首頁>ps入門教程>動圖教程>動畫教程>教程內(nèi)容

ps設計平板電腦應用程序動畫模擬(4)

來源:飛特網(wǎng) 作者:情非得已 學習:5152人次

第二十八步:底部工具按鈕

1、在編組“底部工具條”(第十一步創(chuàng)建的)中,添加幾個圖標,首頁、刷新、設置、訂閱,在每個圖標下方添加文字 顏色為 #818181

2、設置圖標樣式

Photoshop制作iPad應用程序動畫模擬教程,PS教程,16xx8.com教程網(wǎng)

 

第二十九步:按鈕選中狀態(tài)

1、用矩形工具(U)繪制一個矩形,白色,填充為 14%

2、修改首頁圖標的樣式,和字體顏色

Photoshop制作iPad應用程序動畫模擬教程,PS教程,16xx8.com教程網(wǎng)

第三十步:添加訂閱按鈕

1、在編組“新聞中心”內(nèi),用圓角矩形工具(U),繪制一個圓角矩形 半徑 5px,并應用“刷新”圖標的圖層樣式,最后加上文字

Photoshop制作iPad應用程序動畫模擬教程,PS教程,16xx8.com教程網(wǎng)

第三十一步:新聞詳情

1、在編組“新聞中心”上新建一個編組名為“新聞詳情頁”,用矩形工具(U)繪制一個黑色矩形,不透明度 75%

2、添加新聞頁的圖片和文字

Photoshop制作iPad應用程序動畫模擬教程,PS教程,16xx8.com教程網(wǎng)

第三十二步:關閉按鈕

1、把所有新聞圖片和內(nèi)容 編組 名為“新聞”,把黑色背景命名為“新聞頁背景”

2、用橢圓工具(U),在新聞頁的左上角繪制一個圓,背景色 #B9B9B9,描邊 2px 白色,在圓上輸入字符“X”,

Photoshop制作iPad應用程序動畫模擬教程,PS教程,16xx8.com教程網(wǎng)

第三十三步:新聞區(qū)域蒙版

1、把編組“新聞”轉(zhuǎn)換為智能對象

2、用矩形工具(U),在智能對象下方,繪制一個黑色矩形,作為蒙版,命名為“蒙版”

3、在智能對象和蒙版兩個圖層之間,按住Alt鍵 同時鼠標左鍵點擊,新聞詳情頁的可視區(qū)域就是蒙版的大小了,

Photoshop制作iPad應用程序動畫模擬教程,PS教程,16xx8.com教程網(wǎng)

到這里ipad應用程序的靜態(tài)部分已經(jīng)完成了,接下來我們添加動畫效果!第三十四步:打開動畫面板

首先介紹一下制作動畫效果的簡單步驟:A、在動畫面板選擇對象層 B、拖動時間軸上的手柄到到相應的時間點 C、添加關鍵幀 D、移動對象到你想要的位置。

技巧:如果要修改位置,首先要選擇關鍵幀

Photoshop制作iPad應用程序動畫模擬教程,PS教程,16xx8.com教程網(wǎng)

 

“菜單 》 窗口 》 動畫 ,打開動畫面板

Photoshop制作iPad應用程序動畫模擬教程,PS教程,16xx8.com教程網(wǎng)

第三十五步:隱藏“新聞詳情頁”

在動畫面板上,選擇“新聞詳情頁”,并展開,點擊“不透明度”前的秒表圖標,這樣就創(chuàng)建了一個關鍵幀,此時就可以設置圖層不透明屬性為0

Photoshop制作iPad應用程序動畫模擬教程,PS教程,16xx8.com教程網(wǎng)

第三十六步:滑動訂閱欄

1、在動畫面板上 展開編組“訂閱欄”中的圖層“文章”,把時間軸上的手柄拖到1秒,點擊“文章”位置屬性前的秒表,創(chuàng)建一個關鍵幀

2、把時間軸手柄拖到 3秒,在創(chuàng)建一個關鍵幀,同時向左移動訂閱欄

3、在4秒處創(chuàng)建一個關鍵幀,不做任何操作

4、在6秒處創(chuàng)建一個關鍵幀,向右移動訂閱欄到初始位置

Photoshop制作iPad應用程序動畫模擬教程,PS教程,16xx8.com教程網(wǎng)

拖動時間軸上左右兩邊手柄,可以設定動畫運行的時間

Photoshop制作iPad應用程序動畫模擬教程,PS教程,16xx8.com教程網(wǎng)

第三十七步:把“新聞中心”轉(zhuǎn)換成智能對象

1、把編組“新聞中心”轉(zhuǎn)成智能對象

2、復制圖層“漸變填充1”,命名為“屏幕蒙版”,并把它拖動到智能對象”新聞中心“上方,接著在蒙版上填充1024x617px黑色區(qū)域,作為新聞中心的滑動區(qū)域

Photoshop制作iPad應用程序動畫模擬教程,PS教程,16xx8.com教程網(wǎng)

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側(cè)二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關注大神微博加入>>

網(wǎng)友求助,請回答!