新媒体广告设计与制作课件 第四章 新媒体广告的设计要素

第四章新媒体广告的设计要素目录CONTENTS项目导入

4.1新媒体广告的色彩设计4.2新媒体广告的文字设计4.3新媒体广告的图像设计4.4新媒体广告的版式设计项目一规划水果电商Banner页面项目二规划电商双十一活动页面项目导入

项目导入新媒体广告是由文字、图形、色彩等传统广告基本要素以及声音、视频、交互信息等新的要素构成的，形式更加丰富多元。不仅继承了传统广告的优势，也顺应了时代发展的趋势，从而赋予新媒体广告独特的魅力。4.1新媒体广告的色彩设计4.1.1色彩的属性色彩设计可以激发消费者的情感共鸣，塑造品牌形象并影响购买决策，在竞争激烈的市场环境中为企业提供了重要的竞争优势。色相色相是色彩的外观特征，是对色彩进行分类和命名的总称。它作为区分色彩之间的依据，与色彩的波长有直接关系，红、橙、黄、绿、蓝、紫是色彩体系中最基本的色相，这些基本色相与它们之间的过渡色形成了12色相环。图4-1所示为十二色相环。1图4-1十二色相环4.1.1色彩的属性色彩设计可以激发消费者的情感共鸣，塑造品牌形象并影响购买决策，在竞争激烈的市场环境中为企业提供了重要的竞争优势。图4-2色彩明度较高的新媒体广告2.明度明度指色彩的明暗程度，是将色彩按亮度进行划分的形式。色彩的明度变化取决于光的反射强度，越亮的色彩明度越高，越暗的色彩明度越低，明度的变化能为画面带来更为独特的画面氛围。色彩的明度会在视觉上产生轻重感，明度较低的色彩，如黑色、棕色、深蓝等带给人沉重、稳定的感觉，明度较高的色彩如白色、明黄、粉色等带给人轻快、灵活的感觉；图4-2所示为色彩明度较高的新媒体广告。4.1.1色彩的属性色彩设计可以激发消费者的情感共鸣，塑造品牌形象并影响购买决策，在竞争激烈的市场环境中为企业提供了重要的竞争优势。纯度指色彩的鲜艳程度，也称色彩的饱和度、彩鲜度。同一色相中，纯度的变化会给人不同的视觉感受。高纯度的色彩会给人一种鲜艳、视觉冲击力强的感觉，而低纯度的色彩会给人一种静谧、优雅、舒适的感觉。色彩纯度的高低取决于该色中含色成分与消色成分（灰色）的比例，灰色含量越少，纯度值越大。图4-3所示为色彩纯度较高的新媒体广告。纯度3图4-3色彩纯度较高的新媒体广告4.1.2色彩的情感与象征意义不同色彩具有不同的情感与象征含义。比如红色代表热情和喜庆，黄色代表光明和希望，绿色代表健康和生命力。合理运用色彩的情感与象征意义可以增强广告的感染力，并对消费者的心理和行为产生影响。4.1.3色彩的对比与搭配1.色彩的对比按照色彩的三要素进行划分，可将色彩的对比方式分为色相对比、明度对比和纯度对比三种形式。色相对比纯度对比明度对比4.1.3色彩的对比与搭配2.色彩的搭配按照色相环上不同位置进行划分，可将色彩的搭配方式分为同类色搭配、邻近色搭配、互补色搭配三种形式。图4-7同类色搭配图4-8邻近色搭配图4-9互补色搭配4.1.4新媒体广告色彩的运用技巧1.控制色彩数量广告画面中出现的色彩不宜超过3种，避免色彩过于杂乱，影响用户视觉体验。2.遵循色彩心理学合理运用色彩心理学知识营造广告氛围，影响消费者行为，为设计提供科学依据。3.从大自然中获得灵感以自然为灵感，提取自然界的色彩运用到设计中。4.良好的可读性合理运用色彩搭配，确保广告的可读性。4.2新媒体广告的文字设计4.2.1新媒体广告的文字特点新媒体使文字由静态转向多维动态空间效果，突破了二维静止的局限，使文字实现了自由变形、多样变形、多样构成的多维空间效果。1.不受印刷因素的限制，创作更自由2.可设计多维动态文字3.文字信息的双向传播4.文字阅读方式由线性向非线性转化通过屏幕显示出来的文字不再受到印刷因素的限制，设计人员可以更加自由地创作。更注重文字的运动元素、时间维度、空间维度。信息的发送者和接收者之间可以进行实时的互动和交流，双方可以互相影响和调整信息的内容和形式。从传统的线性文本发展至超文本,一条链接中包括多种交叉链接,从而使文字阅读方式由传统的线性向非线性转化。4.2.2新媒体广告的文字运用1.文字字体的选择黑体黑体又称方体或等线体，没有衬线装饰，字形端庄，笔画横平竖直，粗细一致。黑体字商业气息浓厚，常用于广告的主标题。宋体应用较广泛，笔画横细竖粗，起点与结束点有额外的装饰部分，外形纤细优雅，体现出浓厚的文艺气息。楷体笔画分明、坚实有力，能够清晰地传达广告信息，应用于广告中的标题、正文、标语部分。书法体包括隶书、行书、草书、篆书等，字形灵活多变，在新媒体广告中，书法体常被用来表现古典文化氛围。艺术体笔画和结构经过形象化处理，常用于广告的标题部分。英文体分为衬线体和无衬线体两种类型。衬线体容易识别，强调字母笔画的开始和结束，易读性较高。无衬线体与汉字字体中的黑体相对应，较为醒目。4.2.2新媒体广告的文字运用2.文字的对齐方式齐左式图4-10齐左式4.2.2新媒体广告的文字运用2.文字的对齐方式齐右式图4-11齐右式4.2.2新媒体广告的文字运用2.文字的对齐方式图4-12居中对齐式居中对齐式左右均齐式图4-12左右均齐式4.2.3新媒体广告文字的创意方法立体空间色彩叠加扭动变形蒙版穿透重复排列虚实结合拉伸文字底纹肌理4.3新媒体广告的图像设计4.3.1新媒体广告的图像类型照片类插画类图标类模型类平面设计类4.3.2静态图像广告图4-14静态图像广告静态图像广告是使用静态图片作为广告的主要内容，包含标题、文本和链接等元素。图片广告通常以单个图片形式展示，适合展示产品、服务或品牌形象。其内容一般比较固定，常见于网页设计、ui设计、公众号设计中。静态图像广告的优点是能让消费者捕捉到清晰的广告信息，常见的图片格式包括JPEG、PNG和GIF等。如图4-14所示。4.3.3动态图像广告动态图像广告包括动态化平面广告（GIF广告）、短视频广告、H5广告图4-15GIF广告图4-16短视频广告图4-17H5广告4.4新媒体广告的版式设计4.4.1新媒体版式设计的概念优秀的版式设计不仅视觉传达效果好，而且能够提高读者的阅读兴趣，帮助读者在阅读浏览的过程中轻松愉悦地获取信息。新媒体版式设计的概念指针对新媒介（H5、UI界面、网页设计、VR等）为载体展开设计调度，将静态、动态、文字、色彩、音频等构成要素，按照一定的审美规律，结合设计的具体特点和使用目的来布局，并使其成为一个整体而进行信息传递的过程。4.4.2新媒体广告版式设计应遵循的原则图4-17亲密性原则1.对比原则通过不同的设计使元素之间呈现出差别性2.对齐原则通过画面中元素之间的视觉连接来创建秩序感3.重复原则让设计中的视觉要素在画面中重复出现4.亲密性原则将彼此相关的元素适当靠近，归组在一起形成一个视觉单元4.4.3新媒体广告的基本版型1.满版型版式设计满版型版面以图片为主，将图片穿插文字并使其充满整个版面，在视觉上更直观，表现强烈，常用于静态广告设计中。如图4-18所示。图4-18满版型版式4.4.3新媒体广告的基本版型2.分割型版式设计分割指的是对版面进行调整或重新分配。分割型版式主要分为左右分割、上下分割两种，通常运用图片或色块将版面进行划分。分割型版式在视觉上一般具有强烈的反差效果，常用于网页设计、小程序、UI、电商详情页设计等。如图4-19所示。图4-19分割型版式4.4.3新媒体广告的基本版型3.自由型版式设计自由型版式设计是一种不规则的版面设计方式，画面感觉较为活泼、不受约束，常用于app开屏广告、banner海报、网幅广告等。如图4-20所示。图4-20自由型版式4.4.3新媒体广告的基本版型4.倾斜型版式设计倾斜型版式具有强烈的动势和不稳定性，引人注目，常用于网页设计、UI界面设计等。如图4-21所示。图4-21倾斜型版式4.4.3新媒体广告的基本版型5.曲线型版式设计文字和图片在排列结构上形成曲线型的趋势，版面具有一定的趣味性，引导人的视线随着画面上元素的自由走向而变化。常用于电商海报、界面设计等。如图4-22所示。图4-22曲线型版式项目一规划水果电商Banner页面项目一规划水果电商Banner页面项目要求运用本单元所学知识进行水果电商海报的构建，并掌握其设计构思方法。项目目的运用新媒体设计思维规划一张水果电商海报。通过该实例对新媒体广告的色彩、文字、图片、版式等相关知识进行巩固。项目分析根据商品的属性来确定海报的整体色调、构图，收集素材进行整合，选择合适的文字来填充画面，使画面主题突出，吸引消费者视线。图4-23为参考示例。项目一规划水果电商Banner页面图4-23

