使用PS制作IPOD界面教程

你想擁有一臺(tái)功能齊全的ipod嗎！朱峰社區(qū)在本節(jié)為大家展現(xiàn)的是使用ps制作一個(gè)ipod的清爽界面。朱峰社區(qū)老師表示在photoshop中重構(gòu)一個(gè)產(chǎn)品是很大的挑戰(zhàn)，但同時(shí)也樂趣無窮�，F(xiàn)在我們開始去體驗(yàn)快樂吧。

最終效果

1、在photoshop中新建文件寬624px、高921px，背景色設(shè)為白色，分辨率72dpi。添加從上到下，藍(lán)到白漸變。選擇“圓角矩形工具”，圓角半徑設(shè)為22px，繪制如下圖所示的形狀，把該圖層重命名為“border”。

02

在“border”圖層上摳出邊框來。按住ctrl鍵單擊“border”圖層縮略圖，取得選區(qū)，執(zhí)行“選擇-修改-縮減”，縮減6px，按delete刪除。

03

使用索討工具單擊“border”內(nèi)部取得選區(qū)，新建圖層填充黑色，把該圖層重命名為“black glass”。新建圖層，重命名為“screen”，使用矩形工具繪制屏幕，到目前為止我們得到4個(gè)圖層，background、border、black glass、screen。

04

2、我們回過頭來處理“border”圖層。選中圖層，添加圖層樣式。斜面/浮雕、顏色疊加和描邊。

05

06

07

08

09

選中“black blass”圖層，添加線性“漸變疊加”，顏色設(shè)置為：#5b5c60-# 000000。

10

3、現(xiàn)在我們添加屏幕壁紙。首先我們下載pkarwowski 提供的背景圖，導(dǎo)入到photoshop中，置于“screen”圖層的上方，然后按住alt+ctrl+g創(chuàng)建剪貼蒙版。

11

4、前景色設(shè)為白色，新建圖層，重命名為“dock”，畫一個(gè)長(zhǎng)方形，然后執(zhí)行“編輯-變形-扭曲”，拖動(dòng)上方的兩個(gè)角點(diǎn)向中間移動(dòng)如下圖：

12

選中“dock”圖層，添加圖層樣式“漸變疊加”，顏色設(shè)置為#454637到#fafbfc的漸變。

13

把“dock”圖層不透明度降低為58%。我們繼續(xù)制作屏幕頂部的信息欄并且添加ipad圖標(biāo)。

14

5、現(xiàn)在我們添加些icon圖標(biāo)到桌面，下載本文所用圖標(biāo)（當(dāng)然您可以使用谷歌搜索滿意的圖標(biāo)）。打開下載好的 safari 圖標(biāo)，把它導(dǎo)入photoshop并且放置在“dock”層的上方，調(diào)整其大小。

15

為 safari 圖標(biāo)創(chuàng)建倒影。復(fù)制圖標(biāo)，然后執(zhí)行“編輯-變形-垂直翻轉(zhuǎn)”

16

降低圖層的不透明度為21%，創(chuàng)建黑色到透明的漸變疊加。

17

選取并刪除溢出屏幕的倒影部分。

18

重復(fù)相同的過程，為桌面添加其他3個(gè)圖標(biāo)。

19

6、下面來添加按鈕以完善我們的ipad界面。畫一個(gè)白色的圓作為開始按鈕，然后繼續(xù)在其內(nèi)部畫一個(gè)圓角半徑為2px的圓角矩形。

20

對(duì)小圓應(yīng)用漸變疊加，顏色設(shè)置如下：#4c4d51-#060606。然后給小的圓角矩形添加描邊和漸變疊加，同時(shí)降低圖層不透明度到19%。

21

7、選擇圓角矩形工具，圓角半徑設(shè)為2px，然后分別繪制按鈕a和按鈕b。

22

制作按鈕c時(shí)，首先在頂部-圓角矩形工具設(shè)置面板上選擇“形狀圖層”（最左側(cè)的一個(gè)），然后設(shè)置圓角半徑2px 畫出按鈕c。

23

使用鋼筆工具為按鈕c增加錨點(diǎn)如下圖所示，然后使用直接選擇工具選中錨點(diǎn)，按左方向鍵向左側(cè)移動(dòng)3個(gè)像素。最后把所有按鈕都置于“border”層的下方。

24

教程結(jié)束，希望大家能夠喜歡。