前端工具【3】—— 圖片處理

在寫頁面以前，很重要的一個技能是切圖，根據UI設計的設計圖，在瞭解頁面結構和操做後進行分割，取出本身在開發過程當中是用到的圖片資源。
切圖主要是用的工具就是PS、XD等等，除此以外，在開發過程當中咱們也會用到其餘工具，如下介紹一些有關於圖片處理的操做。

1、分享一些在線網站

（1）圖片轉Base64：https://tool.css-js.com/base6...
（2）圖片格式轉化：https://jinaconvert.com/cn/
（3）少許圖片壓縮不失真：https://tinypng.com/
（4）免費圖標素材：http://669pic.com/
（5）平面設計工具:https://www.chuangkit.com/

2、FastStone Capture截圖工具的使用

這是一款很是實用的屏幕截圖抓取軟件，佔用空間小，安裝啓動後是這樣的。

（1）是打開文件
（2）捕捉活動窗口
（3）捕獲窗口
（4）捕獲矩形區域，可自行截圖。
（5）捕獲手繪區域
（6）捕獲全屏
（7）捕獲滾動窗口，就像手機滾動截屏
（8）捕獲固定區域
（9）視頻錄像機
（10）輸出
（11）設置實用小工具
我我的比較喜歡使用的工具就是（7）、（9）、（11）裏面的小工具，想拾色器、放大鏡等。

3、切圖工具

一、Photoshop：切圖仔必備，在慕課網上有一個詳細的視頻講解：https://www.imooc.com/learn/506
切圖是開發中很重要的一步，圖片切好了對於後面咱們寫頁面會是事半功倍，在切圖中咱們須要注意的是怎麼切，是否是把每一行張圖都很仔細的切下來呢，不是的，是根據頁面結構，有目的的切，要想一想切出來的圖是否符合頁面的需求。新版的CC比以前那些版本增長了一鍵導出功能，這個功能很大程度方便了咱們拆分圖片。

二、XD：Adobe公司的另外一個產品，原型設計工具，如今UI同事使用的設計軟件是這個，因此我就直接使用這個軟件切圖了，這個軟件帶有一件導出功能，通常直接選擇咱們須要的圖片導出就好了，須要注意的一點就是要安裝與設計圖相同的網絡字體，以避免和設計圖效果不一致。