《电子商务美工技术》课件模块九 Photoshop知识综合运用-静态图片处理实战.pptx

1、Photoshop知识的综合应用静态图片处理实战 模块九知识点解析 静态静态的照片要求能准确地表现出静态事物的形态、光泽、的照片要求能准确地表现出静态事物的形态、光泽、质地等基本特质，给浏览者愉悦的感受。处理此类照片时要注质地等基本特质，给浏览者愉悦的感受。处理此类照片时要注意主次关系的把握，力求将静物更加完美地展现出来，突出其意主次关系的把握，力求将静物更加完美地展现出来，突出其真实感。真实感。“变形文字变形文字”、“图层属性图层属性”、“批处理批处理”、“GIF动画动画”、“切片工具切片工具”是电子商务行业中常用的处理方式。是电子商务行业中常用的处理方式。知识点解析利用利用“变形文字变形文

2、字”加强加强装饰性装饰性一 为了为了让添加的文字起到更好的装饰画面的效果，可对文字进行适让添加的文字起到更好的装饰画面的效果，可对文字进行适当的变形处理并添加上发光样式，让文字更具艺术感，再与其他文字当的变形处理并添加上发光样式，让文字更具艺术感，再与其他文字组合，加强照片主题的表达，制作出更具欣赏性的画面。打开组合，加强照片主题的表达，制作出更具欣赏性的画面。打开“素材素材模块九模块九 素材素材鞋鞋.jpg”，如图，如图9-1所示。所示。图9-1 知识点解析利用利用“变形文字变形文字”加强加强装饰性装饰性一1、在工具箱中选择“横排文字工具”，打开“字符”面板。设置“字体”为“Didot”、“

3、大小”为“48点”，“颜色”为“白色ffffff”。2、在“文字”工具选项栏中选择“创建文字变形”命令，打开“变形文字对话框”，如图9-2所示，在选项后的下拉按钮中选择“花冠”，设置“弯曲”选项参数值为“75%”。图9-2知识点解析利用利用“变形文字变形文字”加强加强装饰性装饰性一3、在“图层”面板中双击文字图层，打开“图层样式对话框”，勾选“样式”为“投影”，设置“角度”为“90度”，“距离”为“6像素”，“大小”为“2像素”。“勾选样式”为“外发光”，设置“杂色”为“a3ccf4”，“大小”为“70像素”。在图像窗口中可以看到，文字边缘出现了柔和的蓝色发光效果，让文字更突出。如图9-3所示

4、。图9-3 知识点解析利用利用“变形文字变形文字”加强加强装饰性装饰性一4、新建文字图层，输入文字“You are the one my love my destiny”，设置“字体”为“Edwardian Script ITC”、“大小”为“48点”，“颜色”为“63a0d9”。在图层面板中双击文字图层，打开“图层样式对话框”，勾选样式为“投影”，设置“角度”为“90度”。5、打开“调整”面板，如图9-4所示，单击“照片滤镜”按钮，在“滤镜”右侧下拉框中选择“冷却滤镜（82）”，设置“浓度”为25%，“颜色”为“00b5ff”。图9-4知识点解析利用利用“变形文字变形文字”加强加强装饰性装饰

5、性一6、选择“画笔工具”，在鞋上进行涂抹，恢复鞋原有色调，逼真性。置入“素材模块九星光”，缩放移动至合适位置，最终效果如图9-5所示。图9-5 知识点解析利用利用“图层属性图层属性”加强加强生动性生动性二模特展示产品能给产品赋予内涵。设置模特展示产品能给产品赋予内涵。设置Photoshop中的中的“图层属图层属性性”，可以制作出更加生动的模特展示效果，可以制作出更加生动的模特展示效果。1、执行“文件”“新建”命令（或者按Ctrl+N），在弹出的“新建”对话框中设置“名称”为“模特展示图”，“宽度*高度”为“800*700像素”，“分辨率”为“300像素”，“颜色模式”为“RGB”，设置完成后单

6、击“确定”按钮，创建新文件。知识点解析利用利用“图层属性图层属性”加强加强生动性生动性二 2、置入“情侣01.jpg”，如图9-6所示。单击“添加图层蒙版”按钮，选择“渐变工具”中“黑白渐变”，效果如图9-7所示。设置图层“不透明度”为“30”。图9-6 图9-7知识点解析利用利用“图层属性图层属性”加强加强生动性生动性二3、单击“圆角矩形工具”，在图像中拖拽出一个圆角矩形，路径面板，按Ctrl转换成选区，“Ctrl+J”复制，得到“图层1”，设置图层属性。设置“投影”参数：“不透明度”为“30”，“距离”为“5”，“扩展”为“25”，“大小”为“20”；设置“内发光”参数：“不透明度”为“1

7、00”，“杂色”为“100”，“阻塞”为“5”，“大小”为“10”；设置“内阴影”参数：“不透明度”为“25”，“距离”为“4”，“阻塞”为“27”，“大小”为“5”。如图9-8所示。图9-8知识点解析利用利用“图层属性图层属性”加强加强生动性生动性二4、置入“情侣男单.jpg”、“情侣男单.jpg”，双击图层，将“图层属性”设置为“正片叠底”。如图9-9所示。图9-9知识点解析利用利用“批处理批处理”处理处理图片图片大小大小 三 Photoshop特有的图片处理方法特有的图片处理方法批处理。它的功能就是批量处理相同批处理。它的功能就是批量处理相同修改要求的图片，这个功能可以提高工作效率。打开

