电子商务网页设计(第二版)-课件11.ppt

1、教育部中等职业教育专业技能课立项教材中等职业教育实战型电子商务规划教材主编 袁海波张勋若content电子商务网页赏析商品图片的使用与编辑15目录HTML网页制作基础2电子商务网页编辑软件3网页元素的编辑4表格与DIV的使用HTML5与响应式网页设计610使用CSS控制页面元素7使用Animate制作网页中的动画8 使用JS制作动态效果9设计与制作电子商务网店结构项目11商品图片的使用与编辑5拍摄主题商品图片处理与修饰商品图片 Contents目录任务分析1相关知识2任务实施3任务一任务一 拍摄主题商品图片图片是商品的灵魂,一张漂亮的商品图片可以直接刺激到顾客的视觉感官,让顾客产生了解的兴趣和

2、购买的欲望。对于商品摄影来说,拍摄技法是非常重要的,拍摄者需要根据商品的特点来选择不同的用光方法,并根据商品本身的特点来控制画面影调,借助不同的表现手法使商品更具魅力。任务分析1你觉得以下图片哪些拍摄得更好？相关知识2相关知识2拍摄主题商品图片1你觉得以下商品有哪些不同？相关知识2相关知识2相关知识21.场所、角度、前期准备(1)准备好拍摄的场所。用白色或者纯色的东西作为背景,比如白纸、桌面等。一块宽1米、长1.5米的白色泡沫作为背景基本上可以应付一般物品的尺寸。相关知识2（2）研究好拍摄的角度。不同的商品通过不同的角度拍摄,效果也是完全不相同的。对一件商品要采用多个角度进行拍摄,最后挑选最能

3、表现商品特质的照片作为上传的商品照片。相关知识22.相机设定及拍摄技巧商品拍摄不同于艺术摄影,主要是为了将商品拍摄清楚,因此使用小光圈至关重要。我们都知道,光圈越小,景深越大,而光圈越大,景深越小。景深大,可以更为清晰地表现出商品的细节。相关知识23.不同物品采取不同拍摄方法(1)拍摄水晶等透明物品。这类物品本身最大的特点就是透明,因此在拍摄过程中要力求体现其透明的特质。(2)拍摄首饰等反射物品。这类物品具有反射的特点,非常容易反映出四周的情形,尤其是在四周颜色与其本身颜色截然相反的情况下,更加容易造成这种情形的出现。(3)拍摄食品。“色、香、味”是食品的特点,那么如何用图片来表现食品的特点呢

4、?熟透了的食品往往是偏向于黑色,颜色太深会导致图片缺乏美感,无法引起买家的食欲。(4)拍摄衣服。这是所有物品中最容易拍摄的一类物品,也是最容易表现特点的物品。在拍摄过程中,手绝对不能颤抖,否则会影响服装质感的表现。(5)拍摄化妆品。化妆品消费人群多是女性,对产品的质感和功能非常看重,拍摄化妆品对光线、细节、颜色的要求很高。相关知识24.产品图片拍摄相机使用技巧(1)微距:用于拍摄比较细小的东西,如耳环、图钉。用这个功能的时候有两点要注意;一是要用三脚架固定,二是最好用相机的延时自拍功能。(2)闪光灯:手表或者带玻璃的产品不能用闪光灯。(3)白平衡:相机对于白色物体的还原功能,建议选择自动。(4

5、)光圈:光圈越大,单位时间内通过的光线越多,反之则越少。光圈的一般表示方法为“F+数值”,例如F5.6、F4等。这里需要注意的是数值越小,表示光圈越大,比如F4比F5.6的光圈大,并且两个相邻的光圈值之间相差两倍,也就是说F4比F5.6所通过的光线要多两倍。当然,光圈大小也影响景深,光圈越小,景深越大。(5)快门:允许光通过光圈的时间,表示的方式是数值,例如1/30秒、1/60秒等。同样,两个相邻快门之间也相差两倍。相关知识23 任务实施以笔记本电脑的拍摄案例来分析如何拍摄商品图片。(1)拍摄环境：使用双灯布光,一只在主体前45，另一只在主体90，光比在三分之一挡内。拍摄主体位置应控制在两灯交

6、叉点，影棚内拍摄感光度应在200以内。(2)拍摄角度拍摄产品的正常角度，机位要与拍摄产品平行，横平竖直。3 任务实施(3)多方位表现产品：拍摄角度使用45俯式拍摄，产品摆向左方，分别拍摄正面与侧面。3 任务实施(4)产品细节拍摄:合盖外观、左右接口、侧视图、机身后侧、电池。任务实施(5)微距拍摄产品细节：光驱、触摸板、转轴特写、快捷键、指示灯。3 任务实施Contents目录任务分析1相关知识2任务实施3任务二任务二 处理与修饰商品图片处理与修饰商品图片的目的是什么?一是增加商品被潜在顾客发现的概率;二是影响买家作出购买决策;三是提高自己在同类商品卖家中的竞争力;四是提升销量,引起供货商的重视

