Web前端作為一門入門門檻不是很高的學科，一直以來，受到很多IT學習者的青睞。但是，一些Web前端的大牛往往在基礎技能的前提下，掌握著大多數從業者不曾注重的技能，比如說切圖。那么，切圖在Web前端開發工作中占據什么地位呢?下面，千鋒成都校區老師就相關切圖問題給大家做下系統梳理。

　　首先，我們先來簡單了解下切圖的歷史。Web 2.0的時期，最流行的趨勢就是大字體、鮮艷色、高光和倒影，甚至許多人沒有自己的想法，盲目去追求，致使Web 2.0的網站變得千篇一律。這時有一些前衛的人，把平面設計等許多模式引入的網頁設計，他們用Photoshop做精準Mock up，然后通過CSS來實現，也就是所謂的切圖。通俗來講，切圖就是把設計稿切成一片片的，然后前端工程師運用DIV+CSS功能，最大限度的還原設計圖，也就是要把零碎的圖片整合成一張完整的圖片。

　　那么切圖是不是必須的呢?毫無疑問，切圖是實際開發過程中不可或缺的一步。由于一張完整的設計稿是由不同的元素組成的，比如Logo、背景圖、圖標、文本等等，而部分元素，前端工程師是無法使用代碼實現效果的，因此，需要將其單獨切出來使用。切圖資源的輸出將直接決定產品的最終效果。

　　此外，還有一部分人認為極簡主義是頁面所需要的，極簡主義放棄了花哨的圖案和設計，把重心放到了瀏覽器的字體、line-height、布局、留白、以及交互。崇尚極簡主義的人覺得網頁不必要看起來很漂亮，但一定要用起來很舒服。當然對于從用戶的角度來講，用得舒服很重要，美好的視覺享受更容易讓你的APP脫穎而出。所以切圖仍然是前端開發中不可缺少的一步。

　　有的公司UI設計師會把需要的圖切好，但更多時候是需要前端工程師自己來切。我們不能每次都依賴UI設計師，自己掌握切圖技能還是很有必要的。千鋒成都校區Web前端培訓包含Web頁面布局、移動端切圖等相關課程，多技能點培訓讓前端工程師在以后的工作中更加游刃有余。

上一篇

學UI設計有哪些職業選擇？

下一篇

軟件測試人員自我提升的途徑有哪些？