“大眾這篇長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)長(zhǎng)線條排版，怎么做?。俊?/h1>
端午大家過(guò)得咋樣呀？
端午出了不少有優(yōu)秀的圖文值得參考。
今天和大家單獨(dú)看一篇上汽大眾的端午節(jié)圖文，它的一大特點(diǎn)是打開(kāi)圖文后，會(huì)有一條線自動(dòng)繪制各種形狀并不斷向下延伸，引導(dǎo)讀者視線閱讀，兼具美學(xué)與功能性。
*GIF錄自上汽大眾《端午 | 拆「線」找猛料》
組件：自動(dòng)-線條軌跡+圖片浮現(xiàn)
編號(hào)：12109（組件）
早在去年就跟大家發(fā)過(guò)一篇線條延伸同時(shí)展開(kāi)的效果教程，詳見(jiàn)《線條軌跡接展開(kāi)，這種排版不用代碼就能來(lái)！》。
上汽大眾這篇，不同之處是線條延伸同時(shí)，是一張張圖片跟隨浮現(xiàn)的效果。
今天教大家用 iPaiban Pro 黑科技編輯器（SVG.iPaiban.com）來(lái)制作實(shí)現(xiàn)，和其他效果相比，這種線條軌跡類的排版，我們?cè)谥谱鲿r(shí)多了重要的一步：用Ai軟件繪制線條軌跡并提取線條代碼。
有Ai軟件基礎(chǔ)的同學(xué)看下教程自己就能操作，不懂Ai的同學(xué)，這一步可以直接交給設(shè)計(jì)師同事。
下面一起看下教程吧。
一
使用 Ai 繪制線條軌跡并導(dǎo)出代碼
工具：Adobe Illustrator（簡(jiǎn)稱Ai）
之前寫過(guò)這一步驟的詳細(xì)教程，這里不再贅述，戳：《如何使用 Ai 繪制線條軌跡并導(dǎo)出代碼？》
二
使用 iPaiban Pro 編輯器排版
工具：iPaiban Pro黑科技編輯器，網(wǎng)址：SVG.iPaiban.com
組件：自動(dòng)-線條軌跡+圖片浮現(xiàn)
編號(hào)：12109（組件）
第1步：選擇組件
登錄 iPaiban Pro 黑科技編輯器后，點(diǎn)擊編輯器左側(cè)「組件」按鈕，在「軌跡移動(dòng)」分類中找到「自動(dòng)-線條軌跡+圖片浮現(xiàn)」組件，或者直接搜索組件編號(hào)12109，點(diǎn)擊選擇。
第2步：上傳浮現(xiàn)圖片
點(diǎn)擊右側(cè)「+」號(hào)批量上傳準(zhǔn)備好的浮現(xiàn)圖片。所有圖片寬度需保持一致，高度不必一致。
第3步：設(shè)置線條軌跡動(dòng)畫參數(shù)
在右側(cè)對(duì)應(yīng)位置，輸入在Ai中獲取的線條軌跡代碼、軌跡長(zhǎng)度，和軌跡延伸動(dòng)畫的時(shí)間。（獲取方式見(jiàn)前面步驟一「使用 Ai 繪制線條軌跡并導(dǎo)出代碼」，或直接戳《如何使用 Ai 繪制線條軌跡并導(dǎo)出代碼？》）
第4步：設(shè)置圖片浮現(xiàn)動(dòng)畫參數(shù)
在輸入框中以「2,4,8,12…」的形式設(shè)置圖片浮現(xiàn)時(shí)間。
其中每個(gè)數(shù)字代表對(duì)應(yīng)圖片在打開(kāi)圖文后浮現(xiàn)的時(shí)間點(diǎn)，單位為秒，數(shù)字的個(gè)數(shù)應(yīng)與浮現(xiàn)圖片數(shù)對(duì)應(yīng)。注意數(shù)字之間的逗號(hào)為英文「,」號(hào)。
比如本文上汽大眾的案例中，總共有8張浮現(xiàn)圖片，第1張打開(kāi)圖文立馬浮現(xiàn)，第2張為打開(kāi)圖文后的第8秒浮現(xiàn)，第3張?jiān)诘?6秒浮現(xiàn)，第3張?jiān)诘?6秒浮現(xiàn)，第4張?jiān)诘?7秒浮現(xiàn)，第5張?jiān)诘?2秒浮現(xiàn)，第6張?jiān)诘?4秒浮現(xiàn)，第7張?jiān)诘?2秒浮現(xiàn)，第8張?jiān)诘?4秒浮現(xiàn)。便可設(shè)置如下：
第5步：導(dǎo)入公眾號(hào)后臺(tái)
內(nèi)容編輯完畢后，點(diǎn)擊最右側(cè)「預(yù)覽草稿」，效果滿意后接著點(diǎn)擊「同步至微信后臺(tái)」就可以了。
使用同步功能無(wú)需頻繁在編輯器和微信后臺(tái)切換，同步成功后可以立即掃描二維碼查看。
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_(kāi)頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
暫無(wú)評(píng)論哦，快來(lái)評(píng)論一下吧！
全部評(píng)論（0條）