Photoshop教程:繪制逼真的Iphone4界面

作者:譯者：luycas　  出處:網(wǎng)站

今天我們將學(xué)習(xí)如何在Photoshop中制作Iphone4。我們使用一些基本的繪圖工具和圖層樣式來盡量營造手機(jī)的真實(shí)感。iPhone 是一款蘋果公司出品創(chuàng)新的可觸摸寬屏iPod以及具有桌面級(jí)電子郵件、網(wǎng)頁瀏覽、搜索和地圖功能的突破性因特網(wǎng)通信設(shè)備這三種產(chǎn)品完美地融為一體的移動(dòng)電 話。用戶界面設(shè)計(jì)主要包括可多點(diǎn)觸控的屏幕、可視化的虛擬鍵盤并非真實(shí)存在。本教程所展示的技巧可以幫助你設(shè)計(jì)任何設(shè)備，比如壁掛電視、掌上電腦等。希望 你能喜歡，我們開始教程吧。

最終效果預(yù)覽

能力等級(jí)：中級(jí)

第一步.
首先我們?cè)赑hotoshop中新建文件，寬6.33cm、高7.79cm，分辨率300dpi。雙擊背景層解鎖，然后應(yīng)用漸變疊加(漸變色由上到下依次設(shè)置為#9d9d9d-#cecece-#ffffff)如下：

第二步.
在Photoshop中打開從Stock.Xchng下載的紋理圖片，置于背景層的上方，降低不透明度為8%。

第三步.
導(dǎo)入從蘋果官網(wǎng)apple.com下載的iphone照片，然后給手機(jī)的邊緣和屏幕繪制參考線。

第四步.
把前景色設(shè)為黑色，沿著外圈參考線，使用圓角矩形工具（圓角半徑：27px）繪制手機(jī)外形，把該圖層重命名為“body”.

第五步.
給“body”圖層添加漸變描邊，參數(shù)設(shè)置如下：

給“body”圖層添加投影，參數(shù)設(shè)置如下：

第六步.
使用矩形工具繪制一些小的黑色凹痕。

第七步.
在“body”圖層下方，繪制四個(gè)矩形作為手機(jī)的按鈕。

對(duì)左側(cè)3個(gè)按鈕按鈕應(yīng)用漸變疊加（漸變色從左到右依次設(shè)置為#515050-#a29f9f-#d9d5d5-#545353-#ecebeb-#5f5f5f）
參數(shù)設(shè)置如下：

對(duì)頂端按鈕應(yīng)用漸變疊加(漸變色從左到右依次設(shè)置為#7f7b7b-#a29f9f-#d9d5d5-#aeabab-#ecebeb-#979696)

參數(shù)設(shè)置如下:

對(duì)全部4個(gè)按鈕應(yīng)用1px的內(nèi)描邊，描邊顏色#716f6f。

第八步.
新建Home按鈕，使用橢圓工具按住Shift鍵繪制正圓。

對(duì)圓應(yīng)用漸變疊加，選擇“線性漸變”，顏色設(shè)為#000000到#3d3c3c的漸變，參數(shù)設(shè)置如下：

在圓形按鈕上方新建小的圓角矩形并且添加1px的白色描邊。

第九步.
新建圖層重命名為”wallpaper”,使用矩形工具新建iphone屏幕。

打開SimekOneLove 提供的iPhone 壁紙，置于“wallpaper”圖層的上方，按Alt+Ctrl+G創(chuàng)建剪切蒙版。

第十步.

現(xiàn)在我們來創(chuàng)建照相機(jī)的工作界面。新建圖層，重命名為“Camera Button”，沿著參考線繪制矩形，添加漸變疊加，顏色設(shè)置為#abacb0到#FFFFFF。

第十一步.
接下來創(chuàng)建照相機(jī)按鈕。使用圓角矩形工具，圓角半徑設(shè)置為20px，繪制按鈕。對(duì)按鈕應(yīng)用漸變疊加（設(shè)置同第十步），添加內(nèi)陰影效果，設(shè)置如下：

第十二步.
接下來通過組合基本圖形繪制照相機(jī)圖標(biāo)。照相機(jī)圖標(biāo)中的白色圓形是用橢圓工具畫的，然后添加3px的外描邊。群組并復(fù)制照相機(jī)圖標(biāo)，移動(dòng)到照相機(jī)操作欄的右上角，然后使用相同的方法繪制視頻圖標(biāo)。

接下來制作照相機(jī)滑動(dòng)按鈕。首先繪制半徑為20px的圓角矩形，添加顏色疊加樣式（顏色#7e7f84），添加內(nèi)陰影。

畫一個(gè)小一些的圓角矩形作為滑動(dòng)按鈕如下圖，復(fù)制“Camera Button”圖層樣式，粘貼到當(dāng)前圖層。

第十三步.
繪制另外一個(gè)圓角矩形（圓角半徑10px）作為“照片預(yù)覽”窗口。

復(fù)制屏幕壁紙圖層置于最頂層，按Ctrl+Alt+G創(chuàng)建剪切蒙版，然后Ctrl+T調(diào)整壁紙尺寸以符合預(yù)覽窗口大小。

第十四步.
現(xiàn)在創(chuàng)建手機(jī)的高反光效果。按Ctrl鍵單擊“Body Layer”圖層取得選區(qū).

執(zhí)行“選擇-編輯-收縮”，收縮半徑5px。

新建圖層，置于圖層最頂端，創(chuàng)建白色到透明的漸變疊加如下圖：

使用多邊形索討工具取得如下選區(qū)。

按Delete 刪除，然后降低圖層不透明度為43%。

第十五步.
在手機(jī)的頂部創(chuàng)建聽筒。畫一個(gè)小的圓角矩形如下圖：

按Ctrl鍵單擊圖層縮略圖取得圓角矩形選區(qū)，執(zhí)行“選擇-編輯-收縮”，收縮半徑3px。新建圖層，隨意填充一種顏色。

添加圖層樣式如下：

顏色疊加

圖案疊加

第十六步.
現(xiàn)在我們來畫攝像頭。使用橢圓工具畫一個(gè)正圓，添加線性漸變疊加（顏色設(shè)置:#3d3c3c-#000000）如下：

復(fù)制正圓并按Shift等比例縮放，添加外發(fā)光，顏色#566771。

最終效果，教程結(jié)束。