7、,得到更好的服务及更优惠的条件。任务分析11.图片处理的基本工具(1)Photoshop;(2)光影魔术手。2.两种图片处理工具优缺点的比较：工具优点缺点光影魔术手绿色软件,简单、易用,不需要任何专业的图像技术。能够满足绝大部分照片后期处理的需要,批量处理功能非常强大,足够胜任淘宝商品图片的处理。功能不够全面,部分图片处理仍需要借助Photoshop才能完成。Photoshop是公认最好、最全面的图片平面设计软件,界面友好,图像处理功能强大。操作较复杂,需要比较专业或熟练的操作技巧;文件大,安装时间较长。相关知识23.一般商品图片处理步骤：处理时间段处理项目图片前期处理图片大小的调整图片亮度、

8、色彩等的调整图片白平衡的调整锐化图片,提高清晰度处理时间段处理项目图片后期处理给图片加边框给图片加水印保存图片批量处理图片相关知识24.光影魔术手的应用光影魔术手是一款针对图像画质进行改善、提升及效果处理的软件,简单、易用,不需要专业的图像技术,就可以制作出专业胶片摄影的色彩效果,且批量处理功能非常强大,是摄影作品后期处理、图片快速美容、数码照片冲印整理必备的图像处理软件,能够满足绝大部分人对于照片后期处理的需要。(1)图片大小的调整:1)选择菜单栏“图像”“缩放”工具,或直接在工具栏中选择“缩放”工具。2)建议:根据显示器分辨率和网站对商品图片的限制进行设置,建议大家制作图片的时候宽度选择范

9、围最好在500700px,这样的大小在各个分辨率下都能完整地显示图片,避免图片显示不全造成成交失败。相关知识2(2)图片亮度、色彩等的调整:1)打开需调整的图片,选择菜单栏“调整”“曲线”。2)选择右边栏“色阶”进行调整。色阶用于表现一幅图的明暗关系。通过调整色阶可调整一幅图的色偏、色彩平衡、阴影高光等问题。3)选择右边栏“数码补光”或是“数码减光”进行调整，可调整图片的明暗度。相关知识2(3)图片白平衡的调整:1)白平衡:白平衡英文名称为WhiteBalance。物体颜色会因投射光线颜色产生变化,在不同光线的场合下拍摄出的照片会有不同的色温。2)遇到拍摄的图片偏色可以通过调整图片的白平衡进行

10、处理,选择右边栏“自动白平衡”。3)锐化图片提高清晰度:右边栏“清晰度”。4)给图片加普通边框:工具栏“边框”。相关知识25)给图片加多图边框:打开需要制作多图边框的其中一幅图片,鼠标单击工具栏“边框”“多图边框”如图511所示。相关知识2图511多图边框在弹出的多图边框对话框中点击“添加图片”按钮,不需要的可删，去如图512、图513所示。相关知识2图512图513添加图片添加图片结束后,在多图边框中选择一个适合自己产品的边框模板。建议:尽量将相关的商品图片放在一张图片上;选择适合自己商品的多图边框;注意图片不要太大,否则容易引起图片在宝贝描述中引用时因打不开或打开速度慢引起客户的不耐烦。（

11、6）给图片加水印(文字类型)：选择菜单栏“工具”“水印”。（7）图片批处理：相关知识2图514 批处理1)顶部工具栏“批处理”,弹出“批量处理”对话框,点击“添加”或“添加文件夹”按钮，如图514所示。2)选择需进行批处理的图片，如图515所示。相关知识2图5153)选择进行批处理的项目，如图516所示。相关知识2图5164)设置各批处理项目的内容，如图517所示。相关知识2图517相关知识2图518 完成设置5)单击“下一步”按钮，如图518所示。6)设置图片保存选项，如图519所示。相关知识2图519 输出设置7)建议:在对图片进行批处理时要求图片本身的质量比较高,并选用统一的背景,而且图

12、片亮度比较平均,不需要做太大起伏的调节。例如,在摄影棚内拍出的图片,或者对单张图片处理要求不高的,只需要改变图片大小或加上水印;对已经用Photoshop调整好亮度和背景的图片,只需要加上统一的水印或者图框,也适合采用批处理方式进行图片处理。相关知识2以一幅“小熊公仔”的商品图片的后期处理为例，介绍使用光影魔术手对图片的处理。1.对图片大小进行调整(1)选择需处理的图片。(见图520)3 任务实施图520(2)选择“尺寸”工具对小熊进行缩放，如图所示。3 任务实施2.对图片亮度色彩等的调整(1)选择右边栏“曲线”调整图像，如图521所示。3 任务实施图521(2)选择右边栏“色阶”进行调整，如

13、图522所示。3 任务实施图5223.图片白平衡的调整(1)选择右边栏“白平衡一指键”按钮，在弹出的对话框中选择“强力纠正”，如图523所示。3 任务实施图5234.锐化图片,提高清晰度(1)选择右边栏“清晰度”调整，如图524所示。3 任务实施图5245.给图片加边框选择右边栏“边框”“轻松边框”，添加图片边框。如图525所示。3 任务实施图5256.添加文字标签选择右顶部“文字”按钮，输入文字，并调整位置，如图526所示。3 任务实施图5267.添加水印选择右顶部“水印”按钮，添加水印，如图527所示。3 任务实施图527本项目通过两个案例简要地介绍了商品摄影技术,为电子商务商品图片的处理打下了一定的基础。介绍了利用光影魔术手对电子商务商品图片进行简单的处理,让我们对图片处理有了初步的了解。经验交流:同学们将学习过程中的疑难问题记录下来,和大家交流一下吧。项目总结项目总结