AI幫你輕松搞定SVG Icon的模糊問題
我要評論
簡單介紹
隨著高清視網(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í)候畫面一定要放大到最大哦~
簡單的小分享，希望可以幫到童鞋們~謝謝啦。
相關(guān)文章
ai如何創(chuàng)建可編輯偏移文本? ai文字偏移路徑的使用教程
偏移文本或偏移路徑意味著偏離了原來的位置，雖然聽起來可能不太理想或雜亂無章，但在Illustrator中使用偏移技術(shù)處理文本可以給您帶來一些很酷的效果，詳細(xì)請看下文介紹2026-03-03ai怎么混合兩種顏色? illustrator混合兩個(gè)色塊的顏色的方法
ai填充不同顏色的圖形重疊以后，想要將兩種顏色混合，該怎么混合顏色呢？下面我們就來看看詳細(xì)的教程2024-07-18
ai如何自定義網(wǎng)格線間距? ai參考線間距的調(diào)節(jié)方法
ai網(wǎng)格線間距默認(rèn)的不是很喜歡，想要自己調(diào)整一下，該怎么調(diào)整呢？今天我們就來看看參考線調(diào)整技巧2024-05-28
ai路徑平均效果怎么用? illustrator使用平均路徑的教程
Adobe Illustrator中有一個(gè)路徑平均功能，如何使用呢？下面小編為大家演示路徑平均功能的一種使用方法2024-05-21ai保存pdf格式出現(xiàn)多余內(nèi)容怎么解決? 去掉pdf文件多余內(nèi)容的技巧
ai保存pdf格式出現(xiàn)多余內(nèi)容怎么解決？ai中的文檔保存為pdf文件的時(shí)候，發(fā)現(xiàn)有多余內(nèi)容，該怎么操作呢？下面我們就來看看去掉pdf文件多余內(nèi)容的技巧2023-12-19- ai描邊在哪里？ai中想要設(shè)置描邊，該怎么操作呢？下面我們就來看看ai設(shè)置描邊的多種方法2023-12-19
ai原位復(fù)制怎么用? ai原位復(fù)制快捷鍵介紹
ai原位復(fù)制怎么用？復(fù)制圖形的時(shí)候，想要原位復(fù)制粘貼，該怎么操作呢？下面我們就來看看ai原位復(fù)制快捷鍵介紹2023-12-19ai怎么讓文字隨著路徑變形? illustrator區(qū)域文字不跟著變換方向問題的
ai怎么讓文字隨著路徑變形？選中文字后，發(fā)現(xiàn)文字不跟隨變換區(qū)域旋轉(zhuǎn)該怎么辦呢？下面我們就來看看illustrator區(qū)域文字不跟著變換問題的解決辦法2023-11-30ai漸變色怎么調(diào)方向? illustrator將漸變顏色反向的技巧
ai漸變色怎么調(diào)方向？ai中給圖形填漸變色，想要進(jìn)行反向，該怎么操作呢？下面我們就來看看illustrator將漸變顏色反向的技巧2023-11-30
Ai彩色logo怎么做反白反黑效果? ai彩色logo轉(zhuǎn)化為黑白稿的技巧
Ai彩色logo怎么做反白反黑效果？設(shè)計(jì)的彩色logo想要做黑白稿，就是反黑反白效果，下面我們就來看看ai彩色logo轉(zhuǎn)化為黑白稿的技巧2023-11-12
