1、本节课讲解电商APP首页-今日推荐、一周热门,本节课中用到的素材,会放置在素材包内,请各位学员点击右侧黄色按钮自行下载安装。
![](https://pic.huke88.com/image/000/000/000/F9A309CC-8527-31E4-7D2E-296F667EBFE6.png!/format/jpg/compress/true/fwfh/293x179)
2、首先我们打开下载好的工程文件,继续解析,如图所示。
![](https://pic.huke88.com/image/000/000/000/F9A309CC-8527-31E4-7D2E-296F667EBFE6.png!/format/jpg/compress/true/fwfh/293x179)
3、然后新建一个画布,这里我们按照苹果7尺寸来制作,如图所示。
![](https://pic.huke88.com/image/000/000/000/F9A309CC-8527-31E4-7D2E-296F667EBFE6.png!/format/jpg/compress/true/fwfh/293x179)
4、在40的像素的地方调整为一个标尺参考线,如图所示。
![](https://pic.huke88.com/image/000/000/000/F9A309CC-8527-31E4-7D2E-296F667EBFE6.png!/format/jpg/compress/true/fwfh/293x179)
5、将下载好的顶部状态栏载入进来,如图所示。
![](https://pic.huke88.com/image/000/000/000/F9A309CC-8527-31E4-7D2E-296F667EBFE6.png!/format/jpg/compress/true/fwfh/293x179)
6、然后调整一个像素88的导航栏,如图所示。
![](https://pic.huke88.com/image/000/000/000/F9A309CC-8527-31E4-7D2E-296F667EBFE6.png!/format/jpg/compress/true/fwfh/293x179)
7、使用【文本】工具,输入文字像素为60,如图所示。
![](https://pic.huke88.com/image/000/000/000/F9A309CC-8527-31E4-7D2E-296F667EBFE6.png!/format/jpg/compress/true/fwfh/293x179)
8、将下载好的图标载入进来,如图所示。
![](https://pic.huke88.com/image/000/000/000/F9A309CC-8527-31E4-7D2E-296F667EBFE6.png!/format/jpg/compress/true/fwfh/293x179)
9、在【图层样式】中设置一个【颜色叠加】效果,如图所示。
![](https://pic.huke88.com/image/000/000/000/F9A309CC-8527-31E4-7D2E-296F667EBFE6.png!/format/jpg/compress/true/fwfh/293x179)
10、我们使用形状工具,创建一个矩形,如图所示。
![](https://pic.huke88.com/image/000/000/000/F9A309CC-8527-31E4-7D2E-296F667EBFE6.png!/format/jpg/compress/true/fwfh/293x179)