如何設計溫情動人風格的母親節活動專題頁？

愛生活！愛設計！

母親節即將到來，小編隱約感覺又有一大波借勢營銷的海報正在趕來的路上。作為電商設計師，手裡的PS是不是已經饑渴難耐了？是不是很想趁著節日，用海報來搞一個大事情？

春節、情人節、女神節、五一勞動節……盤點上半年的節假日，借勢海報是各大商家營銷戰中的作戰利器，借勢海報的優劣決定人氣好低，也決定了設計師的獎金有無。看過那麼多大咖設計的作品，自己動手的時候卻無從下手、窮於思路。

想不想在各種節日的營銷設計中脫穎而出？小編給你一本秘籍，升職加薪不用愁~

實戰：母親節活動專題頁面設計

素材網盤鏈接：

https://pan.baidu.com/s/11Y0ZvlnBGVJu5rVzfSGGog

設計思路

1.分析術

母親節是一個濃烈而又溫馨的節日，在筆者的記憶中，許多人在母親節這一天都會手捧鮮花送給自己的母親。說來慚愧，我還不曾在這一天給母親送過任何禮物。我想通過這次設計，把自己的情感融入畫面。

運營給的需求建議是，想讓活動更有人情味、更動情，區別於其他電商平台的母親節設計，削弱打折促銷的活動氛圍。

2.整理術

??切入點

印象中有關母親節、父親節的這類專題，設計師大多都會選用帶有溫情感的圖像去烘托主題，帶入情感，但是這樣的表現形式有些傳統，而且由於畫面過於寫實而缺乏創新，不能表現出與眾不同。我想要做出具有溫情的畫面，以情動人，這些關鍵詞在我的腦海中一直閃現，眼前浮現的是節日當天，兒女們送康乃馨給母親的溫情畫面。

??關鍵詞

想到此不禁歡躍起來，「母愛之花」就是這個設計的切入點。畫面主元素用康乃馨來象徵母愛，表達出對所有母親的祝福，整理關鍵詞如圖所示。

TIPS:

以情動人的設計，需要設計師挖掘出最能喚起人們腦中深層印象的場景、物件等，使用最純粹的元素、細節、色彩將觀者帶入情感世界，使用溫情的畫面勾起人們內心深處的情感記憶。

頁面分析

1.配色方案

如圖所示，主色用純度較高的玫紅色，給人一種熱情而充滿活力的印象；輔色以淺黃色為主，淡雅而親切，更好地襯托主色與突出色的顏色特性；突出色用中明度、高純度的黃綠色，給人一種清新感。整體上給人傳達一種既溫馨熱烈，又有情懷的感覺。

2.頁面布局

頁面布局如圖所示。

繪製過程

??層疊文字效果處理

Step 01新建寬度為「980像素」，高度不限的畫布，背景顏色設置為奶油黃色（R:254，G:254，B:224），使用「橫排文字工具」在畫布上依次輸入英文字母「MOTHER” S DAY」，再使用「移動工具」選中所有字母，打開文字面板，設置字體為「Arial Rounded MT」，字型大小為217像素，將顏色設置為（R:255，G:54，B:82），調整字與字的距離。初步得到「層疊式」文字效果，如圖所示。

TIPS:

圖層就像堆疊起來的透明的圖畫，不同的圖畫上有著不同的內容。針對單獨圖層進行操作時，不會影響到其他圖層。最後將所有圖層疊加起來，通過移動各層圖畫的相對位置即可改變最後的合成效果。

Step 02在構圖設計中，橫平豎直的排版會使文字略顯呆板和普通，本案例中對所有字母做斜切式的設計，從構圖上打破平衡感，讓畫面更活潑、更具衝擊力。首先，對字母做變形處理，單擊「移動工具」並選中所有字母，按Ctrl+T快捷鍵進行調整，此時發現字體的四周有8個空心的角點，把滑鼠移動到字體右側，按Alt＋Shift快捷鍵，向右上角斜切6°，如圖4-36所示，按Enter鍵回車確認。

TIPS:

怎麼才能快速找到所要的圖層呢？

