项目四 任务3 网店详情页设计 课件 广东2022中职《Photoshop 图像处理》

Photoshop 图像处理 项目四 电商图像设计 1 任务1 网店店标设计 任务2 网店店招的设计 项目四 XIANG MU YI 01 02 电商图像设计 任务3 网店详情页设计 03 任务4 霓虹灯字设计 04 任务5 网店 Banner 设计 05 2 任务 3 网店详情页设计 项目四 电商图像设计 学习目标 ● 能熟练运用 Photoshop 中的颜色渐变填充工具。 ● 掌握一定的图文排版和配色技巧。 ● 能熟练运用画笔工具、直线工具、椭圆工具、圆角矩形工具、矩形工具及自定形状工具等绘制图形。 ● 能灵活运用图层蒙版、图层样式及滤镜功能制作图像特效。 ● 掌握网店详情页的设计思路和基本方法。 任务分析 一个好的产品需要有好的网店详情页来支撑，详情页是店铺产品是否能够交易成功的关键因素，成功的详情页可以有效地吸引客户并激发购买欲望。 本任务要求对“汇精展示用品”网店的详情页进行设计，效果图如图所示。 任务分析 详情页包含的主要元素有商品焦点图、商品展示图、商品基本信息和商品细节图。首先利用工具栏中的矩形工具和钢笔工具将详情页面分为上、中、下三个部分；然后用文字工具对上下两部分导入的商品图进行文字说明，展示商品的优势和基本信息；详情页的中间部分通过导入图片，使用文字工具对商品的功能进行详细说明；最后对详情页背景中的图片进行滤镜处理，形成最终效果图。 本任务的学习重点是各种绘图工具在详情页设计中的灵活运用及网店详情页的设计思路和基本方法。 任务实施 1．新建图像文件 单击“文件”菜单中的“新建”命令，弹出“新建”对话框，设置宽度为 750 像素，高度为 1800 像素，分辨率为 72 像素 / 英寸，颜色模式为 RGB 颜色、8 位，背景内容为白色。设置完成后，单击“确定”按钮。 任务实施 2．绘制参考线 （1）单击“视图”菜单中的“标尺”选项或按“Ctrl+R”键，打开标尺。 （2）在上方标尺处按住鼠标左键不放，分别向下拖动参考线至画布上边缘、中线处和下边缘，当参考线自动吸附至上边缘、中线处和下边缘时松开鼠标左键。 （3）在左侧标尺处按住鼠标左键不放，分别向右拖动至画布左边缘、中线处和右边缘，当参考线自动吸附至左边缘、中线处和右边缘时松开鼠标左键。效果图如图所示。 任务实施 3．制作背景 （1）新建图层 1，单击“矩形选框工具”按钮，吸附参考线绘制上半部分选框。 （2）单击“渐变工具”按钮，在工具选项栏中设置渐变类型为线性渐变，在“渐变编辑器”对话框中编辑渐变颜色,，如图所示。 任务实施 3．制作背景 (3) 新建图层 2，单击“矩形选框工具”按钮，吸附参考线绘制下半部分选框。 (4) 单击“渐变工具”按钮，在工具选项栏中设置渐变类型为线性渐变，在“渐变编辑器”对话框中编辑渐变颜色，将渐变色条左边的色标设置为 #e7e6dd，将渐变色条右边的色标设置为 #b9c7c8，从选区的左上角向右下角拖曳进行填充。按“ Ctrl+D”键取消选区，效果图如图所示。 任务实施 4．导入商品 （1）新建图层，命名为“展台 1”，单击“文件”菜单中的“置入嵌入的智能对象”命令，导入“展台 1.png”，用“移动工具”调整好图像的位置，按“ Ctrl+T”键，出现自由变换控件，用鼠标拖曳控点调整图像的大小。 ( ２) 新建图层，命名为“展台２”，用步骤（1）导入“展台 2.png”并调整图像的大小，效果图如图所示。 任务实施 5．为商品图片制作阴影效果 （1）按住“Ctrl”键，单击“展台 1”图层左边的图层缩览图，选中图像选区。 （2）新建图层，将新建图层移到“展台 1”图层的下方。 （3）单击“渐变工具”按钮，在工具选项栏中设置渐变类型为线性渐变，在“渐变编辑器”对话框中编辑渐变颜色。 （4）对阴影图层进行变形。按“ Ctrl+T”键，出现自由变换控件，按住“ Ctrl”键拖曳调整控点，图像右下方形成阴影效果，如图所示。 任务实施 5．为商品图片制作阴影效果 （5）单击“滤镜”菜单中的“模糊”命令，选择“高斯模糊”，设置半径为 7 像素。 （6）参照上面的步骤为“展台 2”图层添加阴影效果，如图所示。 任务实施 6．绘制图形 （1）新建图层，命名为“形状”，单击“矩形工具”按钮，在工具选项栏中设置模式为“形状”，填充色为 #043b5b，无描边，W=750 像素，H=356 像素，如图所示。 在画布中绘制矩形，单击“移动工具”按钮，将矩形移动到合适的位置，如图所示。 任务实施 6．绘制图形 （3）单击钢笔工具组中的“添加锚点工具”按钮，在矩形上方右侧适当的位置添加锚点，并调节锚点，效果图如图所示。用同样的方法制作左侧变形效果图。 任务实施 6．绘制图形 （4）单击“形状”图层，按“ Ctrl+J”键复制形状图层，生成