电子商务概论(第2版)-教学课件-作者-杭俊-编-03-第三章-电子商务中的视觉设计技术

CompanyLOGO第三章电子商务中的视觉设计技术经济管理学院杭俊

第二篇技术篇ElectronicCommerceCompanyLOGO第三章电子商务中的视觉设计技术经济管1Contents第一节Web网页设计技术基础第二节电子商务视觉设计基础第三节商品图片的拍摄与处理ElectronicCommerceElectronicCommerce第四节视觉设计中的图片处理Contents第一2本章学习目标1了解Web页面的表现技术。2理解电子商务视觉设计基础。3熟知商品图片的拍摄与处理。ElectronicCommerceElectronicCommerce本章学习目标1了解W3本节主题主题一：Web技术发展简史第一节Web网页设计技术基础主题二：

Web技术概述ElectronicCommerceElectronicCommerce本节主题主题一：W4主题一：Web网页设计技术基础ElectronicCommerceElectronicCommerce一、Web技术发展简史Web技术的发展经历了三个阶段：“静态网页”时代、“动态网页”时代和Web2.0时代。1．“静态网页”时代在“静态网页”时代，通过客户机端的Web浏览器，用户可以访问网络上各个Web站点，通过Web站点上的主页访问整个网站。2．“动态网页”时代为了克服静态网页的不足，人们将传统单机环境下的编程技术引入互联网络，并与Web技术相结合，从而形成新的网络编程技术。3．Web2.0时代简单地说，Web2.0不是一个具体的事物，而是一个阶段，是促成这个阶段的各种技术和相关的产品服务的一个称呼。主题一：Web网页设5主题二：Web技术概述1．Web技术的分工（1）使用HTML与XHTML搭建网站的结构网站内容间的关联通过HTML与XHTML组织起来的，相比较而言，XHTML更加严谨。（2）使用CSS美化与布局网站（3）使用脚本语言实现动态与交互效果（4）使用数据库软件实现数据存储ElectronicCommerce主题二：Web技术概述1．Web技术的分工www.them6主题二：Web技术概述2．Web设计中常用的软件（1）Notepad++是一款由国内技术人员编写的开源的、小巧的、功能强大的文字处理软件，此软件可以称为Windows记事本的完美替代方案，而且很多功能可以自己定制。（2）EditPlus是一款由韩国人编写的小巧但功能强大的文字处理软件，其所提供的功能和稳定性远远强于Windows提供的记事本，而且很多功能可以自己定制。（3）Dreamweaver是Adobe公司出品的一款建立Web站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。（4）PhotoShop是Adobe公司出品的一款对数字图形编辑和创作的软件。Photoshop同时携带了一款可以制作GIF图片和对网页进行切图的软件ImageReady。ElectronicCommerce主题二：Web技术概述2．Web设计中常用的软件www.t7主题二：Web技术概述1.动态网页技术（1）网页的动态表现技术GIF动画图片的出现是动态网页的雏形，虽然丰富了网页的表现形式，但终究只是一张活动的图，满足不了人们的交互需求。1）Shockwave是一种用于动画和交互式展示的图形格式，由名为Director的程序所创建。2）Java语言的应用Java的应用有两种：Java应用程序与Java小程序（JavaApplet）。3）脚本语言的使用脚本是用来运行在客户端，实现Web浏览器的时间驱动功能的。

