學編程后,我做了這10個有毒的在線免費設計神器!(下) - 優設網 - UISDC

學編程后,我做了這10個有毒的在線免費設計神器!(下)

2019/05/20 42920評論 31

上篇的5個神器大受歡迎,人氣極高。很多人也好奇背后的創造者@亞賽大人?是何方神圣,所以我特意做了個小專訪,在收下今天的神器之前,一起來認識下這位造福廣大設計師的小姐姐。

給大家介紹一下你自己(職業、過往經歷,做過的事)

hi,我是亞賽,目前是一個數據可視化設計師,業余的設計工具開發者。

最初想做一些更酷的可視化效果,就學習了一門適合編程小白入門但創造性超強的編程語言 Processing ,用它做了一些可視化作品和循環動圖的打卡,在這些過程中就發現編程的樂趣與可拓展性,后來又入門了 html 和 js ,開發了這一系列在線設計工具。

開發這么一款工具需要花多久時間?開發過程遇到最大的挑戰是什么?

根據工具的難易度,最快的幾個小時就搞定了,比如漫畫速度線;多則斷斷續續大半個月,在 加一個 新功能 – 出現bug – 解決bug – 再加一個新功能……中來回折騰幾十個回合。

在開發過程中,最大挑戰應該是一些需求沒有寫出好的解決方法 T_T

比如做 Perlin Noise Painter 的時候,最理想的狀態應該是輸入字符自動生成。但那個時候沒想到解決方法,所以用了另一個方法,需要用戶自己上傳圖片,利用圖片中像素的明度去生成效果。工具發布后,發現部分用戶因為圖片素材內容的不確定性原因,生成不了效果……隔了一段時間,寫的東西多了,了解更多解題思路一樣,終于把輸入字符可以實時生成效果做出來了,這樣也降低了用戶的操作成本~

最近有沒有在開發的設計神器,提前透露下

最近暫時沒有在開發的工具,但 @Simon_阿文 給我提了一些設計的需求,比如用Ai中混合工具效果能否應用到在線工具中,正在排上我的日程表。

大家如果看到不錯的效果,覺得有用工具生成的潛力,可以來微博 @亞賽大人 告訴或許就幫你開發了

推薦你覺得特別好用的日常神器(范圍不限,實體/虛擬產品都可以)

推薦一款我每天都會用到圖片管理工具:Eagle。

我是被優設上的一篇文章《這個國人開發的Eagle,堪稱素材收集和管理神器!》強烈種草的!

它有很多炒雞棒的點,上面的文章介紹的非常詳細了。那我來說說喜歡的幾點,一是它可以保存圖片所在的地址,方便可以追蹤圖片的來源。我還可以利用這個地址,找到創作者的網站,看到他更多作品;二是可以給圖片加標簽,大大提高檢索效率。

最令我驚艷的一點是,它有一個顏色篩選器,可以根據你選的顏色篩選出接近色相的圖片~

相信你用上這個工具,也會愛上它的~強烈安利!

通過哪些渠道可以關注你?

雖然注冊了很多社交平臺,但來微博 @亞賽大人 找我最方便啦~

還有一些地方不定時會出現一下:

知乎:@亞賽大人

Twitter :@yasai_wang

Instagram :@yasaisai

采訪看完,繼續來收今天的6款神器!

上篇回顧:《學編程后,我做了這10個有毒的在線免費設計神器!(上)》

注:本文由優設網獨家約稿,未經優設網許可請勿轉載。授權請添加編輯微信:「gg_and_xb」

漫畫速度線生成器

1. 試玩地址

https://wangyasai.github.io/Speed-Line/

2. 靈感來源

當漫畫遇到超燃場景時,畫面上常常會包圍著一圈線,俗稱速度線。可惜網上的優質速度線素材極少,要么付費要么不是透明背景…所以我們就制作了就有了這樣一個簡單好用的速度線生成器!

3. 工具簡介

如何一秒鐘讓你的設計成為焦點?如何讓畫面沖擊力突破天際?你可以試試在畫面上加上速度線,感受一下啊!

你不僅可以調整焦點位置,你還可以調整線的數量、粗細、長短

同樣,點擊 Save 就可以保存透明背景的圖片了,再也不用在素材網站上苦苦搜尋。

4. 參數解釋

5. 案例應用:

中二感溢出屏幕……

你甚至可以切換成彎曲線型,一秒鐘制造詭異畫風

貝塞爾曲線生成器

1. 試玩地址?

https://wangyasai.github.io/Bezier/

2. 靈感來源

來自一個非常酷的網站https://colorpong.com/,這個網站上有超多酷炫抽象的點線效果,不過需要購買才可以使用哦~

3. 工具簡介

這種粒子曲線,非常適合喜歡科技風的甲方了,一鍵無痛生成各種酷炫的線型圖片!

這個工具有七種點線style,各具特色~

可以調整點線的數量

也可以調整點線的雜亂程度,雜亂也有雜亂美呀~

4. 參數解釋?

5. 案例應用?

抽象線條再旁邊點綴一些關鍵詞,很科技作風。

@林書尼 把工具中幾種形狀結合起來,再加上一些同樣抽象的粒子,一張抽象海報就誕生了!

動態馬賽克背景生成器

