創(chuàng)意工牌新潮流:點(diǎn)擊換圖與滑動(dòng)SVG效果教程
探索如何通過點(diǎn)擊換圖和滑動(dòng)SVG效果為工牌增添趣味。本文詳細(xì)介紹了創(chuàng)意工牌的設(shè)計(jì)思路、制作方法以及SVG編輯器的使用技巧,讓你的工牌在社交媒體上脫穎而出,成為話題焦點(diǎn)。立即學(xué)習(xí)如何制作個(gè)性化且互動(dòng)性強(qiáng)的工牌,讓你的團(tuán)隊(duì)精神更加活躍
朋友們大家好,我是三兒
最近大家刷小紅書,有沒有刷到[同事工牌已經(jīng)next level]點(diǎn)進(jìn)去一看,好家伙大家精神狀態(tài)都這么美麗的嗎?
01.姓陳的同事叫:漲點(diǎn)工資成不陳同學(xué)
02.姓唐的同事叫:美式不加唐同學(xué)
03.姓李的同事叫:別和我講道李同學(xué)
04.姓杜的同事叫:遇事不決先百杜同學(xué)
05.姓鄭的同事叫:總有刁民想害鄭同學(xué)
06.姓吳的同事叫:每天都是星期吳同學(xué)
07.姓周的同事叫:工資太低只喝白米周同學(xué)
08.姓劉的同事叫:此地不宜久劉同學(xué)
09.姓曹的同事叫:再催就跳曹同學(xué)
作為新媒體人,看到這么有趣的話題咱們的網(wǎng)感雷達(dá)早就「滴答滴」響起來了。
內(nèi)容素材有了,該用什么樣的形式呈現(xiàn)呢?
我們一般有兩種思路,一是用點(diǎn)擊換圖,二是利用滑動(dòng)呈現(xiàn)。
點(diǎn)擊換圖,相對(duì)比較簡(jiǎn)單,做兩張尺寸相同的圖片即可,舉個(gè)列子。
▲點(diǎn)擊圖片換圖▲
多次點(diǎn)擊形狀(X形狀)過渡換圖
組件ID:754
▲點(diǎn)擊圖片換圖▲
多次點(diǎn)擊形狀(一字閉合)過渡換圖
組件ID:752
▲點(diǎn)擊圖片換圖▲
點(diǎn)擊換圖-自動(dòng)還原
組件ID:653
若是想要使用其他點(diǎn)擊換圖效果,我們可以在SVG編輯器中搜索「點(diǎn)擊換圖」,選擇我們喜歡的效果使用即可。
整體而言點(diǎn)擊換圖的圖片設(shè)計(jì)相對(duì)簡(jiǎn)單,確保尺寸一致即可,但如果用滑動(dòng),需要考慮的就會(huì)多一些,舉個(gè)例子。
底圖固定雙層橫向滑動(dòng)-左右留白-滑動(dòng)圖可跳轉(zhuǎn)
組件ID:526
我們選擇了一個(gè)雙層滑動(dòng),背景圖固定頂層滑動(dòng)。
背景圖
滑動(dòng)圖1
滑動(dòng)圖2
三兒,你中間這個(gè)圖也沒有內(nèi)容呀。
非也,因?yàn)檫@張圖是一直透明底的png圖,如果我們給他加上一個(gè)背景,你就能看到里面的內(nèi)容。
滑動(dòng)圖1
滑動(dòng)圖2
是不是這樣就看到內(nèi)容了,這個(gè)滑動(dòng)需要大家想明白的是,我們什么內(nèi)容需要用戶滑動(dòng)填充,就把該內(nèi)容單獨(dú)做一張圖出來。
例如這個(gè)案例,我們需要用戶將「鐘」字滑出來,那么背景圖就需要制作一個(gè)不含「鐘」字的內(nèi)容。
我們準(zhǔn)備好設(shè)計(jì)圖后,就能開始制作滑動(dòng)效果了。
在135編輯器左側(cè),點(diǎn)擊SVG編輯器,進(jìn)入SVG編輯器頁面。
我們是一個(gè)橫向雙層滑動(dòng)效果,所以我們只需要選擇符合這個(gè)要求的組件即可,這里我們選擇的是底圖固定雙層橫向滑動(dòng)-左右留白-滑動(dòng)圖可跳轉(zhuǎn)組件ID:526
將組件添加進(jìn)編輯頁面,在右側(cè)添加對(duì)應(yīng)的素材內(nèi)容。
制作好后,我們可以選擇「導(dǎo)出」復(fù)制到135編輯器中,在SVG編輯器右上角找到「導(dǎo)出」選擇「復(fù)制代碼到135編輯器」
只需要Ctrl+v就可以了,如果想要添加在模板指定位置內(nèi),可以使用區(qū)域代碼。
若是要替換圖片位置 覆蓋<img>標(biāo)簽內(nèi)容即可
如果是段落文字,只需要覆蓋<p>標(biāo)簽中的文字內(nèi)容即可。
這樣我們就能將SVG效果添加到模板中了。
以上就是本次推文的全部?jī)?nèi)容啦
大家還有什么想看想學(xué)的
記得在評(píng)論區(qū)留言噢
對(duì)了大家有看什么
令你眼前一亮的工牌嗎?
歡迎留言討論哦

立即登錄













