使用Photoshop制作iphone4界面

朱峰社區(qū)在本節(jié)教程中為大家展現(xiàn)如何使用photoshop制作iphone4界面。朱峰社區(qū)老師將使用一些基本的繪圖工具和圖層樣式來(lái)盡量營(yíng)造手機(jī)的真實(shí)感。我們開(kāi)始教程吧。

最終效果預(yù)覽

第一步。

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

第二步。

在photoshop中打開(kāi)從stock.xchng下載的紋理圖片，置于背景層的上方，降低不透明度為8%。

第三步。

導(dǎo)入從蘋(píng)果官網(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屏幕。

打開(kāi)simekonelove 提供的iphone 壁紙，置于“wallpaper”圖層的上方，按alt+ctrl+g創(chuàng)建剪切蒙版。

第十步。

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

第十一步。

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

第十二步。

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

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

畫(huà)一個(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)建聽(tīng)筒。畫(huà)一個(gè)小的圓角矩形如下圖：

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

添加圖層樣式如下：

顏色疊加

圖案疊加

第十六步。

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

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

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