《网店视觉营销》第六章　网店促销文案的视觉化

第六章网店促销文案的视觉化６.１文案字体的分类与常见类型６.２文案字体的风格６.３文案字体设计的一般规则６.４网店促销文案的视觉化设计方法返回６.１文案字体的分类与常见类型在对网店商品促销文案进行可视化设计之前，必须先了解字体设计，而了解字体结构是特别基础的一部分，本节从字体的分类、结构特征、设计原理以及常用的设计规律等几个方面讲解字体设计的基本知识与技能。字体（Ｔｙｐｅｆａｃｅ）：字体是文字的外在形式特征。它是文字的风格，也是文字的外衣。字体的艺术性体现在其完美的外在形式与丰富的内涵之中。字体是文化的载体，是社会的缩影。字库：字库顾名思义即字体库。随着计算机时代的到来，字库已成为人们工作、生活的一部分，人们每天都会接触它、使用它。下一页返回６.１文案字体的分类与常见类型一般来讲，一款字库的诞生，要经过字体设计师的创意设计、字体制作人员一笔一画的制作、修改，技术开发人员对字符进行编码、添加程序指令、装库、开发安装程序，测试人员对字库进行校对、软件测试、兼容性测试，生产部门对字库进行最终产品化和包装上市等几个环节。对字体厂商而言，推出一款什么样的字体，还要经历市场调研、专家研讨等环节，以保证推出的字库具有市场竞争力，同时，字体的字形以及编码，也要遵循国家语言文字的相关规定，保证字库产品符合标准。开发一款精品字库，往往需要付出２～３年的艰苦努力，是一项需要投入各种人力、物力、财力，充满激情和创造性的工作。在计算机操作系统中字体为ｆｏｎｔ，这类字体是电脑必用字体，存在于系统的“ｆｏｎｔｓ”文件夹里。上一页下一页返回６.１文案字体的分类与常见类型字体（Ｔｙｐｅｆａｃｅ）与字型（Ｆｏｎｔ），都是排印学与书法领域的专有名词。一般普通人士都无法区分作为专业名词的“字体”与“字型”。ｆｏｎｔ是指某套具有同样样式、尺寸的字形；ｔｙｐｅｆａｃｅ则是一个或多个ｆｏｎｔ在一个或多个尺寸的集合。各个中文使用地区对于ｔｙｐｅｆａｃｅ和ｆｏｎｔ没有通用的翻译。中国大陆国家标准（ＧＢ／Ｔ１６９６４.１—１９９７，为国际标准的官方翻译）将ｔｙｐｅｆａｃｅ译为“字体名称”，ｆｏｎｔ译为“字型”。我国台湾专业人士也将ｔｙｐｅｆａｃｅ译为“字体”。一般可将ｔｙｐｅ-ｆａｃｅ译为“字体”，ｆｏｎｔ译为“字型”。上一页下一页返回６.１文案字体的分类与常见类型篆书、隶书、燕体、楷书、草书、宋体、仿宋体、黑体等分别是某类相似风格（也称“书体”）的许多个字体的集合，而不是一种字体。两位书法家写出来的楷书就可称为两种字体；宋体在电脑上就有中易宋体和新细明体等字体。上一页返回６.２文案字体的风格根据文字字体的特性和使用类型，文字的设计风格大致可以分为下列几种：（１）秀丽柔美。字体造型优美清新，线条流畅，给人以华丽柔美之感，此种类型的字体，适用于女用化妆品、饰品、日常生活用品、服务业等主题。（２）稳重挺拔。字体造型规整，富于力度，给人以简洁爽朗的现代感，有较强的视觉冲击力，这种个性的字体，适合于机械、科技等主题。（３）活泼有趣。字体造型生动活泼，有鲜明的节奏韵律感，色彩丰富明快，给人以生机盎然的感受。这种个性的字体适用于儿童用品、运动休闲、时尚产品等主题。下一页返回６.２文案字体的风格（４）苍劲古朴。字体造型朴素无华，饱含古时之风韵，能带给人们一种怀旧感觉，这种个性的字体适用于传统产品、民间艺术品等主题。另外，汉子轮廓形似方块，但是由于笔画不同，字体轮廓的形状就会呈现不同的形状，所以在视觉均衡上就会有些许视觉偏差。尤其是单体字和合体字组合笔画就会显得不好看。所以我们要在不同形状的字形上做调整和处理，让文字看起来更加完整、均衡。字体是有性格的，我们常用“字如其人”来形容一个人的字迹，也就是说一个人的性格和阅历会投射到文字上。而字体正是文字的性格，是文字表意功能之上的美学体现。上一页下一页返回６.２文案字体的风格优秀的字体远在读者理解句意之前就通过字形与笔画风格将情感传达给读者了，所谓“未成曲调先有情”，传情达意正是字体设计的意义所在。千人千面，每个人的性格都不尽相同，字体也是如此。蔡邕的《笔论》中讲道，“若虫食木叶，若利剑长戈，若强弓硬矢，若水火，若云雾，若日月”，说的便是字体的变幻无方。字体的性格多种多样，具体体现在不同的笔画粗细、线条曲直、架构疏密等方面。上一页返回６.３文案字体设计的一般规则文字是一种记录与传达语言的符号，是人类文明进步的重要标志。随着图形化时代的来临，文字与图形的关系在设计领域起着举足轻重的作用。当练习字体设计时，找有代表性的字体来做，这样不但可以激发创新思维，还可以提高学习者的思维能力。文字经过艺术化设计后，可以让文字形象变得情景化、视觉化，强化语言效果，对提升网店页面设计品质和商品详情页的视觉表现力具有极大的促进作用。那么如何才能设计好网店文案字体的视觉效果呢？一般可以从以下几个方面考虑：１.寻求字体与图形的结合２.字形风格与表达内容相适应３.进行适当的字体变形４.对文案字体进行适当的衬托返回６.４网店促销文案的视觉化设计方法网店促销文案的视觉化设计在借助以上知识的基础上，一般运用Ｐｈｏｔｏｓｈｏｐ等工具软件，进行设计。其设计与制作方法很多，要根据具体情况与具体需要采用不同的方式与方法，下面介绍两项实际的设计项目，以学习网店促销文案视觉化设计方法。６.４.１网店促销文案的视觉化设计方法（一）本部分内容主要讲解促销文案的造型、肌理、颜色等的表现方法，通过软件的应用实现视觉效果，具体如下：（１）运行Ｐｈｏｔｏｓｈｏｐ软件，执行“Ｃｔｒｌ”＋“Ｎ”命令，设置文件大小宽度为７９０像素，高度为４００像素，分辨率为７２像素／英寸，ＲＧＢ颜色模式，背景色为白色。下一页返回６.４网店促销文案的视觉化设计方法新建文件后，在图层面板建立一个新图层，用ＲＧＢ值为（１９７、２２４、２３２）的一种浅蓝色填充文件，如图６.２９所示。（２）在软件中打开“网店促销图案视觉化素材１”文件，为一幅正方形网格图案，运用软件的移动工具，把正方形网格图案移到新创建的文件中，并对网格图案的位置进行调整，效果如图６.３０所示。（３）执行“Ｃｔｒｌ”＋“Ｔ”命令，对网格图案进行旋转编辑，转动的角度为４５°，如图６.３１所示。（４）在网格图案所在的图层，设置不透明度为１５％，填充值为６５％。运用文本工具输入文本“相信品牌的力量”，其中文本的字体为“微软雅黑”，字体大小为７１点，字体的显示方式为“Ｂｏｌｄ”，字体颜色为ＲＧＢ（２５３、１０４、１０），字体的粗细状态为“加粗”，输入文字后放置在合适的位置上，如图６.３２所示。上一页返回下一页６.４网店促销文案的视觉化设计方法（５）双击文本“相信品牌的力量”所在的图层，设置图层样式，首先设置“斜面和浮雕”，结构参数中，样式为“内斜面”，方法为“雕刻清晰”，深度为２７６％，大小为３像素，方向为“上”，参数设置如图６.３３所示。（６）接下来设置图层样式中的描边样式，大小为１像素，描边颜色为ＲＧＢ（２４８、１３０、３），具体参数如图６.３４所示，设置图层样式后的文本效果如图６.３５所示。（７）复制“相信品牌的力量”文本图层为“相信品牌的力量”图层副本，在图层左边关闭“相信品牌的力量”图层不可见，只显示“相信品牌的力量”图层副本，在图层副本清除图层样式，把文字颜色设置为一种灰色，ＲＧＢ为（１４６、１４６、１４６），如图６.３６所示。上一页返回下一页６.４网店促销文案的视觉化设计方法（８）栅格化灰色的文本图层，执行Ｐｈｏｔｏｓｈｏｐ中的动感模糊滤镜，滤镜的方向为９０°，模糊强度值为８１，执行后的效果如图６.３７所示。（９）移动图层的上下位置，把“相信品牌的力量”图层副本放置在“相信品牌的力量”图层的下方，如图６.３８所示模糊灰色文本在主体文本的下方。（１０）运用矩形选择工具，羽化值设置为０，沿着主体文本的下方，设置一个较大的矩形选区，在确定当前图层为模糊的阴影图层后，执行“Ｄｅｌｅｔｅ”命令，删除下半部分的阴影，如图６.３９所示。上一页返回下一页６.４网店促销文案的视觉化设计方法（１１）执行软件中的编辑工具下的“斜切”命令，把阴影倾斜，同时运用“Ｃｔｒｌ”＋“Ｔ”命令调整阴影的高度，如图６.４０所示。（１２）设置文件创建使新建的蓝色图层的不透明度为２５％，同时用软件的“模糊”与“手指涂抹”工具对阴影进行适当的调整，效果如图６.４１所示。（１３）运用软件的文本工具，在主体文本的下方输入相应的文本，文本字体为“华文行楷”，大小为２４点，颜色为ＲＧＢ（２５４、１０２、４３），其他参数不变，输入文本并调整文本的位置，如图６.４２所示。上一页返回下一页６.４网店促销文案的视觉化设计方法（１４）创建一个新图层，用矩形选择工具在文件的上方选择一个矩形选区，并用ＲＧＢ颜色为（４１、１２７、１８４）的一种蓝色填充，如图６.４３所示。（１５）继续对文件设计文本，在蓝色的填充上方输入文本“为什么要购买我们的产品？”，其中，文本的字体为“微软雅黑”，显示方式为“Ｂｏｌｄ”，颜色为白色，具体文字参数如图６.４４所示。（１６）单独选择文本图层中的字符“？”，设置字体为“华文彩云”，其他参数不变，具体效果如图６.４５所示。（１７）最后打开“网店促销文案视觉化素材２”图像文件，其为一预先设置好的文本图案，把文本图案拖入文件中，用移动工具适当调整图像的位置，完成的效果，如图６.４６所示。上一页返回下一页６.４网店促销文案的视觉化设计方法６.４.２网店促销文案的视觉化设计方法（二）本部分内容主要讲解多种文本、不同字体的混合表现手法，借助软件来实现促销文案的排列与组合，具体如下所示：（１）启动运行Ｐｈｏｔｏｓｈｏｐ软件，执行“Ｃｔｒｌ”＋“Ｎ”新建图像文件命令创建一个图像文件，文件大小设置为宽度９５０像素、高度４００像素，分辨率为７２像素／英寸，文件大小实际上应根据所创建的图像的用途来确定，具体如图６.４７所示。（２）上面一步创建的是一个以白色为背景的图像文件，在文件的图层面板建立一个新图层，选择工具箱中的画笔工具，设置笔尖大小为１９１像素，不透明度为１４％，前景色为ＲＧＢ（１２８、１２８、１２８）的一种灰色，具体如图６.４８所示。上一页返回下一页６.４网店促销文案的视觉化设计方法（３）在确定当前图层为新建图层的前提下，运用画笔工具在图像文件的左下角与右上角区域给图像上色，可以运用画笔进行重复上色，使之部分区域颜色变深，在拖动画笔的时候尽量保持４５°的倾斜，如图６.４９所示。（４）执行“Ｃｔｒｌ”＋“Ｏ”命令，打开事先准备好的“促销文案视觉化设计２素材”文件，运用磁性套索选择工具沿着图像的边缘将图像选出，并移动到当前设计的文件中，同时对素材图像的大小与位置进行适当的调整，如图６.５０所示。（５）在图层面板创建一个新图层（图层名称可以根据需要命名），运用矩形选择工具，羽化值设为０，在素材图像的右侧绘制一个长宽合适的矩形选区，设置前景色为ＲＧＢ（１６９、２２、４８），然后对矩形选区进行２个像素的描边，如图６.５１所示。上一页返回下一页６.４网店促销文案的视觉化设计方法（６）在上一步操作中不取消选区的情况下，图层面板继续创建一个新图层，用矩形选择工具，按住“Ａｌｔ”键使选择处于减选状态，减去部分右边的选区，然后用前景色为ＲＧＢ（１６９、２２、４８）的颜色填充选区，最后取消选区，效果如图６.５２所示。（７）运用软件的文本输入工具，设置字体为“微软雅黑”，显示方式为“Ｂｏｌｄ”，字体大小为３０点，字符间距为２００，颜色为白色，其他参数默认，在文件中输入“恒源祥”文本，调整文字位置后如图６.５３所示。（８）运用软件路径工具中的自定义形状工具，绘制模式设置为“像素”状态，选择形状造型如图６.５４所示，设置前景色为白色。上一页返回下一页６.４网店促销文案的视觉化设计方法（９）在图层面板继续创建新图层，在前面输入的文本的右上方绘制一个较小的商标形状图标，调整到合适的位置，如图６.５５所示。（１０）继续运用软件的文本工具，设置字体为“微软雅黑”，显示方式为“Ｒｅｇｕｌａｒ”，文字大小为３０点，字符间距为２００，颜色为ＲＧＢ（１６９、２２、４８）的红色，如图６.５６所示。（１１）在文件中输入“品牌团”几个字样，用软件中的移动工具调整到合适的位置，如图６.５７所示。（１２）运行文本输入工具，设置字体为“方正韵动特黑”，文字大小为４８点，字体颜色为ＲＧＢ（１６９、２２、４８）的红色，如图６.５８所示。上一页返回下一页６.４网店促销文案的视觉化设计方法（１３）在图中输入“１００％澳洲羊毛”文本，并可以用“Ｃｔｒｌ”＋“Ｔ”命令适当调整文字高度与宽度的比例，然后放置在如图６.５９所示的位置。（１４）设置文本输入工具的字体为“华文细黑”，字体大小为１０点，字符间距为－１００，如图６.６０所示。（１５）在如图６.６１所示的位置输入“３００多款商品裸价放送”文本，位置注意左对齐，同时，在文本的下面，运用矩形选择工具绘制一个长宽合适的矩形选区，并创建一个新图层，用颜色为ＲＧＢ（１６９、２２、４８）的红色进行２个像素的描边。（１６）用与上面同样的方法，减去左边部分的矩形选区，并用ＲＧＢ（１６９、２２、４８）的红色进行填充，效果如图６.６２所示。上一页返回下一页６.４网店促销文案的视觉化设计方法（１７）接下来继续使用软件中的文本输入与编辑工具，设置字体为“华文细黑”，大小为２４点，设置为“加粗”状态，如图６.６３与图６.６４所示。（１８）分别设置白色与ＲＧＢ（９８、９８、９８）的灰色输入“查看”与“领券购物更优惠”文本，然后运用移动工具把文本分别移到合适的位置，如图６.６５所示。（１９）运用软件中的选择或者形状工具，制作文字“查看”右侧的查找符号，方法多样，可以根据自己的习惯进行绘制，注意颜色为白色，并应放置在合适的位置，如图６.６６所示。上一页返回下一页６.４网店促销文案的视觉化设计方法（２０）继续运用文本输入工具，设置字体为“华文细黑”，大小为２４点，加粗，颜色为黑色，分别输入“让利回馈”与“物价回到１０年前”等促销文本，再分别输入颜色为ＲＧＢ（１６９、２２、４８）的文本“３０”“％”与“ＯＦＦ”，以上文本均在不同的图层，然后对“％”与“ＯＦＦ”进行缩小编辑，使之与“３０”文本上下平齐。最后文本的编辑效果如图６.６７所示。（２１）继续运用文本输入工具，设置字体为“华文细黑”，大小为１８点，字符间距为－７５，加粗，颜色为ＲＧＢ（１３８、１３８、１３８）的灰色，在文件中输入第一排英文短句；然后用同样的字体，大小设置为１０点，字符间距设置为－１００，不加粗，具体如图６.６８与图６.