（2）网页的动态内容技术表现永远是手段，而内容才是本质。实现动态网页的根本还是在内容上实现动态访问。ElectronicCommerce主题二：Web技术概述1.动态网页技术www.them8本节主题主题一：色彩第二节电子商务视觉设计基础主题二：文字ElectronicCommerceElectronicCommerce本节主题主题一：色彩9主题一：色彩1．关于色彩（1）色彩在电子商务的视觉设计中，人们对色彩的喜好偏差往往对他们的消费体验起着非常关键的作用。（2）色相环色相环的作用是告诉我们颜色之间的相互关联。2．色彩与情感红色血气、热情、主动、节庆、愤怒橙色欢乐、信任、活力、新鲜黄色温暖、快乐、希望、智慧绿色健康、生命、和平、宁静蓝色可靠、力量、冷静、清爽、专业紫色神秘、高尚、优雅黑色深沉、黑暗白色朴素、纯洁、清爽、干净灰色冷静、中立ElectronicCommerce主题一：色彩1．关于色彩www.themegallery.c10主题一：色彩1．色彩在设计中的作用色彩能帮助我们快速地建立用户认知，这里我们以基本的三原色为例，介绍色彩在设计中的运用。2．色彩情感在视觉设计中的运用（1）引导——

理解浏览者对色彩的喜好偏差（2）决策——运用色彩实现“七秒定律”（3）转化——以色彩实现订单的高“转换率”综上所述，我们在进行网页色彩设计时，不能单纯凭借自己的喜好去配色，还需要考虑网站所营销的产品和服务的定位以及标准色和整体的色调。这样即便不能满足所有浏览者的需要，但是可以顾及大多数用户。需要大家理解的是，具体的色彩风格需要设计者认真地了解设计需求，从浏览者的角度去感觉，色彩的设计与运用不是限定的，是可以灵活调整不断优化的。ElectronicCommerce主题一：色彩1．色彩在设计中的作用www.themegall11主题二：文字1．文字设计的元素我们从字体、字号、行长、间距和背景五个元素来讨论文字在设计中追求的效果和效果的实现。2．文字的层级关系文字的层级经常在网页设计中被忽视。其实文字层级在沟通中扮演着重要角色，它可以将用户引向期望中的结果的同时改善用户的体验。3.网页设计中的创意1．大自然8．食物2．音乐9．老物件3．艺术10．建筑4．包装5．摄影6．时尚7．室内设计ElectronicCommerce主题二：文字1．文字设计的元素www.themegaller12主题二：文字1.留白与富媒体在网页视觉设计中的运用1．留白留白和负空间的术语近年来被交替使用，它们指画布（或数码设备屏幕）上不包含任何内容的空间。艺术角度上说，留白就是以“空白”为载体进而渲染出美的意境的艺术；应用角度上说，留白更多指一种简单、安闲的理念。2．富媒体近年来在网页浏览时，你一定会发现包含视频等多媒体元素，扔掉文字内容的网站越来越多。什么是富媒体（RichMedia）？富媒体以多媒体形式来展现信息，包含二维动画、三维动画、影像和声音等。ElectronicCommerce主题二：文字1.留白与富媒体在网页视觉设计中的运用www.13第三节商品图片的拍摄与处理

一、商品拍摄简述商品拍摄的目的在于对商品进行有机的组织，利用合理的构图和恰当的用光，将商品表现得栩栩如生，给浏览者以真实的感受。二、商品拍摄器材1．照相机商品的拍摄需要一款适合静物拍摄的照相机，这类照相机都会具有微距的功能。2．三脚架三脚架是我们进行商品拍摄的主要附件，目的在于避免相机的晃动，保证影像的清晰度。3．灯光灯光是室内拍摄的主要工具，通常在室内拍摄时我们会使用三个30W以上的三基色白光节能灯，价格相对适中，色温也好，很适合室内拍摄。4．商品拍摄台我们在进行商品拍摄时是需要一些平面支撑的。一般光滑平整的桌面都可以作为拍摄台来使用。ElectronicCommerce第三节商品图片的拍摄与处理

