@京東設(shè)計(jì)中心?：很多設(shè)計(jì)師跟開發(fā)都會遇到SVG 圖標(biāo)模糊的問題，今天我們簡單教你四招，輕松搞定這個(gè)問題，有需要的同學(xué)趕緊來收 >>>

簡單介紹

隨著高清視網(wǎng)膜屏的出現(xiàn)，網(wǎng)頁設(shè)計(jì)也需要考慮各種高清屏幕的顯示效果，前端在寫代碼的時(shí)候也需要根據(jù)屏幕的不同，輸出不同分辨率的icon圖片，真的好多工作量啊~

為了解決屏幕分辨率對圖標(biāo)影響的問題，SVG格式的icon出現(xiàn)了，簡單的說它是通過矢量路徑把icon變?yōu)樽煮w，這樣前端在改變icon大小和顏色的時(shí)候，操作起來就簡單高效多啦~

被困擾的小問題

先說明一下~我是一位GUI設(shè)計(jì)師，在設(shè)計(jì)網(wǎng)頁的時(shí)候，開發(fā)童鞋就使用了SVG格式的icon~細(xì)心的我發(fā)現(xiàn)這個(gè)格式的icon最后呈現(xiàn)出來的效果，邊緣會模糊。。。

這可能是一部分開發(fā)和視覺設(shè)計(jì)師都遇到的問題哦~用圖片來說明一下！

對比后，效果相差還是很明顯的，甚至圖標(biāo)還會變形呢！這對有強(qiáng)迫癥的人來說真的是一件超級虐心的事情呢~

解決辦法

SVG格式是從AI導(dǎo)出的，所以無論視覺是在PS里面制作還是AI里面制作，都要將icon在AI中形成路徑~

問題出在哪里呢？

我們都知道AI是矢量工具，無論你畫什么路徑都不會出現(xiàn)像素那樣的鋸齒，所以在用AI制作像素icon的時(shí)候，一定要重新設(shè)置首選項(xiàng)，并用網(wǎng)格進(jìn)行輔助。

STEP 1：單位一定是像素，否則會影響其他選項(xiàng)的單位設(shè)置

STEP 2：鍵盤增量調(diào)整為0.1像素，方便調(diào)整icon位置

STEP 3：網(wǎng)格線間隔設(shè)置為1px，次分隔線設(shè)置為10意思是最小的網(wǎng)格單位是0.1px，如果你的icon邊緣沒有貼在1、2、3...這樣的整數(shù)網(wǎng)格上而是在次分隔線上，就會模糊變形！

STEP 4：從“視圖”選項(xiàng)中選擇“顯示網(wǎng)格”。

還要啰嗦幾句......

最后檢查的時(shí)候畫面一定要放大到最大哦~

簡單的小分享，希望可以幫到童鞋們~謝謝啦。

【會營銷的設(shè)計(jì)師才是好文案】

文案篇：搞定文案的集大成篇！
《年度最佳教程！7招教你寫出互聯(lián)網(wǎng)頂尖文案！》

營銷篇：大眾點(diǎn)評的頂尖營銷案例！
《重磅推薦！如何設(shè)計(jì)傳單才不會被人隨手扔掉？》

設(shè)計(jì)篇：了解網(wǎng)頁設(shè)計(jì)的前世今生！
《漲姿勢！寫給網(wǎng)頁設(shè)計(jì)師的網(wǎng)頁設(shè)計(jì)簡史》

原文地址：mp.weixin

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量90萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
官方微信：想在手機(jī)上、被窩里獲取設(shè)計(jì)教程和各種意想不到的"福利"嗎？添加優(yōu)設(shè)哥微信號：youshege