網(wǎng)頁設(shè)計(jì)思路：如何快速完成扁平化中秋節(jié)網(wǎng)頁專題（制作篇）

時(shí)間：2022-08-29 00:33:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2022-08-29 00:33:02 來源：網(wǎng)站運(yùn)營

【聲明】作者：@酷coo豆 ，首發(fā)于本站：https://zhuanlan.zhihu.com/p/22725875。同步刊載于：平面設(shè)計(jì)學(xué)習(xí)日記網(wǎng)（http://www.xxriji.cn/）。本文僅供交流學(xué)習(xí)，轉(zhuǎn)載請(qǐng)聯(lián)系授權(quán)，感謝您對(duì)作者版權(quán)的尊重。

未經(jīng)授權(quán)禁止一切轉(zhuǎn)載、修改、商用或培訓(xùn)，盜用將對(duì)其嚴(yán)厲追究法律責(zé)任。（本文已委托維權(quán)騎士對(duì)侵權(quán)方采取嚴(yán)厲的維權(quán)行動(dòng)）。

在上篇《網(wǎng)頁設(shè)計(jì)思路：如何快速完成扁平化中秋節(jié)網(wǎng)頁專題制作（理論篇）》，@酷coo豆給小伙伴們分享了，初次設(shè)計(jì)制作網(wǎng)頁專題頁面所需的預(yù)備知識(shí)。包括網(wǎng)頁專題內(nèi)容梳理、結(jié)構(gòu)安排以及經(jīng)驗(yàn)尺寸三個(gè)方面，本篇平面設(shè)計(jì)學(xué)習(xí)日記則與大家分享其具體制作流程，再現(xiàn)其設(shè)計(jì)思路。

第一步：發(fā)散思維，挖掘視覺表現(xiàn)元素

本次案例為“扁平化中秋節(jié)網(wǎng)頁專題”，其主要關(guān)鍵字自然是“中秋節(jié)”。由此最能想到的具象元素就是“月亮/月球”。由此深入聯(lián)想到“嫦娥”、“玉兔”、“月餅”等。而“中秋節(jié)”是一個(gè)極具中國傳統(tǒng)文化色彩的節(jié)日，由此發(fā)散思維聯(lián)想到“中國風(fēng)”、“中式底紋/花紋”、“祥云”、“書法墨跡”等一些列的傳統(tǒng)節(jié)日素材，以及在中國山水畫里最常見的“荷花/荷葉”、“竹子/竹葉”等這些物象。有了這個(gè)聯(lián)想的過程，能為我們快速打造中秋節(jié)網(wǎng)頁專題提供必要條件。雖然這些素材不一定都用得到，但在我們制作過程中想要去豐富版面內(nèi)容時(shí)，更能夠做到信手拈來。

第二步：初步構(gòu)圖，完成主圖部分設(shè)計(jì)

軟件未啟，思路先行。在動(dòng)手做之前，先放空腦袋多想一會(huì)兒，準(zhǔn)是沒錯(cuò)的。在有了一些備選的視覺元素后，我們得想辦法，把它們有機(jī)地拼合到一個(gè)畫面中來，并使其平衡協(xié)調(diào)，這個(gè)過程也就是“初步構(gòu)圖”。此階段可以借助花瓣網(wǎng)，搜索關(guān)鍵字“中秋”，大量參考其他設(shè)計(jì)師的優(yōu)秀作品，可從中汲取其構(gòu)圖、配色技巧等，好的地方可合理借鑒，運(yùn)用到自己的作品中來。@酷coo豆一直覺得任何設(shè)計(jì)都不是閉門造車，設(shè)計(jì)可以很酷但不只是為了耍帥，設(shè)計(jì)很難十全十美，但是必須得滿足剛需。設(shè)計(jì)的本質(zhì)終究是為人民服務(wù)！學(xué)會(huì)站在巨人肩膀上，你將看得更遠(yuǎn)。

@酷coo豆在制作之初希望構(gòu)建一個(gè)有故事、有畫面感的場(chǎng)景，在參考了一些素材后獲得的靈感在加上自己臨時(shí)get到的一些想法，將其融入到了1920*850px大小的畫面之中，其最終畫面構(gòu)圖如下：

解讀：在山清水秀的畫面中，皓月當(dāng)空，流星在天際邊畫出一個(gè)個(gè)璀璨的同心圓。秋風(fēng)輕撫把湖邊的竹葉吹下，灑落在湖面激起層層浪花，午夜臨近湖面的霧水自下而上徐徐騰起，山的那邊今晚依舊燈火通明，家人團(tuán)聚共賞中秋佳月。此時(shí)，天空中多了幾只徘徊著的大雁，正準(zhǔn)備結(jié)伴而行，飛往南方，這也暗示著深秋即將來臨。

