制作picker滚轴(类似ios时间选择器效果)

用户头像
上海/UI设计师/9年前/3645浏览
制作picker滚轴(类似ios时间选择器效果)
用户头像
jolin2012

制作picker滚轴(类似ios时间选择效果),工具:AE+PS

制作picker滚轴(类似ios时间选择效果)


1.把ps单行的图层导入AE(后来验证每行一组但不要合层每个文字单独图层更灵活)


897b5811671da84a0e282b91ccf8.jpg


2.在AE左下方的区域选中图层-右键-“转换为3D图层”


d5e758107a52a84a0d304f214fe1.jpg


3.“变换”-“X轴旋转”-正负12°和正负24°


e81658107a93a84a0e282b948c16.jpg

注意选中行上面的各行和下面的各行X轴旋转方向值相同、但是方向相反,通过数值前面的正负号来区别


4.选中当前图层,“合成”-“帧另存为”Photoshop图层


916958107ac5a84a0e282bd83027.jpg


5.在ps中打开,粘贴图层进ps文件中,然而并没有并没有结束!!!


如果没有后来,那么会是这个样子:


65eb58107b45a84a0e282b009c5c.jpg

在X轴纵向是有点卷曲的感觉,但是透视原理需要各边消失在灭点,不符合视觉逻辑哦,那么接下来~


最后的一项很关键的部分:


如果是五行的picker,那么第一行要在PS中横向缩放减小宽度,并且“编辑”-“变换”-“透视”进行上边缘宽度的减小(为了符合透视原理、灭点);

同理第二行也要同样的方法微调

下面的第四和第五行也是一样~


欣赏一下哈,各行左侧和右侧边缘呈曲线状,并要有相同的弧度,这样才能出来有纵深感的滚轴的视觉效果


a644581167cba84a0d304f55040d.jpg


d02e5811688ea84a0d304f10e0c1.jpg

13
举报
|
20
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
新能源APP应用UIKit
APP/小程序商业项目UI模板|99个高保真UI+79个原型
智能家居中心 简约 UI设计组件库
盲盒APP UI设计
【新年UI图标】钱包icon
UI_3D图标“一本秘籍”(源文件
3D卡通UI界面图标可爱插画免扣素
高级感金属拟物 UI设计组件库
【新年UI图标】影音icon
UI界面 组件
【新年UI图标】会员icon
Security Camera UI kit
钱包ui模板
矢量立体简约UI蓝白图标
UI通用设计素材1
科技医疗透明柜UI界面设计
新拟态风格 UI设计组件库
UI 登录界面设计模板包
【新年UI图标】珠宝icon
【新年UI图标】汽车icon
户外旅行飞机情侣假日出行
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】30个图标
你可能喜欢
大家都在看
登录注册