详情图文教程

UI设计

UI-下拉刷新交互动效设计

1049人学过难度:中级拔高软件:PS（CC2017），AE（CC2017）

评论(20) 收藏课程下载视频

关注人数：1543

毕业于广东工业大学，所在学院：艺术设计学院。2015年开始从事UI、UE相关工作，曾参与汽车媒体、云计算及大数据、智能硬件、生活服务这四大行业里的多个项目。包括有车以后小程序(2019年)、广州地铁-轨道交通工程造价及投资决策大数据平台(2018年)、8684公交(2015年)等等。擅长动效设计、高保真可交互原型设计及开发对接。

UI-下拉刷新交互动效设计

UI-红包动效设计

5万人已学

UI-下拉刷新交互动效设计

UI-美食APP菜单拉动效果

4.2万人已学

课程综合评分：9.8分

1.【打开】PS，再【打开】“下拉刷新”素材，使用【圆角矩形工具】在画布上绘制，在属性面板将【圆角】调整最大【填充颜色】为绿色，在使用【矩形工具】绘画头部【右击】“矩形1”选择【创建剪切蒙版】更改颜色，并按【Alt】移动并复制改变颜色，其他部位同样使用【矩形工具】绘制，选择绘制的【形状图层】按【Ctrl+G】图层编组，效果如图所示。

2.按【Alt】移动并复制两个人，修改衣服的颜色和头发，调整完成后将它们分别【转换为智能对象】。

3.【打开】“房子”层，使用【矩形工具】绘制一个矩形按【Ctrl+T】自由变换再按【Alt】移动并复制，调整【形状颜色】，【选择】所有的形状层按【Ctrl+T】-【透视】改变为梯形，再将【合并】的图层更换颜色放到最底层，其他物体同样使用【矩形工具】绘制，效果如图所示。

4.将“下拉刷新”【保存】，再【打开】AE将“下拉刷新”【拖入】到AE中，【右击】面板【新建合成】调整【宽度】为200px,【高度】为200px,【合成名称】为“滑动”【帧速率】为25，【确定】。

5.将“下拉刷新”合成的【帧速率】调整为25，使用【椭圆形遮罩工具】再画布上绘制一个圆，【填充选项】为纯色【填充颜色】为白色，【Ctrl+D】复制一层，将“形状图层1”选择【椭圆1】属性调整大小，按【T】调整不透明度50%，将文件【另存为】。

6.将“滑动”合成【拖进】“下拉刷新”，【打开】“滑动”将两个圆【颜色】调整为灰色，回到“下拉刷新”【选择】“滑动”按【S】缩放为38,38%，再按【位置P】【添加关键帧】将【时间轴】向后拖到【添加关键帧】调整位置，打开“滑动”合成【选择】“形状图层1”按【T】调整不透明度0%到50

登录后学习完整图文教程