目前市面上最常見的被用來設計 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 都是這個尺寸。
1.jpg

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

#3. Navigation Bar 的材質
設定圖樣覆蓋,加上材質的質感。
3.jpg

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

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

#6. 打亮 Navigation Bar 的高光
用同樣的方式製做高光處。建立一條 640x2 px 的純白色長條細線,置頂對齊 Navigation Bar。
6.jpg

#7. 製作按鈕
使用形狀工具中的「圓角矩形工具」畫出長方形。
7.jpg

#8. 按鈕要和 Navigation Bar 相同風格
在 Navigation Bar 底圖圖層上按右鍵,選「拷貝圖層樣式」。
8.jpg

#9. 複製貼上最快…
在按鈕圖層點選滑鼠右鍵,「貼上圖層樣式」。
9.jpg

#10. 貼上後長這樣
此時按鈕的樣式就會和 Navigation Bar 一樣,要加上點修飾讓它凸顯出來。
10.jpg

#11. 加強按鈕輪廓
設定「筆畫」讓按鈕的輪廓線明確些。
11.jpg

#12. 增加立體感,突顯按鈕
「內光暈」可以加強光影變化,讓按鈕更立體。
12.jpg

#13. 輸入文字
使用文字工具,輸入「Edit」。
13.jpg

#14. 加強文字光影
文字也加上陰影,讓字體更明顯。
14.jpg

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

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

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

comments powered by Disqus