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!