全棧設計師指南-做21世紀有尊嚴的PSD

在設計領域裡， Photoshop是最完整的工具， TA不僅是全系統支援，功能也是大而全的應有盡有，大部分人只知道他的大名：PS。

1、低調のPSD

PS的使用你們肯定都很熟悉，如果不會用，我強制假設你會用。我們今天說一說如何讓你的設計圖不僅看起來美觀，使用起來也一樣爽爆，做個外表高調圖層低調的PSD。

PSD是Photoshop的源格式，可保存Photoshop的圖層、通道、路徑等資訊。而與前端的配合中，用戶端不需要給原始檔案，網頁端則需要提供原始檔案，這就意味著PSD大小和內容有一定要求，動輒幾個G的單檔估計會直接讓前端人員和電腦一起崩潰。

所以為了避免一些溝通問題，低調的PSD有必要這樣做：

圖層命名合理，如果量太大，至少編組命名；

圖層需分離的儘量少用圖層混合模式；

刪除不需要的圖層；

常更新文字儘量用雅黑、宋體、思源黑、蘋方等系統預設字體，如果必須用字體，打包發給前端；

常更新文字字型大小取整且別變形拉伸；

常更新文字顏色別用顏色疊加，慎用圖層混合模式；

常更新文字儘量不用描邊、漸變色；

有狀態的元素把狀態做全，把其他狀態的圖層標色區分可隱藏；

需要做動畫的元素有動畫序列或者動畫說明；

網頁開發載入是自上而下的，所以PSD的圖層也儘量從上而下分層；

用色統一有階次，如黑(#333)、深灰(#666)、灰(#999)

PSD檔解析度72圖元/英寸，顏色模式RGB

2、切圖の托尼

在互聯網設計領域裡，你應該能經常聽到切圖這個詞，上一篇也有說到。在很久以前，這個詞剛開始的時候，前端還叫切圖仔，那時的網頁真的就是切圖，主要由圖片堆疊，但是這個關鍵字延續到現在，其用法早就變了。這裡得感謝PS，儘管他一家獨大看起來發展的慢，但每次更新都有很多實用並且與時俱進的小功能，這裡包括切圖（導圖）。

在13年的時候遇到一個很牛的平面設計轉行入職做網頁設計，第一次跟她說切圖的時候，她是拒絕的，好好一個圖為什麼要切，還要列印出來用剪刀那麼麻煩。

這不是段子，設計師的種類那麼多，等於是隔了行，術語關鍵字自然不那麼容易理解。

切圖這個詞其實最初來源於PS裡的一個工具（其名稱就叫切圖），

可能你們曾經摸索性的嘗試使用過，麻煩且不實用。比如按照這個工具的用法，要切出一個透明底的圖示，需要把其他圖層隱藏掉再切，但是PS CC版本之後圖層上右鍵是可以直接匯出圖片的，還可以選擇匯出圖片的格式（還有一個生成-圖像資源工具）。

所以在做設計的時候，分層是個大學問。那些可編輯會變動的文字你做了很考究的效果，並且用了圖層的混合模式，前端在PSD裡看到的是淺綠色，切出來的卻是很深的綠色甚至別的顏色，基本就崩潰倒計時了，所以你右眼跳的時候想一想圖層有沒有用混合模式，前端可能在詛咒你PSD做一半沒保存就崩潰。

3、圖層の狀態

網頁設計裡常見的是字型大小和字體，

字型大小可以由設計設定，但是切記在12px以下的時候某些流覽器是不能實現的，當然目前是可以用css3的縮小去實現；至於字體就比較講究了，常規的網頁在window上儘量用微軟雅黑或者宋體，移動端沒有微軟雅黑可以使用系統字體， ios8以後是蘋方字體，安卓是roboto或者思源。

假如你為了設計效果用了其他字體，前端則需要在原本幾百K的專案里加上動輒幾兆的字體檔，為了相容還得把字體轉不同的格式才能完美顯示，也有工具可以單獨剝離出需要的文字，但是不確定的文字內容只能全部引用了。

另外一個常見的是按鈕或者連結，新版的PS有可以直接匯出css的功能，由於最近幾年的設計形式的原因，扁平化的按鈕很多，基本上都可以css去實現，

譬如寬高，圓角，陰影，漸變，描邊，純背景色，透明度，或者很炫的背景圖，但是文字在代碼上能做的效果相對較少，譬如文字沒有描邊，只有顏色、漸變、陰影，透明度。

可交互的元素狀態一般有預設狀態、按壓狀態、已操作、PC端還有滑鼠滑過的hover狀態、文字連結點擊狀態、還有圖片文本等的狀態，這些也都需要做一下區分，類似下圖：

4、其他

專案中的圖片，基本上沒有限制，上篇有說到圖片格式的注意事項，點擊去看。在圖片命名上需要遵循位置-作用-狀態，類似：nav-home-press.png， 或者與用戶端統一規範。另外圖片在做回應式網頁的時候要注意主體內容儘量在中間或者多做幾個尺寸給前端在不同解析度下去顯示，否則圖片可能會變形或者裁切到重要內容。

當然有些傳統的公司，基本都是平面設計，做網頁或者APP介面的設計很少。如果你們有網頁設計或者APP設計的活，也請你們的AI原始檔案輕量一點，圖層混合是平面設計裡最常用的技巧，這個在網頁上實現起來很難，還有就是前端拿到AI檔切圖也是及其不方便，不過你可以引導前端安裝最新版的AI，新版AI的導圖功能已經很好用了。