在微博關(guān)注我@亞賽大人 的朋友，都多多少少了解到我做了不少設(shè)計(jì)小工具吧～?最初用 Processing 做循環(huán) Gif 打卡，每一小段時(shí)間打卡的主要代碼都差不多，改一些參數(shù)，就可以做出看上去不一樣的效果，那何不做一個(gè)可以實(shí)時(shí)編輯并反饋的工具來(lái)玩，就開(kāi)啟了我開(kāi)發(fā)設(shè)計(jì)工具之路。

下篇已出：《學(xué)編程后，我做了這10個(gè)有毒的在線免費(fèi)設(shè)計(jì)神器！（下）》

誒，沒(méi)想到現(xiàn)在自己做了10個(gè)了！是時(shí)候來(lái)一個(gè)最全的工具大總結(jié)了！

注：本文由優(yōu)設(shè)網(wǎng)獨(dú)家約稿，未經(jīng)優(yōu)設(shè)網(wǎng)許可請(qǐng)勿轉(zhuǎn)載。授權(quán)請(qǐng)?zhí)砑泳庉嬑⑿牛骸竒g_and_xb」

工具總結(jié)：

3個(gè)文字工具+1個(gè)玩具球+6個(gè)點(diǎn)線面背景生成器

閱前提示：

• 以下工具生成的圖像都是免費(fèi)可商用，請(qǐng)放心食用。
• 如果打不開(kāi)網(wǎng)站，建議多刷新幾次，或更換成 Chrome 瀏覽器。
• 這些工具如何制作 Gif ？用錄屏軟件吧～windows 用戶：推薦 honeycam、Ocam；macOS 用戶：推薦 LICEcap。

先從最近剛發(fā)布了的一個(gè)線型字工具開(kāi)始吧～

波濤洶涌的線型文字

1. 試玩地址

https://wangyasai.github.io/waveFont/

2. 靈感來(lái)源

如果你對(duì) Joy Division 這個(gè)樂(lè)隊(duì)愛(ài)到不行，亦或是完全不知道《unknown pleasure》這專輯是什么鬼......但是你對(duì)這些看上去突出的山峰/波浪一定不會(huì)陌生。

這個(gè)經(jīng)典的圖案曾多次出現(xiàn)在影視作作品中，比如《頭號(hào)玩家》中的一個(gè)彩蛋，女主背心上印的就是這個(gè)圖案。

但事實(shí)上這并不是山峰或波浪，這是人類第一顆發(fā)現(xiàn)的脈沖星 CP 1919的脈沖信號(hào)。當(dāng)然你也不用糾結(jié)這是什么，反正如你所見(jiàn)，這個(gè)工具的目的就是讓文字突出！

3. 工具簡(jiǎn)介

上手十分簡(jiǎn)單，直接輸入文字就可以實(shí)時(shí)生成，還可以調(diào)整字體的大小和粗細(xì)，這不就意味著你得到了波紋字體了嗎？想寫(xiě)啥就寫(xiě)啥，還可以支持特殊符號(hào)！！！

這個(gè)工具當(dāng)然支持填充顏色，那如何只看到文字不看到周邊線條的顏色？只需要把背景顏色和線條1的顏色統(tǒng)一就好啦～

再試試顏色模式下的漸變，就是另一種風(fēng)味了。

說(shuō)完顏色，再說(shuō)說(shuō)山的海拔，調(diào)整 Control 面板中的 Height ，就可以任意拉高或降低高度了。

剛生成的字默認(rèn)每一列小山峰都排列的整整齊齊，如何讓它們不如此規(guī)整呢？那就調(diào)整 Offset 吧，這是調(diào)整山的偏移量，可以讓文字的每個(gè)部分錯(cuò)落分布。

參數(shù)太多？不想一個(gè)一個(gè)調(diào)？那就不如試試隨機(jī)效果 Random 吧，任意更改面板中的種種參數(shù)，給一個(gè)意想不到的結(jié)果。

4. 參數(shù)解釋

