人民日報“點亮”樣式,排版教程在此!

嗨鐵子們大家好

我是泥萌挖掘師

9妹

想知道有多少小夥伴

天天蹲點等9妹的推文


人民日報“點亮”樣式,排版教程在此!


畢竟每次都能知道你所想所需

9妹這樣貼心的女孩不多了

不接受反駁的聲音


人民日報“點亮”樣式,排版教程在此!


經過這段時間的密切觀察

發現你們都在問一個樣式

“ 這種點亮效果怎麼做到的 ”

“ 怎麼才能實現圖片點亮 ”

那就是下圖這類


人民日報“點亮”樣式,排版教程在此!


人民日報“點亮”樣式,排版教程在此!


這麼美這麼高大上的效果

如何製作出來的

很多小夥伴都非常的費解

別怕

9妹專治各種疑難雜症

真的非常非常簡單


人民日報“點亮”樣式,排版教程在此!


操作步驟來了

小板凳坐好小本子準備記筆記


第一步

找一張你想點亮的任何圖片

在編輯器內上傳圖片

選中圖片後在工具條中選擇美圖


人民日報“點亮”樣式,排版教程在此!


點開美圖後會看到很多濾鏡

選擇黑白畫映後點擊確定


人民日報“點亮”樣式,排版教程在此!


這張圖片在編輯器內

就是呈現灰色的效果了

雙擊灰色圖片

複製地址欄的地址


人民日報“點亮”樣式,排版教程在此!


人民日報“點亮”樣式,排版教程在此!

第二步


編輯器內搜索樣式編號

「 23843 」

添加到編輯器內

我們需要利用這個素材實現點亮樣式

點擊HTML


人民日報“點亮”樣式,排版教程在此!


選中的代碼就是原圖片地址

把剛才

複製的灰色圖片地址

粘貼在選中的位置

點擊HTML返回編輯器內


人民日報“點亮”樣式,排版教程在此!


因為彩色的原圖

已經上傳過編輯器內了

可直接在我的圖片

再次點擊添加編輯器內


人民日報“點亮”樣式,排版教程在此!


再次雙擊圖片

複製地址

然後回到HTML裡面

把地址粘貼在陰影處替換掉

再次點擊HTML

返回編輯器內就完成啦


人民日報“點亮”樣式,排版教程在此!


點擊下方查看效果圖

因為是長方形的圖片

與下方的文字會有一大段的留白

也是需要在HTML裡面修改


若插入的圖片顯示不全後面留白太多

請修改「 858 」的值


人民日報“點亮”樣式,排版教程在此!


留白在代碼裡調整後的效果圖

完整的點亮圖片

就這樣完成啦

點擊下方查看效果圖


人民日報“點亮”樣式,排版教程在此!

人民日報“點亮”樣式,排版教程在此!


動手動手動手操作

多操作幾遍就會啦


人民日報“點亮”樣式,排版教程在此!


人民日報“點亮”樣式,排版教程在此!


以上就是針對點亮樣式

教程的介紹啦

如果還有其他的疑問

可直接留言告訴9妹



分享到:


相關文章: