目前市面上最常見的被用來設計 APP 介面軟體為 Adobe 的 Photoshop 和 Illustrator。Illustrator 屬向量軟體，不管再多次的放大縮小，向量圖的質量不會因此改變。Photoshop 是繪圖影像處理軟體，像素圖片一經放大縮小後畫質會變差，偏偏目前 iOS 需製作 2 種、Android 至少也要作 3 種尺寸的圖檔，有時候還會有不知道哪邊來的交辦要 UI 協助製作「等身高大 iPhone」。為了提升畫面的精緻度（和對付這種強人所難的需求），還是盡量以無損圖片方式製作圖稿、運用比較靈活。

不知道為什麼這麼多人鼓吹初學者用 Illustrator 來設計 UI ，念廣告設計科的時候老師就千交代萬交代：Illustrator 是向量軟體，主要是給印刷品使用，不適合處理以 PX 為單位的影像。在介面的世界裡多是用 PX 為基準，可以的話還是用 Photoshop 來設計介面吧。（順便一提、Indesign 是書籍排版用的，Adobe 的產品線都很明確）。

如果堅持要用向量軟體來設計 UI ，推薦這套Sketch 2 。它介於 PS 和 AI 之間，有 PS 圖層樣式的優點、也改良 AI 切圖輸出不精準的缺點，除了影像處理稍弱外，在設計介面上很方便（且比 Adobe 的軟體便宜很多）。

不過，在這篇文中還是以 Photoshop 裡能運用的各種無損圖片的製圖方式為主，因為文章太長，分成上下篇。

形狀圖層（向量）

Photoshop 中也是有向量繪圖工具，採用形狀圖層，活用筆型工具、路徑選取工具，搭配圖層樣式，一樣能得到精緻的效果。

在 App 裡，Navigation Bar 是最常遇到需要製作的元件之一，可使用形狀圖層快速製作。以下教學就以形狀圖層的方式，做一條 Bar 和一顆按鈕。

1. Navigation Bar 的範圍

使用形狀工具裡的「矩形工具」畫出一個 640x88 px 的長方形。只要是iPhone 4 之後的 Navigation Bar 都是這個尺寸。

2. Navigation Bar 的光影

添加圖層樣式，設定漸層覆蓋。使用灰階上淺下深，讓 Navigation Bar 有基本從上方打光的光影變化。淺色和深色差距 HSB 的B數值不超過 20，超過光影會太強烈會變成復古 10 年的公家機關風格。

3. Navigation Bar 的材質

設定圖樣覆蓋，加上材質的質感。

4. Navigation Bar 的色彩

顏色覆蓋，讓 Navigation Bar 偏藍綠色。這種作法可以快速修改測試 Navigation Bar 的色彩。（如果遇到客戶要求出個11種不同顏色的 Navigation Bar，你會很感謝這招。）

5. 加強 Navigation Bar 最深的陰影處

iOS 預設皆由正上方打光，將 Navigation Bar 的最暗處製作出來會讓畫面顯得更真實精緻。使用矩型工具，建立一條 640x2 px 的純黑色長條細線，置底對齊 Navigation Bar 。

6. 打亮 Navigation Bar 的高光

用同樣的方式製做高光處。建立一條 640x2 px 的純白色長條細線，置頂對齊 Navigation Bar。

7. 製作按鈕

使用形狀工具中的「圓角矩形工具」畫出長方形。

8. 按鈕要和 Navigation Bar 相同風格

在 Navigation Bar 底圖圖層上按右鍵，選「拷貝圖層樣式」。

9. 複製貼上最快…

在按鈕圖層點選滑鼠右鍵，「貼上圖層樣式」。

10. 貼上後長這樣

此時按鈕的樣式就會和 Navigation Bar 一樣，要加上點修飾讓它凸顯出來。

11. 加強按鈕輪廓

設定「筆畫」讓按鈕的輪廓線明確些。

12. 增加立體感，突顯按鈕

「內光暈」可以加強光影變化，讓按鈕更立體。

13. 輸入文字

使用文字工具，輸入「Edit」。

14. 加強文字光影

文字也加上陰影，讓字體更明顯。

15.完成

記得每新增一個圖層，就順手將圖層命名整理，以後不僅修改快速，也讓接手的人便於處理。

雖然現在流行扁平化設計，出這篇教學似乎過時了，BUT！台灣的客戶真能接受扁平化那種色塊的沒幾個人，他們會覺得「空白的地方太多＝設計師沒做事」。為了跟上潮流和迎合停在擬物風 iOS6 的客戶，做個折中方案的話，可以考慮用這篇教學的作法。這是很基本很簡單的製作方式，熟的話不用3分鐘就做好了，然後就不停的拷貝貼上做出其他頁、頂多改改按鈕上文字，很快很方便。善用「拷貝圖層樣式」能加快很多工作速度。

無損圖片的製作方式（下） 將介紹智慧型物件、智慧型濾鏡、在ai畫好、貼到ps的技巧、遮色片、調整圖層等不同的技巧。