网页设计思路：如何快速完成扁平化中秋节网页专题（制作篇）

时间：2022-08-29 00:33:02 | 来源：网站运营

时间：2022-08-29 00:33:02 来源：网站运营

【声明】作者：@酷coo豆 ，首发于本站：https://zhuanlan.zhihu.com/p/22725875。同步刊载于：平面设计学习日记网（http://www.xxriji.cn/）。本文仅供交流学习，转载请联系授权，感谢您对作者版权的尊重。

未经授权禁止一切转载、修改、商用或培训，盗用将对其严厉追究法律责任。（本文已委托维权骑士对侵权方采取严厉的维权行动）。

在上篇《网页设计思路：如何快速完成扁平化中秋节网页专题制作（理论篇）》，@酷coo豆给小伙伴们分享了，初次设计制作网页专题页面所需的预备知识。包括网页专题内容梳理、结构安排以及经验尺寸三个方面，本篇平面设计学习日记则与大家分享其具体制作流程，再现其设计思路。

第一步：发散思维，挖掘视觉表现元素

本次案例为“扁平化中秋节网页专题”，其主要关键字自然是“中秋节”。由此最能想到的具象元素就是“月亮/月球”。由此深入联想到“嫦娥”、“玉兔”、“月饼”等。而“中秋节”是一个极具中国传统文化色彩的节日，由此发散思维联想到“中国风”、“中式底纹/花纹”、“祥云”、“书法墨迹”等一些列的传统节日素材，以及在中国山水画里最常见的“荷花/荷叶”、“竹子/竹叶”等这些物象。有了这个联想的过程，能为我们快速打造中秋节网页专题提供必要条件。虽然这些素材不一定都用得到，但在我们制作过程中想要去丰富版面内容时，更能够做到信手拈来。

第二步：初步构图，完成主图部分设计

软件未启，思路先行。在动手做之前，先放空脑袋多想一会儿，准是没错的。在有了一些备选的视觉元素后，我们得想办法，把它们有机地拼合到一个画面中来，并使其平衡协调，这个过程也就是“初步构图”。此阶段可以借助花瓣网，搜索关键字“中秋”，大量参考其他设计师的优秀作品，可从中汲取其构图、配色技巧等，好的地方可合理借鉴，运用到自己的作品中来。@酷coo豆一直觉得任何设计都不是闭门造车，设计可以很酷但不只是为了耍帅，设计很难十全十美，但是必须得满足刚需。设计的本质终究是为人民服务！学会站在巨人肩膀上，你将看得更远。

@酷coo豆在制作之初希望构建一个有故事、有画面感的场景，在参考了一些素材后获得的灵感在加上自己临时get到的一些想法，将其融入到了1920*850px大小的画面之中，其最终画面构图如下：

解读：在山清水秀的画面中，皓月当空，流星在天际边画出一个个璀璨的同心圆。秋风轻抚把湖边的竹叶吹下，洒落在湖面激起层层浪花，午夜临近湖面的雾水自下而上徐徐腾起，山的那边今晚依旧灯火通明，家人团聚共赏中秋佳月。此时，天空中多了几只徘徊着的大雁，正准备结伴而行，飞往南方，这也暗示着深秋即将来临。

在色调上选了对比强烈的橙蓝色调。将中秋节优惠活动主标题文字放置在月亮上面，活动优惠奖品被托于荷叶之上（此法用得很普遍）。并在画面中适当的添加装饰云朵、纷飞竹叶、灯笼，以完成banner 的设计。

第三步：收集素材，去哪收集才是重点

构图的思路已然清晰明了，接下来，就该按图索骥去寻找素材，以完成画面的制作，毕竟巧妇难为无米之炊。画面中的关键素材是扁平化的灯笼、荷花、竹叶、月亮。而湖面、山峰、云朵、雾气，这类扁平化的素材，可直接在软件中绘制，对于有一定PS软件基础的同学来说，这个还是相对容易的。


对于搜索素材用这四个网站就足够了：

综合类素材网：

站酷素材：http://sucai.zcool.com.cn/

千图网：http://www.58pic.com/

PNG免扣素材网：

千库网：http://588ku.com/?hd=1&r=61119

觅元素：http://www.51yuansu.com/?z=lrrskpdtm


一个一个关键字轮回上场，对收集到的素材下载后做好命名整理。如果一个关键词搜出的图片不理想，可换个近义词再试试。通过上述三个网站搜索“中秋节”等系列关键词，最终整理得到的备用素材如下：

在收集素材过程中，无意中搜到了下面这个素材↓↓↓的。其非常符合本次扁平化风格的定位，所以果断下载。

素材是EPS格式的矢量素材，需要在AI对其打散编组，单独把每一朵荷花部分提取出来，拖动到PS软件中，配合PS，删除荷花轮廓边缘以外的阴影，以便更好地使用。如果对Ai软件不熟悉，@酷coo豆推荐你系统学习一下illustrator新手轻松入门教程，不要让软件技法成为你的软肋。

