Photoshop設計軟體APP圖示的30個技巧
阿新 • • 發佈：2019-02-20
在本文中我(英文原作者)總結了在photoshop中設計ios軟體時所遵守的方法。許多的技巧適用於一般的UI設計。注意：文中所提到的快捷鍵針對於Windows;Mac 使用者可，Cmd對應Crtl鍵，Opt對應Alt鍵。
1.保持尺寸為偶數
你是首先針對Retina螢幕設計然後再對標準解析度的進行縮小是吧?為了在標準解析度下畫素仍然保持完美的呈現，你需要保證大小和距離為偶數。具體的做法便是：基於2ps的網格設計。在編輯(Edit)〉首選項(Preference)〉參考線、網格和切片(Cuides,Grids&Slices)。更改網格線間隔(Gridline)和子網格(Subdivisions)來是使得網格間隔線為2px。例如：設定網格線間隔為64px，子網格為32。
2.混合模式只使用正常模式
在設定直接處於其他元素上面的圖層效果時，混合模式只使用正常(例如：在混合選項中投影和外發光)。使用其他的混合模式或許在Photoshop中看起來很好，但是也可能會在在儲存為PNG格式之後出現不良的效果。
3.更方便的改變漸變顏色
想要更改漸變按鈕的色調(色相)，而不必每次都去改變漸變的起始顏色值?下面介紹兩個方法，均可達到完全一樣的效果。
方法1：在漸變圖層混合選項中使用顏色疊加
建立一個漸變圖層。起始顏色設為淺灰和深灰色，也可以在之後調整。
為按鈕建立向量蒙版。
複製向量蒙版貼上到漸變圖層(選擇向量蒙版〉Ctrll+ C〉選擇漸變圖層〉Ctrl + V)
設定圖層〉向量蒙版〉當前路徑
設定漸變圖層混合選項〉顏色疊加更改混合模式為顏色。
現在便可以只是更改此處的顏色來更改漸變。
方法2：在純色圖層使用漸變疊加
用你想要的顏色，建立一個純色的圖層。
和方法1相同。
和方法1相同。
和方法1相同。
在純色模版混合選項〉漸變疊加，設定混合模式為明度(Luminosity)。
現在只是改變純色模版的顏色即可改變漸變。
譯者注：上述使用了向量蒙版，其實使用剪下蒙版也可達到相應的效果，個人認為還簡單點。
4.更多的使用徑向漸變
在導航條上疊加徑向漸變層，讓導航欄變得更為有趣。
方法1：徑向漸變工具
在導航條圖層上方新建圖層。
複製導航條圖層的向量蒙版到剛才新建的圖層(按住Ctrl + Alt同時按滑鼠左鍵拖動向量蒙版到新圖層)。
選擇徑向漸變工具(設定漸變為中心白色末端全透明)。
在圖層中從中心到邊緣繪製漸變。
改變圖層混合模式為疊加(Overlay)設定不透明度為25%。
方法2：斜面和浮雕
同樣也可以使用圖層混合選項中的斜面和浮雕。可以按下圖所示來設定。通過調整設定來達到你想要的效果。通常調整的越為精妙效果也越為好看。
5.更多的使用陰影變形
Photoshop中陰影(任何的其他圖層效果)和它對應圖層可以分開。這樣便可獨立操作陰影。
選擇圖層〉圖層樣式〉建立圖層(譯者注：必須在對圖層使用了混合選項中的效果才能使用此命令，此步目的即是將效果和圖層分離)。
轉換圖層為智慧物件(在混合選項中勾選透明形狀圖層。右擊圖層〉選擇轉換為智慧物件)，這樣你就可以在之後編輯效果。
Ctrl + T 選擇變形。
點選和拖動手柄來改變形狀。手柄不會對其網格，但可以使用網格作為參考對其他的手柄進行重複同樣的拖動。
往上輕移圖層直到像下圖效果。
6.使用內發光更容易的增加精細的紋理
像下圖所示通過內發光快速的增加紋理。
7.隱藏路徑
Photoshop cs6中比較惱人的一點是當你選中一個形狀圖層的時候形狀的路徑會顯示出來，並且在你操作該圖層的時候路徑會一直存在，譬如在更改圖層混合選項的時候。你和使用Ctrl + H 來隱藏所有的輔助工具(路徑、網格線和參考線)，當然你可以按Ctrl + Shift + H 只隱藏路徑。
8.使用對齊畫素網格來使形狀畫素完美
這算是cs6中最好的改進之一了。按Ctrl + K 開啟首選選面板選擇將向量工具與變換與畫素網格對其(Snap Vector Tools and Transforms to Pixel Grid)勾選。在cs5中只有形狀(沒有變換)與畫素網格對齊。像下圖示在首選項〉常規中勾選最下面一項。
cs5中只有形狀對齊
9.使用電子表格來計算縮圖的尺寸
想要建立一個iPad app來展示大量的縮圖?使用電子表格來計算縮圖的尺寸和之間的尺寸。電子表格實時的計算並展示了在改變一個尺寸之後對其他元素的影響以及它們是否適用於螢幕。下載(iPad-Grid-Calculator)我在建立iPad app使用建立的微軟Excel 表格(檔案中包含了4個表格，6×6, 5×5, 4×4 和3×3)。
10.自動匯出資原始檔
如果你必須建立圖片資源，選擇檔案(File)〉指令碼(Script)〉將圖層匯出到檔案(Export Layers to Files)。
11.圖層複製的時避免給圖層名新增字尾同時避免圖層效果得到擴張
對每次複製圖層都在圖層名稱後面新增副本(copy)的字眼很是惱火?同時惱火的是每次複製貼上圖層效果的時候圖層效果就會擴張?可以圖層面板選項中將兩者關閉。
12.以15°的步長旋轉
在自由旋轉的時候，可以按住Shift以15°的倍數旋轉。
13.儲存樣式
儲存多次使用的樣式到樣式面板，這樣免去每次都複製貼上的麻煩。
14.在開啟的兩個檔案之間移動圖層
按下V選擇移動工具〉選中想要移動的圖層〉在當前檔案內(不是圖層面板)左擊不鬆開〉拖動游標到目標檔案的名稱標籤上〉當檔案切換之後將游標拖動到檔案內，然後鬆開滑鼠。
15.設定全域性光為90°
當光源在90°的時候高光、陰影以及其他圖層效果看起來最好。為了避免重複設定，在混合選項中(斜面和浮雕、內發光和陰影)勾選使用全域性光。或者選擇圖層〉圖層樣式〉使用全域性光。
16.在你建立圖層的時候你便對它進行命名
在將設計文件發給開發人員之前對圖層命名是件令人頭痛的事情。因此不妨形成在建立圖層的同時就給它命名的習慣。
17.使用自定義快捷鍵
注意哪些工具和任務是你最常用到的，為它們建立快捷鍵。例如，如果你發現將一個檔案傳送給開發人員處理的時候你需要重新命名大量的圖層，我使用功能鍵F2作為快捷鍵。
18.使用徑向漸變
使用徑向漸變有時候會看起來有點扁平。試試用徑向漸變作為背景，還可以用內發光來強調。
19.努力做到非破壞的編輯
通過使用智慧物件和調整圖層來做到一個非破壞性的工作流程。當你發發現自己需要重複編輯同樣東西的時候這會幫你減少很多痛苦。
20.在對檔案作重大改變之前備份檔案
當你發現儲存了自己不想要的變化，或者在撤銷更改之前意外地關閉了檔案(譯者注：這樣會導致丟失歷史記錄)，備份檔案會大大減少你的痛苦。
21.使用快捷鍵給形狀圖層和文字填色
你可能知道使用Alt/Ctrl + Delete 給圖層或者選區填充前景色/背景色。它同樣適用於形狀圖層和文字。
22.Photoshop的怪異之處——投影和內陰影尺寸
還記得訣竅1中關於保證尺寸和圖層效果為偶數畫素嗎?你或許在對所有的都設定了偶數之後，仍然迷惑於為什麼按鈕的高度仍然是奇數。罪魁禍首便是 Photoshop的怪異之處，投影增加了尺寸。投影的大小(size)值設定為1px或者2px，投影將會產生同樣的尺寸，如下圖所示。
23.使用智慧參考線來進行更為完美的對齊
來讓Photoshop對你的元素進行智慧對齊。在檢視(View)〉顯示(Show)〉智慧參考線(Smart Guides)處開啟。一旦你使用過智慧參考線，你會再也離不開它了。
24.使用圖層複合在同一檔案中展示不同的顯示屏
你是將app的所有螢幕都建立在一個PSD中然後對圖層可視進行開啟和關閉來檢視?此時圖層複合(Layer Comps)就可幫助解決這個問題。勾選視窗(Window)〉圖層複合(Layer Comps)即可開啟圖層複合面板。在你新建app螢幕的時候你可以通過單擊面板底部建立新的圖層複合按鈕來建立一個新的圖層複合。這個圖層複合面板包含了所有圖層的可見性和位置作為一個螢幕(譯者注：可以理解為一個快照)。現在你便可以在同樣的圖層上更改其可見性和位置來作為下一個螢幕並把它儲存為另一個圖層複合。
通過使用同樣的工具去建立不同的螢幕，這樣就保證了檔案數量和大小達到了最小。並且，你和開發人員可以簡單的通過單擊圖層複合名稱前面的小盒子或者點選面板底部的往前/往後箭頭來迴圈切換圖層複合來展示不同的螢幕。
25.在裝置上預覽你的設計
你的設計桌面裝置上看起來很好，但是當你放到真正的裝置上或許會暴漏問題，因此，保證經常的在顯示器上預覽你的設計。對Mac來說有像LiveView、Scala Preview等工具，對Windows來則有WiFileSync和Photoshop Display。我使用免費的Polkast，它允許你在IOS裝置上通過wifi預覽你桌面裝置上的檔案。
26.保持icon設計的一致性
在icon的選用上要保證其大小和風格一致。可以閱讀Why consistency is important這篇文章。
27.給客戶傳送全尺寸的預覽圖
客戶許願在他們的裝置上常看設計。因此，可以考慮給他們一個全尺寸的PNG設計組合。
28.避免過於畫素完美的線框圖
不要線上框圖軟體上浪費時間去建立一個漂亮的線框圖。我發現客戶一旦理解這會節省時間他們便更傾向於審查草圖而不是漂亮的線框圖。向客戶解釋為什麼減少線框圖會節省專案的整體時間，他們一旦同意便發給他們草圖的照片。同時別忘了讓草圖儘量易讀。
29.首先設計Retina屏然後再縮小到標準尺寸
是從1x(譯者注：指裝置畫素比)放大到2x的順序還是2x縮小到1x現在仍有爭論。1x大小尺寸的手機將會在未來幾年逐漸淘汰並且將來只會剩下Retina屏的。因此最好是從Retina屏來開始設計，同時你可以早早的便在你的設計中新增針對Retina屏的特殊細節。
30.建立一個icon庫
任何時候你針對工具欄或者標籤欄建立了向量的icon，儲存一份icon(儲存完好無損的尺寸以便於編輯)到單獨的PSD檔案中，這樣，你便不必下次再使用這些icon時到處尋找了，這樣也就形成了我ikonic專案的基礎。
31.使用一個批量重新命名的軟體
使用批量重新命名軟體來給檔案增加或者移除@2x。我使用免費的Bulk Rename Utility。
作者：kingtent 來源：優設
1.保持尺寸為偶數
你是首先針對Retina螢幕設計然後再對標準解析度的進行縮小是吧?為了在標準解析度下畫素仍然保持完美的呈現，你需要保證大小和距離為偶數。具體的做法便是：基於2ps的網格設計。在編輯(Edit)〉首選項(Preference)〉參考線、網格和切片(Cuides,Grids&Slices)。更改網格線間隔(Gridline)和子網格(Subdivisions)來是使得網格間隔線為2px。例如：設定網格線間隔為64px，子網格為32。
2.混合模式只使用正常模式
在設定直接處於其他元素上面的圖層效果時，混合模式只使用正常(例如：在混合選項中投影和外發光)。使用其他的混合模式或許在Photoshop中看起來很好，但是也可能會在在儲存為PNG格式之後出現不良的效果。
3.更方便的改變漸變顏色
想要更改漸變按鈕的色調(色相)，而不必每次都去改變漸變的起始顏色值?下面介紹兩個方法，均可達到完全一樣的效果。
方法1：在漸變圖層混合選項中使用顏色疊加
建立一個漸變圖層。起始顏色設為淺灰和深灰色，也可以在之後調整。
為按鈕建立向量蒙版。
複製向量蒙版貼上到漸變圖層(選擇向量蒙版〉Ctrll+ C〉選擇漸變圖層〉Ctrl + V)
設定圖層〉向量蒙版〉當前路徑
設定漸變圖層混合選項〉顏色疊加更改混合模式為顏色。
現在便可以只是更改此處的顏色來更改漸變。
方法2：在純色圖層使用漸變疊加
用你想要的顏色，建立一個純色的圖層。
和方法1相同。
和方法1相同。
和方法1相同。
在純色模版混合選項〉漸變疊加，設定混合模式為明度(Luminosity)。
現在只是改變純色模版的顏色即可改變漸變。
譯者注：上述使用了向量蒙版，其實使用剪下蒙版也可達到相應的效果，個人認為還簡單點。
4.更多的使用徑向漸變
在導航條上疊加徑向漸變層，讓導航欄變得更為有趣。
方法1：徑向漸變工具
在導航條圖層上方新建圖層。
複製導航條圖層的向量蒙版到剛才新建的圖層(按住Ctrl + Alt同時按滑鼠左鍵拖動向量蒙版到新圖層)。
選擇徑向漸變工具(設定漸變為中心白色末端全透明)。
在圖層中從中心到邊緣繪製漸變。
改變圖層混合模式為疊加(Overlay)設定不透明度為25%。
方法2：斜面和浮雕
同樣也可以使用圖層混合選項中的斜面和浮雕。可以按下圖所示來設定。通過調整設定來達到你想要的效果。通常調整的越為精妙效果也越為好看。
5.更多的使用陰影變形
Photoshop中陰影(任何的其他圖層效果)和它對應圖層可以分開。這樣便可獨立操作陰影。
選擇圖層〉圖層樣式〉建立圖層(譯者注：必須在對圖層使用了混合選項中的效果才能使用此命令，此步目的即是將效果和圖層分離)。
轉換圖層為智慧物件(在混合選項中勾選透明形狀圖層。右擊圖層〉選擇轉換為智慧物件)，這樣你就可以在之後編輯效果。
Ctrl + T 選擇變形。
點選和拖動手柄來改變形狀。手柄不會對其網格，但可以使用網格作為參考對其他的手柄進行重複同樣的拖動。
往上輕移圖層直到像下圖效果。
6.使用內發光更容易的增加精細的紋理
像下圖所示通過內發光快速的增加紋理。
7.隱藏路徑
Photoshop cs6中比較惱人的一點是當你選中一個形狀圖層的時候形狀的路徑會顯示出來，並且在你操作該圖層的時候路徑會一直存在，譬如在更改圖層混合選項的時候。你和使用Ctrl + H 來隱藏所有的輔助工具(路徑、網格線和參考線)，當然你可以按Ctrl + Shift + H 只隱藏路徑。
8.使用對齊畫素網格來使形狀畫素完美
這算是cs6中最好的改進之一了。按Ctrl + K 開啟首選選面板選擇將向量工具與變換與畫素網格對其(Snap Vector Tools and Transforms to Pixel Grid)勾選。在cs5中只有形狀(沒有變換)與畫素網格對齊。像下圖示在首選項〉常規中勾選最下面一項。
cs5中只有形狀對齊
9.使用電子表格來計算縮圖的尺寸
想要建立一個iPad app來展示大量的縮圖?使用電子表格來計算縮圖的尺寸和之間的尺寸。電子表格實時的計算並展示了在改變一個尺寸之後對其他元素的影響以及它們是否適用於螢幕。下載(iPad-Grid-Calculator)我在建立iPad app使用建立的微軟Excel 表格(檔案中包含了4個表格，6×6, 5×5, 4×4 和3×3)。
10.自動匯出資原始檔
如果你必須建立圖片資源，選擇檔案(File)〉指令碼(Script)〉將圖層匯出到檔案(Export Layers to Files)。
11.圖層複製的時避免給圖層名新增字尾同時避免圖層效果得到擴張
對每次複製圖層都在圖層名稱後面新增副本(copy)的字眼很是惱火?同時惱火的是每次複製貼上圖層效果的時候圖層效果就會擴張?可以圖層面板選項中將兩者關閉。
12.以15°的步長旋轉
在自由旋轉的時候，可以按住Shift以15°的倍數旋轉。
13.儲存樣式
儲存多次使用的樣式到樣式面板，這樣免去每次都複製貼上的麻煩。
14.在開啟的兩個檔案之間移動圖層
按下V選擇移動工具〉選中想要移動的圖層〉在當前檔案內(不是圖層面板)左擊不鬆開〉拖動游標到目標檔案的名稱標籤上〉當檔案切換之後將游標拖動到檔案內，然後鬆開滑鼠。
15.設定全域性光為90°
當光源在90°的時候高光、陰影以及其他圖層效果看起來最好。為了避免重複設定，在混合選項中(斜面和浮雕、內發光和陰影)勾選使用全域性光。或者選擇圖層〉圖層樣式〉使用全域性光。
16.在你建立圖層的時候你便對它進行命名
在將設計文件發給開發人員之前對圖層命名是件令人頭痛的事情。因此不妨形成在建立圖層的同時就給它命名的習慣。
17.使用自定義快捷鍵
注意哪些工具和任務是你最常用到的，為它們建立快捷鍵。例如，如果你發現將一個檔案傳送給開發人員處理的時候你需要重新命名大量的圖層，我使用功能鍵F2作為快捷鍵。
18.使用徑向漸變
使用徑向漸變有時候會看起來有點扁平。試試用徑向漸變作為背景，還可以用內發光來強調。
19.努力做到非破壞的編輯
通過使用智慧物件和調整圖層來做到一個非破壞性的工作流程。當你發發現自己需要重複編輯同樣東西的時候這會幫你減少很多痛苦。
20.在對檔案作重大改變之前備份檔案
當你發現儲存了自己不想要的變化，或者在撤銷更改之前意外地關閉了檔案(譯者注：這樣會導致丟失歷史記錄)，備份檔案會大大減少你的痛苦。
21.使用快捷鍵給形狀圖層和文字填色
你可能知道使用Alt/Ctrl + Delete 給圖層或者選區填充前景色/背景色。它同樣適用於形狀圖層和文字。
22.Photoshop的怪異之處——投影和內陰影尺寸
還記得訣竅1中關於保證尺寸和圖層效果為偶數畫素嗎?你或許在對所有的都設定了偶數之後，仍然迷惑於為什麼按鈕的高度仍然是奇數。罪魁禍首便是 Photoshop的怪異之處，投影增加了尺寸。投影的大小(size)值設定為1px或者2px，投影將會產生同樣的尺寸，如下圖所示。
23.使用智慧參考線來進行更為完美的對齊
來讓Photoshop對你的元素進行智慧對齊。在檢視(View)〉顯示(Show)〉智慧參考線(Smart Guides)處開啟。一旦你使用過智慧參考線，你會再也離不開它了。
24.使用圖層複合在同一檔案中展示不同的顯示屏
你是將app的所有螢幕都建立在一個PSD中然後對圖層可視進行開啟和關閉來檢視?此時圖層複合(Layer Comps)就可幫助解決這個問題。勾選視窗(Window)〉圖層複合(Layer Comps)即可開啟圖層複合面板。在你新建app螢幕的時候你可以通過單擊面板底部建立新的圖層複合按鈕來建立一個新的圖層複合。這個圖層複合面板包含了所有圖層的可見性和位置作為一個螢幕(譯者注：可以理解為一個快照)。現在你便可以在同樣的圖層上更改其可見性和位置來作為下一個螢幕並把它儲存為另一個圖層複合。
通過使用同樣的工具去建立不同的螢幕，這樣就保證了檔案數量和大小達到了最小。並且，你和開發人員可以簡單的通過單擊圖層複合名稱前面的小盒子或者點選面板底部的往前/往後箭頭來迴圈切換圖層複合來展示不同的螢幕。
25.在裝置上預覽你的設計
你的設計桌面裝置上看起來很好，但是當你放到真正的裝置上或許會暴漏問題，因此，保證經常的在顯示器上預覽你的設計。對Mac來說有像LiveView、Scala Preview等工具，對Windows來則有WiFileSync和Photoshop Display。我使用免費的Polkast，它允許你在IOS裝置上通過wifi預覽你桌面裝置上的檔案。
26.保持icon設計的一致性
在icon的選用上要保證其大小和風格一致。可以閱讀Why consistency is important這篇文章。
27.給客戶傳送全尺寸的預覽圖
客戶許願在他們的裝置上常看設計。因此，可以考慮給他們一個全尺寸的PNG設計組合。
28.避免過於畫素完美的線框圖
不要線上框圖軟體上浪費時間去建立一個漂亮的線框圖。我發現客戶一旦理解這會節省時間他們便更傾向於審查草圖而不是漂亮的線框圖。向客戶解釋為什麼減少線框圖會節省專案的整體時間，他們一旦同意便發給他們草圖的照片。同時別忘了讓草圖儘量易讀。
29.首先設計Retina屏然後再縮小到標準尺寸
是從1x(譯者注：指裝置畫素比)放大到2x的順序還是2x縮小到1x現在仍有爭論。1x大小尺寸的手機將會在未來幾年逐漸淘汰並且將來只會剩下Retina屏的。因此最好是從Retina屏來開始設計，同時你可以早早的便在你的設計中新增針對Retina屏的特殊細節。
30.建立一個icon庫
任何時候你針對工具欄或者標籤欄建立了向量的icon，儲存一份icon(儲存完好無損的尺寸以便於編輯)到單獨的PSD檔案中，這樣，你便不必下次再使用這些icon時到處尋找了，這樣也就形成了我ikonic專案的基礎。
31.使用一個批量重新命名的軟體
使用批量重新命名軟體來給檔案增加或者移除@2x。我使用免費的Bulk Rename Utility。
作者：kingtent 來源：優設