8、修改要求的图片，这个功能可以提高工作效率。打开“素材素材模块九模块九 素材素材侧边分侧边分类栏类栏侧边分类侧边分类-01.jpg”，如图，如图9-10 所示。按所示。按Ctrl+Alt+I查看图像大小为查看图像大小为“625*146px”，如图，如图9-11所示。所示。图9-10图9-11知识点解析利用利用“批处理批处理”处理处理图片图片大小大小 三现需要将现需要将“侧边分类栏侧边分类栏”文件夹中的所有图片大小调整为文件夹中的所有图片大小调整为“150*20px”。具体操作如下：。具体操作如下：1、打开Photoshop，选中“窗口”“动作”命令（或者按Alt+F9），打开动作命令窗口。如图9

9、-12所示。2、单击动作命令栏“创建新动作”快捷命令图标，弹出“新建动作”对话框，在“名称”栏中默认为“动作1”，然后单击“记录”按钮。此时，会看到动作面板下面出现一个红色的按钮，表示已经开始录下接下来操作的每一个步骤。图9-12知识点解析利用利用“批处理批处理”处理处理图片图片大小大小 三3、执行“图像”“图像大小”命令，设置“宽度”为“150px”，“高度”自动更改为“35px”，因为选择了“自动约束比例”，单击“确定”。4、执行“文件”“存储为”命令，在“格式”下拉菜单中选择“JPEG格式”，路径选择“素材模块九 素材侧边分类栏-新”，单击“保存”，自动打开“JPEG选项”对话框，在“品

10、质”框下拉菜单中选择“最佳”，单击“确定”。5、单击动作命令栏下方的“停止”按钮停止记录。6、执行“文件”“自动”“批处理”，打开批处理命令框。在“动作”下拉菜单中选择“动作1”，在“源”下拉菜单中选择“文件夹”，“选择”路径为“素材模块九 素材侧边分类栏”，单击“确定”。单击选中“包含所有子文件夹”复选框。在“目的”下拉菜单中选择“文件夹”，“选择”路径为“素材模块九 素材侧边分类栏-新”，选择“覆盖动作中的存储为命令”复选框，单击“确定”，再“确定”后开始批处理，打开“侧边分类栏-新”文件夹即可看到转化后的图像。知识点解析利用利用“GIF动画动画”加强动态性加强动态性四 GIF动画的使用能

11、够起到视觉吸引的作用，其制作主要在于动画的使用能够起到视觉吸引的作用，其制作主要在于“图层图层”和和“帧帧”的设置，以及某电商企业在双十二期间当天推的设置，以及某电商企业在双十二期间当天推出出“不限量现金红包不限量现金红包”活动，有活动，有“10元元”、“50元元”两种红包，两种红包，页头动画设置如下。页头动画设置如下。1、打开素材“素材模块九 素材双12首页导航底图”，如图9-13所示，分别置入素材“10元红包”、“50元红包”和“仅在12.12”，执行“窗口”“时间轴”命令，隐藏其他图层，只显示背景层，时间轴上的“第1帧”显示的内容就是“不限量现金红包”。图9-13知识点解析利用利用“GI

12、F动画动画”加强动态性加强动态性四2、单击“时间轴”下面的“复制所选帧”按钮，形成“第2帧”，如图9-14（左）所示，点击“10元红包”图层前的眼睛 ，让其可见，时间轴上的“第2帧”显示的内容就是“10元红包”。3、继续单击“复制所选帧”按钮，如图9-14（中）所示，点击“50元红包”图层前的眼睛 ，让其可见，时间轴上的“第3帧”显示的内容就是“50元红包”。4、再单击“复制所选帧”按钮，如图9-14（右）所示，点击“仅在12.12”图层前的眼睛 ，让其可见。逐个“时间轴”上的调整“帧延迟时间”，选择“运行”按钮，查看动画效果。图9-14知识点解析利用利用“GIF动画动画”加强动态性加强动态性

13、四5、单击“文件”“存储为Web所用格式”（或者按Ctrl+Alt+Shift+S），弹出的对话框中设置“预设”为“GIF”，“颜色”为“256”，如图9-15（左）所示，注意右下角的“循环”选项为“永远”，如图9-15（右）所示。点击“存储”，“仅限图像”，GIF动画的制作完成。效果见“素材模块九 素材双12首页导航动画”。图9-15知识点解析利用利用“切片工具切片工具”链接图片链接图片五 图片图片完成设计后，需要进行切片后上传至网店后台的完成设计后，需要进行切片后上传至网店后台的“图片空间图片空间”，才能在网上商店中进行展现。才能在网上商店中进行展现。1、打开“素材模块九 素材首页分类”，

14、如图9-16所示，选择工具栏中的“切片工具”，切割成图9-17。图9-16图9-17知识点解析利用利用“切片工具切片工具”链接图片链接图片五2、单击“文件”“存储为Web所用格式”，“存储”命令，在打开的文件夹中单击“格式”下拉框，选择“HTML和图像”如图9-18所示，单击“保存”按钮，则会生成“images”文件夹和“首页分类”两个文件，如图9-19所示。图9-18图9-19知识点解析利用利用“切片工具切片工具”链接图片链接图片五3、登录网店的后台，选择“上传图片”进行上传，如图9-20所示。移动鼠标至“首页分类_01_01.jpg”上，会出现“复制图片”、“复制链接”、“复制代码”三个图标，选择中间的“复制链接”图标。图9-20图9-21知识点解析利用利用“切片工具切片工具”链接图片链接图片五4、打开Dreamweaver软件，打开“第2步”生成的“首页分类.html”文件，单击其中的一片，将“源文件”的内容替换为“第三步”的“复制链接”的内容。如图9-22所示。按照同样的方法替换另外三块图片的“复制链接”的内容，按Ctrl+S保存。网页效果如图9-23所示。图9-22图9-23THANK YOU VERY MUCH!