在Photoshop中先選擇「移動工具」，然後在工具條中勾選「自動選擇圖層」複選框即可。當有很多圖層時，可以通過移動工具，在所要選擇的內容上輕點一下，就會自動跳到所在的圖層。

怎麼才能快速選中多個圖層呢？

方法也是類似的，需要先勾選「自動選擇圖層」複選框，然後選擇「移動工具」，畫出一個選擇框，凡是在這個選擇框中的內容，都會被一起選中。

養成給文檔中的圖層命名和建立圖層組的習慣，一是通過圖層組的摺疊功能，有利於快速找到對應圖層，二是有利於完稿輸出前整理設計上的細節，把多餘的圖層扔掉，簡化設計，減小文件體積。

Step 03為了讓斜切的字母與背景間有層次的變化，給所有字母添加「投影」樣式，同時也增加了字母在畫面中的空間感，設置其「不透明度」為8%，「距離」為40%，「大小」為28%，參數設置如圖4-37所示，效果如圖如示。

Step 04通過上圖我們能看到，在給所有字母使用全局的投影樣式後，字母間的陰影區分並不明顯，影子像連在了一起，嚴重降低了字母的可觀賞性。這時，需要對字母的陰影再加工，讓其邊界更清晰、層疊的效果更強。下圖中圓圈所標的區域，就是我們需要著重處理的幾處。

TIPS:

做陰影的方法有哪些？

通過圖層樣式中的投影樣式來處理，通過設置「大小」「角度」「不透明度」等選項，可以針對單個圖層或多個圖層進行統一添加陰影的處理。這樣處理的好處是能讓陰影更協調統一；壞處是無法做出因光線不同效果也不相同的陰影。

通過「畫筆工具」塗抹出陰影，調整畫筆的「樣式」「不透明度」「羽化值」等參數。

通過畫「羽化選區＋圖層蒙版」的方法來處理投影。在圖層面板中使用蒙版，可以刪減多餘部分，不滿意的話可以重複調整。總之，方法無好壞，只要能畫出我們想要的效果就是好方法。

Step 05使用「畫筆工具」進行再加工處理，在兩個字母圖層的中間新建圖層，選擇「柔邊筆刷」，設置「大小」為60像素，顏色為黑色，塗出一條虛化的黑色線條，如左圖所示。調整該圖層的「不透明度」為30%，並為該圖層添加「圖層蒙版」，擦掉多餘的部分，這時再回頭看一下字母間的陰影效果，發現層次感更強了，效果如右圖所示。

Step 06在字母外添加完陰影后，再在字母內增加設計細節。本案例中英文字母佔了畫面的一半，為了讓字體更出彩，可以為內部的局部加一些虛化的陰影層，模仿拼疊感的字體效果。首先，對字母「M」進行內部陰影再次加工，陰影主要加在筆畫與筆畫的分隔處。新建圖層，繪製一個高度為「60像素」，寬度為「10像素」的矩形選框，對其進行「羽化」，羽化值為10像素，顏色為黑色，如圖所示。

Step 07繪製完成後，使用「矩形選框工具」選中右側的多餘部分，然後按Delete鍵刪除，並在該圖層上單擊滑鼠右鍵，在彈出的快捷菜單中選擇「創建剪貼蒙版」命令，將畫好的陰影層嵌入字母「M」內。

Step 08選擇「橡皮擦工具」，用虛化的畫筆擦掉黑色陰影的下半部分，僅保留上面部分的陰影效果。這一步完成後，需要把剛才處理好的陰影圖層複製一個，並移動到字母「M」的左側，最終效果如圖所示。

Step 09根據剛才的方法，為剩餘的其他字母增加內部陰影，方法同上。內部的陰影最好都加在字母的橫筆畫和豎筆畫中，這樣效果會更好。其他字母添加完陰影的最終效果如圖所示。

TIPS:

使用圖層蒙版的優點有哪些？

修改方便，不會因為使用橡皮擦工具或剪切刪除而造成不可挽救的遺憾。

可使用不同濾鏡製造一些意想不到的特效。

使用摳圖，做圖的邊緣淡化效果和圖層間的融合。

??添加素材康乃馨

