大家好，我是小凹，是的，你沒看錯，又是我~們！

這期打算給你們分享一個制作文字效果的網站，并且它還可以設置動態的樣式，讓你的海報動起來，來，網址先給你們：

spacetypegenerator.com

我們先看看，東寧老師用它設計的海報是什么樣子的吧？

想知道我們怎么設計的這幾張動態海報嗎？那就跟著我繼續學習今天的教程吧！

打開之后，是這樣一個頁面，這里很多選項和按鈕，你可以隨意的調整，先玩一哈，就大概了解這個網站的功能了。

這個網站，我們可以稱之為“空間類型生成器”，開發者是這位大佬。

他叫Kiel Mutschelknaus，這位設計師是在讀研究生期間自學的3D和編程，創建了這個網站，經過這幾年不斷的更新，現在這個網站非常強大，想要徹底弄明白里面的各種效果，就相當于學了一個新的軟件，所以，希望大家今天可以跟著我的思路，打開網站，邊看邊學，這樣才能更好的吸收。

接下來，我們來深入了解這個網站的功能，從而為我們設計服務。

網站包含5個功能分區

現在總共有11個空間類型，隨著作者的不斷開發，類型會有所增加，所以大家平時可以多關注這個網站，說不定什么時候大佬就更新了。

我們先來看看第一個立體空間類型——圓筒，這個也是我們打開網頁之后默認的類型，首先我們看看它的參數設置都代表了什么

先看第一部分的四個，是基礎調整，分別對應的是：

• 圓形的半徑，數值越大，圓環越大；
• 圓形的個數，數值越大，樓層越多；
• 旋轉的速度和方向，默認數值是-5，向左調整越大，圓環就向左旋轉并且越快速，向右調整越大，圓環就向右旋轉并且越快速；
• 最后每一層的圓柱偏移方向。

第二部分是7個調整命令，分別是：

• 波浪的個數，這個是在下面幾項調整后再調整它會有明顯的效果，默認是2，數值越大，波幅越多；
• 波浪的速度，數值越大，起伏越快；
• 下面是經度緯度，數值越大，經緯度的文字變化越大；
• 波紋，數值越大，起伏越多；
• XY刻度上的文字，長度和高度。

這部分就是對文字本身的調整了，X越大，文字越寬，Y越大，文字越高，重量就是文字的粗細，這部分三個選項和上面的XY軸對字體的變化是不一樣的。

這部分是在上面所有都調整好之后，對XYZ軸上文字的方向變化的設置。

這部分就很簡單了，主要是對于視角的調整，想要什么視角直接調整參數即可。

左上角兩個色塊，是可以替換主體顏色和背景色的，最上方有個pride（自豪），應該是作者提供的色彩參考，是一個彩虹色漸變。

看下它們的動畫效果

△ simple簡單

△?Jellyfish水母

△?Crown王冠

△?Complex復雜

△?Weave編織

△?Hoops鐵環

上面紅色區域，是文字內容，把你想要的文字信息輸入進去即可，當然，這里只能輸入英文的，并且字體沒得選，（不過，后面有幾個空間類型是可以輸入日文和韓文還有中文的）

下面藍色塊，點擊之后會有窗口彈出，顯示的大概意思是，如果你想使用這個網站，可以把做完的作品發給他的郵箱，得到允許方可商用，以及后續他會添加其他字體進來，完善這個網站。

第二個空間類型——領域

第一部分的四個，是基礎調整，分別對應的是：

• 網格的欄數，數值越大，文字的長度就越長，
• 字距和行距就比較好理解了，和我們使用的軟件邏輯是一致的。

第二部分主要是文本的調整

• X范圍是橫向進行調整，注意這里是直接拉動文本框，數值越大，文字被拉動的幅度就越大。
• Y范圍是豎向進行調整，數值越大，文字被豎向拉動的幅度就越大。
• 字重這里和平時使用的軟件是一樣的。

