手寫圖排版制作軟件Text2Image

Text2Image是一款免費的長圖制作軟件，這款軟件可以幫你用markdown語法對文本進行排版，然后制作成長圖。Text2Image提取自MarkEditor，它能夠為你將 Markdown 語法文本自動進行圖文排版，生成樣式美觀的圖片。

軟件評測：

用 Markdown 語法對文字進行排版

就如同 Markdown 語法需要通過 CSS 進行樣式渲染，Text2Image 需要對應的模板才能對文字進行渲染，完成指定樣式的圖文排版。

Text2Image 的模板語法采用的是 Jinja2，軟件的排版引擎還會對 Markdown 語法解析后的結果再做分解，比如，即使你將下圖中文本與插圖語法進行上下次序的調(diào)整，也不會影響我們最后得到的結果。

右圖為渲染之后得到的結果

Text2Image 中的模版

由少數(shù)派的聰明工作課受到啟發(fā)

在少數(shù)派的 《告別低效，人人必備的聰明工作法》 課程介紹里，頁尾的課程大綱圖文排版令人印象深刻，這也啟發(fā)了我去開發(fā) Text2Image 這款工具，并實現(xiàn)了大綱圖片的圖文排版樣式。

你可以在 Text2Image 中找到名為「SSPAI Chapter」的模版并應用它，之后在軟件的輸入框中填寫必要的文字信息，即可生成下圖樣式的圖片。

左圖為 Markdown 文本，右圖為渲染后得到的結果

在 Text2Image 中，模板就是一個 HTML 文件，我們還可以在 HTML 的 header 部分調(diào)整生成器的界面，界面參數(shù)中的 Title、Signature 等元素也都可以通過輸入 HTML 代碼進行定制。有了這套模版，之后如果有文字改動或者需要復用這套樣式的情況，就不用麻煩設計師重新出圖了。

需要注意的是，當你用 Text2Image 將自己的設計寫成固定模板的時候，也需要考慮書寫體驗、效率、設計效果等多方面因素的融合。比如「SSPAI Chapter」這個模板為了配合最終圖片的排版，在對書寫體驗基本沒影響的前提下，巧妙地在二級標題 (H2) 內(nèi)增加了 B 的 HTML 標記，來實現(xiàn)最終圖片修飾性的排版。

制作逼真的手寫體

在 《決定「下一步行動」，真正讓待辦清單為你所用》 這篇文章里有幾張非常逼真的手寫體插圖，讓這篇文章幾乎成為有史以來最「跑偏」的評論聚集地，讀者幾乎都在問: 這個配圖是怎么做到的？

我也將其做成了一個模板，你可以在 Text2Image 中找到名為「CN Handwrite」的模版并使用它。

右圖為「CN Handwrite」渲染出的圖片樣式

這里分享一個小的技巧，就是巧用 Markdown 中 pre 的語法，這樣可以保證空格的效果。這套模板用的是純 CSS 規(guī)則生成，包括紙張的網(wǎng)格以及圖片背景中的噪點效果，后者是通過 NoisePNG 直接生成作為復合背景實現(xiàn)的。

由于蘋果自己的 Webkit (可以簡單理解為 Safari) 并不支持 filter: blur(0.35px) 這種小于 1 像素的模糊效果，而恰恰是這種微小而又不會產(chǎn)生實質(zhì)上模糊的效果會讓最終生成的圖片更逼真一些。這讓我靈感一現(xiàn)，采用了一種可以被前端工程師「掛城墻」的做法來模擬手寫勁道產(chǎn)生的細微壓痕：將 HTML 內(nèi)的 DOM 元素視為類似圖層的邏輯，復制、疊加一個，然后再進行 (高斯) 模糊，類似傳統(tǒng)意義上 Photoshop 最簡單的「磨皮」手法。

放大后看一看，「手寫」效果還是蠻逼真的…

方便的導出功能

用 Text2Image 導出圖片也很方便，軟件支持三種形式的導出：

另存為圖片文件

復制圖片到粘貼板中

直接發(fā)送到微信中

如果你需要使用發(fā)送到微信的功能，你需要先在 macOS 系統(tǒng)系統(tǒng)偏好設置的擴展設置內(nèi)啟用微信的共享菜單選項。

勾選微信的共享菜單選項