1.图片组件的使用

U老师发表于:2016年07月13日 22:58:05更新于:2019年01月02日 14:55:02

视频教程


图片(Image)组件是最基本的构成元素,掌握了图片组件的使用,Epub360基本上就算是入门了。图片组件能做到的事情有很多,遮罩属性可以配合滑动和重力感应达到丰富有趣的交互效果。(重力感应需要先勾选可滑动,只能手机端预览)。

格式:JPG(JPEG)、GIF(可以直接用图片组件添加,不需要做任何改动)、PNG、SVG(矢量图),更多图片素材的注意事项请看这里

做页面背景底图

点击图片组件,

0015789adb8ec4ecc6256f0d729663c

在素材选择窗口中点击选择准备好的图片

0015789ae523ce352aed3a8024883df

调整在画布的位置,这样作为背景底图的使用完成了

0015789aea97c7ea617a0259795f9bb

关于背景图的尺寸要求请看这里


图片样式调整

在Epub360中,可以对图片进行简单的样式调整

  1. 尺寸及位置

  1. 0015789b39042fa859a2b07117c1986

  2. 可以对宽高进行单独设置,也可以锁定比例后再调整


  1. 边框及圆角设置

0015789b4ae6edd1e2b0a2b74eeb4ab

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

  2. a.线宽:以像素位单位

  3. b.颜色:选择线框的颜色

  4. c.样式:设置边框的样式,从左往右依次为:无边框、直线线框、点线线框、线段线框

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

  6. 0015789b67010a91f16597eb28d07c2


  1. 阴影设置(在边框及圆角设置面板的下方)

  1. 可以为图片素材添加阴影

  2. 001578ae0ba591cf8b333d46a9e11dd

  3. 如上图所示,

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

  5. b.选择阴影颜色

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

  7. 001578ae1dad828954df4d6e701b09e


  1. 滤镜效果(在阴影设置面板的下方)

  1. 可以为图片素材添加高斯模糊的滤镜效果

  2. 001578ae3d5bcaa7da6d6e37b770896

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

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

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

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

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



Q&A:

Q:图片容器怎么选择?

A:事实上,现在epub360编辑器的2.0版本的图片直接添加就是图片容器内装着图片的,还有制作APP需求的用户只能工作台左下角返回1.0版本进行插入图片的操作了。

image.png


图片分享功能