第三部是對動畫的調整

在三維的空間里面除去X軸和Y軸還有一個深度的Z軸，所以我們在調整的過程中，就可以調整出三維的效果。

△?stack堆疊

△?bricks磚塊

△?simple簡易

△?complex z復雜Z

△?zebra斑馬

△?harlequin花斑

領域里總共有6個動畫預設，在此基礎上調整文字和一些參數，就可以作為自己畫面的主體或者背景了。

文案方面，選擇了《微風吹來少年的心事》這本書，并為其設計一款配套動態海報，為了還原出那種被風微微吹動的視覺效果，經過反復的嘗試后，終于找到了最適合它的設置參數。另外，版面的構成也是影響畫面情緒重要元素。標題通過錯落的編排去呈現，是為了模仿風的無形與變化莫測。其余的元素也盡量預留出更多的留白空間，讓整體顯得更加透氣一些。

這個例子的參數設置其實比較直觀，上方基本的改動，實際上是在調整文字的大小、距離、粗細等屬性。而決定它要怎樣去運動的，是下方的兩個屬性，分別是X軸和Z軸上的平滑運動，需要注意的是，運動的幅度會影響我們對“風"力大小的判斷，如果是微風的話，抖動的幅度就不要太大。

不僅僅是對于參數的設置，在設計的很多領域里，都證明了“少即是多”都重要性。所謂貪多嚼不爛，我們在接觸新事物都時候，內心多少會有一種把所有新鮮要素都用上都沖動，不過，相信我，真正成熟的做法，是了解每個命令的優缺點，然后針對不同的應用環境，去斟酌和精簡，克制的運用它們。最終會得到更好的效果。

第三個空間類型——條紋

第一部分依舊是文本的調整

• X范圍是橫向進行調整，注意這里是直接拉動文本框，數值越大，文字被拉動的幅度就越大。
• Y范圍是豎向進行調整，數值越大，文字被豎向拉動的幅度就越大。
• 跟蹤部分可以調整文字的字距。

數量是可以規定畫面中的絲帶的數量，

X空間和Y空間是讓整個圖形在三維空間進行旋轉，

絲帶的大小也可以通過命令進行調整。

動畫的速度和波動的激烈程度可以在這個部分進行調整。

△ marquee遮檐

△?subway地鐵

△?wow哇哦

△?stacks堆疊

△?OLD SEA 黑白海洋

△?color sea 彩色海洋

△?simple wave簡單波紋

△?simple wave簡單波紋2

△?not so werid不是太怪

△?racer賽車旗幟

絲帶這部分的動畫預設都比較動感，建議大家在使用的時候不要用預設好的顏色，因為顏色過多，很容易讓你的設計畫面不受控制。我個人比較喜歡“地鐵”的動畫預設，設置的好，可以讓畫面變得很時髦。

第四個空間類型——線圈

X范圍和Y范圍分別是調整字體的高度和寬度，調整后整個矩形環也會隨著發生改變。

這個部分可以調整圖形的矩形數量，和每一個寬度，還有端點可以進行調整選擇是否使用圓角。

調整半徑同樣可以改變圓環的大小，注意這不會改變文字的大小和形狀，起始位置是從內向外更改圓環的大小，旋轉次數默認是1，數值越大旋轉的速度越高。

如果感覺單純的圓環轉動有些單調，可以嘗試使用這個部分的命令，可以給圓環增加一些波動的屬性在里面。這里的尺寸、數量和速度都是設定的波動的屬性。

△ wide寬廣

△?super超級

△?amoeb變形蟲

△?spacer隔檔

△?kitty 凱特

△?hourglass 沙漏

△?star星星

△?Zztar異形星

△?pretzel糖果混合效果

△?lemniscate檸檬

有點愛線圈這里的動畫預設，尤其是沙漏后面的幾個，都是可以作為畫面主形象而存在的，比如這部分的小標題我就是用的Zztar來調整的。

