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

Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,11/7/2009,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,电子商务网页设计,教育部中等职业教育专业技能课立项教材,中等职业教育实战型电子商务规划教材,主编 袁海波张勋若,电子商务网页设计教育部中等职业教育专业技能课立项教材主编,content,电子商务网页赏析,商品图片的使用与编辑,1,5,目录,HTML,网页制作基础,2,电子商务网页编辑软件,3,网页元素的编辑,4,表格与,DIV,的使用,HTML5,与响应式网页设计,6,10,使用,CSS,控制页面元素,7,使用,Animate,制作网页中的动画,8,使用,JS,制作动态效果,9,设计与制作电子商务网店结构项目,11,content电子商务网页赏析商品图片的使用与编辑15目录H,商品图片的使用与编辑,5,拍摄主题商品图片,处理与修饰商品图片,商品图片的使用与编辑5拍摄主题商品图片,C,ontents,目录,任务分析,1,相关知识,2,任务实施,3,任务一,拍摄主题商品图片,Contents目录任务分析1相关知识2任务实施3任务一,图片是商品的灵魂,一张漂亮的商品图片可以直接刺激到顾客的视觉感官,让顾客产生了解的兴趣和购买的欲望。对于商品摄影来说,拍摄技法是非常重要的,拍摄者需要根据商品的特点来选择不同的用光方法,并根据商品本身的特点来控制画面影调,借助不同的表现手法使商品更具魅力。,任务分析,1,图片是商品的灵魂,一张漂亮的商品图片可以直接刺激到顾客的视觉,你觉得以下图片哪些拍摄得更好？,相关知识,2,你觉得以下图片哪些拍摄得更好？相关知识2,相关知识,2,相关知识2,拍摄主题商品图片,1,你觉得以下商品有哪些不同？,相关知识,2,拍摄主题商品图片1你觉得以下商品有哪些不同？相关知识2,相关知识,2,相关知识2,相关知识,2,相关知识2,1.,场所、角度、前期准备,(1),准备好拍摄的场所。用白色或者纯色的东西作为背景,比如白纸、桌面等。一块宽,1,米、长,1.5,米的白色泡沫作为背景基本上可以应付一般物品的尺寸。,相关知识,2,1.场所、角度、前期准备相关知识2,（,2,）研究好拍摄的角度。,不同的商品通过不同的角度拍摄,效果也是完全不相同的。对一件商品要采用多个角度进行拍摄,最后挑选最能表现商品特质的照片作为上传的商品照片。,相关知识,2,（2）研究好拍摄的角度。相关知识2,2.,相机设定及拍摄技巧,商品拍摄不同于艺术摄影,主要是为了将商品拍摄清楚,因此使用小光圈至关重要。我们都知道,光圈越小,景深越大,而光圈越大,景深越小。景深大,可以更为清晰地表现出商品的细节。,相关知识,2,2.相机设定及拍摄技巧相关知识2,3.,不同物品采取不同拍摄方法,(1),拍摄水晶等透明物品。,这类物品本身最大的特点就是透明,因此在拍摄过程中要力求体现其透明的特质。,(2),拍摄首饰等反射物品。,这类物品具有反射的特点,非常容易反映出四周的情形,尤其是在四周颜色与其本身颜色截然相反的情况下,更加容易造成这种情形的出现。,(3),拍摄食品。,“色、香、味”是食品的特点,那么如何用图片来表现食品的特点呢,?,熟透了的食品往往是偏向于黑色,颜色太深会导致图片缺乏美感,无法引起买家的食欲。,(4),拍摄衣服。,这是所有物品中最容易拍摄的一类物品,也是最容易表现特点的物品。在拍摄过程中,手绝对不能颤抖,否则会影响服装质感的表现。,(5),拍摄化妆品。,化妆品消费人群多是女性,对产品的质感和功能非常看重,拍摄化妆品对光线、细节、颜色的要求很高。,相关知识,2,3.不同物品采取不同拍摄方法相关知识2,4.,产品图片拍摄相机使用技巧,(1),微距,:,用于拍摄比较细小的东西,如耳环、图钉。用这个功能的时候有两点要注意,;,一是要用三脚架固定,二是最好用相机的延时自拍功能。,(2),闪光灯,:,手表或者带玻璃的产品不能用闪光灯。,(3),白平衡,:,相机对于白色物体的还原功能,建议选择自动。,(4),光圈,:,光圈越大,单位时间内通过的光线越多,反之则越少。光圈的一般表示方法为“,F+,数值”,例如,F5.6,、,F4,等。这里需要注意的是数值越小,表示光圈越大,比如,F4,比,F5.6,的光圈大,并且两个相邻的光圈值之间相差两倍,也就是说,F4,比,F5.6,所通过的光线要多两倍。当然,光圈大小也影响景深,光圈越小,景深越大。,(5),快门,:,允许光通过光圈的时间,表示的方式是数值,例如,1/30,秒、,1/60,秒等。同样,两个相邻快门之间也相差两倍。,相关知识,2,4.产品图片拍摄相机使用技巧相关知识2,3,任务实施,以笔记本电脑的拍摄案例来分析如何拍摄商品图片。,(1),拍摄环境：使用双灯布光,一只在主体前,45,，,另一只在主体,90,，光比在三分之一挡内。,拍摄主体位置应控制在两灯交叉点，影棚内拍摄,感光度应在,200,以内,。,3 任务实施以笔记本电脑的拍摄案例来分析如何拍摄商品图片。,(2),拍摄角度,拍摄产品的正常角度，机位要与拍摄产品平行，横平竖直。,3,任务实施,(2)拍摄角度3 任务实施,(3),多方位表现产品：拍摄角度使用,45,俯式拍摄，产品摆向左方，分别拍摄正面与侧面。,3,任务实施,(3)多方位表现产品：拍摄角度使用45俯式拍摄，产品摆向左,(4),产品细节拍摄,:,合盖外观、左右接口、侧视图、机身后侧、电池。,任务实施,(4)产品细节拍摄:合盖外观、左右接口、侧视图、机身后侧、电,(5),微距拍摄产品细节：光驱、触摸板、转轴特写、快捷键、指示灯。,3,任务实施,(5)微距拍摄产品细节：光驱、触摸板、转轴特写、快捷键、指示,C,ontents,目录,任务分析,1,相关知识,2,任务实施,3,任务二,处理与修饰商品图片,Contents目录任务分析1相关知识2任务实施3任务二,处理与修饰商品图片的目的是什么,?,一是增加商品被潜在顾客发现的概率,;,二是影响买家作出购买决策,;,三是提高自己在同类商品卖家中的竞争力,;,四是提升销量,引起供货商的重视,得到更好的服务及更优惠的条件。,任务分析,1,处理与修饰商品图片的目的是什么?任务分析1,1.,图片处理的基本工具,(1)Photoshop;,(2),光影魔术手。,2.,两种图片处理工具优缺点的比较：,工具,优点,缺点,光影魔术手,绿色软件,简单、易用,不需要任何专业的图像技术。能够满足绝大部分照片后期处理的需要,批量处理功能非常强大,足够胜任淘宝商品图片的处理。,功能不够全面,部分图片处理仍需要借助Photoshop才能完成。,Photoshop,是公认最好、最全面的图片平面设计软件,界面友好,图像处理功能强大。,操作较复杂,需要比较专业或熟练的操作技巧;文件大,安装时间较长。,相关知识,2,1.图片处理的基本工具工具优点缺点光影魔术手绿色软件,3.,一般商品图片处理步骤：,处理时间段,处理项目,图片前期处理,图片大小的调整,图片亮度、色彩等的调整,图片白平衡的调整,锐化图片,提高清晰度,处理时间段,处理项目,图片后期处理,给图片加边框,给图片加水印,保存图片,批量处理图片,相关知识,2,3.一般商品图片处理步骤：处理时间段处理项目图片前期处理图片,4.,光影魔术手的应用,光影魔术手是一款针对图像画质进行改善、提升及效果处理的软件,简单、易用,不需要专业的图像技术,就可以制作出专业胶片摄影的色彩效果,且批量处理功能非常强大,是摄影作品后期处理、图片快速美容、数码照片冲印整理必备的图像处理软件,能够满足绝大部分人对于照片后期处理的需要。,(1),图片大小的调整,:,1),选择菜单栏“图像”“缩放”工具,或直接在工具栏中选择“缩放”工具。,2),建议,:,根据显示器分辨率和网站对商品图片的限制进行设置,建议大家制作图片的时候宽度选择范围最好在,500700px,这样的大小在各个分辨率下都能完整地显示图片,避免图片显示不全造成成交失败。,相关知识,2,4.光影魔术手的应用相关知识2,(2),图片亮度、色彩等的调整,:,1),打开需调整的图片,选择菜单栏“调整”“曲线”。,2),选择右边栏“色阶”进行调整。色阶用于表现一幅图的明暗关系。通过调整色阶可调整一幅图的色偏、色彩平衡、阴影高光等问题。,3),选择右边栏“数码补光”或是“数码减光”进行调整，可调整图片的明暗度。,相关知识,2,(2)图片亮度、色彩等的调整:相关知识2,(3),图片白平衡的调整,:,1),白平衡,:,白平衡英文名称为,WhiteBalance,。物体颜色会因投射光线颜色产生变化,在不同光线的场合下拍摄出的照片会有不同的色温。,2),遇到拍摄的图片偏色可以通过调整图片的白平衡进行处理,选择右边栏“自动白平衡”。,3),锐化图片提高清晰度,:,右边栏“清晰度”。,4),给图片加普通边框,:,工具栏“边框”。,相关知识,2,(3)图片白平衡的调整:相关知识2,5),给图片加多图边框,:,打开需要制作多图边框的其中一幅图片,鼠标单击工具栏“边框”“多图边框”如图,511,所示。,相关知识,2,图,5,11,多图边框,5)给图片加多图边框:相关知识2图511多图边框,在弹出的多图边框对话框中点击“添加图片”按钮,不需要的可删，去如图,512,、图,513,所示。,相关知识,2,图,5,12,图,5,13,添加图片,在弹出的多图边框对话框中点击“添加图片”按钮,不需要的可删,添加图片结束后,在多图边框中选择一个适合自己产品的边框模板。,建议,:,尽量将相关的商品图片放在一张图片上,;,选择适合自己商品的多图边框,;,注意图片不要太大,否则容易引起图片在宝贝描述中引用时因打不开或打开速度慢引起客户的不耐烦。,（,6,）,给图片加水印,(,文字类型,),：选择菜单栏“工具”“水印”。,（,7,）图片批处理：,相关知识,2,图,5,14,批处理,添加图片结束后,在多图边框中选择一个适合自己产品的边框模板,1),顶部工具栏“批处理”,弹出“批量处理”对话框,点击“添加”或“添加文件夹”按钮，如图,514,所示。,2),选择需进行批处理的图片，如图,515,所示。,相关知识,2,图,5,15,1)顶部工具栏“批处理”,弹出“批量处理”对话框,点击“添加,3),选择进行批处理的项目，如图,516,所示。,相关知识,2,图,5,16,3)选择进行批处理的项目，如图516所示。相关知识2图5,4),设置各批处理项目的内容，如图,517,所示。,相关知识,2,图,5,17,4)设置各批处理项目的内容，如图517所示。相关知识2图5,相关知识,2,图,5,18,完成设置,5),单击“下一步”按钮，如图,518,所示。,相关知识2图518 完成设置5)单击“下一步”按钮，如图,6),设置图片保存选项，如图,519,所示。,相关知识,2,图,5,19,输出设置,6)设置图片保存选项，如图519所示。相关知识2图519,7),建议,:,在对图片进行批处理时要求图片本身的质量比较高,并选用统一的背景,而且图片亮度比较平均,不需要做太大起伏的调节。例如,在摄影棚内拍出的图片,或者对单张图片处理要求不高的,只需要改变图片大小或加上水印,;,对已经用,Photoshop,调整好亮度和背景的图片,只需要加上统一的水印或者图框,也适合采用批处理方式进行图片处理。,相关知识,2,7)建议:在对图片进行批处理时要求图片本身的质量比较高,并选,以一幅“小熊公仔”的商品,图片的后期处理为例，介绍,使用光影魔术手对图片的处,理。,1.,对图片大小进行调整,(1),选择需处理的图片。,(,见图,520),3,任务实施,图,5,20,以一幅“小熊公仔”的商品3 任务实施图520,(2),选择“尺寸”工具对小熊进行缩放，如图所