2010年4月29日

用 Photoshop 一步一步打造 iPhone Style 圖示

iPhone Style Icon.png最近想要一枚 iPhone 樣式的圖示,無奈上網找了一些圖示產生器都找不到 iPhone 樣式的,不然就是找到不能用。找不到產生器的情況下只好退而求其次,找找看有沒有 Step by Step 的製作說明,中文的沒有,英文倒是有一些些,不過交待得不是非常清楚。摸索弄懂後把他當作筆記寫下來。

懶人包

如果不想一步一步親手打造,這裡有現成的 PSD 檔可下載,下載後直接拿去改就好囉,省去製作的時間。

下載 iPhoneStyleIcon.psd

親手打造

如果對製作過程有點興趣,就繼續往下看吧,這裡是用 Photoshop CS4 製作。整個製作過程區分為下列三大步驟

  1. 打底
  2. 上透明
  3. 下透明

1. 打底

首先新增正方形透明圖片(圖示通常都不會超過 100*100,不過我習慣畫出大圖再縮小來用,以防某一天需要大圖才不用重畫)
2010-04-27_002404.png

拉出上下左右四條參考線,各離邊邊 100px,等等拉圓角矩形時對齊用
2010-04-27_002921.png

使用圓角矩形工具
2010-04-27_002450.png

圓角半徑改成 80px,半徑大小依個人喜好調整看看吧,顏色先隨便選,以後可以很輕鬆調整,不用太在意
2010-04-27_002451.png

開始拉圓角矩形
2010-04-27_002922.png

拉完長這樣
2010-04-27_002923.png

滑鼠左鍵雙擊圖層準備製造陰影效果
2010-04-27_002924.png

勾選陰影,其餘設定可參考下圖或自行調整
2010-04-27_003254.png

打底完成囉
2010-04-27_003255.png

2. 上透明

切到路徑,按右鍵選取製作選取範圍…
2010-04-27_003551.png

按照預設設定
2010-04-27_003622_1.png

選取出剛剛我們畫的底圖
2010-04-27_003623.png

接著縮減選取範圍
2010-04-27_003745.png

縮減 30px
2010-04-27_003807.png

選取範圍縮小了
2010-04-27_003848.png

新增「上透明」圖層
2010-04-27_005940.png

使用漸層工具
2010-04-27_005941.png

按照下表調整漸層中的四個色標的顏色、透明度

左上:不透明 50% 右上:不透明 0%
左下:顏色 全白 右下:顏色 全白

2010-04-27_010049.png

調整好漸層後從選取區最上方拉漸層到最下方
2010-04-27_010135.png

使用橢圓選取畫面工具,準備拉橢圓
2010-04-27_010243.png

記得選取與選取範圍相交
2010-04-27_010245.png

像下圖一樣拉橢圓
2010-04-27_010509.png

拉出來的橢圓會跟縮減後的圓角矩形香蕉相交
2010-04-27_010545.png

接著用快速鍵 Shift+Ctrl+I 反轉選取區,再按下 Del,刪掉不要的漸層,完成上透明圖層囉
2010-04-27_010620.png

3. 下透明

先按照上透明的前六步驟,選取出縮減後的圓角矩形,並新增「下透明」圖層
2010-04-27_011004.png

接著使用矩形選取畫面工具
2010-04-27_010741.png

一樣選取與選取範圍相交
2010-04-27_010245.png

按照下圖拉出下透明區塊
2010-04-27_010920.png

相交後的選取區如下
2010-04-27_010932.png

一樣使用之前建好的漸層工具,從下往上拉漸層
2010-04-27_011015.png

完成囉
2010-04-29_033350.png

最後再加上圖案或文字就是個標準的 iPhone Style 圖示
2010-04-29_033426.png

後記

密密麻麻 20 幾個步驟,看起來頗難,其實是因為寫得很詳細才會這麼多,參考的原文 Design Your iPhone Widgets 因為沒交待這麼詳細,看起來簡單許多。

網路上也有人放出做好的 PSD 檔,不過大小只有 80*80,實在不夠大,以後有機會拿來重製也很不方便,自己做一個不僅可以多點變化,也可以趁機學學 Photoshop。

PS: 要變化底色,只要點選圖層中的縮圖,就可自由變化各式各樣的底色

2010-04-29_034735.png iPhone Style Icon1.pngiPhone Style Icon2.pngiPhone Style Icon3.pngiPhone Style Icon4.png
iPhone Style Icon5.pngiPhone Style Icon6.pngiPhone Style Icon7.png
Related Posts Plugin for WordPress, Blogger...