在色調(diào)上選了對(duì)比強(qiáng)烈的橙藍(lán)色調(diào)。將中秋節(jié)優(yōu)惠活動(dòng)主標(biāo)題文字放置在月亮上面，活動(dòng)優(yōu)惠獎(jiǎng)品被托于荷葉之上（此法用得很普遍）。并在畫面中適當(dāng)?shù)奶砑友b飾云朵、紛飛竹葉、燈籠，以完成banner 的設(shè)計(jì)。

第三步：收集素材，去哪收集才是重點(diǎn)

構(gòu)圖的思路已然清晰明了，接下來，就該按圖索驥去尋找素材，以完成畫面的制作，畢竟巧婦難為無米之炊。畫面中的關(guān)鍵素材是扁平化的燈籠、荷花、竹葉、月亮。而湖面、山峰、云朵、霧氣，這類扁平化的素材，可直接在軟件中繪制，對(duì)于有一定PS軟件基礎(chǔ)的同學(xué)來說，這個(gè)還是相對(duì)容易的。


對(duì)于搜索素材用這四個(gè)網(wǎng)站就足夠了：

綜合類素材網(wǎng)：

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

千圖網(wǎng)：http://www.58pic.com/

PNG免扣素材網(wǎng)：

千庫網(wǎng)：http://588ku.com/?hd=1&r=61119

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


一個(gè)一個(gè)關(guān)鍵字輪回上場(chǎng)，對(duì)收集到的素材下載后做好命名整理。如果一個(gè)關(guān)鍵詞搜出的圖片不理想，可換個(gè)近義詞再試試。通過上述三個(gè)網(wǎng)站搜索“中秋節(jié)”等系列關(guān)鍵詞，最終整理得到的備用素材如下：

在收集素材過程中，無意中搜到了下面這個(gè)素材↓↓↓的。其非常符合本次扁平化風(fēng)格的定位，所以果斷下載。

素材是EPS格式的矢量素材，需要在AI對(duì)其打散編組，單獨(dú)把每一朵荷花部分提取出來，拖動(dòng)到PS軟件中，配合PS，刪除荷花輪廓邊緣以外的陰影，以便更好地使用。如果對(duì)Ai軟件不熟悉，@酷coo豆推薦你系統(tǒng)學(xué)習(xí)一下illustrator新手輕松入門教程，不要讓軟件技法成為你的軟肋。

第四步：制作首屏bannerb部分及網(wǎng)頁背景

點(diǎn)擊上圖↑↑↑查看GIF圖片。

1. 用矩形工具拉出兩個(gè)矩形，分別表示天空與湖面，填充漸變顏色加以區(qū)分。并用鋼筆工具繪制層疊起伏的山峰，放置在水天交接處，填充漸變色：上淺色下深，并降低圖層不透明度，使山巒上下疊加交錯(cuò)，更顯層次。

2. 用橢圓工具結(jié)合圖層樣式，繪制出今晚要賞的主角——“月亮”，放置在畫面中間，使其沖出畫面，避免呆板。

3.在山巒圖層以下繪制一個(gè)個(gè)的同心圓，填充白色，圖層模式改為疊加。適當(dāng)調(diào)整不透明度，配合蒙版擦出流星運(yùn)行軌跡的的感覺來。

4. 將上面收集到的荷花、荷葉素材，調(diào)整好透視關(guān)系，將消失點(diǎn)大致調(diào)整至指向中央較亮區(qū)域即可，使其錯(cuò)落有致地隨機(jī)放置在湖面中。并將此次活動(dòng)禮品，放置在中部的荷葉上，記住要遵循遠(yuǎn)大近小的基本視覺規(guī)則。

5. 將燈籠素材對(duì)稱地排列在月亮兩邊，一大一小形成對(duì)比，加入文字信息，并拖入竹子素材，扣取幾片竹葉，適當(dāng)高斯/動(dòng)感模糊點(diǎn)綴飄散在畫面中，提升畫面動(dòng)感。

6. 最后繪制添加水波、浪花、霧氣、云朵等小元素以豐富版面，整體調(diào)色，完成banner的制作。

7. 背景部分填充藍(lán)色，并平鋪祥云底紋對(duì)其疊加較深的藍(lán)色，以突顯出紋理質(zhì)感。參考數(shù)值，背景：#012455，紋理：#01214f。

第五步：排版活動(dòng)優(yōu)惠內(nèi)容