參數(shù)太多，篇幅有限，大家自行探索吧～

提示：這次工具除了常規(guī)的 JPG 和 PNG ，還支持 SVG 下載哦～

5. 案例應(yīng)用

@Simon阿文 提前內(nèi)測(cè)做了下面一組打卡。

如何做到循環(huán)播放？先用開(kāi)篇提到的錄屏軟件錄制 gif ，然后在 PhotoShop 中刪除超出一個(gè)完整循環(huán)的幀，最后循環(huán)播放時(shí)，最后一幀和第一幀能自然過(guò)渡。

感受到心電圖般砰砰砰砰砰地跳動(dòng)了嗎？

猜猜下面兩組是怎么做的？

不得不說(shuō)，@Simon阿文真是個(gè)優(yōu)秀玩家，他用我的工具做的東西，我……居然想求教程？？？

還做了一組變形數(shù)字，想知道怎么做的？Call 他寫(xiě)個(gè)教程吧！

他用我的工具，做了很多案例在 #PPT365# 的微博話題上，那里還聚集了很多人的設(shè)計(jì)腦洞，大家可以隨時(shí)去找靈感噢～（對(duì)了，本篇中若無(wú)特殊注明的案例均來(lái)自 @Simon阿文 ）

一個(gè)大寫(xiě)的粒子字

1. 試玩地址

https://wangyasai.github.io/PerlinNoisePainter/

2. 靈感來(lái)源：

在學(xué)習(xí)粒子系統(tǒng)時(shí)，想看粒子和文字結(jié)合會(huì)產(chǎn)生什么火花？

最先想到一個(gè)最簡(jiǎn)單的方法，在粒子的上層加一層鏤空文字的蒙版，把不想看到的粒子遮住，只看到鏤空的部分。

誒，就get了粒子字的效果～

2. 工具簡(jiǎn)介

如你所見(jiàn)，這個(gè)工具就是粒子充斥在文字里面，擁有它，讓文字搭上酷炫的班車。

這個(gè)工具已經(jīng)默默更新了 2.0 版本，1.0版本需要上傳黑底白字的圖片，現(xiàn)在直接在文本框輸入文字，即刻生成效果。同樣，也支持輸入符號(hào)，輸入一個(gè) ★ ，就可以生成五角星粒子字。

用 Nums 控制粒子的數(shù)量，數(shù)量越多，當(dāng)然文字看的更清楚啦，粒子越多也會(huì)影響運(yùn)行的速度，建議粒子控制在能夠看清文字的數(shù)量就夠啦～

粒子的默認(rèn)顏色是三種顏色隨機(jī)分布，當(dāng)選擇 ColorMode 里面的漸變模式，顏色就會(huì)從上到下漸變。

3. 參數(shù)解釋

4. 案例應(yīng)用

想必你也掌握了下面的是怎么做的了吧～

黑客帝國(guó)同款文字雨生成器

1. 試玩地址?

https://wangyasai.github.io/TheMatrix/

2. 靈感來(lái)源

沒(méi)錯(cuò)！就是來(lái)自科幻大片《黑客帝國(guó)》！！！

3. 工具簡(jiǎn)介

顧名思義，就是一款自帶黑客帝國(guó)特效的文字工具。作為一個(gè)愛(ài)耍酷的工具，它絕對(duì)不會(huì)滿足一種模式的，它內(nèi)置多款故障字體，你可以用它來(lái)生成各種亂碼文字雨背景。

除了默認(rèn)的幾種模式，你還可以定制文字雨中的關(guān)鍵詞，只要在 Unicode 中選擇 Text 模式，在下方文本框中，隨意敲擊文字，就可以實(shí)時(shí)看到輸入的文字在屏幕中隨機(jī)生成，瞬間 get 詞云的新玩法！

另外，還提供多種參數(shù)設(shè)置，比如文字雨射出的方向，比如你可以通過(guò)設(shè)置透明度來(lái)營(yíng)造出射線的錯(cuò)覺(jué)~