Step 10搜索素材，找到合適的花朵和花稈的素材後，在Photoshop中將花摳出來作為背景，通過調整花朵的位置、大小將零散的元素拼湊在一起，如圖所示。

Step 11為了更好地表現出花朵的大小與層次，擺放時要遵循透視中的近大遠小原理。其中，組合後花稈圖層會在下面的排版中使用到，暫時可以將該圖層隱藏掉，如圖所示。

??主題文案的排版與設計

Step 12使用「橫排文字工具」輸入活動主題「母親的贊禮」，顏色設置為紅色（R:255，G:54，B:82），參數設置如圖 4-48所示。將主題「母親的贊禮」擺在英文字母的上面，為了保持整體元素的一致性，也需要給該文字做斜切處理。按Ctrl+T快捷鍵進行自由變換，向右上方斜切6°，使得中文和英文的角度一樣，保持元素視角的統一性，效果如圖所示。

Step 13為了保證出現的元素都有投影效果，給主題「母親的贊禮」添加「投影」樣式，參數設置如左圖所示。添加修飾文字與活動時間等信息，並調整斜切的角度，複製「母親的贊禮」圖層樣式，粘貼在修飾的文字和時間上，效果如右圖所示。

TIPS:

做到此時停下來，把整體頁面縮小至20％，看一眼現有的頁面，主體有了但是感覺背景很空且單調，該怎麼辦呢？為了豐富畫面，這裡介紹幾個筆者的小經驗。

增加促銷氛圍的五彩紙屑。

增加有時尚感的斜線色塊、幾何圖形等。

使用突出活動所賣品品類的產品剪影描線、實物商品等。

增加英文等。

??添加背景細節

Step 14新建圖層，使用「直線工具」畫出一組交叉的四邊形的線條，「粗細」設置為1像素，顏色設置為（R:243，G:237，B:204），「角度」設置為135°，再將處理好的各式剪影圖標拖放在四邊形的線條中，填充剪影的顏色為（R:245，G:240，B:210），效果如圖所示。

??內容部分設計

Step 15新建圖層，使用「矩形工具」畫一個高度為「455像素」，寬度為「1920像素」的矩形，顏色設置為黃綠色（R:196，G:232，B:122），作為此處信息的背景色。為了讓這塊信息在整體設計中更為突出，再新建圖層，使用「矩形工具」畫出高度為「490像素」，寬度為「445像素」的活動1區，然後填充為白色，此色塊用來放置標籤內容，如圖所示。

Step 16使用「橫排文字工具」，輸入英文字母「IDON』T KNOW」，設置字體為Arial Rounded MT，設置顏色為紅色（R:255，G:54，B:82），效果如圖所示。

Step 17使用「橫排文字工具」，輸入剩餘的文字信息，整體文字的排版節奏為大—中—小，共3個層級關係。為了讓用戶明白這塊區域內有隱藏的其他內容，需要做一個向下的箭頭圖標以引導用戶，讓使用戶去主動觸發這部分的內容，從而使信息有效傳遞。新建圖層，使用「橢圓工具」畫出一個高度為「90像素」，寬度為「90像素」的形狀，增加一個2像素的「描邊」，再選擇「直線工具」畫一個呈45°角的斜線，水平複製出另一條，最終做成倒三角的箭頭，效果如圖所示。

Step 18活動2區的製作方法與1區類似，整組複製後修改相應的文案即可。為了讓這兩個活動在平行的層級中有一點區別，將活動2區的背景色設置為淺米色（R:255，G:255，B:245），最終效果如圖所示。

Step 19為了讓用戶在瀏覽這塊活動信息中有明顯的位置感，需要給活動1區和活動2區設計一個當前打開的狀態，以提示用戶正在瀏覽的信息是哪塊，效果如圖所示。

Step 20回顧一下首屏中曾經隱藏的花稈元素，現在可以讓其顯示出來。為了使頁面更具整體性，並且打破傳統專題頁面首屏與內容區的明顯分界線，可以讓整束花朵完整地貫穿整體，強化母親節之花「康乃馨」這個主題元素，也為了更好地畫龍點睛。將花稈圖層顯示出來，放在活動1區和活動2區的下面，調整大小和位置，如圖所示。