让网站运营更简单
让搜索引擎更喜欢的网站
立即咨询
福利，定制网站送小程序， 名额有限，先到先得
未经授权禁止一切转载、修改、商用或培训，盗用将对其严厉追究法律责任（本文已委托维权骑士对侵权方采取严厉的维权行动）在上篇《网页设计思路：如何快速完成扁平化中秋节网页专题制作（理论篇）》，@酷coo豆给小伙伴们分享了，初次设计制作网页专题页面所需的预备知识。
包括网页专题内容梳理、结构安排以及经验尺寸三个方面，本篇平面设计学习日记则与大家分享其具体制作流程，再现其设计思路第一步：发散思维，挖掘视觉表现元素
本次案例为“扁平化中秋节网页专题”，其主要关键字自然是“中秋节”由此最能想到的具象元素就是“月亮/月球”由此深入联想到 “嫦娥”、“玉兔”、“月饼”等而“中秋节”是一个极具中国传统文化色彩的节日，由此发散思维联想到“中国风”、“中式底纹/花纹”、“祥云”、“书法墨迹”等一些列的传统节日素材，以及在中国山水画里最常见的“荷花/荷叶”、“竹子/竹叶”等这些物象。
有了这个联想的过程，能为我们快速打造中秋节网页专题提供必要条件虽然这些素材不一定都用得到，但在我们制作过程中想要去丰富版面内容时，更能够做到信手拈来 第二步：初步构图，完成主图部分设计
软件未启，思路先行在动手做之前，先放空脑袋多想一会儿，准是没错的在有了一些备选的视觉元素后，我们得想办法，把它们有机地拼合到一个画面中来，并使其平衡协调，这个过程也就是“初步构图”此阶段可以借助花瓣网，搜索关键字“中秋”，大量参考其他设计师的优秀作品，可从中汲取其构图、配色技巧等，好的地方可合理借鉴，运用到自己的作品中来。
@酷coo豆一直觉得任何设计都不是闭门造车，设计可以很酷但不只是为了耍帅，设计很难十全十美，但是必须得满足刚需设计的本质终究是为人民服务！学会站在巨人肩膀上，你将看得更远
@酷coo豆在制作之初希望构建一个有故事、有画面感的场景，在参考了一些素材后获得的灵感在加上自己临时get到的一些想法，将其融入到了1920*850px大小的画面之中，其最终画面构图如下：
解读：在山清水秀的画面中，皓月当空，流星在天际边画出一个个璀璨的同心圆秋风轻抚把湖边的竹叶吹下，洒落在湖面激起层层浪花，午夜临近湖面的雾水自下而上徐徐腾起，山的那边今晚依旧灯火通明，家人团聚共赏中秋佳月。
此时，天空中多了几只徘徊着的大雁，正准备结伴而行，飞往南方，这也暗示着深秋即将来临在色调上选了对比强烈的橙蓝色调将中秋节优惠活动主标题文字放置在月亮上面，活动优惠奖品被托于荷叶之上（此法用得很普遍）并在画面中适当的添加装饰云朵、纷飞竹叶、灯笼，以完成banner 的设计。
第三步：收集素材，去哪收集才是重点
构图的思路已然清晰明了，接下来，就该按图索骥去寻找素材，以完成画面的制作，毕竟巧妇难为无米之炊画面中的关键素材是扁平化的灯笼、荷花、竹叶、月亮而湖面、山峰、云朵、雾气，这类扁平化的素材，可直接在软件中绘制，对于有一定。
tm一个一个关键字轮回上场，对收集到的素材下载后做好命名整理。
如果一个关键词搜出的图片不理想，可换个近义词再试试通过上述三个网站搜索“中秋节”等系列关键词，最终整理得到的备用素材如下：
在收集素材过程中，无意中搜到了下面这个素材↓↓↓的。其非常符合本次扁平化风格的定位，所以果断下载。
素材是EPS格式的矢量素材，需要在AI对其打散编组，单独把每一朵荷花部分提取出来，拖动到PS软件中，配合PS，删除荷花轮廓边缘以外的阴影，以便更好地使用如果对Ai软件不熟悉，@酷coo豆推荐你系统学习一下。
illustrator新手轻松入门教程，不要让软件技法成为你的软肋。 第四步：制作首屏bannerb部分及网页背景
点击上图↑↑↑查看GIF图片1. 用矩形工具拉出两个矩形，分别表示天空与湖面，填充渐变颜色加以区分并用钢笔工具绘制层叠起伏的山峰，放置在水天交接处，填充渐变色：上浅色下深，并降低图层不透明度，使山峦上下叠加交错，更显层次。
2. 用椭圆工具结合图层样式，绘制出今晚要赏的主角——“月亮”，放置在画面中间，使其冲出画面，避免呆板3.在山峦图层以下绘制一个个的同心圆，填充白色，图层模式改为叠加适当调整不透明度，配合蒙版擦出流星运行轨迹的的感觉来。
4. 将上面收集到的荷花、荷叶素材，调整好透视关系，将消失点大致调整至指向中央较亮区域即可，使其错落有致地随机放置在湖面中。并将此次活动礼品，放置在中部的荷叶上，记住要遵循远大近小的基本视觉规则。
5. 将灯笼素材对称地排列在月亮两边，一大一小形成对比，加入文字信息，并拖入竹子素材，扣取几片竹叶，适当高斯/动感模糊点缀飘散在画面中，提升画面动感6. 最后绘制添加水波、浪花、雾气、云朵等小元素以丰富版面，整体调色，完成banner的制作。
7. 背景部分填充蓝色，并平铺祥云底纹对其叠加较深的蓝色，以突显出纹理质感参考数值，背景：#012455，纹理：#01214f第五步：排版活动优惠内容这部分内容的制作可称之为盖楼，每一楼层的样式大致相同，制作时只要准遵循平面设计四大基本规则，即将内容按照重复、对齐、对比以及亲密性的规则进行排版，遵循三大构成的设计基础，用线条或矩形将内容分区整理，使其清晰可读即可。
三大构成中点线面的运用↓↓↓：
比如统一的标题样式及居中对齐方式、统一的边框样式、各板块划分有着统一的间隔间距、以及统一的按钮布置位置、重复的数字01、02、03也表现出强烈的秩序感后续@酷coo豆将通过例外一个工作案例来统一总结下4大规则的具体运用。
与主题优惠内容区分开来放置企业荣誉相关内容，以完成本次专业页面制作。
第六步：出图盖印、增加清晰度在出图前，记得通篇检查一下文字内容，是否有漏字、重字，整体颜色是否协调，是否需要微调确认无误后，在输出图像前记得做清晰处理，即利用高反差保留，配合线性叠加模式来锐化图像边缘，以使图像获得更好的视觉效果。
高反差保留对比示意图：(请点击图片后，拖动到图片到新窗口查看对比图。)
具体步骤：在最上方图层按下Ctr
再次Ctrl+Shift+Alt+E，盖印所有图层切图输出，打包给程序哥哥制作完毕！拓展阅读@酷coo豆在工作之余整理出这五千余字的文字教程，时间拖得较长，但其要陈述的思路总算是给理清了的两篇文字教程侧设计思路及制作流程，对于其在PS软件中的具体操作技法涉及较少。
如果你有一定的软件基础，想要更深入地学习网页设计可以参考，腾讯设计师Gordan录制的：《网页设计高级教程》Gordan老师作为实战型导师，其有着丰富
曾就职于3G门户、网易、4399、腾讯等国内大型互联网公司，擅长字体设计，产品创意与功能设计DNF游戏御用设计师，代表作品：DNF7周
视频中每一个精雕细琢的操作技法，都能让你瞬间学会， 整套走下来相信你能领悟到更多更多网页设计视频教程>>上篇重负。
再次感谢你的阅读！（完）
本文图文来源于网络，版权属于原作者或网站，内容为作者观点，内容版权归原作者所有、本站不对文章中的任何观点负责，内容只用于提供信息阅读，无任何商业用途。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站（文章、图片、音频、视频）有涉嫌抄袭侵权/违法违规的内容，请联系管理员，一经查实，将立刻删除、维护您的正当权益。
扫一扫，关注我们