一、商品拍摄简述www.th14第三节商品图片的拍摄与处理三、光线的使用商品拍摄多数是在拍摄台上实现的，在拍摄中灯光使用较多，自然光使用较少，在灯光处理方面比较复杂。1．室内自然光室内自然光是由户外自然光通过门窗等射入室内的光线，方向明显，极易造成物体受光部分和阴暗部分的明暗对比。2．人工光源主要是指各种灯具发出的光。（1）侧光，可以很好地显示拍摄对象的形态和立体感。（2）侧逆光，能够强化商品的质感表现。（3）角度较低的逆光，能够表现出商品的透明感。（4）角度较高的逆光，常用于拍摄商品的轮廓形态。ElectronicCommerce第三节商品图片的拍摄与处理三、光线的使用www.them15第三节商品图片的拍摄与处理四、商品的构图商品在被拍摄时的构图大多是通过拍摄者的主观意图摆设出来的，所以对于构图的要求更加严谨，对于画面中各种关系的处理也要求更加合理。（1）△型（三角形）构图△型构图即三角形构图，是静物拍摄最常用的一种方式。它所表现的静物画面具有稳定性和庄严的感觉。（2）▽型（倒三角形）构图与三角形构图相反，倒三角形构图极富动感，追求在不稳定的情绪中体现感觉上的变化。（3）S型构图S型构图，优美而富于变化，在商品拍摄中比较少用。S型构图通常借助线条的表现力来烘托商品的美感。（4）对角线构图在对角线构图形式中，主体会有所倾斜，加强了画面的冲击力度，给人以强烈的动感。ElectronicCommerce第三节商品图片的拍摄与处理四、商品的构图www.them16第三节商品图片的拍摄与处理五、背景的选择与处理在商品拍摄中，背景可以表现主体所处的环境，对表现整个画面的色调、气氛和空间感有着至关重要的作用。背景布置的技巧：（1）背景色彩要单一，布置要整洁。（2）背景颜色要能突出产品，不要使用和产品同色或相近色的背景色。（3）商品放置于整洁的水平面上后，在其后方垂直面上铺放白纸可衬托出简洁的效果。（4）针对反光类的商品，拍摄时可以使用背景纸将其围起来拍摄。ElectronicCommerce第三节商品图片的拍摄与处理五、背景的选择与处理www.t17本节主题主题一：图片大小的处理第三节视觉设计中的图片处理主题二：对于图片细节的处理ElectronicCommerceElectronicCommerce本节主题主题一：图片181.图片大小的处理（1）使用Photoshop软件打开需要处理的图片。（2）选择Photoshop软件菜单中的“图像——

图像大小”，进行大小调整，如图3-3所示。（3）选择Photoshop软件菜单中的“文件——存储为Web所用格式”，将文件存为120K大小。2.对于图片细节的处理1．抠图Photoshop软件中针对抠图的工具主要有三种：魔棒工具、多边形套索工具和钢笔工具。2．水印图片在使用时经常需要添加水印，常见的水印分文字水印和图案水印两种。ElectronicCommerce1.图片大小的处理19水印制作步骤（1）新建一个新的图层，长度和宽度都为8厘米，分辨率是默认的72像素/英寸，背景默认透明。（2）选择工具栏中的“横排文字工具”，在新建图层上写上水印文字。（3）在右下方工具栏中的“添加图层样式”按钮中找到“描边”。（4）在填充中通过修改数值将字体调成空心。如果你需要调整描边颜色的深浅，可以在图层里面选不透明度，一般改成55%即可。（5）在“选择”菜单中单击“全选”选中整个图层，再单击“编辑——定义图案”给水印起一个名字，比如“水印”。（6）打开需要添加水印的图案，填充该水印即可。3．图片文字去除与图像嫁接使用Photoshop软件可以很容易地去掉原有图片中的文字或者将新的图像元素嫁接到自己的图片中。这两者都可以采用Photoshop软件中的仿制图章工具来完成。ElectronicCommerce水印制作步骤Elec20图文解说ElectronicCommerce图文解说Electr21【本章习题】

一、选择题1．Web技术的发展并未经历的阶段是（）A．静态网页时代

B．动态网页时代C．Web1.0时代

D．Web2.0时代2．色相环由（）种颜色组成A．5

