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

上海/UI设计师/9年前/3617浏览
制作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
Report
|
20
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
IP设计合集 DGS FRIENDS
Homepage recommendation
大家都在看
Log in