第5個空間類型——旗幟

X長度和Y長度同樣是調整單個文字的長度和寬度，數值越大效果越明顯。

行數是調整整個圖形的高度的。

最后一個數值是可以進行文字的大小的調節，注意這里的調整是不改變文字的間距，是直接將文字在原文進行大小的調整的。

波動的調整就和前面的效果是一樣的，

排數抵消可以在不改變整體高度的情況下，讓整個畫面由平滑的效果變成較為尖銳的效果。

△?a banner橫幅

△?a twist扭轉

△?folds褶皺

△?flat sea平坦的海面

△?barber理發師

△?silos筒倉

△?mystery神秘

△?origami折紙

△?cola wave 可樂波

△?origami折紙2

△?B&W黑白

△?newsprint新聞紙

△?edge case邊緣盒

它的預設很像，「條紋」和「領域」空間類型的預設結合，這里它默認的預設圖像都比較夸張，大家用的時候要適當的調整，雖然這里不能調整字體，但是如果作為一個動畫來說，你可以試試不用文字，選擇標點符號，或者一系特殊符號，有可能會得到一個不錯的的動畫效果。

第6個空間類型——森澤

這個效果很適合文字很多的內容進行編排，這里的命令相對來說比較簡單，都是在調整文字的關系?？梢詤⒖紙D片上的翻譯。

卷屏速度是設定動畫的速度，數值越大，速度越快。

蒙版這里是設置動畫的寬度，數值越大，動畫的寬度越小。

△?后置空間 post space

△?bridge 橋梁

△?beach 海灘

△?moon 月亮

△?whitney 惠特尼

△?recede 逐漸變小

相信大家看了「森澤」的預設，會滿腦袋問號，這好像一堆代碼啊，其實這也是它區別于其他空間類型的地方，它這里可以以符號（字母）代替，做出不同的動畫圖形，適合大面積文本信息和抽象類的設計。

這個部分主要是對文本進行一個調整，和前面的命令都是相似的，X范圍是對文字的長度進行調整。字符的寬度是調整文字的字間距。

到了這個部分是對動畫的整體進行調整，主要是調整動畫的激烈程度。

△?checker校對人

△?cascade瀑布

△?classic經典

△?mosaic馬賽克

△?ticket票據

△?run跑步

△?salmon發廊

△?gird網格

△?web art 網絡藝術

△?sparkle閃耀

△?pixel gradient像素過渡

和「森澤」有點像，都是不走尋常路的預設，只不過它這里會以馬賽克的形式為主，還有一些射線的波動，適合做背景的大面積圖像，從“發廊”之后，可以嘗試以空格或者符號來代替字符，你會得到很多驚喜。

第8個空間類型——絲帶

第一部分也是基礎的調整：

• 段間距：數值越大，行距越寬松，彩帶間距也隨之變大。
• 段計數：數字越小段落越多，數字越大段落越少，轉折也就越少。
• 字體高度：數值越大，字體越高。
• 跟蹤：這個其實是字體的寬窄，數值越小，字體越窄，最后會變成一條線。
• 筆畫的類型：相當于筆畫的粗細，調整文字的字重。

速度就是彩帶漂浮變化的速度，越大，速度越快。

這部分主要針對色帶的調整：

• 色帶高度：數值越大，色帶越高
• 色彩拉伸：數值越大，拉伸越長
• 色帶計數：數值越大，色彩的層數越多
• 色帶間距：層數拉開的距離，越大距離越大
• 色帶偏移：錯開的距離，越大錯位越大，在0和2的時候色帶是對齊的，中間數值會讓色彩產生錯落感。

它下面有個候補，點選之后會給你一個隨機的錯落感。

比例：就是圖像縮放的大小，越大圖像在畫面也就越大

左上角，一個是儲存按鈕，它可以存儲GIF格式的圖片，一個是色彩的設置，可以選擇給彩帶設置漸變色或者純色，每一面的顏色是可以單獨設置的。

