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

1、Company LOGO第三章电子商务中的视觉设计技术经济管理学院经济管理学院 杭俊杭俊 第二篇 技术篇Electronic CommerceLOGOContents第一第一节节 WebWeb网页设计技术基础网页设计技术基础 第二节第二节 电子商务视觉设计基础电子商务视觉设计基础 第三节第三节 商品图片的拍摄与处理商品图片的拍摄与处理Electronic CommerceElectronic Commerce第四第四节节 视觉设计中的图片处理视觉设计中的图片处理LOGO本章学习目标1了解Web页面的表现技术。2理解电子商务视觉设计基础。3熟知商品图片的拍摄与处理。Electronic Comm

2、erceElectronic CommerceLOGO本节主题本节主题主题一：Web技术发展简史第一节 Web网页设计技术基础主题二：Web技术概述Electronic CommerceElectronic CommerceLOGO主题一：Web网页设计技术基础Electronic CommerceElectronic Commerce一、一、Web技术发展简史技术发展简史 Web技术的发展经历了三个阶段：“静态网页”时代、“动态网页”时代和Web2.0时代。1“静态网页”时代在“静态网页”时代，通过客户机端的Web浏览器，用户可以访问网络上各个Web站点，通过Web站点上的主页访问整个网站。

3、2“动态网页”时代为了克服静态网页的不足，人们将传统单机环境下的编程技术引入互联网络，并与Web技术相结合，从而形成新的网络编程技术。3Web2.0时代简单地说，Web2.0不是一个具体的事物，而是一个阶段，是促成这个阶段的各种技术和相关的产品服务的一个称呼。LOGO主题二：Web技术概述v 1 1WebWeb技术的分工技术的分工v（1）使用HTML与XHTML搭建网站的结构v 网站内容间的关联通过HTML与XHTML组织起来的，相比较而言，XHTML更加严谨。v（2）使用CSS美化与布局网站v（3）使用脚本语言实现动态与交互效果v（4）使用数据库软件实现数据存储Electronic Comm

4、erceLOGO主题二：Web技术概述v 2 2WebWeb设计中常用的软件设计中常用的软件v（1）Notepad+是一款由国内技术人员编写的开源的、小巧的、功能强大的文字处理软件，此软件可以称为Windows记事本的完美替代方案，而且很多功能可以自己定制。v（2）EditPlus是一款由韩国人编写的小巧但功能强大的文字处理软件，其所提供的功能和稳定性远远强于Windows提供的记事本，而且很多功能可以自己定制。v（3）Dreamweaver是Adobe公司出品的一款建立Web站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人

5、员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。v（4）PhotoShop是Adobe公司出品的一款对数字图形编辑和创作的软件。Photoshop同时携带了一款可以制作GIF图片和对网页进行切图的软件ImageReady。Electronic CommerceLOGO主题二：Web技术概述v 1.动态网页技术动态网页技术v（1）网页的动态表现技术）网页的动态表现技术v GIF动画图片的出现是动态网页的雏形，虽然丰富了网页的表现形式，但终究只是一张活动的图，满足不了人们的交互需求。v 1）Shockwave是一种用于动画和交互式展示的图形格式，由名为Director的程序所创建。

6、v 2）Java语言的应用v Java的应用有两种：Java应用程序与Java小程序（Java Applet）。v 3）脚本语言的使用v 脚本是用来运行在客户端，实现Web浏览器的时间驱动功能的。（2）网页的动态内容技术）网页的动态内容技术v 表现永远是手段，而内容才是本质。实现动态网页的根本还是在内容上实现动态访问。Electronic CommerceLOGO本节主题本节主题主题一：色彩第二节电子商务视觉设计基础主题二：文字Electronic CommerceElectronic CommerceLOGO主题一：色彩v 1关于色彩关于色彩v（1）色彩v 在电子商务的视觉设计中，人们对色彩

