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

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

2019/05/19 58986評論 54

在微博關注我@亞賽大人 的朋友,都多多少少了解到我做了不少設計小工具吧~?最初用 Processing 做循環 Gif 打卡,每一小段時間打卡的主要代碼都差不多,改一些參數,就可以做出看上去不一樣的效果,那何不做一個可以實時編輯并反饋的工具來玩,就開啟了我開發設計工具之路。

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

誒,沒想到現在自己做了10個了!是時候來一個最全的工具大總結了!

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

工具總結:

3個文字工具+1個玩具球+6個點線面背景生成器

閱前提示:

  • 以下工具生成的圖像都是免費可商用,請放心食用。
  • 如果打不開網站,建議多刷新幾次,或更換成 Chrome 瀏覽器。
  • 這些工具如何制作 Gif ?用錄屏軟件吧~windows 用戶:推薦 honeycam、Ocam;macOS 用戶:推薦 LICEcap。

先從最近剛發布了的一個線型字工具開始吧~

波濤洶涌的線型文字

1. 試玩地址

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

2. 靈感來源

如果你對 Joy Division 這個樂隊愛到不行,亦或是完全不知道《unknown pleasure》這專輯是什么鬼……但是你對這些看上去突出的山峰/波浪一定不會陌生。

這個經典的圖案曾多次出現在影視作作品中,比如《頭號玩家》中的一個彩蛋,女主背心上印的就是這個圖案。

但事實上這并不是山峰或波浪,這是人類第一顆發現的脈沖星 CP 1919的脈沖信號。當然你也不用糾結這是什么,反正如你所見,這個工具的目的就是讓文字突出!

3. 工具簡介

上手十分簡單,直接輸入文字就可以實時生成,還可以調整字體的大小和粗細,這不就意味著你得到了波紋字體了嗎?想寫啥就寫啥,還可以支持特殊符號!!!

這個工具當然支持填充顏色,那如何只看到文字不看到周邊線條的顏色?只需要把背景顏色和線條1的顏色統一就好啦~

再試試顏色模式下的漸變,就是另一種風味了。

說完顏色,再說說山的海拔,調整 Control 面板中的 Height ,就可以任意拉高或降低高度了。

剛生成的字默認每一列小山峰都排列的整整齊齊,如何讓它們不如此規整呢?那就調整 Offset 吧,這是調整山的偏移量,可以讓文字的每個部分錯落分布。

參數太多?不想一個一個調?那就不如試試隨機效果 Random 吧,任意更改面板中的種種參數,給一個意想不到的結果。

4. 參數解釋

參數太多,篇幅有限,大家自行探索吧~

提示:這次工具除了常規的 JPG 和 PNG ,還支持 SVG 下載哦~

5. 案例應用

@Simon阿文 提前內測做了下面一組打卡。

如何做到循環播放?先用開篇提到的錄屏軟件錄制 gif ,然后在 PhotoShop 中刪除超出一個完整循環的幀,最后循環播放時,最后一幀和第一幀能自然過渡。

感受到心電圖般砰砰砰砰砰地跳動了嗎?

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

不得不說,@Simon阿文真是個優秀玩家,他用我的工具做的東西,我……居然想求教程???

還做了一組變形數字,想知道怎么做的?Call 他寫個教程吧!

他用我的工具,做了很多案例在 #PPT365# 的微博話題上,那里還聚集了很多人的設計腦洞,大家可以隨時去找靈感噢~(對了,本篇中若無特殊注明的案例均來自 @Simon阿文 )

一個大寫的粒子字

1. 試玩地址

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

2. 靈感來源:

在學習粒子系統時,想看粒子和文字結合會產生什么火花?

最先想到一個最簡單的方法,在粒子的上層加一層鏤空文字的蒙版,把不想看到的粒子遮住,只看到鏤空的部分。

誒,就get了粒子字的效果~

2. 工具簡介

如你所見,這個工具就是粒子充斥在文字里面,擁有它,讓文字搭上酷炫的班車。

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

