案例12　音乐播放器界面

（请扫描版权页上的二维码，下载教学视频）

本章的内容是设计一款音乐播放器界面，如上页图4所示，用户点击音乐界面播放自己喜欢的音乐，音乐界面右上角的收藏图标（心形状）可以收藏自己喜欢的音乐，界面下方的图标播放自己喜欢的音乐。接下来我们来学习如何设计与制作。

STEP1

选择菜单栏里的“文件/新建”命令，打开新建文档对话框，选择移动设备，点击iPhone8/7/6，新建一个文件尺寸为750×1334像素的文件，分辨率为72dpi，背景内容为白色，如图所示。（如果是设计Android的新建尺寸，则为1080×1920像素，其他尺寸则参考前面的规范。）

图5

STEP2

使用矩形选区，选区框出40像素的大小，拖曳出参考线。选区框出88像素，拖拽出参考线，拖拽出状态栏素材，排列至参考线内合适的位置。具体效果如图示。

图6

STEP3

使用文字工

具，选择Arail字体，输入文字，调整大小，排列至参考线内合适的位置。绘制收藏图标，调整大小，排列至合适的位置。具体效果如图示。

图7

STEP4

使用形状工具绘制椭圆，添加人物素材图片，使用快捷键Ctrl+Alt+G创建剪切蒙版，使用快捷键Ctrl+J复制图层，选择转换为智能对象，调整图层顺序。选择菜单中的滤镜—模糊—高斯模糊，参数如图8所示。(https://www.daowen.com)

图8

STEP5

使用文字工具，选择合适的字体和颜色，输入歌词，排列至画面合适的位置。具体效果如图9所示。

图9

STEP6

添加音乐波浪线的素材图片，调整位置，如图所10所示。

图10

STEP7

拖入按钮素材，调整大小，排列至合适的位置。打开图层样式—颜色叠加，叠加上合适的颜色。具体效果如图11所示。

图11

图12