當(dāng)把文字方向改成從左到右橫，這不就是一面彈幕墻了嗎～

4. 參數(shù)解釋

5. 案例應(yīng)用：

看，@林書(shū)尼 把圖表和這個(gè)效果結(jié)合，開(kāi)啟科技感圖表的新鮮玩法～

說(shuō)完上面上面3個(gè)我制作的文字相關(guān)工具，再來(lái)說(shuō)一個(gè)運(yùn)用隱藏技巧可以制作油畫(huà)字效的工具。

向量畫(huà)筆重繪器

1. 試玩地址：

https://wangyasai.github.io/Noise-flow-field-painter/

2. 靈感來(lái)源

來(lái)自 Jason Labbe 大神開(kāi)發(fā)的工具 Noise Flow Field Painter（地址：https://www.openprocessing.org/sketch/472966）我在他的基礎(chǔ)上，加了一個(gè)控制面板，像其他工具一樣可以方便修改參數(shù)～

3. 工具簡(jiǎn)介

這個(gè)工具就是用一堆圓柱形狀把一張圖片重繪，神奇地模仿出油畫(huà)的質(zhì)感~~

你可以上傳你電腦中的任意圖片，想重繪哪張就哪張。

可以非常方便地調(diào)整畫(huà)筆的粗細(xì)、長(zhǎng)短

調(diào)整畫(huà)筆的粗細(xì)

誒，還記得前面說(shuō)這是一個(gè)可以運(yùn)用隱藏技巧制作油畫(huà)字體的工具，如何實(shí)現(xiàn)呢？

上面我們上傳的都是完整的照片，試想上傳有油畫(huà)效果的文字，那不就是油畫(huà)字嗎？

@Simon阿文 就這樣用它做出了一套很好看的油畫(huà)數(shù)字，相信你現(xiàn)在也掌握了吧

同理，各種圓形、方形、三角形、不規(guī)則圖形的油畫(huà)效果也這樣處理。

4. 參數(shù)解釋

5. 案例應(yīng)用

讓梵高的油畫(huà)再次加工，這個(gè)筆觸真的超有感覺(jué)～

@Simon阿文 用他旅游時(shí)拍的一張照片，把處理后的油畫(huà)效果圖，再和原圖進(jìn)行拼接，內(nèi)容引起極度舒適，看了好想出去玩呀！！！

說(shuō)完了上述的這四個(gè)字體工具，我們?cè)賮?lái)玩?zhèn)€球吧！

玩?zhèn)€球

1. 試玩地址

https://wangyasai.github.io/Play-a-ball/

2. 靈感來(lái)源：

相信不少同學(xué)在剛?cè)腴T(mén) Ai 的時(shí)候，都跟著教程做過(guò)這樣的抽象球體：環(huán)形，波紋，網(wǎng)格……

雖然教程簡(jiǎn)單易懂，但很多同學(xué)還是過(guò)目就忘……現(xiàn)在，懶癌的福音來(lái)了！

3. 工具簡(jiǎn)介

這是一個(gè)在線抽象球體生成器，可以一鍵生成那種在 Ai 入門(mén)教程中非常常見(jiàn)的球體：環(huán)形，波紋，網(wǎng)格……是的，現(xiàn)在你連門(mén)都不用入了。

你可以隨意更改花紋：

你可以調(diào)整球體的平滑度來(lái)實(shí)現(xiàn)變形：

當(dāng)然，每種花紋的疏密和大小都可以調(diào)節(jié)：

懶得調(diào)參數(shù)？那就直接點(diǎn)擊隨機(jī)生成好了：

甚至可以上傳自己的圖片，作為圖形的紋理！看，一秒鐘自制星球：

4. 參數(shù)解釋：

5. 案例應(yīng)用：

恭喜你，文章已閱讀過(guò)半！收藏好這篇，明天優(yōu)設(shè)網(wǎng)會(huì)發(fā)布第二篇，將迎來(lái)一大波點(diǎn)線背景素材生成器，還有亞賽大人的專訪哦，敬請(qǐng)期待！