¶給平面設計師的: 出圖？怎麼出？

「平面設計師不熟悉書面和螢幕 之間的關係」
有個前端工程師說了一句經典的話

給圖，就是設計師提供前端工程師的素材，包含所有畫面上會以圖片呈現的元素。

也許設計師會想「不就把 psd 的圖層，去邊再另存出來？」
是啦！操作上是這樣沒錯！不過這樣說，不就降低了這一個環節的專業性了嗎？
設計不過就是畫圖、寫程式不就是打字嘛

這一篇就來說說，這裡要注意什麼

¶給圖步驟

¶在切圖之前

跟工程師討論，要什麼元素。
最棒的做法就是將頁面設計稿印出來，並且請工程師圈(或框)出來。
在此不需要成為「圖」的，就是前端工程師自己用 html 或 CSS 刻出來。

注意: 圖片變色、特殊字型…等，都必須要考量在內，並且在這一步提醒工程師這些細節，若可以簡單的程式解決，工程師一定不會麻煩設計師處理(有時給太多反而麻煩呢)

¶確定元素

取得這一份圈選時，要看一下工程師是否圈出來的範圍是否是編輯檔的一個元素。
若有疑問，務必和工程師聊聊，這樣可以更明確的知道「為什麼這麼圈選」

複雜的書面，這一步較麻煩，需要來來回回溝通幾次。

¶切圖

切出來的圖片，務必在該畫面的尺寸圖上標示長寬 (距離!不是比例)。
工程師得到圖片，就是會限定長或寬，若要用比例，則可以使用 SASS 的四則運算功能用算的。

圖片大小，最好是手機的元素尺寸的 2 倍，為了 Mobile Device 的解析度變化。

¶為什麼這麼做

由於平面設計師對於切版不熟，所以任何螢幕元素的運作方式完全不會有任何概念。這個也是切版的根本(會了就會切版了)，在此要求設計師「心神領會」工程師會用上的距離，跟本就是通靈行為。

如果真的是如此，那就像是建築師一樣厲害了，設計師找前端不過也是代工而已。

所以，工程師必須要回答「哪些是需要的元素圖片」讓設計師標示在尺寸圖上。