今天的主角是@亞賽大人和她制作的10款在線設(shè)計(jì)工具。之前三頓在她的微博上看到了不少超酷炫的設(shè)計(jì)案例：
這么酷炫的頁面，做起來一定特別復(fù)雜吧！完全不會(huì)，用她制作的工具，幾分鐘就能搞定！
今天就給大家分享一篇來自@亞賽大人的文章，一起來了解一下這10款超好用的設(shè)計(jì)神器！
-------------------------------------------
10大在線免費(fèi)設(shè)計(jì)神器
作者：微博@亞賽大人，轉(zhuǎn)載自優(yōu)設(shè)網(wǎng)
閱前提示
工具生成的圖像都是免費(fèi)可商用，請放心食用
如果打不開網(wǎng)站，建議多刷新幾次，或更換成 Chrome 瀏覽器
使用錄屏軟件即可錄制工具生成的動(dòng)效
波濤洶涌的線型文字
▼ 試玩地址
https://wangyasai.github.io/waveFont/
▼ 靈感來源
如果你對 Joy Division 這個(gè)樂隊(duì)愛到不行，亦或是完全不知道《unknown pleasure》這專輯是什么鬼，但是你對這些看上去突出的山峰/波浪一定不會(huì)陌生。
這個(gè)經(jīng)典的圖案曾多次出現(xiàn)在影視作作品中，比如《頭號玩家》中的一個(gè)彩蛋，女主背心上印的就是這個(gè)圖案。
但事實(shí)上這并不是山峰或波浪，這是人類第一顆發(fā)現(xiàn)的脈沖星 CP 1919的脈沖信號。當(dāng)然你也不用糾結(jié)這是什么，反正如你所見，這個(gè)工具的目的就是讓文字突出！
▼ 工具簡介
上手十分簡單，直接輸入文字就可以實(shí)時(shí)生成，還可以調(diào)整字體的大小和粗細(xì)，這不就意味著你得到了波紋字體了嗎？想寫啥就寫啥，還可以支持特殊符號?。。?/span>
這個(gè)工具當(dāng)然支持填充顏色，那如何只看到文字不看到周邊線條的顏色？只需要把背景顏色和線條1的顏色統(tǒng)一就好啦～
再試試顏色模式下的漸變，就是另一種風(fēng)味了。
說完顏色，再說說山的海拔，調(diào)整 Control 面板中的 Height ，就可以任意拉高或降低高度了。
剛生成的字默認(rèn)每一列小山峰都排列的整整齊齊，如何讓它們不如此規(guī)整呢？那就調(diào)整 Offset 吧，這是調(diào)整山的偏移量，可以讓文字的每個(gè)部分錯(cuò)落分布。
參數(shù)太多？不想一個(gè)一個(gè)調(diào)？那就不如試試隨機(jī)效果 Random 吧，任意更改面板中的種種參數(shù)，給一個(gè)意想不到的結(jié)果。
▼ 參數(shù)解釋
參數(shù)太多，篇幅有限，大家自行探索吧～
提示：這次工具除了常規(guī)的 JPG 和 PNG ，還支持 SVG 下載哦～
▼ 案例應(yīng)用
@Simon阿文提前內(nèi)測做了下面一組打卡。
如何做到循環(huán)播放？先用開篇提到的錄屏軟件錄制gif，然后在PhotoShop 中刪除超出一個(gè)完整循環(huán)的幀，最后循環(huán)播放時(shí)，最后一幀和第一幀能自然過渡。
感受到心電圖般砰砰砰砰砰地跳動(dòng)了嗎？
猜猜下面兩組是怎么做的？
他用我的工具，做了很多案例在#PPT365#的微博話題上，那里還聚集了很多人的設(shè)計(jì)腦洞，大家可以隨時(shí)去找靈感噢～（對了，本篇中若無特殊注明的案例均來自 @Simon阿文 ）
一個(gè)大寫的粒子字
▼ 試玩地址
https://wangyasai.github.io/PerlinNoisePainter/
▼ 工具簡介
如你所見，這個(gè)工具就是粒子充斥在文字里面，擁有它，讓文字搭上酷炫的班車。
這個(gè)工具已經(jīng)默默更新了 2.0 版本，1.0版本需要上傳黑底白字的圖片，現(xiàn)在直接在文本框輸入文字，即刻生成效果。同樣，也支持輸入符號，輸入一個(gè) ★ ，就可以生成五角星粒子字。
用 Nums 控制粒子的數(shù)量，數(shù)量越多，當(dāng)然文字看的更清楚啦，粒子越多也會(huì)影響運(yùn)行的速度，建議粒子控制在能夠看清文字的數(shù)量就夠啦～
粒子的默認(rèn)顏色是三種顏色隨機(jī)分布，當(dāng)選擇 ColorMode 里面的漸變模式，顏色就會(huì)從上到下漸變。
▼ 參數(shù)解釋
▼ 案例應(yīng)用
想必你也掌握了下面的是怎么做的了吧～
黑客帝國同款文字雨生成器
▼ 試玩地址
https://wangyasai.github.io/TheMatrix/
▼ 靈感來源
沒錯(cuò)！就是來自科幻大片《黑客帝國》?。?！
▼ 工具簡介
顧名思義，就是一款自帶黑客帝國特效的文字工具。作為一個(gè)愛?？岬墓ぞ撸^對不會(huì)滿足一種模式的，它內(nèi)置多款故障字體，你可以用它來生成各種亂碼文字雨背景。
除了默認(rèn)的幾種模式，你還可以定制文字雨中的關(guān)鍵詞，只要在 Unicode 中選擇 Text 模式，在下方文本框中，隨意敲擊文字，就可以實(shí)時(shí)看到輸入的文字在屏幕中隨機(jī)生成，瞬間 get 詞云的新玩法！
另外，還提供多種參數(shù)設(shè)置，比如文字雨射出的方向，比如你可以通過設(shè)置透明度來營造出射線的錯(cuò)覺~
當(dāng)把文字方向改成從左到右橫，這不就是一面彈幕墻了嗎～
▼ 參數(shù)解釋
▼ 案例應(yīng)用
看，@林書尼把圖表和這個(gè)效果結(jié)合，開啟科技感圖表的新鮮玩法～
說完上面上面3個(gè)我制作的文字相關(guān)工具，再來說一個(gè)運(yùn)用隱藏技巧可以制作油畫字效的工具。
向量畫筆重繪器
▼ 試玩地址
https://wangyasai.github.io/Noise-flow-field-painter/
▼ 靈感來源
來自 Jason Labbe 大神開發(fā)的工具 Noise Flow Field Painter，我在他的基礎(chǔ)上，加了一個(gè)控制面板，像其他工具一樣可以方便修改參數(shù)～
▼ 工具簡介
這個(gè)工具就是用一堆圓柱形狀把一張圖片重繪，神奇地模仿出油畫的質(zhì)感~~
你可以上傳你電腦中的任意圖片，想重繪哪張就哪張。
可以非常方便地調(diào)整畫筆的粗細(xì)、長短：
調(diào)整畫筆的粗細(xì)：
誒，還記得前面說這是一個(gè)可以運(yùn)用隱藏技巧制作油畫字體的工具，如何實(shí)現(xiàn)呢？
上面我們上傳的都是完整的照片，試想上傳有油畫效果的文字，那不就是油畫字嗎？
@Simon阿文就這樣用它做出了一套很好看的油畫數(shù)字，相信你現(xiàn)在也掌握了吧！
同理，各種圓形、方形、三角形、不規(guī)則圖形的油畫效果也這樣處理。
▼ 參數(shù)解釋
▼ 案例應(yīng)用
讓梵高的油畫再次加工，這個(gè)筆觸真的超有感覺～
@Simon阿文用他旅游時(shí)拍的一張照片，把處理后的油畫效果圖，再和原圖進(jìn)行拼接，內(nèi)容引起極度舒適，看了好想出去玩呀！??！
說完了上述的這四個(gè)字體工具，我們再來玩?zhèn)€球吧！
玩?zhèn)€球
▼ 試玩地址
https://wangyasai.github.io/Play-a-ball/
▼ 靈感來源
相信不少同學(xué)在剛?cè)腴T Ai 的時(shí)候，都跟著教程做過這樣的抽象球體：環(huán)形，波紋，網(wǎng)格等等。
雖然教程簡單易懂，但很多同學(xué)還是過目就忘?，F(xiàn)在，懶癌的福音來了！
▼ 工具簡介
這是一個(gè)在線抽象球體生成器，可以一鍵生成那種在 Ai 入門教程中非常常見的球體：環(huán)形，波紋，網(wǎng)格等等。是的，現(xiàn)在你連門都不用入了。
你可以隨意更改花紋：
你可以調(diào)整球體的平滑度來實(shí)現(xiàn)變形：
當(dāng)然，每種花紋的疏密和大小都可以調(diào)節(jié)：
懶得調(diào)參數(shù)？那就直接點(diǎn)擊隨機(jī)生成好了：
甚至可以上傳自己的圖片，作為圖形的紋理！看，一秒鐘自制星球：
▼ 參數(shù)解釋
▼ 案例應(yīng)用
漫畫速度線生成器
▼ 試玩地址
https://wangyasai.github.io/Speed-Line/
▼ 靈感來源
當(dāng)漫畫遇到超燃場景時(shí)，畫面上常常會(huì)包圍著一圈線，俗稱速度線?？上ЬW(wǎng)上的優(yōu)質(zhì)速度線素材極少，要么付費(fèi)要么不是透明背景…所以我們就制作了就有了這樣一個(gè)簡單好用的速度線生成器！
▼ 工具簡介
如何一秒鐘讓你的設(shè)計(jì)成為焦點(diǎn)？如何讓畫面沖擊力突破天際？你可以試試在畫面上加上速度線，感受一下??！
你不僅可以調(diào)整焦點(diǎn)位置，你還可以調(diào)整線的數(shù)量、粗細(xì)、長短：
同樣，點(diǎn)擊 Save 就可以保存透明背景的圖片了，再也不用在素材網(wǎng)站上苦苦搜尋。
▼ 參數(shù)解釋
▼ 案例應(yīng)用
中二感溢出屏幕……
你甚至可以切換成彎曲線型，一秒鐘制造詭異畫風(fēng)
貝塞爾曲線生成器
▼ 試玩地址
https://wangyasai.github.io/Bezier/
▼ 靈感來源
來自一個(gè)非?？岬木W(wǎng)站https://colorpong.com/，這個(gè)網(wǎng)站上有超多酷炫抽象的點(diǎn)線效果，不過需要購買才可以使用哦～
▼ 工具簡介
這種粒子曲線，非常適合喜歡科技風(fēng)的甲方了，一鍵無痛生成各種酷炫的線型圖片！
這個(gè)工具有七種點(diǎn)線style，各具特色：
可以調(diào)整點(diǎn)線的數(shù)量：
也可以調(diào)整點(diǎn)線的雜亂程度，雜亂也有雜亂美呀~
▼ 參數(shù)解釋
▼ 案例應(yīng)用
抽象線條再旁邊點(diǎn)綴一些關(guān)鍵詞，很科技作風(fēng)：
@林書尼把工具中幾種形狀結(jié)合起來，再加上一些同樣抽象的粒子，一張抽象海報(bào)就誕生了！
動(dòng)態(tài)馬賽克背景生成器
▼ 試玩地址
https://wangyasai.github.io/Awesome-Mosaic/
▼ 靈感來源
據(jù)說在各種發(fā)布會(huì)中，下面這張馬賽克背景重復(fù)利用太多次至今沒找到替代品。所以，我又開始了！
▼ 工具簡介
最初的時(shí)候，我們就想開發(fā)一個(gè)馬賽克背景，就帶點(diǎn)科技效果就好了，嗯，有點(diǎn)閃的科技效果。
在開發(fā)過程中，我做偏了。忘記為什么就加了下面的環(huán)繞模式，但最后的效果似乎還不錯(cuò)就保留下來了。
控制面板上可以改變整體的規(guī)則程度，它可以每一圈一樣的寬度，也可以每一圈各有長短，很隨意但依然有節(jié)奏的變換。
可以用 Spacing 控制圈與圈之間的間距：
用 Nums 調(diào)整每一圈中的數(shù)量：
▼ 參數(shù)解釋
▼ 案例應(yīng)用
如何更騷氣？試試粉黃撞色！騷氣值至少上升10個(gè)度吧！
若是換成黑金配色，誒，畫風(fēng)轉(zhuǎn)向低調(diào)奢華有內(nèi)涵：
萬箭齊發(fā)biubiubiu生成器
▼ 試玩地址
https://wangyasai.github.io/Stars-Emmision/
▼ 靈感來源
一年前，我們在群里討論到一張有沖擊力的海報(bào)，誒，這不就是中心向外擴(kuò)散的射線嗎？如果有這樣一鍵生成小米海報(bào)這種背景效果的工具，無疑會(huì)大大節(jié)省了我們的設(shè)計(jì)時(shí)間。
▼ 神器簡介
你一打開它，就會(huì)有一堆射線迫不及待地向你射來：
支持 | 上 | 下 | 左 | 右 | 中心 | 五種刺激的發(fā)射方式，看久了比刺激戰(zhàn)場還緊張吧。
可以調(diào)整粒子的數(shù)量：
最后保存的靜態(tài)圖，有種下一秒就要沖出屏幕的感覺！
▼ 參數(shù)解釋
▼ 案例應(yīng)用
當(dāng)然，你也可以錄制成動(dòng)圖 / 視頻，效果會(huì)酷炫一百倍：
向量場跡生成器
▼ 試玩地址
https://wangyasai.github.io/Perlin-Noise/
▼ 靈感來源
在一次粒子系統(tǒng)的學(xué)習(xí)過程中，我少寫了一行代碼 background() ，居然獲得了這個(gè)奇妙的抽象效果，或許這就是代碼的奇妙之處吧，給人意想不到的效果。
▼ 神器簡介
和上述所有工具一樣，各種參數(shù)可調(diào)整：顏色，線長，噪波比例等等。
是不是很像高中的等高線？但更也是更有藝術(shù)感的等高線吧！
控制面板中有一個(gè)參數(shù) noiseScale ，它就是負(fù)責(zé)讓線的彎曲程度，數(shù)字越小，比卷發(fā)還卷，不信的話你試試，數(shù)字越大，就相對越規(guī)整，也不會(huì)出現(xiàn)等高線那樣一圈一圈的。
最后繪制出流暢美感的線條～
▼ 參數(shù)解釋
▼ 案例應(yīng)用
嘿嘿，恭喜你已經(jīng)抵達(dá)本文的最后一個(gè)工具了！筆芯??～
粒子爆炸生成器
▼ 試玩地址
https://wangyasai.github.io/Particles-Emission/
▼ 靈感來源
這個(gè)工具是因?yàn)槠鸪踉谖⒉?ppt365#打卡中好幾次用到，想做個(gè)可以一鍵生成的小工具。也因?yàn)殚_啟制作這個(gè)工具，我才陸陸續(xù)續(xù)制作了上面的9個(gè)工具，還是很有成就感噠～
▼ 神器簡介
想必大家都很熟悉我的工具的參數(shù)套路了：顏色、速度、形狀、粒子大小等等……
調(diào)大粒子的陰影效果，竟然有種假3D的錯(cuò)覺。
增加粒子的重復(fù)次數(shù)，可以讓粒子瞬間充斥你的整個(gè)屏幕：
勾選旋轉(zhuǎn)，就可以保存這樣一張綻放出一朵抽象粒子花？
▼ 參數(shù)解釋
▼ 案例應(yīng)用
-------------------------------------------
趕快收好@亞賽大人制作的10款設(shè)計(jì)神器吧：
由于微信圖片尺寸限制，很多案例無法完整呈現(xiàn)，也歡迎大家關(guān)注@亞賽大人的同名微博，查看更多設(shè)計(jì)案例！
