1. APP设计的基本规范如图示。
![](http://pic.huke88.com/upload/content/2018/01/31/15173938592242.jpg)
2. 【打开】PS软件,【新建】画布,具体参数如图示。
![](http://pic.huke88.com/upload/content/2018/01/31/15173938805310.jpg)
3. 使用【矩形选区工具】,根据基本规范尺寸,拖出固定尺寸选区,【拖出】参考线固定尺寸。具体效果如图示。
![](http://pic.huke88.com/upload/content/2018/01/31/15173939296155.jpg)
4. 【拖入】状态栏素材,调整大小,排列至画布顶部位置。具体效果如图示。
![](http://pic.huke88.com/upload/content/2018/01/31/15173939348840.jpg)
5. 根据固定导航栏界面位置,【拖入】导航栏关联ICON素材,调整大小,排列至合适的位置,【叠加】灰色,使用【文字工具】,大小26PX,输入文字,排列至导航栏合适的位置,【选择】所有的关联图层,按【Ctrl+G】编组,【重命名】。具体效果如图示。
![](http://pic.huke88.com/upload/content/2018/01/31/15173939403579.jpg)
6. 使用【矩形选区】框选70PX高度选区,【拖出】参考线固定标题栏高度。使用【文字工具】输入标题文字,排列至离左侧30PX,【颜色】深灰色。具体效果如图示。
![](http://pic.huke88.com/upload/content/2018/01/31/15173939455311.jpg)
7. 使用【矩形工具】绘制750*1PX的矩形,【颜色】#eaeaea,排列至参考线合适的位置。使用【圆角矩形工具】,绘制210*30,圆角10PX大小的圆角矩形,【颜色】桔黄色,排列至合适的位置。具体效果如图示。
![](http://pic.huke88.com/upload/content/2018/01/31/1517393951277.jpg)
8. 使用【钢笔工具】,绘制三角形状对象,排列至合适的位置,【填充】合适的颜色,按Alt键单击圆角矩形图层【创建剪切蒙版】。具体效果如图示。
![](http://pic.huke88.com/upload/content/2018/01/31/15173939564559.jpg)
9. 【选择】形状图层,打开【图层样式】-【渐变叠加】,渐变颜色如图示,具体效果如图示。
![](http://pic.huke88.com/upload/content/2018/01/31/15173939619176.jpg)
10. 【复制】图层样式,【粘贴】至另一个形状图层,打开【图层样式】,修改【渐变叠加】,具体渐变颜色如图示。具体效果如图示。
![](http://pic.huke88.com/upload/content/2018/01/31/15173939671604.jpg)
11. 使用【文字工具】,大小26PX,【颜色】白色,输入文字,排列至圆角矩形中间位置。具体效果如图示。
![](http://pic.huke88.com/upload/content/2018/01/31/151739397319.jpg)
12. 【复制】矩形2图层,调整大小,排列至合适的位置,【羽化边缘】6PX,【不透明度】70%。具体效果如图示。