专栏名称: 微互动
运营营销百科全书,运营知识、营销案例、实用教程、更新资讯、功能解读、系统课程,尽在微互动
目录
相关文章推荐
51好读  ›  专栏  ›  微互动

【全网独家】花样拼图样式上线

微互动  · 公众号  ·  · 2017-08-22 21:00

正文

请到「今天看啥」查看全文






滑动每一个模块,看看你能拼出来什么?








玩了这么久的图片滑动,你肯定还没有看过上面这种,这就是iPaiban 全网独家 发布的图片滑动样式!


图片滑动样式位于i排版编辑器(iPaiban.com)左侧样式分类中,【互动】分类里。


一共有6个种类,分别是:

1. 双模块左右滑动

2. 双模块上下滑动

3. 四宫格滑动有缝隙版

4. 四宫格滑动无缝隙版

5. 九宫格滑动有缝隙版

6. 九宫格滑动无缝隙版


1. 双模块



左右滑动图片,拼接二维码,长按识别,看看你有什么发现?





上下滑动图片,拼接二维码,长按识别,看看你有什么发现?








悄悄说一句:滴滴出行今天的推文就是使用咱家的样式噢(如下)

我喜欢在车上抽烟 (讨厌)


2. 四宫格




滑动每一个模块,看看你能拼出来什么?





有缝版






无缝版




3. 九宫格




滑动每一个模块,看看你能拼出来什么?





有缝版






无缝版




这样的图片滑动拼接,可以把中奖信息、活动信息放在图片里,也可以 生成二维码 ,让大家拼出来以后快速去领。


用户不仅动手滑动了图片,还可以领取到礼品。既增加了用户的参与感,也增加了图文排版的多样性。







4. 怎么替换图片?




替换图片的方式和上传图片一样,点击一个小格里的图片,选择【替换图片】,即可上传。




📌 在电脑上编辑的时候,图片有滑动条。但是在手机上就没有滑动条了,这一点大家不用担心。




5. 怎么增加或减少图片




特别要注意,如果你的图片数量多于或者少于模板数量,需要修改代码。


九宫格 的滑动模板为例:


每一个小格里,添加了6张小图,总共可以拼成6张大图,所以截图展示的代码是600%。



增加 :如果你想总共拼成8张大图,也就是每一个小格里有8张小图,就要把代码圈出来的部分,改成800%,两个框里的数字都要修改。


减少 :如果你想总共拼成5张大图,也就是每一个小格里有5张小图,就要把代码圈出来的部分,改成500%,两个框里的数字都要修改。


图片地址里,红线画出来的部分,是 100/6=16.6666%



增加: 如果你想总共拼成8张大图,就要把这个数字改成 100/8=12.5% ,8张图都要修改,同时还要增加img标签 (有几张图,就有几个img标签)



减少: 如果你想总共拼成5张大图,就要把这个数字改成 100/5=25% ,5张图都要修改,同时还要减少img标签 (有几张图,就有几个img标签)





6. 怎么制作九宫格?




老沙给大家推荐一个好用的APP:九格切图,可以直接制作九宫格的图片,iOS和Android都可以使用,亲测非常方便!


👇



此外,还可以使用PS来制作九宫格 (别嫌麻烦,做运营还是要学一点PS的) ,老沙包教包会!


打开Photoshop,上传图片。


点击上方菜单栏的【视图】,把【标尺】打开。




拖拽标尺到图片上,就可以把图片分成小格。使用【移动工具】还可以拖拽标尺,调整小格的大小。



选择【切片工具】,沿着标尺,把图片切成小格。切完你会发现,每格图片的左上角都有一个编号。



点击上方菜单栏【文件】-【导出】-【存储为Web所用格式】。




调整图片格式,点击储存,选择【所有用户切片】,就可以了。你就会在桌面发现一个包含所有图片切片的文件夹。








投稿

看到这样的图片滑动样式,你有了什么新的排版创意呢?


和老沙分享一下,也可以把你的作品投稿给老沙。


表现优秀的小伙伴,可以获得i排版高级会员哦!








i排版

iPaiban.com

www.iPaiban.com

制 作









请到「今天看啥」查看全文