header_v1.7.40

如何设计温情动人风格的母亲节活动专题页?

98天前发布

原创文章 / UI / 书籍
数艺社 原创,如需商业用途或转载请与数艺社联系,谢谢配合。

本书以4大块内容展开讲解,从电商设计的发展到设计观点,再结合大量的实战案例来阐述各种设计思维、设计方法和技巧。

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

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

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


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

undefined

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


01-设计思路

1.分析术

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

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


2.整理术

»»切入点

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

»»关键词

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

undefined

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


02-页面分析

1.配色方案

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

undefined


2.页面布局

页面布局如图所示。

undefined


03-绘制过程


»»层叠文字效果处理


Step 01 新建宽度为“980像素”,高度不限的画布,背景颜色设置为奶油黄色(R:254,G:254,B:224),使用“横排文字工具”在画布上依次输入英文字母“MOTHER' S DAY”,再使用“移动工具”选中所有字母,打开文字面板,设置字体为“Arial Rounded MT”,字号为217像素,将颜色设置为(R:255,G:54,B:82),调整字与字的距离。初步得到“层叠式”文字效果,如图所示。


undefined

TIPS:

图层就像堆叠起来的透明的图画,不同的图画上有着不同的内容。针对单独图层进行操作时,不会影响到其他图层。最后将所有图层叠加起来,通过移动各层图画的相对位置即可改变最后的合成效果。


Step 02 在构图设计中,横平竖直的排版会使文字略显呆板和普通,本案例中对所有字母做斜切式的设计,从构图上打破平衡感,让画面更活泼、更具冲击力。首先,对字母做变形处理,单击“移动工具”并选中所有字母,按Ctrl+T快捷键进行调整,此时发现字体的四周有8个空心的角点,把鼠标移动到字体右侧,按Alt+Shift快捷键,向右上角斜切6°,如图所示,按Enter键回车确认。


undefined

TIPS:

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

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

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

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

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


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


undefined

undefined


Step 04 通过上图我们能看到,在给所有字母使用全局的投影样式后,字母间的阴影区分并不明显,影子像连在了一起,严重降低了字母的可观赏性。这时,需要对字母的阴影再加工,让其边界更清晰、层叠的效果更强。下图中圆圈所标的区域,就是我们需要着重处理的几处。

undefined

TIPS:

做阴影的方法有哪些?

通过图层样式中的投影样式来处理,通过设置“大小”“角度”“不透明度”等选项,可以针对单个图层或多个图层进行统一添加阴影的处理。这样处理的好处是能让阴影更协调统一;坏处是无法做出因光线不同效果也不相同的阴影。

通过“画笔工具”涂抹出阴影,调整画笔的“样式”“不透明度”“羽化值”等参数。

通过画“羽化选区+图层蒙版”的方法来处理投影。在图层面板中使用蒙版,可以删减多余部分,不满意的话可以重复调整。总之,方法无好坏,只要能画出我们想要的效果就是好方法。


Step 05 使用“画笔工具”进行再加工处理,在两个字母图层的中间新建图层,选择“柔边笔刷”,设置“大小”为60像素,颜色为黑色,涂出一条虚化的黑色线条,如左图所示。调整该图层的“不透明度”为30%,并为该图层添加“图层蒙版”,擦掉多余的部分,这时再回头看一下字母间的阴影效果,发现层次感更强了,效果如下图所示。

undefined

undefined


Step 06 在字母外添加完阴影后,再在字母内增加设计细节。本案例中英文字母占了画面的一半,为了让字体更出彩,可以为内部的局部加一些虚化的阴影层,模仿拼叠感的字体效果。首先,对字母“M”进行内部阴影再次加工,阴影主要加在笔画与笔画的分隔处。新建图层,绘制一个高度为“60像素”,宽度为“10像素”的矩形选框,对其进行“羽化”,羽化值为10像素,颜色为黑色,如图所示。

undefined


Step 07 绘制完成后,使用“矩形选框工具”选中右侧的多余部分,然后按Delete键删除,并在该图层上单击鼠标右键,在弹出的快捷菜单中选择“创建剪贴蒙版”命令,将画好的阴影层嵌入字母“M”内。

undefined


Step 08 选择“橡皮擦工具”,用虚化的画笔擦掉黑色阴影的下半部分,仅保留上面部分的阴影效果。这一步完成后,需要把刚才处理好的阴影图层复制一个,并移动到字母“M”的左侧,最终效果如图所示。

undefined


Step 09 根据刚才的方法,为剩余的其他字母增加内部阴影,方法同上。内部的阴影最好都加在字母的横笔画和竖笔画中,这样效果会更好。其他字母添加完阴影的最终效果如图所示。

undefined

TIPS:

使用图层蒙版的优点有哪些?