B．8

C．12

D．103．以下哪一种颜色不属于色彩的三原色（）A．绿

B．黄

C．蓝

D．红4．以下哪一种拍摄器材会涉及色温的问题（）A．照相机

B．灯光

C．背景材料

D．三脚架二、问答题1．简述Web1.0与Web2.0的区别和什么是社交网络。2．简述色相环的构成和作用。3．说说自己对色彩和情感的理解。4．谈谈如何区分衬线体与非衬线体。ElectronicCommerce【本章习题】

一、选择题www.themegallery.c22课外修炼素材CNN：PS联盟：三视觉平面设计在线：123ElectronicCommerceElectronicCommerce课外修炼素材CNN：23微语录丹·卡登我对于时尚的理解是让人们以更加自我的方式去追寻生活的真谛。我们的灵感来源于那些通常来讲并不流行的东西。ElectronicCommerceElectronicCommerce克里斯汀·拉克鲁瓦微语录丹·卡登我对于24课后思考

如何进行Banner的构成与创意设计?ElectronicCommerceElectronicCommerce课后思考25CompanyLOGOThankYou!ElectronicCommerce经济管理学院杭俊CompanyLOGOThankYou!Electro26CompanyLOGO第三章电子商务中的视觉设计技术经济管理学院杭俊

第二篇技术篇ElectronicCommerceCompanyLOGO第三章电子商务中的视觉设计技术经济管27Contents第一节Web网页设计技术基础第二节电子商务视觉设计基础第三节商品图片的拍摄与处理ElectronicCommerceElectronicCommerce第四节视觉设计中的图片处理Contents第一28本章学习目标1了解Web页面的表现技术。2理解电子商务视觉设计基础。3熟知商品图片的拍摄与处理。ElectronicCommerceElectronicCommerce本章学习目标1了解W29本节主题主题一：Web技术发展简史第一节Web网页设计技术基础主题二：

Web技术概述ElectronicCommerceElectronicCommerce本节主题主题一：W30主题一：Web网页设计技术基础ElectronicCommerceElectronicCommerce一、Web技术发展简史Web技术的发展经历了三个阶段：“静态网页”时代、“动态网页”时代和Web2.0时代。1．“静态网页”时代在“静态网页”时代，通过客户机端的Web浏览器，用户可以访问网络上各个Web站点，通过Web站点上的主页访问整个网站。2．“动态网页”时代为了克服静态网页的不足，人们将传统单机环境下的编程技术引入互联网络，并与Web技术相结合，从而形成新的网络编程技术。3．Web2.0时代简单地说，Web2.0不是一个具体的事物，而是一个阶段，是促成这个阶段的各种技术和相关的产品服务的一个称呼。主题一：Web网页设31主题二：Web技术概述1．Web技术的分工（1）使用HTML与XHTML搭建网站的结构网站内容间的关联通过HTML与XHTML组织起来的，相比较而言，XHTML更加严谨。（2）使用CSS美化与布局网站（3）使用脚本语言实现动态与交互效果（4）使用数据库软件实现数据存储ElectronicCommerce主题二：Web技术概述1．Web技术的分工www.them32主题二：Web技术概述2．Web设计中常用的软件（1）Notepad++是一款由国内技术人员编写的开源的、小巧的、功能强大的文字处理软件，此软件可以称为Windows记事本的完美替代方案，而且很多功能可以自己定制。（2）EditPlus是一款由韩国人编写的小巧但功能强大的文字处理软件，其所提供的功能和稳定性远远强于Windows提供的记事本，而且很多功能可以自己定制。（3）Dreamweaver是Adobe公司出品的一款建立Web站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。（4）PhotoShop是Adobe公司出品的一款对数字图形编辑和创作的软件。Photoshop同时携带了一款可以制作GIF图片和对网页进行切图的软件ImageReady。ElectronicCommerce主题二：Web技术概述2．Web设计中常用的软件www.t33主题二：Web技术概述1.动态网页技术（1）网页的动态表现技术GIF动画图片的出现是动态网页的雏形，虽然丰富了网页的表现形式，但终究只是一张活动的图，满足不了人们的交互需求。1）Shockwave是一种用于动画和交互式展示的图形格式，由名为Director的程序所创建。2）Java语言的应用Java的应用有两种：Java应用程序与Java小程序（JavaApplet）。3）脚本语言的使用脚本是用来运行在客户端，实现Web浏览器的时间驱动功能的。

