.

1.图片组件的使用

U老师发表于:2016年07月13日 22:58:05更新于:2019年04月10日 18:35:25


视频教程


一、组件介绍

图片(Image)组件是最基本的构成元素,掌握了图片组件的使用,Epub360基本上就算是入门了。

格式:JPG/JPEG、GIF(素材大小在30KB以内)、PNG(裁切掉不需要的透明区域)、SVG(矢量图),更多图片素材的注意事项请看这里。


二、场景应用

图片组件能做到的事情有很多,遮罩属性可以配合滑动和重力感应达到丰富有趣的交互效果,(重力感应需要先勾选可滑动,只能手机端预览);图片勾选可编辑,可以被分享转发;勾选长按二维码可识别,二维码图片可以被识别,图片可以被用户选择是否长按保存到手机。


三、素材准备

1.图片格式,PS导出图片时,PNG格式选择较小文件、JPG格式选择相对较小品质。

JPG/JPEG              质量较PNG来说较低,文件较小
PNG质量较JPG来说较高,文件较大,可以透底
GIF仅限循环播放的GIF,大小控制在50KB以内。动画只播放一次不适合使用,比较消耗资源,在微信应用中请谨慎使用。
SVG矢量格式,同样的文件不管尺寸大小可以保持一样的清晰度,主要从PS、AI等设计软件中获取


2.图片尺寸

如果是设计背景图,需要尺寸要跟画布外框匹配,画布外框尺寸是422X748PX。

因为图片放在编辑器里会压缩到一半大小,所以设计铺满全屏的图片需要准备844X1496px(如下图),分辨率72dpi;页面中其他的图片,就按显示尺寸的2倍大小准备即可。

PS中的设计尺寸:

0015c2c5de41bb4b53113563baa7144


3.素材大小

在保证场景效果的前提下,满屏大图,导出图片文件一般不要超过200kb,其他图片尺寸尽量小。


4.图片压缩工具

  • 图片在线压缩网址:www.tinypng.com

  • 电脑端软件,建议格式工厂


二、组件用法

基本用法

1.点击图片组件,添加图片

0015cadaeb4eedac8e6b2cdf0429b8f


2.会弹出一个素材窗口,如果没有素材,就需要我们点击上传标志上传素材

0015cadaa7fa0fb2c8200ddd596c4fd


3.在这里我们选择最左侧的公共素材库,去添加素材

0015cadae0c765851b363ae1cdda8d9


4.素材上传完成后,可以将鼠标移动到某个图片上,会出现【预览】跟【添加】图片的标志。

我们选择大一些的图,待会用作背景图,点击右侧的【添加】标志,将图片添加到页面中。

0015789ae523ce352aed3a8024883df


5.图片添加到页面后,默认的显示方式是撑满,我们可以理解为图片组件是一个容器,图片用所有画面像素撑满了这个容器。

0015cadb7f5835e2db754eb0c5b24dc


6.因为图片尺寸不是按照要求设计的,但是我们想要让它铺满整个画布,就需要做个简单调整。

0015cadb8f82f2a71bd2455a9c67bfc


7.如果添加的图片原本就是按照素材规范设计的,那么上传到编辑器里,默认就是合适的大小,不需要做调整,所以按照尺寸规范作图十分重要。

0015cadb957ddde363ea51f3bdeff77



8.关于其他图片尺寸的显示问题。如果不小心将图片拉变形了、或者图片不清楚该如何处理。

0015cadba60c175cf5cef9e2b86cc94


高级用法

1.图片属性里的可编辑,勾选了可编辑,该图片就具备了2个属性

(1)点击这张图,上传照片

(2)图片设置了可编辑,便具备了可以被分享出去的属性。比如该图片被用作上传照片后的替换图,那么当图片上传完成并转发给好友后,好友打开看到的就是上传后的照片,这个就是图片的分享功能。

0015cadbc8420d11f8733e8714a7a85


2.点击“二维码(支持微信识别)”,在长按这张照片时,系统会弹出保存照片的提示,一般只在微信打开H5时有效。

(1)如果希望自己的图片,在H5中长按可以保存到手机,那么可以勾选【二维码】

(2)如果自己上传的是一张二维码图片,想要被长按识别,那么勾选一下元素属性的的【二维码】选项即可。

0015cadbdcd10eae5a277f99f6628f9


3.链接。是指点击这张图的时候,让它去做什么,比如跳转页面、打开一个网址、拨打电话,如果在这里设置了链接,就不需要到其他地方设置了。

0015cadc003a2d9b3ce0b4e59f413f6


4.遮罩属性。遮罩类似于设计软件里的蒙版,但这里的遮罩是指要显示的区域。

0015cadc0f83c164fb08f7cc82caee0


5.可擦除属性。

0015cadc4a658c27eb859ef69512507


6.可拖动属性。勾选了可拖动,这张图就可以在画布里用手指或鼠标点住,自由拖动了,并且可以设置一些拖动的效果,一般是用默认的,可以自己设置下拖动属性测试下效果。

0015cadc6d3a8b086b93e108d936a53


7.图片大小调整。可对图片进行尺寸及位置调整,宽高进行可单独设置,也可以锁定比例后再调整,不变形。


0015789b39042fa859a2b07117c1986


8.图片样式:边框及圆角设置。

0015789b4ae6edd1e2b0a2b74eeb4ab


9.在右侧属性面板切换到“背景及边框模块”,可以设置以下参数:

(1)线宽:以像素位单位

(2)线条颜色:选择线框的颜色

(3)样式:设置边框的样式,从左往右依次为:无边框、直线线框、点线线框、线段线框

(4)图片圆角:以像素为单位,默认是四个角统一调整,也可以单独设置某一个角的圆角值,以左上角为例,如下图,

0015789b67010a91f16597eb28d07c2


  1. (5)阴影设置(在边框及圆角设置面板的下方)可以为图片素材添加阴影。

001578ae0ba591cf8b333d46a9e11dd

如上图所示

a.可以设置X、Y轴的数值

b.选择阴影颜色

c.设置阴影的虚化值,默认的阴影是非常生硬的效果,如下图,

001578ae1dad828954df4d6e701b09e


  1. (6)滤镜效果(在阴影设置面板的下方)可以为图片素材添加高斯模糊的滤镜效果。

001578ae3d5bcaa7da6d6e37b770896

a.虚化,数值越大,素材越模糊

b.饱和,数值越大,素材颜色越鲜艳

c.色调,中间值为暖色调,两侧数值为冷色调

d.亮度,数值越大,素材明暗面都会整体提亮

e.对比,数值越大,素材的明暗对比度明显