1. 試玩地址?

https://wangyasai.github.io/Awesome-Mosaic/

2. 靈感來源

據說在發布會中,下面這張馬賽克背景重復利用太多次至今沒找到替代品……所以,我又開始了

3. 工具簡介?

最初的時候,我們就想開發一個馬賽克背景,就帶點科技效果就好了,嗯,有點閃的科技效果。

在開發過程中,我做偏了……忘記為什么就加了下面的環繞模式,但最后的效果似乎還不錯就保留下來了。控制面板上可以改變整體的規則程度,它可以每一圈一樣的寬度,也可以每一圈各有長短,很隨意但依然有節奏的變換。

可以用 Spacing 控制圈與圈之間的間距

用 Nums 調整每一圈中的數量

4. 參數解釋?

5. 案例應用?

如何更騷氣?試試粉黃撞色!騷氣值至少上升10個度吧!

若是換成黑金配色,誒,畫風轉向低調奢華有內涵

萬箭齊發biubiubiu生成器

1. 試玩地址?

https://wangyasai.github.io/Stars-Emmision/

2. 靈感來源

一年前,我們在群里討論到一張有沖擊力的海報,誒,這不就是中心向外擴散的射線嗎?如果有這樣一鍵生成小米海報這種背景效果的工具,無疑會大大節省了我們的設計時間。

3. 神器簡介?

你一打開它,就會有一堆射線迫不及待地向你射來:

支持 | 上 | 下 | 左 | 右 | 中心 | 五種刺激的發射方式,看久了比刺激戰場還緊張吧。

可以調整粒子的數量

最后保存的靜態圖,有種下一秒就要沖出屏幕的感覺!

4. 參數解釋

5. 案例應用?

當然,你也可以錄制成動圖 / 視頻,效果會酷炫一百倍:

6. 彩蛋1

這個工具的動效是在 Processing 大牛 Daniel Shiffman 的教程 starfired 啟發下完成的。教程中最后的動效如下:

Daniel Shiffman,是一位講課超級有活力且幽默的老師,感受一下他的畫風。

如果你也想學習 Proceesing / p5.js 以及其他編程做出一些有趣的效果,可以關注他的 Youtube 頻道(The Coding Train),跟著他的課學習,相信你也可以收獲很多~

7. 彩蛋2

在我們的雜貨鋪,大家會丟一些好玩的神器或者一些酷炫的圖片。我們就有可能把這些酷炫好玩的效果,制作出為設計師省力的設計工具!所以,大家如果看到好玩的效果可以來微博告訴我們呀~

群里的另一個大神 @pissang,他做了很多以 3D 效果為主的工具,每個工具生成的圖片,隨便一截都非常撐場面!指路:https://gallery.echartsjs.com/explore.html?u=bd-2215764494&type=work#sort=rank~timeframe=all~author=all

向量場跡生成器

1. 試玩地址?

https://wangyasai.github.io/Perlin-Noise/

2. 靈感來源

在一次粒子系統的學習過程中,我少寫了一行代碼 background() ,居然……獲得了這個奇妙的抽象效果,或許這就是代碼的奇妙之處吧,給人意想不到的效果。

3. 神器簡介

和上述所有工具一樣,各種參數可調整:顏色,線長,噪波比例……

是不是很像高中的等高線?但更也是更有藝術感的等高線吧!

控制面板中有一個參數 noiseScale ,它就是負責讓線的彎曲程度,數字越小,比卷發還卷,不信的話你試試,數字越大,就相對越規整,也不會出現等高線那樣一圈一圈的。

最后繪制出流暢美感的線條~

4. 參數解釋?

5. 案例應用?

嘿嘿,恭喜你已經抵達本文的最后一個工具了!筆芯??~

粒子爆炸生成器

1. 試玩地址?

https://wangyasai.github.io/Particles-Emission/

2. 靈感來源

這個工具就是開篇提到的因為打卡內容的相似性,想開始做個小工具,也因為開啟制作這個工具,我才陸陸續續制作了上面的9個工具,還是很有成就感噠~

3. 神器簡介?

想必大家都很熟悉我的工具的參數套路了……顏色、速度、形狀、粒子大小等等……

調大粒子的陰影效果,竟然有種假3D的錯覺。

增加粒子的重復次數,可以讓粒子瞬間充斥你的整個屏幕

勾選旋轉,就可以保存這樣一張綻放出一朵抽象粒子花?

4. 參數解釋:

5. 案例應用:

工具集合

最后,所有工具都在這個匯總頁上~

直達鏈接:https://wangyasai.github.io/designtools.html

好啦,快去玩吧~

優設大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.wydhjd.tw/10-design-artifact-2

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計師 扁平化設計 版式設計 交互設計師 界面設計 排版布局 職場 優設專訪 優設大課堂 配色 視覺設計 web前端開發 素材下載 設計流程 AI教程 設計理論 神器下載 字體下載 設計師專訪 psd下載 平面設計 用戶體驗設計 設計趨勢 設計規范 海報設計 動效設計 圖標設計 logo設計 產品設計 ICON 神器推薦 App設計 職場規劃 字體設計 酷站推薦 交互設計 ui設計 設計師職場 優秀網頁設計 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

94期香港马会三肖中特