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

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

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/html

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同事使用的設計軟件是這個,因此我就直接使用這個軟件切圖了,這個軟件帶有一件導出功能,通常直接選擇咱們須要的圖片導出就好了,須要注意的一點就是要安裝與設計圖相同的網絡字體,以避免和設計圖效果不一致。網站

相關文章
相關標籤/搜索