（2）网页的动态内容技术表现永远是手段，而内容才是本质。实现动态网页的根本还是在内容上实现动态访问。ElectronicCommerce主题二：Web技术概述1.动态网页技术www.them34本节主题主题一：色彩第二节电子商务视觉设计基础主题二：文字ElectronicCommerceElectronicCommerce本节主题主题一：色彩35主题一：色彩1．关于色彩（1）色彩在电子商务的视觉设计中，人们对色彩的喜好偏差往往对他们的消费体验起着非常关键的作用。（2）色相环色相环的作用是告诉我们颜色之间的相互关联。2．色彩与情感红色血气、热情、主动、节庆、愤怒橙色欢乐、信任、活力、新鲜黄色温暖、快乐、希望、智慧绿色健康、生命、和平、宁静蓝色可靠、力量、冷静、清爽、专业紫色神秘、高尚、优雅黑色深沉、黑暗白色朴素、纯洁、清爽、干净灰色冷静、中立ElectronicCommerce主题一：色彩1．关于色彩www.themegallery.c36主题一：色彩1．色彩在设计中的作用色彩能帮助我们快速地建立用户认知，这里我们以基本的三原色为例，介绍色彩在设计中的运用。2．色彩情感在视觉设计中的运用（1）引导——

理解浏览者对色彩的喜好偏差（2）决策——运用色彩实现“七秒定律”（3）转化——以色彩实现订单的高“转换率”综上所述，我们在进行网页色彩设计时，不能单纯凭借自己的喜好去配色，还需要考虑网站所营销的产品和服务的定位以及标准色和整体的色调。这样即便不能满足所有浏览者的需要，但是可以顾及大多数用户。需要大家理解的是，具体的色彩风格需要设计者认真地了解设计需求，从浏览者的角度去感觉，色彩的设计与运用不是限定的，是可以灵活调整不断优化的。ElectronicCommerce主题一：色彩1．色彩在设计中的作用www.themegall37主题二：文字1．文字设计的元素我们从字体、字号、行长、间距和背景五个元素来讨论文字在设计中追求的效果和效果的实现。2．文字的层级关系文字的层级经常在网页设计中被忽视。其实文字层级在沟通中扮演着重要角色，它可以将用户引向期望中的结果的同时改善用户的体验。3.网页设计中的创意1．大自然8．食物2．音乐9．老物件3．艺术10．建筑4．包装5．摄影6．时尚7．室内设计ElectronicCommerce主题二：文字1．文字设计的元素www.themegaller38主题二：文字1.留白与富媒体在网页视觉设计中的运用1．留白留白和负空间的术语近年来被交替使用，它们指画布（或数码设备屏幕）上不包含任何内容的空间。艺术角度上说，留白就是以“空白”为载体进而渲染出美的意境的艺术；应用角度上说，留白更多指一种简单、安闲的理念。2．富媒体近年来在网页浏览时，你一定会发现包含视频等多媒体元素，扔掉文字内容的网站越来越多。什么是富媒体（RichMedia）？富媒体以多媒体形式来展现信息，包含二维动画、三维动画、影像和声音等。ElectronicCommerce主题二：文字1.留白与富媒体在网页视觉设计中的运用www.39第三节商品图片的拍摄与处理

