PS拉框助手

PS拉框助手是一款可以幫你在ps中快速生成可編輯的各類型圖表的插件，以前我們需要在ps中生成圖標(biāo)只能自己慢慢去畫，這樣費(fèi)時(shí)費(fèi)力還不一定討得了好�，F(xiàn)在大家可以利用這款PS拉框助手插件來一鍵填充真實(shí)圖表，它能夠快速的生成折線圖、柱狀圖、餅圖、雷達(dá)圖、全國各省市的地圖等常見的ui元素。

插件特色：

節(jié)約時(shí)間

一般來說，使用PS繪制真實(shí)數(shù)據(jù)的圖表是一個(gè)非常耗時(shí)的過程

簡單方便

拉個(gè)框，填寫顏色值，點(diǎn)擊確定就可以輕松獲得你想要的圖表效果

自動(dòng)化

自動(dòng)化繪制的視覺元素將準(zhǔn)確地表示數(shù)字、尺寸、間距，實(shí)現(xiàn)結(jié)果真實(shí)可靠。

容易實(shí)現(xiàn)

拉框助手生成的界面，開發(fā)小哥使用Echarts一定能夠?qū)崿F(xiàn)，實(shí)現(xiàn)效果能與設(shè)計(jì)圖一致

插件介紹：

點(diǎn)擊「下載插件V1.0.0.1」下載壓縮包，按照順序來一步步安裝這款 PS 擴(kuò)展插件。（注：附帶字體均可免費(fèi)商用）

安裝好后我們打開 PS，在窗口-擴(kuò)展功能里能看到 PS 拉框助手，點(diǎn)擊即可打開。

插件的界面頂端是圖表的種類，而界面底端則是「快速導(dǎo)入導(dǎo)出JSON數(shù)據(jù)」以及「教程查看」的功能。（注：拉框助手目前只支持文檔分辨率為 72 像素的文件）

使用方法：

折線圖圖表生成和調(diào)整

第一步：用矩形選框工具，在畫布上拉出一個(gè)框來，大小可按照你的實(shí)際需求來。

第二步：調(diào)整數(shù)據(jù)以及文字。

在拉框助手中，我們可以修改圖表 X、Y 軸的參數(shù)以及線條樣式、寬度、顏色等。（注：折線圖 X 軸底部文字需要用英文逗號隔開）

點(diǎn)擊「增加一組數(shù)據(jù)」，填寫相應(yīng)的參數(shù)，即可在圖表上添加多組數(shù)據(jù)繪制多條數(shù)據(jù)折線。

數(shù)據(jù)能隨機(jī)產(chǎn)生，也可以手動(dòng)填寫，但是隨機(jī)數(shù)據(jù)的范圍不會(huì)超過你規(guī)定的 Y 軸數(shù)據(jù)范圍。

固定數(shù)據(jù)需填寫每個(gè)點(diǎn)的值（用英文逗號隔開）。

最后，點(diǎn)擊「確定」就能獲得我們所繪制的折線圖了，在右邊的圖層即可進(jìn)行編輯修改。（電腦比較慢的小伙伴可能加載也比較慢）

不同圖表生成和調(diào)整

再來看看咱們非常常見的其他類型圖表。

1. 柱狀圖

同樣的方式拉框、填寫參數(shù)。

「柱子間距」可以設(shè)置為負(fù)數(shù)，能繪制出「帶背景」的效果。

2. 餅狀圖

也是類似的方法就可以繪制，可控參數(shù)也非常多。

如果選中「數(shù)據(jù)」的話，在「選中偏移」中填寫的值越大，餅圖中選到的那塊數(shù)據(jù)離圓心的距離就越遠(yuǎn)。

3. 地圖

是的，你沒看錯(cuò)。不僅可以拉圖表，還可以拉中國各省市區(qū)的地圖。

點(diǎn)擊「去下載對應(yīng)數(shù)據(jù)」拉框助手就會(huì)打開對應(yīng)的網(wǎng)站，然后進(jìn)行 JSON 數(shù)據(jù)的復(fù)制粘貼到拉框助手就能獲得圖形。

系統(tǒng)UI的生成與調(diào)整

PS 拉框助手還具備常用的 UI 元素，如：按鈕、按鈕組、窗口、輸入框、下拉框、單選、多選、提示、表格、樹等的一鍵繪制。

目前的版本只能繪制一套適用于深色背景下的 UI 元素，但是作者還在不斷更新。

舉個(gè)例子，我們來畫個(gè)按鈕：

先用矩形選框工具拉一個(gè)框；

編輯「按鈕文字」，選擇「按鈕圖標(biāo)」。

就可以生成你想要的按鈕圖標(biāo)啦。

按鈕組的操作步驟也一樣，點(diǎn)擊「增加按鈕」添加多個(gè)按鈕并可以進(jìn)行文字編輯以及位置調(diào)整。

窗口、輸入框、下拉框、單選、多選、提示的操作大都相同。

表格繪制也非常輕松，先用矩形選框工具拉一個(gè)框，填寫表格的行數(shù)和列數(shù)。（注：將行設(shè)置多一點(diǎn)，超出拉框的部分將不會(huì)繪制）

填寫每個(gè)表頭要展示的文字。 「類型」：序號、IP、MAC、姓名、年齡等。（會(huì)根據(jù)類型，自動(dòng)生成一些默認(rèn)的隨機(jī)內(nèi)容）

填寫表格的具體內(nèi)容：

就可以在 PS 里輕松完成一個(gè)表格的繪制。