资源简介

(共27张PPT)
第6章
网页元素设计（下）
6.2
网店商品主图设计
商品主图是购物类网站最常见的图像，主要用于产品宣传和店铺装扮。它通常利用价格、卖点和优惠折扣等信息，激发消费者的购买欲。在设计时，主图的尺寸应符合网站的上传要求，通常为460×460像素；若网店商品展示带放大镜功能，需要主图尺寸在700×700像素以上，体积小于500 KB，使用JPG或JPEG格式，如图6-55所示。图6-55 商品主图某办公用品网店由于新进了一批高端一体碎纸机，需要更换商品主图。网店运营人员找到小张，请他帮助设计，并提出了具体的要求：尺寸为800×800像素，要体现产品的高端、大气，并且应包含产品介绍、价格及促销等信息，能激发消费者的购买欲望。该主图的产品图像由网店提供，其他必要的素材需要小张自己搜集。6.2.1课堂案例——设计碎纸机主图视频讲解图6-56 碎纸机主图作品展示根据需求分析设计的碎纸机主图如图6-56所示。由于该主图文字内容较多，因此采用文字包围产品的构图形式。由于产品的颜色为黑与白，为了呼应产品，将背景制作为黑白渐变色，体现出高端的感觉。此外，将标题和价格等文字使用醒目的颜色与叙述性文字做区分，从而使读者快速抓住关键信息。
设计思路
① 利用大面积不同层次的深灰颜色作为主图背景，呼应产品的颜色，体现产品的高端；
② 由于文案较多，为了区分层级，标题、价格和卖点都使用醒目的颜色进行突出。
在Photoshop中新建图像文档，设置尺寸为800×800像素，分辨率为72像素/英寸，颜色模式为RGB颜色，并命名为“碎纸机主图”。步骤1图6-57 制作背景（一）案例步骤将前景色设为黑色，背景色设为白色，按【Alt+Delete】组合键将“背景”图层填充为黑色；新建图层，命名为“点光”；选择“画笔工具” ，利用工具属性栏设置画笔大小为1000，画笔形状为柔边圆，流量为“50%”，按【X】键将前景色设置为白色，然后在画面中部偏右单击绘制光晕效果，如图6-57所示。步骤2按【X】键将前景色设置为黑色，使用“矩形工具”绘制1 000×1 000像素的矩形；按【Ctrl+T】组合键执行“自由变换”命令，旋转并移动矩形至合适位置，效果如图6-58所示。步骤3图6-58 制作背景（二）按【Ctrl+O】组合键打开本章案例四“碎纸机.png”素材，使用“移动工具” 将其移动至“碎纸机主图”文档中合适位置，然后在“调整”面板中单击“曲线”按钮， 再在“属性”面板中设置调整层参数，如图6-59所示。步骤4图6-59 导入并处理“碎纸机”素材使用“横排文字工具” 在文档中单击并输入“一体碎纸机”文字，更改字体为华文行楷，字体大小为138点，然后为其添加“斜面和浮雕”和“渐变叠加”图层样式，叠加渐变的左右色标颜色分别为#ffb400和#ffff00，如图6-60所示。步骤5图6-60 输入标题文字并添加图层样式使用“横排文字工具” 在碎纸机左侧输入副标题“原装理光”文字，在“字符”面板中设置文字参数，再单独选中“原装”文字，将颜色更改为#e71f18，如图6-61所示。步骤6图6-61 输入并处理副标题文字#e71f18使用“横排文字工具” 输入商品描述文案，将文案字体统一设置为微软雅黑，并按层级将字体大小分别设置为30、18、10和4点，然后使用“移动工具” 将文案右对齐，效果如图6-62所示。步骤7图6-62 输入描述文案提 示将次要文字缩小，集中排列，使文案形成一个灰色的面，与主体文字形成大小、颜色的对比，能够加强画面的节奏感。使用“横排文字工具” 输入“促销：”文案，调整字体大小为38点，再单击输入“280”，并更改字体为微软雅黑，字体大小为100点，样式为加粗；将“一体碎纸机”的图层样式复制到“280”图层，然后使用“移动工具” 将文案对齐，效果如图6-63所示。步骤8图6-63 输入并处理价格文案按【Ctrl+O】组合键打开本章案例四“光效.psd”素材，使用“移动工具” 将素材移动至“一体碎纸机”中“体”和“纸”的文字上方，为标题文字添加效果，如图6-64所示。到此，便完成了碎纸机主图的设计。步骤9图6-64 导入并处理“光效”素材一家销售剃须刀的公司找到了小张，请他制作一张剃须刀主图。这家公司负责网店销售的项目负责人说：“我们公司主要销售剃须刀及相关产品，现在想做一个尺寸为800×800像素的商品主图，我希望该主图能够第一时间吸引顾客的眼球，突出剃须刀特点，文案层次分明，我们会提供相关图片和文案。”6.2.2课堂案例——设计剃须刀主图视频讲解图6-65 剃须刀主图作品展示根据需求分析设计的剃须刀主图如图6-65所示。该主图画面简洁，文案与主体物色彩统一，并且通过对标题文字的处理，凸显了剃须刀的特点，作为产品主图，十分吸引视线。
设计思路
① 抓住剃须刀金属质感、干净利落、性能强劲的产品属性，将标题文字外观设计为硬角、金属质感，从而与产品呼应；
② 模糊背景图像，使背景与产品形成虚实对比，从而突出主体；
③ 提取剃须刀素材中的渐变色作为副标题的背景色，让产品与文案相关联，使广告整体更具统一性。
在Photoshop中新建图像文档，设置尺寸为800×800像素，分辨率为72像素/英寸，颜色模式RGB颜色，并命名为“剃须刀主图”，然后为“背景”图层填充#111115颜色。步骤1案例步骤按【Ctrl+O】组合键打开本章案例五“背景.jpg”“桌面.jpg”“剃须刀.png”图像素材，使用“移动工具” 分别将素材移动至“剃须刀主图”文档中合适位置，并将图层名称更改为素材原始名称，然后调整“桌面”图像的大小、位置并为其添加图层蒙版，再设置前景色为黑色，使用“画笔工具”涂抹桌面以外的区域（保留一些火星图案），如图6-66所示。步骤2图6-66 导入并处理主体素材选择“横排文字工具” ，设置文字参数并单击画面输入“强”字；按【Ctrl+O】组合键打开本章案例五“金属材质.jpg”图像素材，使用“移动工具” 将素材移动至“剃须刀主图”文档中合适位置，遮挡“强”文本，并更改图层名称为“金属素材”，然后执行“图层”>“创建剪贴蒙版”命令，使用该图层对“强”图层创建剪贴蒙版，制作金属效果文字，如图6-67所示。步骤3图6-67 输入并处理“强”字单击“调整”面板中的“色阶”按钮 ，创建“色阶”调整图层并剪贴在“强”图层上方，然后调整色阶参数，使金属质感更加突出，如图6-68（a）和（b）所示。步骤4图6-68 输入并处理主体文案（a）（b）按“步骤3”“步骤4”的操作方法分别制作“劲”“动”“力”文字，效果如图6-68（c）所示。步骤5图6-68 输入并处理主体文案（c）分别为“强”“劲”“动”“力”图层添加“投影”样式，然后按【Ctrl+O】组合键打开本章案例五“光效.png”图像素材，并使用“移动工具” 将其移动至“劲”字笔画转折处，如图6-69所示。步骤6图6-69 为主体文案添加“投影”样式和光效使用“圆角矩形工具” 绘制一个500×175像素，圆角为80像素的圆角矩形，为其添加“渐变叠加”样式，叠加颜色分别为#b5d22b和#f0ea39，如图6-70所示。步骤7图6-70 绘制圆角矩形并添加“渐变叠加”样式选择“横排文字工具” ，根据文案的层级设置文字参数（中文文字都使用微软雅黑字体，价格文字使用Impact字体），输入文案，然后将“圆角矩形1”图层的图层样式复制到商品价格文字图层中，最终效果如图6-71所示。到此，便完成了剃须刀主图的设计。步骤8图6-71 输入副标题文案
THANK YOU!

展开更多......

收起↑