#秀米XIUMI[超话]##利用点击展开动画制作模拟微信聊天界面效果
1.作对话框部分。在布局基础布局中,向右侧编辑区添加一个单列布局,将背景颜色换为淡蓝色rgb(223, 247, 248),输入文案内容,将文字颜色更改为蓝色rgb(98, 195, 204),点击定位按钮,将段前段后距更改为15。点击宽度属性,将宽度属性更改为宽度自适应。点击定位按钮,将段前段后距更改为15。点击边框按钮,将上、下、右边框的弧度分别更改为20,复制备用,如图一、二所示。
2.将制好的对话框添加到下方,修改文案内容,如图二所示。
3.在布局基础布局中,向右侧编辑区添加一个固定布局,首先输入一个感叹号,(请在英文状态下输入感叹号,中文输入法的感叹号无法居中)将背景颜色更改为红色,点击边框按钮,将弧度更改为100,最后再将宽高比更改为20:20。(因为先更改宽高比之后会太小,不好操作。)如图三所示。
4.将固定布局和对话框组合在一起,点击定位按钮,选择向右对齐。将偏移数值更改为-10。点击列对齐按钮,选择垂直居中,再将固定布局的宽度属性更改为宽度自适应。复制备用。如图四、五所示。
5.在布局-固定布局中,向右侧编辑区添加一个svg布局,删除无用文字,将刚刚加好的对话框内容添加到svg内侧布局。如图六所示。
6.向下方添加一个单列布局,输入文案内容,文字颜色更改为白色,背景颜色更改为灰色,点击边框按钮,弧度更改为4,点击宽度属性,将宽度属性更改为宽度自适应。如图七所示。
7.在svg布局中点击动画选项,取消自动勾选宽高比,将宽高比更改为100:62,固定框更改为300像素,动画触发选择点击,动画次序选择顺序,动画一中动画类别选择展开,动画时长为一秒。如图八所示。
8. 最后在下方添加一个单列布局,将所有做好的对话框内容添加到单列布局中,将背景颜色更改为透明蓝色r点击间距按钮,上下左右边距均更改为20,点击定位按钮,将段前段后距离更改为10。如图九所示。
1.作对话框部分。在布局基础布局中,向右侧编辑区添加一个单列布局,将背景颜色换为淡蓝色rgb(223, 247, 248),输入文案内容,将文字颜色更改为蓝色rgb(98, 195, 204),点击定位按钮,将段前段后距更改为15。点击宽度属性,将宽度属性更改为宽度自适应。点击定位按钮,将段前段后距更改为15。点击边框按钮,将上、下、右边框的弧度分别更改为20,复制备用,如图一、二所示。
2.将制好的对话框添加到下方,修改文案内容,如图二所示。
3.在布局基础布局中,向右侧编辑区添加一个固定布局,首先输入一个感叹号,(请在英文状态下输入感叹号,中文输入法的感叹号无法居中)将背景颜色更改为红色,点击边框按钮,将弧度更改为100,最后再将宽高比更改为20:20。(因为先更改宽高比之后会太小,不好操作。)如图三所示。
4.将固定布局和对话框组合在一起,点击定位按钮,选择向右对齐。将偏移数值更改为-10。点击列对齐按钮,选择垂直居中,再将固定布局的宽度属性更改为宽度自适应。复制备用。如图四、五所示。
5.在布局-固定布局中,向右侧编辑区添加一个svg布局,删除无用文字,将刚刚加好的对话框内容添加到svg内侧布局。如图六所示。
6.向下方添加一个单列布局,输入文案内容,文字颜色更改为白色,背景颜色更改为灰色,点击边框按钮,弧度更改为4,点击宽度属性,将宽度属性更改为宽度自适应。如图七所示。
7.在svg布局中点击动画选项,取消自动勾选宽高比,将宽高比更改为100:62,固定框更改为300像素,动画触发选择点击,动画次序选择顺序,动画一中动画类别选择展开,动画时长为一秒。如图八所示。
8. 最后在下方添加一个单列布局,将所有做好的对话框内容添加到单列布局中,将背景颜色更改为透明蓝色r点击间距按钮,上下左右边距均更改为20,点击定位按钮,将段前段后距离更改为10。如图九所示。
#秀米XIUMI[超话]#
提高办事效率是出色打工人必备的素质。
排版中有一些重复的或者大同小异的设计,确立好整体框架,做好基础的几个部分排版后,可以通过复制/收藏这些模板,在后面相似排版的环节,进行快速的模板替换。
秀米里的模板很多,可以用文案内容的关键词进行搜索,选择合适的模板进行使用,聪明的排版人当然要因地制宜对模板进行适当的调整让它适合自己的内容或者账号。
调整颜色的时候,全文替换也是一个很方便实用的功能,可以把全文中同样的颜色进行改变。卡片里的快速换色,将涉及的颜色放在一起,也是很方便惹,不用一个个部分去点。不过快速换色或者全文替换的功能有时候可能还是会有部分需要专门去改。
关于配色,可以参考排版投稿里那些大佬的配色,或者在ppt里找配色(ಠ .̫.̫ ಠ)(但是ppt里那个好像是个插件哦,默认有嘛?)其实看到好看的图片,也可以把里面好看的颜色做成色卡万一以后用上了呢。
希望我以后排版也能这么快速,少一些纠结。
提高办事效率是出色打工人必备的素质。
排版中有一些重复的或者大同小异的设计,确立好整体框架,做好基础的几个部分排版后,可以通过复制/收藏这些模板,在后面相似排版的环节,进行快速的模板替换。
秀米里的模板很多,可以用文案内容的关键词进行搜索,选择合适的模板进行使用,聪明的排版人当然要因地制宜对模板进行适当的调整让它适合自己的内容或者账号。
调整颜色的时候,全文替换也是一个很方便实用的功能,可以把全文中同样的颜色进行改变。卡片里的快速换色,将涉及的颜色放在一起,也是很方便惹,不用一个个部分去点。不过快速换色或者全文替换的功能有时候可能还是会有部分需要专门去改。
关于配色,可以参考排版投稿里那些大佬的配色,或者在ppt里找配色(ಠ .̫.̫ ಠ)(但是ppt里那个好像是个插件哦,默认有嘛?)其实看到好看的图片,也可以把里面好看的颜色做成色卡万一以后用上了呢。
希望我以后排版也能这么快速,少一些纠结。
#秀米XIUMI[超话]##利用固定布局加列定位制作简约框线标题
1.在布局-基础布局中,向右侧编辑区添加一个固定布局,宽高比更改为20:20。点击边框按钮,样式选择实线,尺寸选择1,点击复制按钮复制一份备用,如图一所示。
2.向编辑区添加一个三列布局,选中中间布局输入文案内容,选择居中对齐,点击间距按钮,字间距更改为2,点击第二列布局,点击边框按钮样式选择实线,尺寸选择1,将我们步骤一做好的小正方形拖入到两侧布局。如图二所示。
3.点击左侧布局,宽度属性更改为自伸缩,数值更改为4,点击列定位按钮,上定位选择-8,下定位选择8。如图三所示。
4.点击中间布局,宽度属性更改为自伸缩,数值更改为100,点击列定位按钮,左右定位均更改为-12。层叠顺序更改为1。点击列对齐按钮,选择垂直居中。点击背景颜色按钮,选择白色。点击间距按钮,左右间距更改为8,上下间距更改为5。如图四、五所示。
5.点击右侧布局,宽度属性更改为自伸缩,数值更改为4。点击列定位按钮,上定位选择-8,下定位选择8。点击列对齐按钮,选择向下对齐。点击间距按钮,行间距更改为0。如图六所示。
6.向下方添加一个单列布局,将制作好的三列布局拖入单列布局中,宽度属性更改为自适应,点击定位按钮,选择居中对齐,退出布局模式,预览效果即可。如图七、八所示。
1.在布局-基础布局中,向右侧编辑区添加一个固定布局,宽高比更改为20:20。点击边框按钮,样式选择实线,尺寸选择1,点击复制按钮复制一份备用,如图一所示。
2.向编辑区添加一个三列布局,选中中间布局输入文案内容,选择居中对齐,点击间距按钮,字间距更改为2,点击第二列布局,点击边框按钮样式选择实线,尺寸选择1,将我们步骤一做好的小正方形拖入到两侧布局。如图二所示。
3.点击左侧布局,宽度属性更改为自伸缩,数值更改为4,点击列定位按钮,上定位选择-8,下定位选择8。如图三所示。
4.点击中间布局,宽度属性更改为自伸缩,数值更改为100,点击列定位按钮,左右定位均更改为-12。层叠顺序更改为1。点击列对齐按钮,选择垂直居中。点击背景颜色按钮,选择白色。点击间距按钮,左右间距更改为8,上下间距更改为5。如图四、五所示。
5.点击右侧布局,宽度属性更改为自伸缩,数值更改为4。点击列定位按钮,上定位选择-8,下定位选择8。点击列对齐按钮,选择向下对齐。点击间距按钮,行间距更改为0。如图六所示。
6.向下方添加一个单列布局,将制作好的三列布局拖入单列布局中,宽度属性更改为自适应,点击定位按钮,选择居中对齐,退出布局模式,预览效果即可。如图七、八所示。
✋热门推荐