修改方便,不会因为使用橡皮擦工具或剪切删除而造成不可挽救的遗憾。

可使用不同滤镜制造一些意想不到的特效。

使用抠图,做图的边缘淡化效果和图层间的融合。


»»添加素材康乃馨


Step 10 搜索素材,找到合适的花朵和花秆的素材后,在Photoshop中将花抠出来作为背景,通过调整花朵的位置、大小将零散的元素拼凑在一起,如图所示。

undefined

undefined


Step 11 为了更好地表现出花朵的大小与层次,摆放时要遵循透视中的近大远小原理。其中,组合后花秆图层会在下面的排版中使用到,暂时可以将该图层隐藏掉,如图所示。

undefined


»»主题文案的排版与设计


Step 12 使用“横排文字工具”输入活动主题“母亲的赞礼”,颜色设置为红色(R:255,G:54,B:82),参数设置如图 4-48所示。将主题“母亲的赞礼”摆在英文字母的上面,为了保持整体元素的一致性,也需要给该文字做斜切处理。按Ctrl+T快捷键进行自由变换,向右上方斜切6°,使得中文和英文的角度一样,保持元素视角的统一性,效果如图所示。

undefined

undefined


Step 13 为了保证出现的元素都有投影效果,给主题“母亲的赞礼”添加“投影”样式,参数设置如左图所示。添加修饰文字与活动时间等信息,并调整斜切的角度,复制“母亲的赞礼”图层样式,粘贴在修饰的文字和时间上,效果如图所示。

undefined

undefined

TIPS:

做到此时停下来,把整体页面缩小至20%,看一眼现有的页面,主体有了但是感觉背景很空且单调,该怎么办呢?为了丰富画面,这里介绍几个笔者的小经验。

增加促销氛围的五彩纸屑。

增加有时尚感的斜线色块、几何图形等。

使用突出活动所卖品品类的产品剪影描线、实物商品等。

增加英文等。


»»添加背景细节


Step 14 新建图层,使用“直线工具”画出一组交叉的四边形的线条,“粗细”设置为1像素,颜色设置 为(R:243,G:237,B:204),“角度”设置为135°,再将处理好的各式剪影图标拖放在四边形的线条中,填充剪影的颜色为(R:245,G:240,B:210),效果如图所示。

undefined


»»内容部分设计


Step 15 新建图层,使用“矩形工具”画一个高度为“455像素”,宽度为“1920像素”的矩形,颜色设置为黄绿色(R:196,G:232,B:122),作为此处信息的背景色。为了让这块信息在整体设计中更为突出,再新建图层,使用“矩形工具”画出高度为“490像素”,宽度为“445像素”的活动1区,然后填充为白色,此色块用来放置标签内容,如图所示。

undefined


Step 16 使用“横排文字工具”,输入英文字母“IDON’T KNOW”,设置字体为Arial Rounded MT,设置颜色为红色(R:255,G:54,B:82),效果如图所示。

undefined


Step 17 使用“横排文字工具”,输入剩余的文字信息,整体文字的排版节奏为大—中—小,共3个层级关系。为了让用户明白这块区域内有隐藏的其他内容,需要做一个向下的箭头图标以引导用户,让使用户去主动触发这部分的内容,从而使信息有效传递。新建图层,使用“椭圆工具”画出一个高度为“90像素”,宽度为“90像素”的形状,增加一个2像素的“描边”,再选择“直线工具”画一个呈45°角的斜线,水平复制出另一条,最终做成倒三角的箭头,效果如图所示。

undefined


Step 18 活动2区的制作方法与1区类似,整组复制后修改相应的文案即可。为了让这两个活动在平行的层级中有一点区别,将活动2区的背景色设置为浅米色(R:255,G:255,B:245),最终效果如图所示。

undefined


Step 19 为了让用户在浏览这块活动信息中有明显的位置感,需要给活动1区和活动2区设计一个当前打开的状态,以提示用户正在浏览的信息是哪块,效果如图所示。


Step 20 回顾一下首屏中曾经隐藏的花秆元素,现在可以让其显示出来。为了使页面更具整体性,并且打破传统专题页面首屏与内容区的明显分界线,可以让整束花朵完整地贯穿整体,强化母亲节之花“康乃馨”这个主题元素,也为了更好地画龙点睛。将花秆图层显示出来,放在活动1区和活动2区的下面,调整大小和位置,如图所示。

undefined


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

undefined


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

undefined


优秀案例赏析

undefined

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

undefined

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

undefined

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



undefined

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


undefined

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


延伸阅读

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

undefined

    作者:吴海龙 王冬

    出版社:人民邮电出版社

    出版年:2018年04月

    ISBN  :978-7-115-47665-4




2

    文章信息

    • 文章标签

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功