本文立體排版由純代碼構建
內容為教師節主題排版設計
文末有教師節設計素材福利
想學更多 H5 硬技術？點擊報名▼
點
擊
太
陽
兩
次
↓
您
是賦
輕我
風槳
，葉
以
力
量
。
土我
壤枝
，芽
以
滋
養
。
祝
福教
您師
，節
快
樂
！
絕大多數新媒體排版，只在二維平面上展開視覺體。本期，我們為各位品牌主介紹兩種讓畫面更呼之欲出的三維立體排版法。
低面多邊形設計
普通的圖片之所以不立體，是因為：
用戶無法與圖像互動，無法觸手可得；
若要圖像完全無損，我們很容易想到採用 JZ 和微信團隊共同推出的 SVG 高級解決方案。但是 JZ 曾在《SVG 交互式圖文的系統適配與優化問題》提醒過讀者們，SVG 在微信圖文內並不支持漸變。
而「漸變」似乎又是立體內容的標配之一：因為在光照渲染之下，物體必然有大量漸變的效果存在。
有沒有折衷的辦法？如果你是設計師出身，或許就會想到 LOW POLY 設計（低面多邊形）。由於這種三維表現手法中，一切事物都又多個連續平面（四邊形或三角形）組合而成，所以單個平面上的光照分佈基本均勻，可以不存在漸變關係，但整體上依舊提供了超強的立體感官。
以下為部分低面多邊形設計範例▼
立體感十足吧？而且製作這類圖像的方式並不算太難，如果你熟悉 C4D（Cinema 4D）的話，可以現在軟件內構造好模型。
接下來，第一種方式是在「TAGS」中生成模型的素描材質球▼
並且將對線條的設置，調整為「邊沿」而不是「邊緣」▼
當然如果你想利用其表面填充也無妨，隨後在 C4D 中導出為 AI，並獲得如下結構。並基於你的設計能力進行逐步的色彩還原▼
當然，對於結構簡單的模型，我們也可以偷個懶，直接從 C4D 烘焙出一張位圖效果，隨後通過 AI 的描摹形成矢量稿，最終通過 SVG 代碼的方式注入圖文中。
當然更重要的是，要給低面多邊形設計內容預留交互內容。比如在本文的示範中，小風車通過點擊太陽可以開始轉動，就讓用戶有了觸手可得的體驗。
CSS 文本立體設計
我們要介紹的第二種三維立體微信圖文排版則和文字有關，這個設計相對來說也更廣為人知一些。
文字（可選中的 TEXT 形態）立體設計有如下要點：通過<code><text-shadow>/<code>連續疊加形成文字“厚度”；通過<code><text-shadow>/<code>連續柔化形成文字“陰影”；如果需要產生視角傾斜的話，通過<code><skew>/<code>視情況變形；
如果手動調這些參數，有時候效率比較低，這裡推薦一個可視化調控工具▼
http://tools.jb51.net/aideddesign/css3_textshadow
因而一個常規的文本陰影通常按如下方式書寫。三位數分別表示水平偏移、垂直偏移、和模糊半徑：
text-shadow:1px -1px 0px #333333;
而設計立面文字，其實並沒有真的使文字立體，而是通過給文字連續排列多重無模糊陰影，而在視覺上形成立體（iPaiban 有非傾斜立面字的基本模板可用）：
測
試
範
例
其中，形成立面的效果是如下五個陰影，距離越來越遠，顏色越來越深：
text-shadow:0.5px -1px 0 #ddd,
0.5px -1.1px 0 #dadada,
0.5px -1.2px 0 #ccc,
0.5px -1.3px 0 #cacaca,
0.5px -1.4px 0 #aaa,
而另外的陰影效果則是：
1px -1px 1px rgba(0,0,0,.1),
1px -3px 5px rgba(0,0,0,.3),
1px -5px 7px rgba(0,0,0,.2),
1px -7px 9px rgba(0,0,0,.25),
1px -9px 11px rgba(0,0,0,.2),
1px -19px 21px rgba(0,0,0,.15);
十分易於理解的 CSS 表達。
素材福利
當然考慮到一般品牌主的教師節 Digital 營銷設計計劃，本期我們提供了一組更通用的教師節素材打包提供免費下載▼
如需下載
請向公眾平臺回覆關鍵字
「教師節」
獲取
通過 SVG 交互設計、低面多邊形設計、CSS 渲染，平面化的圖文有了顯著的三維效果。這種設計可以應用於大量場景設計，包括可以產生立面二維碼、立體遊戲流程、立體產品展示等，也可以嘗試應用入 H5 設計中。第七期 JZ 主持的 H5 殺手訓練營（零基礎准入）即將舉辦，可以點擊下方小程序鏈接瞭解▼
其他你會感興趣的內容
回覆 排版入門專業級新媒體排版技術
回覆 廣告閱讀更多廣告營銷行業指南
回覆 漫威獲取漫威片頭 AE 速成模版
回覆 漢儀獲取字庫免費試用優質字體
回覆 多邊形下載低面多邊形背景素材
H5、平面、視頻等數字營銷服務請致電
TEL：（021）3721 8818
合作客戶：APEC 峰會 | 中國航天科技集團 | 香奈兒 | 肯德基（湖南） | 中國國際航空 | 湖北省電視臺 | 河南衛視 | 浙江省人民廣播電臺 | 三生製藥 | 交通銀行 | 建設銀行 | 真格基金 | 南方週末 | 上海閔行教育學院 | 牛津大學出版社 | 新東方集團 | 偉巴斯特 | 雪佛蘭汽車 | 觀致汽車 | 雷諾汽車 | TNS 新華信 | 高力國際｜第一太平戴維斯｜德國萊茵｜蓋茨基金會｜追星集團
閱讀更多 JZ多媒體解決方案 的文章
