火星網校
減輕工作量！輕鬆搞定SVG Icon的模糊問題
發布時間：2018-11-17 19:57:24
導言：隨著高清視網膜屏的出現，網頁設計也需要考慮各種高清屏幕的顯示效果，前端在寫代碼的時候也需要根據屏幕的不同，輸出不同分辨率的icon圖片，真的好多工作量啊~
為了解決屏幕分辨率對圖標影響的問題，SVG格式的icon出現了，簡單的說它是通過矢量路徑把icon變為字體，這樣前端在改變icon大小和顏色的時候，操作起來就簡單高效多啦~
被困擾的小問題
先說明一下~我是一位GUI設計師，在設計網頁的時候，開發童鞋就使用了SVG格式的icon~細心的我發現這個格式的icon最後呈現出來的效果，邊緣會模糊。。。
這可能是一部分開發和視覺設計師都遇到的問題哦~用圖片來說明一下！
對比後，效果相差還是很明顯的，甚至圖標還會變形呢！這對有強迫症的人來說真的是一件超級虐心的事情呢~
解決辦法
SVG格式是從AI導出的，所以無論視覺是在PS裏麵製作還是AI裏麵製作，都要將icon在AI中形成路徑~
問題出在哪裏呢？
我們都知道AI是矢量工具，無論你畫什麼路徑都不會出現像素那樣的鋸齒，所以在用AI製作像素icon的時候，一定要重新設置首選項，並用網格進行輔助。
STEP 1：單位一定是像素，否則會影響其他選項的單位設置
STEP 2：鍵盤增量調整為0.1像素，方便調整icon位置
STEP 3：網格線間隔設置為1px，次分隔線設置為10意思是最小的網格單位是0.1px，如果你的icon邊緣沒有貼在1、2、3……這樣的整數網格上而是在次分隔線上，就會模糊變形！
STEP 4：從“視圖”選項中選擇“顯示網格”。
最後檢查的時候畫麵一定要放大到最大哦~
簡單的小分享，希望可以幫到童鞋們~謝謝啦。
分享
华体会hth体育网
賞析
-
2101期學員李思庭作品
-
2104期學員林雪茹作品
-
2107期學員趙淩作品
-
2107期學員趙燃作品
-
2106期學員徐正浩作品
-
2106期學員弓莉作品
-
2105期學員白羽新作品
-
2107期學員王佳蕊作品
熱門課程
專業講師指導 快速擺脫技能困惑
相關文章
多種教程 總有一個適合自己專業問題谘詢
你擔心的問題，火星幫你解答-
在廣州這座繁華的都市中，數字創意產業正蓬勃發展，廣州視頻剪輯培訓成為許多影視愛好者的理想起點。隨著短視頻平台和影視製作需求的激......
-
在北京這樣一座充滿創意活力的都市，UI設計培訓正成為無數年輕人追逐職業夢想的跳板。隨著數字經濟的蓬勃發展，UI設計行業在北京展......
-
在當今創意經濟蓬勃發展的浪潮中，北京平麵設計培訓成為眾多職業追求者的理想起點。這座城市的活力與機遇吸引著無數人投身視覺藝術領域......
-
在影視和設計行業蓬勃發展的今天，虛幻引擎作為核心技術工具，正引領著視覺創作的革命。越來越多的人渴望掌握這門技能，而專業的培訓成......
-
在北京這座文化創意中心，平麵設計培訓行業蓬勃發展，為渴望入行的學員提供了豐富機遇。隨著數字媒體和影視產業的崛起，掌握視覺傳達技......
-
在上海這座充滿活力的城市，影視和設計行業正迎來前所未有的發展機遇，數字技術的進步讓3D建模成為創意產業的核心驅動力。參加專業的......
