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

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

那么切圖是不是必須的呢?毫無(wú)疑問(wèn)，切圖是實(shí)際開(kāi)發(fā)過(guò)程中不可或缺的一步。由于一張完整的設(shè)計(jì)稿是由不同的元素組成的，比如Logo、背景圖、圖標(biāo)、文本等等，而部分元素，前端工程師是無(wú)法使用代碼實(shí)現(xiàn)效果的，因此，需要將其單獨(dú)切出來(lái)使用。切圖資源的輸出將直接決定產(chǎn)品的最終效果。

有的公司UI設(shè)計(jì)師會(huì)把需要的圖切好，但更多時(shí)候是需要前端工程師自己來(lái)切。我們不能每次都依賴(lài)UI設(shè)計(jì)師，自己掌握切圖技能還是很有必要的。

切圖的實(shí)現(xiàn)，很大程度上讓網(wǎng)頁(yè)設(shè)計(jì)變得個(gè)性化，有生機(jī)，所以會(huì)切圖的前端工程師也更加受市場(chǎng)歡迎。那么如何在提升自己專(zhuān)業(yè)水平的同時(shí)掌握切圖技能呢?千鋒重慶校區(qū)HTML5大前端培訓(xùn)包含Web頁(yè)面布局、移動(dòng)端切圖等相關(guān)課程，多技能點(diǎn)培訓(xùn)讓前端工程師在以后的工作中更加游刃有余。如果你想擁有更豐富的知識(shí)儲(chǔ)備，來(lái)千鋒教育，助你成功一臂之力。