《电子商务网页设计与制作》课件第四章

第四章设计与制作网店结构模块

当商品图片的素材收集完毕后,要考虑的问题就是如何搭建电子商务网店。由于绝大多数运行在淘宝、易趣等电子商务平台上的网店页面版面布局基本是固定的,因此可以先对结构模块所用的素材进行设计与制作,最后生成整体页面效果。在电子商务网店的设计与制作中,最主要的网页元素就是图像。本章将学习网店各结构模块中静态图像元素的制作。知识目标(1)了解Photoshop的规则选区和不规则选区。(2)认识Photoshop文字工具。(3)掌握Photoshop图层的使用和样式修饰。(4)掌握Photoshop渐变工具。(5)掌握Photoshop形状工具。(6)掌握Photoshop辅助工具。(7)了解Photoshop绘制图像。(8)了解Photoshop修饰与修复图像。能力目标学习完本章后,学生应当能够依据要求完成网店各构成模块的设计与制作,包括:(1)抽取和修饰图像素材。(2)制作图像告示板。(3)制作网店分类图标按钮。(4)制作网店中文字和图像结合的展示模板。第一节制作网店告示板一、创建告示板文件

网店中的告示板文件一般放置在页面左边分类列表的上方或下方。宽度基本为190像素,高度不一,本节中文件大小以190×300像素为例。打开Photoshop,按要求新建文件,设置背景为白色。二、素材编辑

在Photoshop中打开“素材Ol.psd”,该素材文件为PSD分图层素材,便于编辑。按住Ctrl键,用鼠标单击图层“Layer1”的图层缩略图,然后复制该图层,在新建的告示板文件中进行粘贴,再通过“自由变换”设置为合适的大小。三、添加文字单击工具箱中的文字工具,在文字工具属性栏中设置字体大小、消除锯齿选项、颜色后,在告示板中单击,字可单行为一个文本图层,也可以通过按Enter键和Space键来换行对齐。移动图层内容时,可通过移动工具或者键盘方向键将其调整到合适位置。四、合并图层,保存文件将文件存储为“告示板.psd”,保留图层信息作为备用。然后可单击“图层”菜单,所示的圈中区域选择合并图层方式合并图层后,将文件存储为“告示板.jpg”,用于网店制作。五、规则选区六、羽化通过建立选区和选区周围像素之间的转换边界来模糊边缘,该模糊边缘将丢失选区边缘的一些细节。七、选区样式正常情况下通过拖动确定选框比例。固定长宽比:可设置创建选区的长宽比,输入长宽比的值。八、移动选区当用鼠标选择工具箱中的“选区工具”图标时,可用鼠标和方向键移动选区。九、文字工具属性排列方向:决定文字是以横向排列还是以竖向排列。字体:可以选择使用何种字体,不同的字体风格完全不同。字体样式:其下拉列表中包括4个选项,即Regular(标准)、Italic(倾斜)、Bold(加粗)、BoldItalic(加粗并倾斜)。字体大小:也称为字号,可通过下拉列表选择,也可手动自行设定字号。抗锯齿:控制字体边缘是否带有羽化效果。字体颜色:通过拾色器来改变文字的颜色,可以针对单个字符设置颜色。变形:可以使文字产生变形效果。字符调板:可以快速打开“字符”“段落”面板。十、合并图层可以将多个图层合并,合并图层将缩小图像文件的大小。十一、实例操作Photoshop可以使用特殊字体运用于图像,这是其一大特色。使用Photoshop制作的特殊字体可保存为图像,运用于网页,这是网页设计与制作中解决页面上特殊字体的一种常用方式。1.安装特殊字体2.“字符”面板可以对文字设定更多的选项,以调整文字。“字符”面板除了可以从字符工具属性栏调出外,还可以从菜单栏“窗口”中调出。行间距:控制文字行之间的距离。若设为“自动”,间距将会跟随字号的改变而改变;若设为固定的数值,则不会改变。比例间距:更改字符与字符之间的距离,可以同比例减少(只能减少而不能增加)字符的间距。字符间距:更改字符与字符之间的距离,相当于对所有字距增加或减少一个相同的数量。间距微调:用来调整两个字符之间的距离,但只针对某两个字符之间的距离有效。竖向偏移:即基线偏移,作用是将字符上下调整,常用来制作上标和下标。3.段落文字当输入大量文字时,可通过段落文本框来输入。输入的文字会基于定界框的尺寸进行自动切换,也可调整定界框的大小并进行旋转。定界框可以在选择文字工具后,用鼠标在文本图层上拖选产生,“段落”面板可以通过与“字符”面板同样的方法打开。4.“历史记录”面板在用Photoshop进行图像处理时,经常需要回到前一状态,这时可以使用“历史记录”面板在当前工作会话期间跳转到所创建图像的任意一种最近状态,每次对图像进行编辑更改时,图像的新状态都会添加到该面板中。第二节制作图片分类区一、创建图片分类区文件