7、的喜好偏差往往对他们的消费体验起着非常关键的作用。v（2）色相环v 色相环的作用是告诉我们颜色之间的相互关联。v 2色彩与情感色彩与情感 红色 血气、热情、主动、节庆、愤怒v 橙色 欢乐、信任、活力、新鲜v 黄色 温暖、快乐、希望、智慧v 绿色 健康、生命、和平、宁静v 蓝色 可靠、力量、冷静、清爽、专业v 紫色 神秘、高尚、优雅v 黑色 深沉、黑暗v 白色 朴素、纯洁、清爽、干净v 灰色 冷静、中立Electronic CommerceLOGO主题一：色彩v 1色彩在设计中的作用色彩在设计中的作用v 色彩能帮助我们快速地建立用户认知，这里我们以基本的三原色为例，介绍色彩在设计中的运用。v 2

8、色彩情感在视觉设计中的运用色彩情感在视觉设计中的运用v（1）引导 理解浏览者对色彩的喜好偏差v（2）决策 运用色彩实现“七秒定律”v（3）转化 以色彩实现订单的高“转换率”v 综上所述，我们在进行网页色彩设计时，不能单纯凭借自己的喜好去配色，还需要考虑网站所营销的产品和服务的定位以及标准色和整体的色调。这样即便不能满足所有浏览者的需要，但是可以顾及大多数用户。需要大家理解的是，具体的色彩风格需要设计者认真地了解设计需求，从浏览者的角度去感觉，色彩的设计与运用不是限定的，是可以灵活调整不断优化的。Electronic CommerceLOGO主题二：文字v 1文字设计的元素文字设计的元素v 我们

9、从字体、字号、行长、间距和背景五个元素来讨论文字在设计中追求的效果和效果的实现。v 2文字的层级关系文字的层级关系v 文字的层级经常在网页设计中被忽视。其实文字层级在沟通中扮演着重要角色，它可以将用户引向期望中的结果的同时改善用户的体验。v 3.网页设计中的创意网页设计中的创意v 1大自然 8食物 v 2音乐 9老物件v 3艺术 10建筑v 4包装v 5摄影v 6时尚v 7室内设计Electronic CommerceLOGO主题二：文字v 1.留白与富媒体在网页视觉设计中的运用留白与富媒体在网页视觉设计中的运用v 1留白v 留白和负空间的术语近年来被交替使用，它们指画布（或数码设备屏幕）上不

10、包含任何内容的空间。艺术角度上说，留白就是以“空白”为载体进而渲染出美的意境的艺术；应用角度上说，留白更多指一种简单、安闲的理念。v 2富媒体v 近年来在网页浏览时，你一定会发现包含视频等多媒体元素，扔掉文字内容的网站越来越多。什么是富媒体（Rich Media）？富媒体以多媒体形式来展现信息，包含二维动画、三维动画、影像和声音等。Electronic CommerceLOGO第三节 商品图片的拍摄与处理v 一、商品拍摄简述一、商品拍摄简述v 商品拍摄的目的在于对商品进行有机的组织，利用合理的构图和恰当的用光，将商品表现得栩栩如生，给浏览者以真实的感受。v 二、商品拍摄器材二、商品拍摄器材v

11、1照相机v 商品的拍摄需要一款适合静物拍摄的照相机，这类照相机都会具有微距的功能。v 2三脚架v 三脚架是我们进行商品拍摄的主要附件，目的在于避免相机的晃动，保证影像的清晰度。v 3灯光v 灯光是室内拍摄的主要工具，通常在室内拍摄时我们会使用三个30W以上的三基色白光节能灯，价格相对适中，色温也好，很适合室内拍摄。v 4商品拍摄台v 我们在进行商品拍摄时是需要一些平面支撑的。一般光滑平整的桌面都可以作为拍摄台来使用。Electronic CommerceLOGO第三节 商品图片的拍摄与处理v 三、三、光线的使用光线的使用v 商品拍摄多数是在拍摄台上实现的，在拍摄中灯光使用较多，自然光使用较少，

