网页制作关于一款详情页设计制作的9个主要流程，适用于零基础的学员，不会美工设计和网页设计的同学，可以跟着保定淘宝美工培训来学习。

1.确定页面风格

页面风格主要是根据产品本身来定的，如产品的属性、产品功能等。如果产品没有特定的风格属性，可以根据目标销售人群、季节、节日或主题活动来定。

2.产品和素材搜集

前期实拍素材，进行整理和分类。同时，设计师日常也要整理搜集自己的素材库，每一个优秀的设计师的电脑里面都会存储大量的设计素材。

3.构架布局框架

根据文案内容，结合实际产品，进行有效的布局建立,可以从下面八个方面入手操作：
（1）产品海报——引起注意。

（2）产品全景——提升兴趣。

（3）痛点挖掘——拉近客户。

（4）卖点优势——体现产品价值。

（5）产品属性功能——提升兴趣，了解产品。

（6）产品细节展示——提升兴趣，了解产品。

（7）检测报告——建立信任。

（8）好评分享展示——进一步加强购买欲望。

   4.确定配色方案

已有店铺视觉规范的可以直接延续使用。如果没有，可以从产品本身提取，或者从LOGO中提取或从产品联想属性提取。在之前的内容中，我们也详细讲解过配色的提取方法，可以参照使用。

5.选择合适字体类型

   字体相当于一个桥梁，相当重要。主要用来对产品进行解释说明，方便顾问阅读，同时，也是重要信息的引导作用。

字体注意事项：

（1）一般不超过3种字体。

（2）重点部分加粗突出。

（3）字体颜色的深浅，不要太复杂，以免影响阅读。

（4）选择符合产品定位的字体。

（5）字号大小使用得体，不宜过大或过小等。

6.Photoshop排版设计制作

整个详情页制作在Photoshop软件里实现。怎么对图片和文案内容进行排版设置，要考验美工设计的水平。越是简约大气的页面，元素务必不要太多，清爽舒适的页面多留白，参考优秀案例，多多借鉴和学习。学习是没有止境的，同样，详情页的设计排版也是。多学习，多总结，扩展想法，拓展思维，建立自己的设计风格。

7.修改定稿

把制作首稿输出JPG格式给老板或者运营进行阅稿审核，如不符合要求，进行局部修改。也可以参考不同的意见进行优化处理，直至定稿保存为止。

8.切片和优化页面存储

设计师设计制作后的详情页往往是一张图，高度可能达上万像素，而我们在网上浏览的图是经过Photoshop切片功能进行切图后呈现出来的。如果一张数几十MB的图像直接上传淘宝店铺，网络加载速度会慢，用户体验差，所以，要进行图片切割优化。

9.上传淘宝店铺

当我们前期把所有工作完成之后，就要把切片好的详情页图逐一上传到淘宝图片空间，在发布新宝贝时候，就可以使用我们制作的详情页图了。