傳統的PS網頁設計已經跟不上如今流式佈局潮流的發展了，PS不可能把所有移動裝置的尺寸都做一個版本出來。如果PS的頁面過多，期間要修改一個通用的東西，也是牽一髮而動全身。網頁效果圖設計新思路：使用html+css+less完成你的任務吧！
舊流程：P圖
在網頁設計的過程中，效果圖一般總是通過Photoshop做出來的。多則幾十過百的圖層以及各種PS效果的確是把網頁的樣式效果做出來了，並且也容易分塊切圖或者直接在其中取到某些圖片素材。
新思考：P的圖太多，有好多小地方要修改怎麼辦？
如果要用在響應式網站的設計並且內容都要使用流式佈局的時候，要對每種情況都對應著去做一張PS效果圖，工程量巨大，並且顯得不太現實。另外當你需要修改網頁中某個元素的大小或背景的時候，手動對一張張PS效果圖作修改簡直是一個噩夢。
這引發了對設計流程以及使用工具的新思考：能否在貼近並儘量覆蓋各種真實使用環境的情況下， 又易於修改？
答案：網頁效果圖設計新思路
答案是拋棄原有的在PS效果圖製作方法，轉而使用HTML以及CSS等構建真實的基礎網頁效果，最終以截圖的形式獲得效果圖展示給客戶。客戶對某個地方提出修改意見時，你回去執行改動也會變得很輕鬆，只需修改CSS中的一兩行程式碼；若是使用less的話，有時只需改一個變數值，就能達到想要的效果。
或許你會抨擊這不就將樣式設計與前端程式碼構建的職能混淆了嗎？ 其實HTML、CSS等只是製作效果圖的工具，網站效果輪廓前後當然是差不多，但這並不是最終的前端程式碼，僅用作基本的效果展示。最終網站前端實現的程式碼結構，還會跟後臺輸出、適應元件化複用、還有瀏覽器相容等有關，可以說它們完全是兩碼事。
不要害怕學習
要做到蛻變，這給網頁設計者更高的要求，脫離Photoshop去學習基本的前端語言。新時代下， 網頁設計不再可能像平面設計那樣的專職於圖形影像，還要結合Web技術來使設計更貼近瀏覽器的真實環境，同時也減少了不必要的重複勞動。
可能在固定佈局的設計中，Photoshop依然是最好的工具，但流式佈局響應式設計的浪潮湧來，能突破傳統結合Web技術來做設計，才能走在前端，贏在未來。
收穫的感動
我多年前已經開始嘗試使用PS和前端技術混用，收到的效果很大。特別對於獨立開發者來說，我們經常要同時做UI設計和前端開發，在UI這一端使用HTML和CSS的話，後面的開發流程更加輕鬆，在前端開發時能參考或者複用的地方你會發現有很多，節省了你重複狂敲Emmet的時光。