大前端求人不如求己系列工具：如何PSD文件自動標註切圖和真機預覽

前言

在不少時候，UI會給一部分切圖，當你使用一個新的技術，須要的再也不是png而是webp或者SVG時候，溝通變得異常複雜，溝通成本急劇增長。

不少時候在想，是否有一些工具，能夠幫助咱們解決這個尷尬的問題，也能夠減小溝通成本；

固然不少公司專業的UI會經過專業工具Stetch幫你生成一套完成的UI備註文件。

惋惜，有些時候，並無。

因此，通過一些摸索，發現了一些比較不錯的工具，來提升咱們工做的效率；

廢話很少說，開始介紹。

藍湖工具

如上全部，若是沒有UI幫你作或者沒時間作UI備註，咱們就採起其餘的在線模式；

在線工具就是藍湖

註冊帳號

註冊一個免費帳號

下載插件

ps應用商店下載藍湖插件

Adobe Photoshop 插件下載

ps中點擊藍湖工具，而後登錄

自動備註

當咱們只須要獲取自動備註的時候，點擊上傳面板

點擊去web端查看按鈕，能夠跳轉到藍湖網頁版

右邊的各類備註信息盡收眼底，非常方便。

切圖

當你須要生成切圖時候，以下圖一步步操做

雙擊psd源文件，選中ICON圖層，點擊標記爲切圖

手機預覽psd源文件

當你以前都已經把PSD文件上傳到藍湖後，appstore下載藍湖APP，以後就能夠直接預覽psd文件了

Design Mirror

下載地址

首先下載 photoshop 插件, 而後下載 app，而後在ps裏面登陸註冊好的帳號，經過wifi或者USB，就能夠app裏面預覽

這個預覽和上一個藍湖預覽最大的不一樣就是這個徹底是本地預覽，不須要上傳，比較方便。

甚至還能夠點擊上傳圖片，把手機上的圖片同步到photoshop, 這個挺不錯的