PSD的牛逼切圖插件：cutterman

我從來不要切圖，只要原圖……

設(shè)計最好給 sketch，不行的話 PSD 也可以，再不濟 PNG 也湊合。不過從前端的角度來說，我更喜歡當年的 Fireworks。

據(jù)我所知，會有用這個工具： Sketch

然后，給你推薦一個網(wǎng)站：設(shè)計達人

作為一個后端程序猿，設(shè)計達人教會我很多前端方面的知識。

時間原因先簡略說一下，后續(xù)再慢慢補充

協(xié)作流程

協(xié)作流程涉及至少三個角色：產(chǎn)品經(jīng)理（技術(shù)棧需要同時覆蓋設(shè)計與前端），設(shè)計師，前端程序員。

設(shè)計流程至少需要分為兩部：低保真視覺設(shè)計，高保真視覺設(shè)計。

產(chǎn)品經(jīng)理負責確定產(chǎn)品視圖的基本特性，比如響應(yīng)式、跨終端、跨設(shè)備、多狀態(tài)等等，并將這些特性轉(zhuǎn)化為視圖規(guī)范（包含設(shè)計規(guī)范，以及前端視圖開發(fā)規(guī)范），比如根據(jù)項目需要兼容的顯示設(shè)備，分析出一系列設(shè)計參數(shù)，判斷設(shè)計師是否需要輸出多套設(shè)計稿；再比如列舉視圖的所有狀態(tài)，以便設(shè)計師開展相關(guān)設(shè)計工作，以及前端開展相關(guān)前端架構(gòu)設(shè)計工作（比如組件劃分，Redux狀態(tài)設(shè)計等等）……

設(shè)計師根據(jù)產(chǎn)品經(jīng)理制定的設(shè)計規(guī)范，先輸出低保真視覺稿，審稿，補充設(shè)計需求，調(diào)整設(shè)計規(guī)范，修改設(shè)計稿……

低保真設(shè)計完成之后，設(shè)計師完成高保真視覺設(shè)計；

完成高保真設(shè)計之后，設(shè)計師負責輸出相關(guān)靜態(tài)資源以及前端需要遵循的視圖（風格）規(guī)范；響應(yīng)式設(shè)計部分無需切圖，比如響應(yīng)式布局、響應(yīng)式圖片等；靜態(tài)圖片根據(jù)前端應(yīng)用的目標顯示設(shè)備的不同，輸出2x/3x素材；設(shè)計稿中的其它內(nèi)容，比如配色，轉(zhuǎn)換為文字敘述的配色方案，再比如文字排版，轉(zhuǎn)化為文字敘述的排版方案，不能采用生硬的圖片標注方式說明，主要是為了方便前端使用less/saas等工具進行模塊化開發(fā)；

前端根據(jù)設(shè)計師輸出的資源以及規(guī)范，完成前端開發(fā)工作，期間不允許修改視圖規(guī)范，更不允許調(diào)整設(shè)計需求；

開發(fā)完成，進行項目整體迭代階段，此時若有新的設(shè)計需求可以補充，再按以上流程執(zhí)行一遍。

協(xié)作過程中的幾個原則

設(shè)計師與前端必須遵循同一套視圖規(guī)范。

如何理解？設(shè)計師通過設(shè)計稿展現(xiàn)視圖，前端通過代碼展現(xiàn)視圖，途徑不同，但結(jié)果必須一致；

先有設(shè)計，再才有前端代碼，不能憑空進行前端開發(fā)
字面意思很好理解，不多解釋。如果不遵循這個原則，開發(fā)周期無限翻倍的情況很容易發(fā)生。

比較好的軟件就像素大廚挺好用的

看到題主提到了藍湖 正好我也是在用這個開發(fā) 簡單說說這個用法和概念吧 輕噴

設(shè)計圖審核通過 我們正式著手開發(fā) 對于前端呈現(xiàn)來說 最重要的無非就是尺寸比例 顏色深淺 以及邊距等等 以及 我希望可以直接開發(fā) 不要還需要我去下載什么軟件才能使用的 能做到這些的平臺有很多 而我在使用的是藍湖

首先 你和設(shè)計師應(yīng)該各有一個團隊賬號 再由他或者你將你們拉入同一個群組 在這里面來協(xié)同工作
https://www.lanhuapp.com/

藍湖有兩個插件 一個面對的是photoshop 一個面對的是sketch 插件的主要工作就是 導(dǎo)入原型圖的圖層信息 顏色 部件尺寸大小 而這些信息在設(shè)計師設(shè)計的時候就已經(jīng)存在了（設(shè)計師要做的就是用下載好的藍湖插件導(dǎo)入這些信息到群組中）

然后我們要做的事情就很簡單 打開藍湖的群組 雙擊設(shè)計師上傳的原型圖 鼠標放置上去之后會顯示該原型圖各個組件的相關(guān)信息 接下來 開心的敲代碼吧 :)

如有不懂可以繼續(xù)問我 我最近在使用 感覺還不錯 挺方便的 不過有個小bug 不太清楚是設(shè)計師忘了導(dǎo)入還是上傳藍湖的時候藍湖處理出了些問題
可能是bug: 原型圖中純白色的背景被直接刪掉了

題主無需糾結(jié)這個問題。無論設(shè)計用什么軟件去做，最終提供給你的無非就兩種文件，一種是工程文件，另外一種就是圖片。對于前端來講，有一個標注圖就夠了，至于切圖，2x，3x如果不涉及到適配，按原稿尺寸做就好，無需理會他，如果涉及到適配，也不必擔心，都是按照同比縮放的。切圖的方法有很多了，ps自帶切片工具，也可以找一些ps的插件去切，看個人喜好了。