什麼是「真正」的切圖？

11-26

前幾天應聘網頁設計，老闆問我你會真正的切圖嗎？額...會切點圖，還真不會「真正」的切圖？！各位都聊聊你們是怎麼切圖的，切圖切到牛逼的幫忙科普下「真正」的切圖。

古語有云：欲練切圖，必先強擼

我理解的網頁設計中的切圖，有三個境界：

能把所有設計稿里出現的圖形元素按照基礎要求切出來交給前端工程師。
對所有切圖進行優化，有針對圖片輸出體積的優化、有利用 CSS Sprite 減少請求的優化、也有針對減少自己後期網站改版升級時候工作量的優化。這部分已經需要很多前段方面的知識了。要讓切圖也「語義化」必須得和前段配合得很好。
從超出「圖片」的角度思考並且實現更高階的效果，比如現在做網頁經常需要考慮桌面和移動平台的不同解析度，使用 Responsive 的布局的話切圖應該怎麼切，是不是需要切兩套；遇到 iPad 或者 rMBP 的高清屏怎麼處理網頁中的圖片以及背景；是否可以應用一些新的技術比如 Web Font、Font Icon、CSS 3 里的新特性來減少網頁里的圖片等等。

比起網頁的切圖，移動平台和桌面軟體的切圖又不一樣了，比如可以方便時候用九宮格、不在乎圖片數量但同樣在乎文件體積等等，所以就像開頭所說的，切圖自古就不是一件輕鬆的活兒~

新入職了一家公司，要求自己做設計，還要自己寫div+css，然後我跟同事吐槽，從沒見過做設計還要自己做前端的，同事跟我解釋說【這個根本不叫前端，這個只是切圖！！！】

切圖是指將設計稿切成便於製作成頁面的圖片，並完成html+css布局的靜態頁面，通俗來講，把一張設計圖利用到切片工具把自己所需的切成一張張小圖，然後用DIV+CSS完成靜態頁面書寫，完成CSS布局。

我理解的切圖，就是把ps做出來的效果圖用切片工具切出來，做成前端可以直接使用的素材（gif、png、jpg）。但是好多人把切圖複雜化了，把前端的工作都包進去了，變成要做出功能完全，只是不涉及後台數據處理的網頁了。（ps，現在就是在以一個美工的名義，做著所有前端的工作。從ps設計，到切圖，到編寫頁面代碼，包括jquery等的特效。。。。。。苦逼。。。）

那你就反問他，您說什麼是真正的切圖呢？

事實上這個概念很模糊，根據我的了解，很多人理解都不一樣。

很長一段時間我以為切圖就是把psd形成頁面的過程，也就是製作靜態網頁。（前端範疇）

後來去面試有些人理解的只是把psd的圖片切出來叫切圖。（設計範疇）

還有些人理解是把psd切出來，再把div容器寫出來叫切圖。（呵呵噠範疇--前端設計通吃的半桶水--小公司專屬）

所以哥教你的反問法請合理使用。正所謂不懂就問嘛，沒啥丟人的。你也可以把我的上套理論跟他解釋一下。

我覺得不論是網頁也好、客戶端界面也好，切圖，要先了解切的圖給誰，對方欲如何實現，要了解對方的需求。當然如果下一階段是自己做，就是按自己的需求來了。

不同的實現方式、動畫效果、優化方法等，所需要的切圖可能是不同的。

簡而言之就是必須了解了下一個步驟，才是真真的切圖。

切都切了，能學的順便就都學了吧。

看到一樓，我想我的個人簡介是不是得改一改

我覺得你們老闆說的＂真正的＂切圖，可能沒有上面那位答的這麼複雜。

想請問下什麼叫切圖啊？不同的塗層保存一下不是就有自己需要的素材了么？？我一般這樣做作業還是學生。。。求解謝謝