用 Nums 控制粒子的數量,數量越多,當然文字看的更清楚啦,粒子越多也會影響運行的速度,建議粒子控制在能夠看清文字的數量就夠啦~

粒子的默認顏色是三種顏色隨機分布,當選擇 ColorMode 里面的漸變模式,顏色就會從上到下漸變。

3. 參數解釋

4. 案例應用

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

黑客帝國同款文字雨生成器

1. 試玩地址?

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

2. 靈感來源

沒錯!就是來自科幻大片《黑客帝國》!!!

3. 工具簡介

顧名思義,就是一款自帶黑客帝國特效的文字工具。作為一個愛耍酷的工具,它絕對不會滿足一種模式的,它內置多款故障字體,你可以用它來生成各種亂碼文字雨背景。

除了默認的幾種模式,你還可以定制文字雨中的關鍵詞,只要在 Unicode 中選擇 Text 模式,在下方文本框中,隨意敲擊文字,就可以實時看到輸入的文字在屏幕中隨機生成,瞬間 get 詞云的新玩法!

另外,還提供多種參數設置,比如文字雨射出的方向,比如你可以通過設置透明度來營造出射線的錯覺~

當把文字方向改成從左到右橫,這不就是一面彈幕墻了嗎~

4. 參數解釋

5. 案例應用:

看,@林書尼 把圖表和這個效果結合,開啟科技感圖表的新鮮玩法~

說完上面上面3個我制作的文字相關工具,再來說一個運用隱藏技巧可以制作油畫字效的工具。

向量畫筆重繪器

1. 試玩地址:

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

2. 靈感來源

來自 Jason Labbe 大神開發的工具 Noise Flow Field Painter(地址:https://www.openprocessing.org/sketch/472966)我在他的基礎上,加了一個控制面板,像其他工具一樣可以方便修改參數~

3. 工具簡介

這個工具就是用一堆圓柱形狀把一張圖片重繪,神奇地模仿出油畫的質感~~

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

可以非常方便地調整畫筆的粗細、長短

調整畫筆的粗細

誒,還記得前面說這是一個可以運用隱藏技巧制作油畫字體的工具,如何實現呢?

上面我們上傳的都是完整的照片,試想上傳有油畫效果的文字,那不就是油畫字嗎?

@Simon阿文 就這樣用它做出了一套很好看的油畫數字,相信你現在也掌握了吧

同理,各種圓形、方形、三角形、不規則圖形的油畫效果也這樣處理。

4. 參數解釋

5. 案例應用

讓梵高的油畫再次加工,這個筆觸真的超有感覺~

@Simon阿文 用他旅游時拍的一張照片,把處理后的油畫效果圖,再和原圖進行拼接,內容引起極度舒適,看了好想出去玩呀!!!

說完了上述的這四個字體工具,我們再來玩個球吧!

玩個球

1. 試玩地址

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

2. 靈感來源:

相信不少同學在剛入門 Ai 的時候,都跟著教程做過這樣的抽象球體:環形,波紋,網格……

雖然教程簡單易懂,但很多同學還是過目就忘……現在,懶癌的福音來了!

3. 工具簡介

這是一個在線抽象球體生成器,可以一鍵生成那種在 Ai 入門教程中非常常見的球體:環形,波紋,網格……是的,現在你連門都不用入了。

你可以隨意更改花紋:

你可以調整球體的平滑度來實現變形:

當然,每種花紋的疏密和大小都可以調節:

懶得調參數?那就直接點擊隨機生成好了:

甚至可以上傳自己的圖片,作為圖形的紋理!看,一秒鐘自制星球:

4. 參數解釋:

5. 案例應用:

恭喜你,文章已閱讀過半!收藏好這篇,明天優設網會發布第二篇,將迎來一大波點線背景素材生成器,還有亞賽大人的專訪哦,敬請期待!

優設大課堂

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

發表評論 加載中....

評論加載中....

uisdc

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

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

您還沒有登錄

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

微信掃碼

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

把好文章收藏到微信

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

今日内蒙古快三开奖号