音乐类APP实战界面设计
作者:暂无发布时间:2019年11月07日 10:11

1、 打开【PS】,【Ctrl+N】新建画布,选择【移动设备】、【iphone6】,在水平方向40px、120px处,垂直方向24px处建立【参考线】。

2、 打开“状态栏”素材,放置在顶部,调整大小;使用【矩形工具】创建矩形,【填充】黄色,使用【椭圆工具】,按【Alt+鼠标左键】裁剪矩形,做出弧形的顶部。

3、 使用【文本工具】输入“个人中心”,字体样式为“苹方”,大小36px,居中对齐;打开“返回”图标,放置在左侧。

4、 使用【椭圆工具】创建【134px*134px】的圆形,填充灰色,调整到合适的位置;打开“人物”素材,按【Alt】键单击图层间建立【剪切蒙版】,【ctrl+T】选中人物素材调整位置。

5、 双击圆形的图层,打开【图层样式】面板,添加【投影】、【描边】,设置参数;投影给黄色矩形添加【投影】。选中图层【Ctrl+G】编组,命名为“顶部”。

6、 使用【文本工具】输入文字,【字体大小】分别为28px、22px,【苹方】字体,居中对齐。将图标拖进画面,距离文字72px,并在图标下方输入相应的文案信息,距离图标24px。

7、 使用【文本工具】输入“我的列表”,大小为24px,将图标放置在文字前面,输入“更多”,大小为22px。

8、 使用【矩形工具】创建【320px*320px】的矩形,【填充】灰色,将素材拖进画面,按【Alt】键单击图层间创建【剪切蒙版】,【Ctrl+T】选中调整素材的大小;在矩形下方输入相应的文案信息。

9、 选中第一张图片,【Ctrl+J】复制,【填充】黑色,降低【不透明度】38%,将logo素材放置在上面。使用【圆角矩形】工具创建【4px*10px】的矩形,【Ctrl+J】复制并调整长度;双击打开【图层样式】添加【渐变叠加】。

10、 【Ctrl+N】新建画布,选择【移动设备】、【iphone6】,建立【参考线】,打开“状态栏”、“列表”、“返回”素材,放置在合适的位置;将人物素材拖进画布,【Ctrl+T】调整大小,添加【高斯模糊】。

11、 使用【矩形工具】创建三个大小不等的矩形,打开人物素材,分别在图层上创建【剪切蒙版】,给后面的两个图片添加【高斯模糊】,降低【不透明度】,形成错落感。

12、 使用【文本工具】输入歌曲信息,【字体大小】分别为46px、22px,【字体颜色】为白色和浅灰色,居中对齐。

13、 使用【矩形工具】创建【570px*2px】的进度条,【填充】浅灰色,【Ctrl+J】复制,【Ctrl+T】选中缩小,【填充黄色】,选择【文本工具】输入时间,选择【椭圆工具】绘制圆点。并将“播放按钮”添加画面,调整位置。

14、 使用【钢笔工具】绘制波浪形状,【Ctrl+J】复制,层层叠加,调整【不透明度】,做出波纹的效果。

15、 最终效果如图所示。

特别声明:以上文章内容仅代表作者本人观点,不代表虎课网观点或立场。如有关于作品内容、版权或其它问题请与虎课网联系。
500+精品图书
20G学习素材
10000+实用笔刷
持续更新设计模板
立即领取

下载虎课APP

随时随地学技能
APP更方便
每天免费学课程
下载虎课网APP
随时随地学海量会员教程
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了46,688
并提交了341份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证