這部分內(nèi)容的制作可稱之為蓋樓，每一樓層的樣式大致相同，制作時(shí)只要準(zhǔn)遵循平面設(shè)計(jì)四大基本規(guī)則，即將內(nèi)容按照重復(fù)、對(duì)齊、對(duì)比以及親密性的規(guī)則進(jìn)行排版，遵循三大構(gòu)成的設(shè)計(jì)基礎(chǔ)，用線條或矩形將內(nèi)容分區(qū)整理，使其清晰可讀即可。

三大構(gòu)成中點(diǎn)線面的運(yùn)用↓↓↓：

比如統(tǒng)一的標(biāo)題樣式及居中對(duì)齊方式、統(tǒng)一的邊框樣式、各板塊劃分有著統(tǒng)一的間隔間距、以及統(tǒng)一的按鈕布置位置、重復(fù)的數(shù)字01、02、03也表現(xiàn)出強(qiáng)烈的秩序感。后續(xù)@酷coo豆將通過例外一個(gè)工作案例來統(tǒng)一總結(jié)下4大規(guī)則的具體運(yùn)用。歡迎持續(xù)關(guān)注「平面設(shè)計(jì)學(xué)習(xí)日記 - 本站專欄」。

↓↓↓參考圖：參見：http://www.xxriji.cn/zp8.html，

（注：專題頁面的制作通常都是以追求點(diǎn)擊、下單或者注冊(cè)為目的，而家裝公司則是以咨詢預(yù)約為主。這里的預(yù)約咨詢也就是上一文提到的參與入口。）

最后，以顏色較亮的藍(lán)色為背景并疊加祥云紋理，與主題優(yōu)惠內(nèi)容區(qū)分開來。放置企業(yè)榮譽(yù)相關(guān)內(nèi)容，以完成本次專業(yè)頁面制作。

第六步：出圖蓋印、增加清晰度

在出圖前，記得通篇檢查一下文字內(nèi)容，是否有漏字、重字，整體顏色是否協(xié)調(diào)，是否需要微調(diào)。確認(rèn)無誤后，在輸出圖像前記得做清晰處理，即利用高反差保留，配合線性疊加模式來銳化圖像邊緣，以使圖像獲得更好的視覺效果。

高反差保留對(duì)比示意圖：(請(qǐng)點(diǎn)擊圖片后，拖動(dòng)到圖片到新窗口查看對(duì)比圖。)

具體步驟：在最上方圖層按下Ctrl+Alt+Shift+E，蓋印所有圖層。然后Ctrl+J復(fù)制剛剛的蓋印圖層作為疊加層，執(zhí)行濾鏡——高反差保留——數(shù)值：0.3px——更改圖層混合模式：線性光——調(diào)整圖層不透明度：15%。再次Ctrl+Shift+Alt+E，蓋印所有圖層。切圖輸出，打包給程序哥哥。制作完畢！

拓展閱讀

@酷coo豆在工作之余整理出這五千余字的文字教程，時(shí)間拖得較長(zhǎng)，但其要陳述的思路總算是給理清了的。兩篇文字教程側(cè)設(shè)計(jì)思路及制作流程，對(duì)于其在PS軟件中的具體操作技法涉及較少。

如果你有一定的軟件基礎(chǔ)，想要更深入地學(xué)習(xí)網(wǎng)頁設(shè)計(jì)可以參考，騰訊設(shè)計(jì)師Gordan錄制的：《網(wǎng)頁設(shè)計(jì)高級(jí)教程》。Gordan老師作為實(shí)戰(zhàn)型導(dǎo)師，其有著豐富的品牌、交互、用戶體驗(yàn)、WebUI、 手機(jī)移動(dòng)端、圖標(biāo)等設(shè)計(jì)經(jīng)驗(yàn)。曾就職于3G門戶、網(wǎng)易、4399、騰訊等國內(nèi)大型互聯(lián)網(wǎng)公司，擅長(zhǎng)字體設(shè)計(jì)，產(chǎn)品創(chuàng)意與功能設(shè)計(jì)。DNF游戲御用設(shè)計(jì)師，代表作品：DNF7周年，重走勇士之路。他的站酷：http://www.zcool.com.cn/u/580291。視頻中每一個(gè)精雕細(xì)琢的操作技法，都能讓你瞬間學(xué)會(huì)， 整套走下來相信你能領(lǐng)悟到更多。更多網(wǎng)頁設(shè)計(jì)視頻教程>>

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


（完）

最后歡迎你從本站直接轉(zhuǎn)發(fā)分享本文，到新浪微博或微信，轉(zhuǎn)載請(qǐng)聯(lián)系授權(quán)。你的支持是我創(chuàng)作的最大動(dòng)力。