按淘宝网店中常见的规格设置宽度为165像素,高度一般可自由可调,本节设高度为220像素,分辨率为72,背景为白色。二、粘贴新的背景图层打开素材文件夹,找到符合新春特色的底纹素材“DA-01.jpg”,并在Photoshop中打开,选择矩形选框工具在图像中创建选区,然后将该选区复制,在新建图片分类区中进行粘贴,通过“自由变换”进行调整三、不规则选区工具的运用

打开素材文件夹中的“180g猕猴桃干.jpg”,进行对应图像的色调、色泽调整。因为新文件的“图层1”为红色,所以猕猴桃干的图片就不能是白色的。单击工具箱中的快速选择工具,将属性栏画笔调至合适大小,进行选取,在选取前,可以通过单击工具箱中的放大镜工具放大图像,使选区更为精确。四、制作斜跨标签在“新春特卖区”中的“图层”面板中,新增加一个图层。然后在该图层中用矩形选框工具创建一个选区,单击工具箱中的油漆桶工具,对该矩形选框进行上色,通过自由变换工具旋转矩形选框并移动到合适的位置,完成后,确认自由变换结果,并通过按“Ctrl+D”组合键取消选区。最后输入标签文字,利用文字工具,将字体设为“时尚中黑简体”,输入“一元一袋”,并调整到合适的大小和颜色。五、图层样式修饰文字图层首先,用鼠标单击红色背景的“图层1”,再利用文本工具,设置字体为“幼圆”、大小为32、颜色为白色,输入“新春特卖”。在文本图层选中“新春特卖”后,在“图层”面板中单击“添加图层样式”按钮,在列表中选择“描边”第三节制作图标分类列表区本节通过对图像素材的简单处理和文字的制作来完成网店图标分类列表。这种图标分类列表的制作也类似于网页设计与制作里面的“按钮”一、创建图标文件网店中的图标文件一般放置在页面左边的分类列表中。二、素材图片编辑为了体现农产品特色,因此考虑使用绿色系的色调图片。在Photoshop中打开素材图片“露珠绿叶.jpg”。三、粘贴新图层在完成裁剪的素材图片中,按“Ctrl+A”组合键进行全选,再按“Ctrl+C”组合键进行复制。在新建的分类图标文件中,按“Ctrl+V”组合键进行粘贴。四、加圆角矩形边框为图标加上圆角矩形边框,通过单击“图层”面板中的“创建新图层”在“图层1”上创建透明“图层2”。通过按住Ctrl键,同时用鼠标单击“图层2”的缩略图,选中“图层2”中的圆角矩形。然后执行“选择”→“反向”命令,接着单击“图层”面板中的“创建新图层”图标,创建“图层3”。通过工具箱中的油漆桶工具,把“图层3”的对应选区全部填充为白色,再一次执行“选择”→“反向”命令,并按Delete键进行清除。将“图层2”的可见性关闭,最后按“Ctrl+D”组合键,取消选区。五、添加渐变效果在“图层3”上添加“图层4”,调整工具箱中的前景色和背景色,再单击工具箱中的渐变工具,编辑渐变效果时,可通过单击渐变工具属性栏中的渐变效果缩略图,调出“渐变编辑器”窗口,进行调整。第四节

制作商品描述模板一、创建商品描述文件在商品描述页面中,经常通过商品描述模板来进行描述。本节中文件大小以740×500像素为例。二、置入矢量素材图片用矢量素材“春天.ai”来做商品描述页面的背景。选中新建文件“背景”图层,通过执行“文件”→“置入”命令,在“置入”对话框中选择素材文件夹路径,找到“春天.ai”并打开。三、抽取商品文字描述素材打开图片文件“_IGP1539.jpg”,单击工具箱中的矩形选框工具,进行文字描述素材的选取,对选区进行复制,然后新建文件,设置“预设”选项为“剪贴板”,在新建文件中进行粘贴,并将图片调整至合适的亮度和清晰度。四、图章工具修饰图片

通过工具箱中的“放大镜”放大图片,以便修饰图片。五、辅助参考线的设置

为了在图像中对其他图层的图