△?Basic基本

△?Streamers彩帶

△?Terrace梯田

△?Link鏈接

△?Sea海洋

△?River河流

△?Web Art網絡藝術

△?Primary初級

△?Snake蛇

△?Hot / Cold冷暖漸變

△?Track軌道

△?Track II軌道2

絲帶這個命令，顧名思義，能夠帶來類似絲帶的效果。但是我偏偏不想讓它像這樣直接呈現，因為視覺傳達的核心始終是內容，而非酷炫的形式，在尋找內容的同時，我也在考慮怎樣將這個效果簡化處理，并且能夠讓我的文案信息與之匹配。

反標簽，本身是一個帶有比喻性質的標題。不過在視覺表現上，這種比喻也是可以通過動畫來實現具象表達的。動態的方形色塊，被我賦予了“標簽”的含義，而上面的文字“label”也會隨著標簽的流動而隨之反轉。這很直觀，也很有抵制偏見的屬性在里面。在版式編排上，我也試圖打破那種標題在上，內容在下的刻板印象，將大部分的內容整合到一塊視覺面積上。在年輕又富有活力的色彩烘托下，給人一種耳目一新的視覺感受。

參數的調整思路主要是，加大線段的對比，讓繞轉的字數減少，并且間距加大。同時將色塊的比例控制在接近1：1的方形尺寸下，讓文字變粗，并且在色塊內設置一個版心的大小。

在呈現的視角中，把Y和Z軸的數值拉滿，并且微調了X軸的角度，讓畫面呈現出最簡化的正視角度。調整的過程需要不斷反復嘗試，才能得到自己想要的效果。隨著字數的增加和減少，呈現出來的效果其實也并不一樣，所以這里的數值是僅供參考的，大家可千萬別死記硬背，重要的是理解規律。

第9個空間類型——層次

這個是帶有一些字體選擇的，上部分的設置：

層數越多，縱深的樓層也就越多；字號，就是字體大小，內部高度，就是上下兩邊的高度，內部寬度，左右兩邊的寬度；旋轉默認是8，越向兩邊，旋轉的角度越少。

△?Speed Racer 極速賽車手

△?To Space前往太空

△????? ?螺旋形

△?Lost Time 失去的時間

△?Dot Spiral 點螺旋線

△?Be ggressive 積極進取

△?Meat Space 肉空間

相信很多同學在網上都看到過類似的動態海報，以為只能用AE實現。其實，這個空間預設，毫不夸張的說，每一屏截下來都可以作為一張海報了，只不過字體方面沒有太多選擇。

第10個空間類型——危險

“危險”這個空間類型，可調整的按鈕比較少，上部分五個，分別是：

• 速度：和前面一樣，數值越大，動作越快；
• 大?。褐傅氖瞧扑榘唏g的大小，數值為0時，沒有任何變化；
• 列：向左或向右都可以加重破壞力度；
• 復雜：破壞的復雜性；
• 行：向左是水波紋的效果，向右是支離破碎的效果，都是在橫向上破壞的力度加大。

下部的幾個設置按鈕也非常簡單

設置文本內容，選擇字體（可算有字體選擇了），還有針對字體的大小和行距進行調整，顏色可以和背景反向。

△ All yours都是你的

△?Just OK還可以

△?Not so good不太好

△?Cheer歡呼

△?Date 日期

△?Hopes希望

△?Circle圓

這里大家設置文字信息的時候，如果是一句話，盡量設置成有長短變化的文字組，包括這里默認的文字組，都是很注意長短節奏的變化，建議大家可以參考。

老話說，好戲都在后頭呢，這個網站完全印證了，這里11個空間類型，最后這個是我個人最喜歡的，因為它自帶“鋼筆工具”，可以隨意造型，甚至是設計文字。

第11個空間類型——串聯

因為最后這個功能較多，所以每一部分，我都給大家拆解出來，這樣更易懂

