設計師中最火的工具絕對是Adobe爸爸底下的Photoshop，業界良心軟件，設計必備。而這章主要是介紹新晉設計神器~Sketch！

Da ~ la ~

image

辣么，what is Sketch?

Sketch 是一款矢量繪圖應用。作為新晉設計神器，傲嬌的Sketch暫時只支持Mac，矢量繪圖也是目前進行網頁，圖標以及界面設計最好的方式。

有人會問，那Photoshop和Sketch有什么不同的地方么？Photoshop大而全，還有必要去學其他軟件么？

image

Sketch VS Photoshop

Photoshop

• 為圖像處理開發的。（圖片修正，畫筆繪圖）
• 不適合移動開發 不同的設備輸出不同分辨率的素材
• 重量級軟件，耗資源 (每次保存文件，遇到差點的電腦隨時隨地會崩潰原地爆炸！) 但是能兼顧mac和windows平臺
• ...

Sketch

• 多版本控制
• 只支持Mac
• 專注網頁設計和ui設計
• 輕量級軟件，運行起來非常快
• ...

photoshop:專注位圖處理

Sketch:專注網頁設計和ui設計

img2

不算廢話的廢話總結：
如果是用來修圖瘦腿瘦臉美白等位圖操作—— Photoshop
如果是做輕巧的界面設計工具和icon等矢量圖操作—— Sketch

Sketch最火爆的標注插件————Measure

對于前端仔，疲于頁面業務邏輯的實現，當然是希望能在網頁ui實現上，越快速越好。因此，icon的尺寸大小、用色、字體大小、間距等等這些細節上的確認，如果能在圖上一次性加入一些標注信息和切圖等，減小前端仔和ui大大的溝通成本，這將大大提高前端er的工作效率

為此，隆重推薦用Sketch插件————Measure！！！從此媽媽再也不用擔心我羅里吧嗦的繁瑣切圖問題了~

附上Measure的下載鏈接：http://utom.design/measure/

使用Measure的好處：

• 可以在頁面上自動標記出相關參數（間隔，尺寸，屬性，備注）
• 規范導出圖，一建生成html，包括css樣式
• 更加強力的導出功能（例如：原生支持 @2x 圖片導出）
• 像素編輯支持全像素對齊
• 內置很多ios，android，web的模板尺寸
• 不限制大小的畫布
• ...

image.png

另外如果還對其他sketch的插件感興趣，再獻上sketch工具箱官網~自行下載研究哈：
http://sketchtoolbox.com/

image

在Sketch Toolbox可以下載Sketch的大部分插件（附件有帶壓縮包，但該工具仍存在bug不太穩定，容易用著用著就崩潰掉_慎重~）

另外，Sketch3.4版本后，已支持自帶插件管理工具，Sketch Toolbox基本可以退休了。

image

自帶插件管理工具(點擊插件 => 管理插件 => 在彈窗工具箱中可管理已有的sketch插件 or 下載新的插件)

image

image

給前端仔的

辣么 ~ 搞設計的是美麗又可愛大方溫柔的ui大大的天職，而對于我們前端仔，我們只會關心，圖要怎么快速切好，啥色號啊，這個圖標有多大尺寸啊。。。趕緊擼起來我們的界面吧~

image.png

• 1、標尺使用（快速切圖+快速導出圖+查看圖片標注）

  step0:選中所有圖層，找到measure插件，選擇工具欄

  image

  step1:點擊導出按鈕

  image

  step2:查看導出文件，assets文件里面是所有一建切圖的文件，點擊打開index.html，可看到measure標尺好的界面，鼠標懸浮后即可看到每個小圖的尺寸和間距

  image
  image

• 2、快捷鍵

  以下列入若干個前端仔常使用的快捷鍵，讓你的工作效率xiu_xiuxiu~

  image

• 3、ui圖在移動端可預覽（Mirror）

  Mirror:按照圖例方式點開，必須在同個局域網內，移動ios設備安裝好Sketch Mirror軟件，即可在手機上預覽ui圖

  image

get more，click this:http://www.lxweimin.com/p/46284dbe51e6 or 自行百度谷歌啊

最后再安利另外一款好用的sketch插件————zeplin！！！

標尺類插件——measure 和 zeplin的用法

image

(Measure工具的工作界面)

image

(Zeplin工具的工作界面，也可以在網頁打開在線編輯)

兩者的核心功能都是自動輸出標注與切圖。只不過兩者在一些細節處略有不同

1. 收費

   Zeplin：產出物是在線的，用戶可以通過訪問網頁查看Zeplin的標注與切圖。你必須先邀請用戶進入Zeplin項目組，該用戶才可以通過網頁訪問到。 https://app.zeplin.io/projects

   image

   (zeplin的在線工作界面)

   Measure：產出物在本地。用戶得將文件包傳來傳去的，更新起來肯定會比較麻煩。允許任何人查看。

2. 備注

   Zeplin：可以直接在標注上添加備注，比較方便。

   image

   Measure：要想添加備注，得先在Skech內添加文字>再轉成備注格式。

   step0:選中插入文本工具

   image

   step1:輸入文本內容

   image

   step2:將文本轉換為備注，也可用快捷鍵 Control+Shift+5

   image

   step3:轉換成功后，通過measure輸出，就長這樣啦~

   image

   在index.html打開后

   image