首頁>Club>
用sketch做網頁的時候,icon設計的假設是20*20的尺寸,匯出一倍圖後,為什麼前端開發出來會模糊?
8
回覆列表
  • 1 # 007設計師

    記住兩種情況,sketch匯出圖示不模糊

    這裡你要清楚你的圖示是否有漸變和投影,這個關鍵因素直接影響你匯出icon的效果。

    我在這裡把兩種情況導的方法都講解下,看看你的是其中的哪一種,然後對症下藥。

    第一種:無投影及漸變

    這裡我用我之前做APP的圖示來舉例子,大家看第一排4個圖示,首頁和個人中心,是不是沒有投影,我先來說說這種正確的匯出方法。

    1. 第一步:選中需要匯出的圖示

    我們畫圖示的時候,需要注意的是一定要在正方形裡畫,並建立為組建,這個規範我在第一篇文章中有寫到,方便以後的修改。

    2. 第二步:選擇匯出的格式(SVG)

    在格式中選擇svg格式

    沒有特殊效果的圖示,匯出SVG會使圖示變的更加的清楚,就不會模糊。

    3. 第三步:儲存的命名及儲存位置

    在命名的時候一定要注意,一般都是英文或者拼音,如果開發人員沒有要求也可以命名中文的,只是他們還會重新命名的,看你們公司的要求啦。

    第二種:有投影及漸變的圖示

    第一步:選擇匯出的圖示

    這種和第一種情況的方法基本一樣,唯一不一樣的就是匯出圖示的格式啦!

    第二步:選擇匯出的格式(PNG)

    在這裡我導的2x(2倍),原因是我做的尺寸是375*667的app,如果做的網頁就導一倍的。

    第三步:儲存及命名

    總結:匯出正確的圖示,只需要記住有兩點。

    1. 有特殊效果的導PNG

    2.無特殊效果的導SVG

    唯有堅持,方能不負所愛,加油!

  • 中秋節和大豐收的關聯?
  • 德雲社演員的大褂真的一點規矩沒有嗎?是隨便穿的嗎?