第一行的英文，告訴你，你想新起一個錨點，你就在鼠標沒落下的地方，按下回車鍵，這樣就是單獨的一條線了。

還有字體選擇里面，這次包含了各種語言，終于可以打中文字了，而且是免費的思源黑體，以及日文的思源黑體粗字重。

色帶的數值越大，寬度越寬，色帶條數默認是1，數值越大，條數越多，輪廓描邊是根據條數描白邊或者黑邊，最后一個是點選圓角端點。

這部分就厲害了，可以選擇任何一種模式，可以是漸變，文本，條狀，還有所有模式的混合，這對于我們設計師來說太強大了。

對于色彩也給了很多選擇，五個漸變節點可選，你想要什么漸變都可以滿足你，背景色前景色也是可以改變的哦。

△ Vote 投票

△?Tracks 軌道

△?Dream-aqer夢境者

△?Juicy多汁的

△?Yes &是

△?Guts膽量

△?Eels wind 鰻魚風

△?Reset Points 重置點

「重置點」是針對上面所有預設的基本款，在這里你等于新建一個畫面，去添加錨點，繪制圖形，作者大大太貼心了。

串聯這個命令給我的印象，就是一個大號的貝塞爾曲線工具，雖然沒有辦法調整角點，但是已經可以輕松勾勒圖形了，不過有一個問題需要注意的是，我發現這個工具好像不能刪除節點！

我在調整造型的時候，就遇到過好幾次這種情況，明明調整好造型了，但是手一滑，就要悲劇的重新來過了。

這是一本科幻書籍的宣傳海報，名字是交錯的世界，如果想體現這個交錯的概念，選擇“串聯”這個命令感覺就很不錯。我特別喜歡它拐點的位置，那種文字變形的視覺。在造型上，我并沒有選擇特別復雜的樣式，因為我會覺得作為科幻題材，要做的其實是“減法”才對。除此之外呢，為了表現這種未來感，我也使用了黑白兩色，讓版面顯得客觀，并且理性的印象。為了貫徹這個精簡的概念，層級劃分上，也是盡量克制的使用對比，希望能夠借由這樣的畫面，讓內容更好的傳達。

在這個案例中的參數設置的操作其實并不算困難，主要就是選擇了描邊和黑白的配色，重點部分主要在隨后的貝塞爾工具的運用上。

小貼士

如果你使用了mac端自帶的錄屏工具（Shift+command+5），那么就需要手動修改文件的擴展名了。經過測試，ps軟件可以成功拖進去.MP4格式的視頻文件。

另外，錄屏的時機也很重要，如果是設計類似的文字效果，就需要讓起始點和終點的畫面能夠正常銜接，所以一定要把這些都錄制進去，更細節的調整就需要在軟件里去剪輯了。

把視頻拖動到PS的界面里之前，需要先打開窗口命令下的時間軸。我們可以在這個時間軸的窗口里適當裁剪動畫的長度。

接下來，就是把錄制好的視頻拖動到PS軟件里去排版了。扔到界面后，你會發現它是上圖這樣嬸兒滴，這時千萬不要慌，在點一下回車鍵。我們就得到了一個類似圖片的“東西”了。因為這個畫面的邊界部分是沒有動畫的，所以我給它加了一層蒙版，這樣一來，背景色部分就被去掉了，成為了一個退底的視頻。

最后，在文件命令下，找到導出-儲存為web所用格式（舊版）這個命令。就可以正常得到一張動態的海報圖了，是不是很簡單呢？

看完11個空間類型，是不是感覺這個網站非常的強大，可以幫助我們解決很多技術上的問題，不過，可能很多同學的思路還沒有打開，這里我們看看作者本人，利用網站做的一些設計吧

是不是又顛覆了自己對這個網站的認知，所以，不如大家自己多去實踐看看吧！

歡迎關注研習設的微信公眾號：「Yanxishe2017」