設計好的 Icon 在手機界面里顯示有毛邊怎麼辦？

01-28

我先是在 AI 里設計好 Icon，然後保存 PSD 格式給程序員，程序員把 Icon 放到手機界面的時候，很粗糙、有毛邊，有些縮小的 Icon 不清晰，沒有手機自帶 Icon 那麼清晰，自己也嘗試過縮小Icon，用 PS 縮小到24x24像素後就很模糊不清。

我不知道你是否直接縮小圖標而沒做任何變動。

縮小圖標時，應該拖動路徑的錨點與像素格對齊[1]，這樣就可以減少模糊，毛邊的情況。

另外，如果圖標路徑比較複雜，縮小圖標時可以精減路徑，使圖標更清晰[2]

附完整的圖標縮小教程：

http://www.iconeden.com/blog/2010/09/21/pixel-perfection-in-icon-design/

[1] http://d.pr/s4Z7

[2] http://d.pr/z2MI

縮小到這種尺寸後肯定要重新修圖的，不要指望ps幫你做所有的事

感覺樓主不是要縮小圖標，而是和我一樣，要找到優化手機圖片顯示的技巧！

近期也在做自適應靈動頁面，手機橫屏豎屏都可以自己適應排版，同樣遇到圖標和底圖模糊問題！

手頭測試的是魅族m9和ip4s，解析度640X960，用@media (min-device-width:；)來判斷橫豎屏和設備寬度，可實際測試手機自帶安卓瀏覽器、ip4瀏覽器和uc瀏覽器，發覺自適應尺寸，豎屏是320px左右，橫屏480px左右，怪不怪，難道目前通用的基準就是這個？

ps設計的底圖，是按960x640做的，結果根本不是1:1顯示的！

沒辦法，暫時修改了圖片，按480x320設計的，可以適應ip4和m9的各種瀏覽器橫豎屏，

除了圖片沒法高清顯示，其他還算完美！

我只知道安卓系統，有自己開發的一種格式（.9png）,可以不失真縮放，但不知道ip4s的系統是否支持，也沒來得及測試！

百度了幾次，很少討論普通自適應web頁面，優化處理圖片尺寸和格式的內容！

畢竟，手機瀏覽器，有自己的自適應解釋方式，還要兼容各種尺寸，希望有高手解惑！

繼續探索中，希望更多的人參與進來！

縮小到24X24 之後我們一般都要修圖的。用鉛筆工具。一點一點去調整

猶記得我還是個設計菜鳥的時候被某產品經理挑刺，說我設計的網頁圓角搜索框邊角有毛刺，當時苦苦尋找很久解決辦法都被告知點陣圖軟體是這樣。現在我來是來打臉那位同樣弱雞的產品的。我找到ps里引起毛邊的幾種情況：1.菜單 [編輯]-[首選項]-[常規]。請確保你的[圖像插值]設置為「兩次立方（適用於平滑漸變）」2.盡量從AI中拖入矢量圖；先旋轉後縮小，分兩步走；旋轉時盡量使用角點，避免變形。3.矢量圖進行圖層樣式操作後用鍵盤方向鍵移動位置不對的節點或者銳化修圖。所有業界的流程規範正確但還是無法避免做些美工的活，比如手動精修，這也是設計師細節經得起推敲的原因，有時候數字不代表實際的視覺觀感，還是要相信眼睛。

同求啊我的是桌面應用圖標咱們兩個是同樣的問題