第四步：制作首屏bannerb部分及网页背景

点击上图↑↑↑查看GIF图片。

1. 用矩形工具拉出两个矩形，分别表示天空与湖面，填充渐变颜色加以区分。并用钢笔工具绘制层叠起伏的山峰，放置在水天交接处，填充渐变色：上浅色下深，并降低图层不透明度，使山峦上下叠加交错，更显层次。

2. 用椭圆工具结合图层样式，绘制出今晚要赏的主角——“月亮”，放置在画面中间，使其冲出画面，避免呆板。

3.在山峦图层以下绘制一个个的同心圆，填充白色，图层模式改为叠加。适当调整不透明度，配合蒙版擦出流星运行轨迹的的感觉来。

4. 将上面收集到的荷花、荷叶素材，调整好透视关系，将消失点大致调整至指向中央较亮区域即可，使其错落有致地随机放置在湖面中。并将此次活动礼品，放置在中部的荷叶上，记住要遵循远大近小的基本视觉规则。

5. 将灯笼素材对称地排列在月亮两边，一大一小形成对比，加入文字信息，并拖入竹子素材，扣取几片竹叶，适当高斯/动感模糊点缀飘散在画面中，提升画面动感。

6. 最后绘制添加水波、浪花、雾气、云朵等小元素以丰富版面，整体调色，完成banner的制作。

7. 背景部分填充蓝色，并平铺祥云底纹对其叠加较深的蓝色，以突显出纹理质感。参考数值，背景：#012455，纹理：#01214f。

第五步：排版活动优惠内容

这部分内容的制作可称之为盖楼，每一楼层的样式大致相同，制作时只要准遵循平面设计四大基本规则，即将内容按照重复、对齐、对比以及亲密性的规则进行排版，遵循三大构成的设计基础，用线条或矩形将内容分区整理，使其清晰可读即可。

三大构成中点线面的运用↓↓↓：

比如统一的标题样式及居中对齐方式、统一的边框样式、各板块划分有着统一的间隔间距、以及统一的按钮布置位置、重复的数字01、02、03也表现出强烈的秩序感。后续@酷coo豆将通过例外一个工作案例来统一总结下4大规则的具体运用。欢迎持续关注「平面设计学习日记 - 本站专栏」。

↓↓↓参考图：参见：http://www.xxriji.cn/zp8.html，

（注：专题页面的制作通常都是以追求点击、下单或者注册为目的，而家装公司则是以咨询预约为主。这里的预约咨询也就是上一文提到的参与入口。）

最后，以颜色较亮的蓝色为背景并叠加祥云纹理，与主题优惠内容区分开来。放置企业荣誉相关内容，以完成本次专业页面制作。

第六步：出图盖印、增加清晰度

在出图前，记得通篇检查一下文字内容，是否有漏字、重字，整体颜色是否协调，是否需要微调。确认无误后，在输出图像前记得做清晰处理，即利用高反差保留，配合线性叠加模式来锐化图像边缘，以使图像获得更好的视觉效果。

高反差保留对比示意图：(请点击图片后，拖动到图片到新窗口查看对比图。)

具体步骤：在最上方图层按下Ctrl+Alt+Shift+E，盖印所有图层。然后Ctrl+J复制刚刚的盖印图层作为叠加层，执行滤镜——高反差保留——数值：0.3px——更改图层混合模式：线性光——调整图层不透明度：15%。再次Ctrl+Shift+Alt+E，盖印所有图层。切图输出，打包给程序哥哥。制作完毕！

拓展阅读

@酷coo豆在工作之余整理出这五千余字的文字教程，时间拖得较长，但其要陈述的思路总算是给理清了的。两篇文字教程侧设计思路及制作流程，对于其在PS软件中的具体操作技法涉及较少。

如果你有一定的软件基础，想要更深入地学习网页设计可以参考，腾讯设计师Gordan录制的：《网页设计高级教程》。Gordan老师作为实战型导师，其有着丰富的品牌、交互、用户体验、WebUI、 手机移动端、图标等设计经验。曾就职于3G门户、网易、4399、腾讯等国内大型互联网公司，擅长字体设计，产品创意与功能设计。DNF游戏御用设计师，代表作品：DNF7周年，重走勇士之路。他的站酷：http://www.zcool.com.cn/u/580291。视频中每一个精雕细琢的操作技法，都能让你瞬间学会， 整套走下来相信你能领悟到更多。更多网页设计视频教程>>

上篇内容，原计划最迟在2016年9月25号可以发布出来，却因@酷coo豆的电脑故障返厂维修给再次给耽搁了，后来＠酷coo豆忍痛拖着卡顿的笔记本用PS做完文章配图，终于把这篇教程完整地如数补上，瞬间感觉如释重负。再次感谢你的阅读！


（完）

最后欢迎你从本站直接转发分享本文，到新浪微博或微信，转载请联系授权。你的支持是我创作的最大动力。