母亲节即将到来，小编隐约感觉又有一大波借势营销的海报正在赶来的路上。作为电商设计师，手里的PS是不是已经饥渴难耐了？是不是很想趁着节日，用海报来搞一个大事情？

春节、情人节、女神节、五一劳动节……盘点上半年的节假日，借势海报是各大商家营销战中的作战利器，借势海报的优劣决定人气好低，也决定了设计师的奖金有无。看过那么多大咖设计的作品，自己动手的时候却无从下手、穷于思路。

想不想在各种节日的营销设计中脱颖而出？小编给你一本秘籍，升职加薪不用愁~

实战：母亲节活动专题页面设计

素材网盘链接：https://pan.baidu.com/s/11Y0ZvlnBGVJu5rVzfSGGog

01-设计思路

1.分析术

母亲节是一个浓烈而又温馨的节日，在笔者的记忆中，许多人在母亲节这一天都会手捧鲜花送给自己的母亲。说来惭愧，我还不曾在这一天给母亲送过任何礼物。我想通过这次设计，把自己的情感融入画面。

运营给的需求建议是，想让活动更有人情味、更动情，区别于其他电商平台的母亲节设计，削弱打折促销的活动氛围。

2.整理术

»»切入点

印象中有关母亲节、父亲节的这类专题，设计师大多都会选用带有温情感的图像去烘托主题，带入情感，但是这样的表现形式有些传统，而且由于画面过于写实而缺乏创新，不能表现出与众不同。我想要做出具有温情的画面，以情动人，这些关键词在我的脑海中一直闪现，眼前浮现的是节日当天，儿女们送康乃馨给母亲的温情画面。

»»关键词

想到此不禁欢跃起来，“母爱之花”就是这个设计的切入点。画面主元素用康乃馨来象征母爱，表达出对所有母亲的祝福，整理关键词如图所示。

TIPS:

以情动人的设计，需要设计师挖掘出最能唤起人们脑中深层印象的场景、物件等，使用最纯粹的元素、细节、色彩将观者带入情感世界，使用温情的画面勾起人们内心深处的情感记忆。

02-页面分析

1.配色方案

如图所示，主色用纯度较高的玫红色，给人一种热情而充满活力的印象；辅色以浅黄色为主，淡雅而亲切，更好地衬托主色与突出色的颜色特性；突出色用中明度、高纯度的黄绿色，给人一种清新感。整体上给人传达一种既温馨热烈，又有情怀的感觉。

2.页面布局

页面布局如图所示。

03-绘制过程

»»层叠文字效果处理

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°，如图所示，按Enter键回车确认。

TIPS:

怎么才能快速找到所要的图层呢？

在Photoshop中先选择“移动工具”，然后在工具条中勾选“自动选择图层”复选框即可。当有很多图层时，可以通过移动工具，在所要选择的内容上轻点一下，就会自动跳到所在的图层。

怎么才能快速选中多个图层呢？

方法也是类似的，需要先勾选“自动选择图层”复选框，然后选择“移动工具”，画出一个选择框，凡是在这个选择框中的内容，都会被一起选中。

养成给文档中的图层命名和建立图层组的习惯，一是通过图层组的折叠功能，有利于快速找到对应图层，二是有利于完稿输出前整理设计上的细节，把多余的图层扔掉，简化设计，减小文件体积。

Step 03 为了让斜切的字母与背景间有层次的变化，给所有字母添加“投影”样式，同时也增加了字母在画面中的空间感，设置其“不透明度”为8%，“距离”为40%，“大小”为28%，参数设置如图所示，效果如图如示。

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区的下面，调整大小和位置，如图所示。

Step 21 这样是不是更有整体感了？继续细化页面。花秆的右侧可以放一些祝福文字，既然是祝福的话，要给人一种亲切感，所以使用了“汉仪平安行”字体来传递这样的感情。字号根据整体页面来调整，不宜过大，添加文案后的效果如图 所示。

Step 22 整体页面设计效果如图所示。

优秀案例赏析：

简单清新风格——3周年店庆专题页面

中国传统风格——元旦活动专题页面

  夸张拟人风格——黄金饰品类专题页面

夸张夺目风格——淘宝“双11”专题页面

卡通戏曲风格——情人节活动专题页面

延伸阅读

更多内容可以购买《电商设计技巧修炼与实战应用》详细阅读哦！

    作者：吴海龙 王冬

    出版社：人民邮电出版社

    出版年：2018年04月

    ISBN  ：978-7-115-47665-4