12、在灯光处理方面比较复杂。v 1室内自然光室内自然光是由户外自然光通过门窗等射入室内的光线，方向明显，极易造成物体受光部分和阴暗部分的明暗对比。v 2人工光源主要是指各种灯具发出的光。v（1）侧光，可以很好地显示拍摄对象的形态和立体感。v（2）侧逆光，能够强化商品的质感表现。v（3）角度较低的逆光，能够表现出商品的透明感。v（4）角度较高的逆光，常用于拍摄商品的轮廓形态。Electronic CommerceLOGO第三节 商品图片的拍摄与处理v 四四、商品的构图、商品的构图v 商品在被拍摄时的构图大多是通过拍摄者的主观意图摆设出来的，所以对于构图的要求更加严谨，对于画面中各种关系的处理也要求更

13、加合理。v（1）型（三角形）构图v 型构图即三角形构图，是静物拍摄最常用的一种方式。它所表现的静物画面具有稳定性和庄严的感觉。v（2）型（倒三角形）构图 v 与三角形构图相反，倒三角形构图极富动感，追求在不稳定的情绪中体现感觉上的变化。v（3）S型构图 v S型构图，优美而富于变化，在商品拍摄中比较少用。S型构图通常借助线条的表现力来烘托商品的美感。v（4）对角线构图 v 在对角线构图形式中，主体会有所倾斜，加强了画面的冲击力度，给人以强烈的动感。Electronic CommerceLOGO第三节 商品图片的拍摄与处理v 五五、背景的选择与处理背景的选择与处理v 在商品拍摄中，背景可以表现主

14、体所处的环境，对表现整个画面的色调、气氛和空间感有着至关重要的作用。v 背景布置的技巧：v（1）背景色彩要单一，布置要整洁。v（2）背景颜色要能突出产品，不要使用和产品同色或相近色的背景色。v（3）商品放置于整洁的水平面上后，在其后方垂直面上铺放白纸可衬托出简洁的效果。v（4）针对反光类的商品，拍摄时可以使用背景纸将其围起来拍摄。Electronic CommerceLOGO本节主题本节主题主题一：图片大小的处理第三节视觉设计中的图片处理主题二：对于图片细节的处理Electronic CommerceElectronic CommerceLOGOv 1.1.图片大小的处理图片大小的处理v（1）

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

16、寸，背景默认透明。v（2）选择工具栏中的“横排文字工具”，在新建图层上写上水印文字。v（3）在右下方工具栏中的“添加图层样式”按钮中找到“描边”。v（4）在填充中通过修改数值将字体调成空心。如果你需要调整描边颜色的深浅，可以在图层里面选不透明度，一般改成55%即可。v（5）在“选择”菜单中单击“全选”选中整个图层，再单击“编辑定义图案”给水印起一个名字，比如“水印”。v（6）打开需要添加水印的图案，填充该水印即可。v 3图片文字去除与图像嫁接v 使用Photoshop软件可以很容易地去掉原有图片中的文字或者将新的图像元素嫁接到自己的图片中。这两者都可以采用Photoshop软件中的仿制图章工具

17、来完成。Electronic CommerceLOGO图文解说图文解说Electronic CommerceLOGO【本章习题】v 一、选择题v 1Web技术的发展并未经历的阶段是（）v A静态网页时代 B动态网页时代v CWeb1.0时代 DWeb2.0时代v 2色相环由（）种颜色组成v A5 B8 C12 D10v 3以下哪一种颜色不属于色彩的三原色（）v A绿 B黄 C蓝 D红v 4以下哪一种拍摄器材会涉及色温的问题（）v A照相机 B灯光 C背景材料 D三脚架v 二、问答题v 1简述Web1.0与Web2.0的区别和什么是社交网络。v 2简述色相环的构成和作用。v 3说说自己对色彩和情

18、感的理解。v 4谈谈如何区分衬线体与非衬线体。Electronic CommerceLOGO课外修炼素材CNN：http:/PS联盟：http:/三视觉平面设计在线：http:/123Electronic CommerceElectronic CommerceLOGO微语录丹卡登我对于时尚的理解是让人们以更加自我的方式去追寻生活的真谛。我们的灵感来源于那些通常来讲并不流行的东西。Electronic CommerceElectronic Commerce克里斯汀拉克鲁瓦LOGO课后思考 如何进行Banner的构成与创意设计?Electronic CommerceElectronic CommerceCompany LOGOElectronic Commerce经济管理学院经济管理学院 杭俊杭俊