網頁設計思路：如何快速完成扁平化中秋節網頁專題（制作篇）

【聲明】作者：@酷coo豆 ，首發于知乎： https:// zhuanlan.zhihu.com/p/22 725875 。同步刊載于：平面設計學習日記網（ 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=1amp;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 。視頻中每一個精雕細琢的操作技法，都能讓你瞬間學會， 整套走下來相信你能領悟到更多。 更多網頁設計視頻教程gt;gt;

上篇內容，原計劃最遲在2016年9月25號可以發布出來，卻因@酷coo豆的電腦故障返廠維修給再次給耽擱了，后來＠酷coo豆忍痛拖著卡頓的筆記本用PS做完文章配圖，終于把這篇教程完整地如數補上，瞬間感覺如釋重負。再次感謝你的閱讀！

（完）

最后歡迎你從知乎直接轉發分享本文，到新浪微博或微信，轉載請聯系授權。你的支持是我創作的最大動力。