一、商品拍摄简述商品拍摄的目的在于对商品进行有机的组织，利用合理的构图和恰当的用光，将商品表现得栩栩如生，给浏览者以真实的感受。二、商品拍摄器材1．照相机商品的拍摄需要一款适合静物拍摄的照相机，这类照相机都会具有微距的功能。2．三脚架三脚架是我们进行商品拍摄的主要附件，目的在于避免相机的晃动，保证影像的清晰度。3．灯光灯光是室内拍摄的主要工具，通常在室内拍摄时我们会使用三个30W以上的三基色白光节能灯，价格相对适中，色温也好，很适合室内拍摄。4．商品拍摄台我们在进行商品拍摄时是需要一些平面支撑的。一般光滑平整的桌面都可以作为拍摄台来使用。ElectronicCommerce第三节商品图片的拍摄与处理

一、商品拍摄简述www.th40第三节商品图片的拍摄与处理三、光线的使用商品拍摄多数是在拍摄台上实现的，在拍摄中灯光使用较多，自然光使用较少，在灯光处理方面比较复杂。1．室内自然光室内自然光是由户外自然光通过门窗等射入室内的光线，方向明显，极易造成物体受光部分和阴暗部分的明暗对比。2．人工光源主要是指各种灯具发出的光。（1）侧光，可以很好地显示拍摄对象的形态和立体感。（2）侧逆光，能够强化商品的质感表现。（3）角度较低的逆光，能够表现出商品的透明感。（4）角度较高的逆光，常用于拍摄商品的轮廓形态。ElectronicCommerce第三节商品图片的拍摄与处理三、光线的使用www.them41第三节商品图片的拍摄与处理四、商品的构图商品在被拍摄时的构图大多是通过拍摄者的主观意图摆设出来的，所以对于构图的要求更加严谨，对于画面中各种关系的处理也要求更加合理。（1）△型（三角形）构图△型构图即三角形构图，是静物拍摄最常用的一种方式。它所表现的静物画面具有稳定性和庄严的感觉。（2）▽型（倒三角形）构图与三角形构图相反，倒三角形构图极富动感，追求在不稳定的情绪中体现感觉上的变化。（3）S型构图S型构图，优美而富于变化，在商品拍摄中比较少用。S型构图通常借助线条的表现力来烘托商品的美感。（4）对角线构图在对角线构图形式中，主体会有所倾斜，加强了画面的冲击力度，给人以强烈的动感。ElectronicCommerce第三节商品图片的拍摄与处理四、商品的构图www.them42第三节商品图片的拍摄与处理五、背景的选择与处理在商品拍摄中，背景可以表现主体所处的环境，对表现整个画面的色调、气氛和空间感有着至关重要的作用。背景布置的技巧：（1）背景色彩要单一，布置要整洁。（2）背景颜色要能突出产品，不要使用和产品同色或相近色的背景色。（3）商品放置于整洁的水平面上后，在其后方垂直面上铺放白纸可衬托出简洁的效果。（4）针对反光类的商品，拍摄时可以使用背景纸将其围起来拍摄。ElectronicCommerce第三节商品图片的拍摄与处理五、背景的选择与处理www.t43本节主题主题一：图片大小的处理第三节视觉设计中的图片处理主题二：对于图片细节的处理ElectronicCommerceElectronicCommerce本节主题主题一：图片441.图片大小的处理（1）使用Photoshop软件打开需要处理的图片。（2）选择Photoshop软件菜单中的“图像——

图像大小”，进行大小调整，如图3-3所示。（3）选择Photoshop软件菜单中的“文件——存储为Web所用格式”，将文件存为120K大小。2.对于图片细节的处理1．抠图Photoshop软件中针对抠图的工具主要有三种：魔棒工具、多边形套索工具和钢笔工具。2．水印图片在使用时经常需要添加水印，常见的水印分文字水印和图案水印两种。ElectronicCommerce1.图片大小的处理45水印制作步骤（1）新建一个新的图层，长度和宽度都为8厘米，