点击此处返回

每日可免费学习1个教程

立即登录>

软件入门平面设计 3D数字 C4D教程 Blender教程短视频制作影视动画摄影艺术室内设计绘画插画海外教程电商教程产品精修办公职场编程开发考证·外语品牌设计综合教程 UI设计兴趣生活

详情图文教程训练营推荐

UI设计

UI-电影类购票APP界面设计

1283人学过难度:初级练习软件:PS（CC2017）

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

关注人数：8698

虎课注册讲师，专注于海报设计、电商设计，擅于UI设计。人为生活而设计，设计为生活而存在。我是爱设计更爱生活的豆豆，希望我的课程对大家都有帮助~

PS-618年中大促淘宝首页主图

1.8万人已学

PS-荒诞复古风淘宝首页设计

9817人已学

课程综合评分：9.9分

评论可是有底线的

本节教程练习

1. APP设计的基本规范如图示。

2. 【打开】PS软件，【新建】画布，具体参数如图示。

3. 使用【矩形选区工具】，根据基本规范尺寸，拖出固定尺寸选区，【拖出】参考线固定尺寸。具体效果如图示。

4. 【拖入】状态栏素材，调整大小，排列至画布顶部位置。具体效果如图示。

5. 根据固定导航栏界面位置，【拖入】导航栏关联ICON素材，调整大小，排列至合适的位置，【叠加】灰色，使用【文字工具】，大小26PX，输入文字，排列至导航栏合适的位置，【选择】所有的关联图层，按【Ctrl+G】编组，【重命名】。具体效果如图示。

6. 使用【矩形选区】框选70PX高度选区，【拖出】参考线固定标题栏高度。使用【文字工具】输入标题文字，排列至离左侧30PX，【颜色】深灰色。具体效果如图示。

7. 使用【矩形工具】绘制750*1PX的矩形，【颜色】#eaeaea，排列至参考线合适的位置。使用【圆角矩形工具】，绘制210*30，圆角10PX大小的圆角矩形，【颜色】桔黄色，排列至合适的位置。具体效果如图示。

8. 使用【钢笔工具】，绘制三角形状对象，排列至合适的位置，【填充】合适的颜色，按Alt键单击圆角矩形图层【创建剪切蒙版】。具体效果如图示。

9. 【选择】形状图层，打开【图层样式】-【渐变叠加】，渐变颜色如图示，具体效果如图示。

10. 【复制】图层样式，【粘贴】至另一个形状图层，打开【图层样式】，修改【渐变叠加】，具体渐变颜色如图示。具体效果如图示。

登录后学习完整图文教程

虎课APP离线下载免流量

70000+教程，每天免费学一课

一键打开