在聊自己製作 PSD檔 的習慣之前，一定要先把 Photoshop Etiquette 拿出來講。這個網站在網路上流通多時並有簡體中文翻譯，開宗明義就說了是「Photoshop 禮儀」，且製造日期是 2012 年。雖然在此之前我就已養成某種程度的整理習慣，卻也仔細研讀這個站後才真正瞭解該怎麼做得更好。如果你的工作需要接觸 Photoshop，建議這個網站列舉出來的部份都要實作到PSD上。

Photoshop Etiquette

http://photoshopetiquette.com
A Guide to Discernible Web Design in Photoshop
WEB设计指南！PS礼仪白皮书（中譯）：http://hao.uisdc.com/ps

以下是結合上述網站及我自己做 Web、App Mockup 的經驗整理出來最好一定要照做、不然只會害接手的人淚奔的部份。

一、設計

使用非破壞性編輯

盡量使用向量、智慧型物件、遮色片、調整圖層等非破壞性編輯，而非像素圖。
Web有Responsive、App有各種螢幕尺寸，PSD 隨時會放大縮小切圖什麼的很正常，非破壞性編輯能確保產出的圖片清晰銳利。向量和像素是完全不同的演算方式，放大縮小絕對看得出來邊緣差異性。

確認遮色片連結

若使用遮色片，確認已設定遮色片和圖層間的連結。
在調整PSD檔時，有可能會整個資料夾搬移位置，若遮色片和圖層間的連結沒設定好就會出現奇怪的缺洞。

形狀圖層對齊邊緣

若使用形狀圖層，需勾選「對齊邊緣」。
這篇文有提到畫向量會糊的可能性，參考8px 後續，模糊 。

對齊

使用參考線，確保每個元素間都對齊。
基本中的基本，稿件精不精緻就看這一步了。如果做 Responsive 更要對齊參考線，不管是 Fixed Grid 或 Fluid Grid 都很注重元件對齊這回事。

二、圖層

圖層命名

每一個圖層、資料夾都要命名清楚。
光是01、02、形狀6 拷貝 很難讓人再第一時間明白圖層內容是什麼。UI 最重要的就是易用性，請貫徹到原始檔上。不止是使用者、連接手同事都該覺得好操作。

群組圖層

依頁面架構將圖層分階層歸類，並依規定命名。
網頁、App 構成都有明確被定義的名稱，比如 Header、NavBar、TabBar、Footer 等，用樹狀結構去組織整理 PSD 檔會加快許多尋找圖層的腳步。按下群組快速鍵 Command+G 不到 1 秒，群組命名打字也花不到30秒。

避免鎖定圖層

圖層不要鎖定。
當要移動或變形時發現動彈不得、尤其是某個雲深不知處的某個圖層被鎖了翻半天才找到卡住整個群組動不了的元兇，會很煩躁。

刪除用不到的圖層

這次專案用不到的圖層全部刪除。
會讓人誤解、增加溝通成本的意外越少越好，刪除圖層只要按一下 delete，備份也是拷貝貼上改檔名的事，很快的。

三、圖層樣式

混合模式

瀏覽器無法顯示「色彩增值」或是「濾色」之類的設定，圖層樣式只能是「正常」、群組為「穿透」。
參考 標示色碼的方法 ，最後一段有提到。主要是影像演算法問題。

筆畫

筆畫分內部、外部兩種，會影響圖片尺寸。筆畫的混合模式請設定為「正常」。
要求精準尺寸的話這部份要特別注意，尤其是混合模式。正常、設半透明，切圖或給數值到裝置上才能確保和 PSD 長相一樣。

例：圖＋框＝100px，框1px。
PSD 檔的圖片寬會是 98px、外部筆畫 1px。
（img 不可能和 border 重疊，如果是 div 則看 box-sizing 的設定。）

但若使用外部筆畫，很容易出現圓角邊讓 F2E 誤以為是圓角矩型，得使用內部筆畫的方式製作，此時請把圖片寬度計算好。

四、字體

字體數值

字級為「整數」，不帶小數點。
PS 裡的字級可以小數點後幾位，但瀏覽器和 mobile 可不行，況且取整數不好嗎？

不對字體使用變形工具

在網頁上無法對文字拉長或壓扁，請勿對文字進行變形。
硬要這樣做的話當然可以，不過這些文字請改成切圖。

適合的文字框

文字框需剛好符合文字範圍，請勿設置過大。
短短的標語拉個半頁文字框一點意義也沒有，還會造成對齊的困難。用多少、拉多少。

使用不同的文字框

若字型、字級、色彩不同，則需使用不同的文字框。
PSD 製圖和 Word 不一樣，別偷懶全混在一起。不管是製作標示文件或是要調整都會造成困難。

.
.
.
.
.
.

隨手執行這些步驟根本不會花上比原本多多少的時間，我的 PSD 檔圖層不敢說 100% 完全遵守、起碼符合 90% 以上，而且是邊做就邊整理，不是要交稿了最後一刻才在大掃除。

有沒有下載過 Dribbble 上的免費 PSD 檔？哪位神人的圖層是大鍋炒了？如果以他們當人生目標，就先從容易著手的小地方開始仿效吧。