水果电商banner参考示例项目一规划水果电商Banner页面项目思路1.确定色彩方案。为了突出生鲜商品的特点，选择绿色来进行主色的定位。2.文字规划。选择醒目的黑体字进行主标题展示。辅助信息使用小号、细黑体。3.图片规划。在制图软件中调整图片素材，增加图片素材的视觉美感。4.版式。根据电商banner的尺寸要求，采用满版式构图。项目二规划电商双十一活动页面项目二规划电商双十一活动页面项目要求规划双十一活动页面，要求以间隔色进行色彩搭配，以分割法构图进行页面规划，体现出活动的氛围与折扣信息。项目目的通过该实例对新媒体广告的色彩、文字、图片、版式等相关知识进行巩固，掌握类似活动页面的规划方法。项目分析本例要求对某店铺的双十一活动页面进行规划，为了突出促销氛围，可使用间隔色进行色彩搭配。在版式设计上，可使用分割构图的方式，并注意按照活动优惠信息的高低来进行排序。如图4-24为参考示例。图4-24

电商双十一活动页面规划参考示例项目二规划电商双十一活动页面项目二规划电商双十一活动页面项目思路1.确定色彩方案。配合双十一活动气氛，采用互补色搭配进行页面色彩搭配。2.分割式构图。采用分割式构图的方式将页面划分不同区域，按照信息主次顺