电子商务网页设计与制作--.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/3/15,幻灯片编号,电子商务网页设计与制作,content,赏析电子商务网页,认知网站页面布局,拍摄与处理商品图片,网店的设计与搭建,1,2,3,4,目录,5,6,7,8,9,电子商务网站的动态效果,创建与管理网站站点,制作图文网页,DIV+CSS布局设置,简单制作表单页面,赏析电子商务网页,1,赏析行业类网站,赏析电子商务类网站,电子商务网站的类型、特点和发展趋势,C,ontents,目录,认识网页布局设计,1,浅尝网站布局,2,第一节,赏析行业类网站,布局就是以最适合浏览的方式将图片和文字摆放在页面的不同位置。不同的制作者会有不同的布局设计。常见的网页布局有“国”字型布局、“T”型布局、POP布局、Flash布局、标题正文型布局、左右框架型布局、上下框架型布局。,必备知识,认识网页布局设计,1,“国”字型布局,以“新浪微博”网站为例介绍“国”字型布局。,新浪微博网站网址为 电子商务网站的类 型、特点和发展趋势,电子商务网站的类型,1,必备知识,按照商务目的和业务功能分类,（,1,）基本型商务网站。,（,2,）宣传型商务网站。,（,3,）客户服务型网站。,（,4,）完全电子商务运作型网站。,按照构建网站的主体分类,（,1,）行业电子商务网站。,（,2,）企业电子商务网站。,（,3,）政府电子商务网站。,（,4,）服务机构电子商务网站。,按照网站拥有者的职责分类,（,1,）生产型商务网站。,（,2,）流通型商务网站,按照电子商务模式分类,（,1,）B2B商务网站。,（,2,）B2C商务网站。,（,3,）C2C商务网站。,（,4,）B2G商务网站。,电子商务网站的类型,1,案例分析,阿里巴巴B2B模式分析,阿里巴巴网站是典型的B2B平台。阿里巴巴网站在推崇网上信息的时候主要提出四个理念：第一个是“找商机”；,第二个是“建公司”；,第三个为“交商友”；,第四个是“看商情”。,电子商务网站的特点,2,必备知识,商务性,电子商务网站最基本的特性为商务性,即为买卖双方提供买卖交易的机会。,服务性,企业通过将产品/服务移至互联网上,使客户能方便地获得产品或服务。,全球性,互联网是全球性的,这也决定了电子商务网站也是全球性的。,价值性,电子商务网站以极低的成本进入全球化的电子化市场，参与到市场的争夺中,资源共享性,通过电子商务网站紧密地联系在一起,建立网上商城系统,通过电子商务网站实现信息共享、资源共享、智力共享等。,互动性,通过网上商城系统商家之间可以直接交流、谈判、签合同,集成性,电子商务网站与客户关系管理系统、供应链管理系统集成,可以帮助企业集成新旧资源,充分利用已有资源。,可扩展性,扩展性的网上商城系统对于电子商务企业而言才是最稳定的系统。电子商务网站必须在出现高峰状况时及时扩展,才能使得系统阻塞的可能性大大降低。,安全性,随着技术的发展,电子商务网站的安全性也会相应得以增强。,协调性,决策者能够通过电子商务网站获得高价值的商业数据,有助于协调决策者进行科学决策。,电子商务网站的发展趋势,3,必备知识,移动购物,手机的渗透率增速远快于PC,也就是说电子商务将来的主战场不是在PC,而是在移动设备上。,充分地利用移动设备的特征,比如说它的扫描特征,图像、语音识别特征,感应特征,地理化、GPS的特征,这些功能可以真正把移动购物带到千家万户。,平台化,有了平台,卖家可以利用全社会的资源增加自己商品的丰富度,增加自己的服务和地理覆盖。,物联网,随着可穿戴设备和RFID的发展,将来的芯片可以植入皮肤,可以植入衣服,可以植入任何物品,任何物品状态的变化都可以引起其他相关物品的状态变化。,O2O,O2O即Online to Offline(在线到离线/线上到线下),线下销售与服务通过线上推广来揽客,消费者可以通过线上来筛选需求,在线预订、结算,线下交易、消费。,精准化营销和个性化服务,每个人都希望最大效率地应用这个营销的渠道,为其提供个性化的营销和服务。,电子商务网站的发展趋势,3,知识拓展,O2O,O2O是指将线下的商务机会与互联网结合,让互联网成为线下交易的平台,这个概念最早来源于美国。O2O的概念非常广泛,既可涉及线上,又可涉及线下。主流商业管理课程均对O2O这种新型的商业模式有所介绍及关注。,O2O电子商务模式需具备五大要素:独立网上商城、国家级权威行业可信网站认证、在线网络广告营销推广、全面社交媒体与客户在线互动、线上线下一体化的会员营销系统。,020,电子商务网站的发展趋势,3,必备知识,O2O主要经历了以下发展历程：,在1.0早期的时候,O2O线上线下初步对接,主要是利用线上推广的便捷性等把相关的用户集中起来,然后把线上的流量倒到线下,主要领域集中在以美团为代表的线上团购和促销等领域。发展到2.0阶段后,O2O基本上已经具备了目前大家所理解的要素。这个阶段最主要的特色就是升级为服务性电商模式,包括商品(服务)选购、下单、支付等流程,把之前简单的电商模块转移到更加高频和生活化场景中来。,到了3.0阶段,开始了明显的分化：一个是真正的垂直细分领域的一些公司开始凸现。,认知网站页面布局,2,认识网页制作工具,了解,Dreamweaver,界面,认识代码,运用,HTML,制作表单,运用,HTML,制作简单网页,C,ontents,目录,网页制作工具种类,1,Dreamweaver安装,2,第一节,认识网页制作工具,网页制作工具种类,1,（,1,）,Microsoft FrontPage,：是一款轻量级静态网页制作软件,特别适合新手开发静态网站的需要,但2006年底微软停止了FrontPage服务。,（,2,）,Dreamweaver网页制作软件,：Adobe Dreamweaver,简称“DW”。DW是集网页制作和网站管理于一身的“所见即所得”网页代码编辑器。该软件提供了模板套用功能,支持一键式生成网页框架功能,是初学者或专业级网站开发人员必备的选择工具。,（,3,）,CSS Design,：能够对CSS语法进行着色,同时支持即时查看样式功能。,（,4,）,Flash动画制作软件,：动画或动态图片是网页的重要组成部分,充分合理地使用Flash程序来设计网页元素,往往可达到意想不到的效果。,（,5,）,PS（Photoshop）图像处理软件,:用于对网页图片进行润色或特殊效果处理,是一款网页制作必备软件。,现在最常用的是Dreamweaver。,必备知识,网页制作工具种类,1,知识拓展,网页三剑客,网页三剑客是一套强大的网页编辑工具,最初是由Macromedia公司开发出来的,由Dreamweaver、Fireworks、Flash三个软件组成。,Dreamweaver是集网页制作和网站管理于一身的“所见即所得”网页代码编辑器。使用视觉辅助功能可以减少错误并提高网站开发速度。,Fireworks是由Macromedia(在2005年被Adobe收购)推出的一款图形编辑软件,软件可以加速 Web 设计与开发,是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。,Flash是由Macromedia公司推出的交互式矢量图和 Web 动画的标准。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。,Dreamweaver安装,2,操作步骤,1,2,3,4,5,6,打开百度,输入“Dreamweaver CS6下载”,选择一个安全可靠的网站下载安装包,来到安装界面,这里有两个选项,一个是安装,一个是试用,但是单击“试用”前要先断开网络,不然会出现只有登录Adobe账户才能安装的现象。,正式进入安装界面,单击“接受”进入下一步。安装位置,建议默认路径。,如果C盘空间不足,可以将软件安装到D盘、E盘或其他盘。,然后就可以打开软件了,首次打开会提示关联文件,默认即可,再在桌面上创建快捷图标。,C,ontents,目录,认识Dreamweaver界面,1,认识文档窗口,2,第二节,了解Dreamweaver界面,创建站点,3,认识Dreamweaver界面,1,认识Dreamweaver界面,1,必备知识,（,1,）标题栏（工具栏）：包含各种查看选项和一些常用的操作工具。,（,2,）菜单栏：主要有“文件”“编辑”“查看”“插入”“修改”“格式”“命令”“站点”“窗口”“帮助”10个菜单。,（,3,）插入面板（浮动面板）：面板组位于工作窗口的右侧,用于帮助用户监控和修改工作。,（,4,）属性面板：显示在文件窗口中所选元素的属性,并且可以对选择元素的属性进行修改。,（,5,）编辑窗口：文档窗口和html编辑器。用来输入所有网页信息。,（,6,）文件面板：站点的文件都显示在这个面板。,认识Dreamweaver界面,1,知识拓展,属性面板,属性面板显示了文档窗口中选择的元素的属性,并允许用户在属性面板中对元素属性直接进行修改,用户选择的元素不同,属性面板中显示的内容就不同。如需要修改单元格的背景时,只需选中单元格,在属性面板中进行相应的修改。,在属性面板右下角有一个倒三角标记,单击该标记,可以展开属性面板,显示更多的内容。,认识文档窗口,2,必备知识,创建站点,3,必备知识,创建站点是第一步,也是很重要的一步,创建之后,Dreamweaver就可以帮忙管理站点。,操作步骤,4,3,2,1,首先在电脑上设置需要建立站点的根目录文件夹,启动Dreamweaver,执行“站点管理站点新建新建站点”菜单命令。,弹出的窗口中设置“站点名称”和“本地站点文件夹”(即最初设定为站点根目录的文件夹)路径,设置完成后单击“保存”按钮。,在Dreamweaver的右侧面板中会出现网站的所有文件。,C,ontents,目录,查看网页代码,1,Dreamweaver常用代码,2,第三节,认识代码,查看网页代码,1,必备知识,四种打开网页源代码的方法,任意打开一个网页,鼠标右击会看到“查看源代码”,1,2,使用快捷键Ctrl+U来查看源代码,3,4,在你想要查看源代码的网页地址栏前面加上view-source,在浏览器的设置菜单框中,找到“更多工具”,然后找开发者工具,也可以查看网页源代码,Dreamweaver常用代码,2,必备知识,新建网页文档时,我们可以通过代码窗口或者拆分窗口看到这几行字。,1,2,3,4 无标题文档,5,6,7,8,9,这几行字就奠定了html的基本结构。在拆分窗口,我们可以很清晰地看到每一步操作对应的代码,先插入一行一列宽度为950px、边框粗细为0px的表格。,在这一行表格中插入一张图片,认识文档窗口,2,知识拓展,常用代码,:表示该文件为HTML文件;,:包含文件的标题、使用的脚本、样式定义等;,:包含文件的标题,标题出现在浏览器标题栏中;,:放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中显示;,:的结束标志;,:定义表格,是HTML中重要的标志;,:定义表格的行,用在中;,:定义表格的单元格,用在中;,:字体样式标志;,Width:定义表格宽度;,Height：定义表格高度;,Align：对齐方式;,Border：边框宽度;,Bgcolor：背景色;,Bordercolor：边框颜色;,Bordercolorlight：边框明亮面的颜色;,Bordercolordark：边框暗淡面的颜色;,Cellpadding：内容与边框的距离(默认为2);,Cellspacing：单元格间的距离(默认为2）;,Face：字体；,Style:字体样式;,Color:颜色;,P:段落标识;,Img:贴图标识。,C,ontents,目录,认识登录界面,1,了解登录界面元素,2,认识表单,第四节 运用HTML制作表单,制作登录界面,3,4,认识登录界面,1,在电商网站浏览购物时,需要登录个人账号;在论坛发表言论看法时,也需要登录个人账号。因此在网站制作中,需要制作用户的登录页面。现在一般有两种登录方式,即二维码登录和普通账号密码登录。,了解登录界面元素,2,必备知识,目前各大电商平台的账号密码/二维码登录界面布局一般可以分成三个区域:顶部为企业logo,左边为宣传海报、活动海报,右边为二维码登录框、账号密码登录框,如图2-19、图2-20、图2-21所示。,了解登录界面元素,3,必备知识,电商网站的登录界面一般包括6个主要元素:,(1)账号输入框:用于采集用户的账号信息。,(2)密码输入框:用于采集用户的密码信息。,(3)登录按钮:用于将账号和密码信息提交到服务器。,(4)其他登录方式:用户登录网站的其他选择,避免烦琐的注册流失顾客。,(5)忘记密码:用户用于获取密码的途径。,(6)立即注册:新用户注册会员的途径。,认识表单,3,必备知识,表单是HTML的重要组成部分之一,主要用于采集和提交用户输入的信息,是网站管理人员和用户之间沟通的渠道。表单有以下三个基本组成部分:,(1)表单标签:包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。,(2)表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。,(3)表单按钮:包括提交按钮、复位按钮和一般按钮。用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的工作。,制作登录界面,4,必备知识,制作登录界面,4,必备知识,在 Dreamweaver 中,表单输入类型称为表单对象。表单对象是允许用户输入数据的机制。可以在表单中添加以下表单对象:,(1)文本域:接受任何类型的字母、数字、文本输入内容。文本可以单行或多行显示,也可以以密码域的方式显示,在这种情况下,输入文本将被替换为星号或项目符号,以避免旁观者看到这些文本。,1,制作登录界面,4,必备知识,2,隐藏域:存储用户输入的信息,如姓名、电子邮件地址或习惯的查看方式,并在该用户下次访问此站点时使用这些数据。,3,复选框:允许在一组选项中选择多个选项。用户可以选择任意多个适用的选项。如图2-24所示,复选框中选中了三个选项。,制作登录界面,4,必备知识,4,单选按钮:代表互相排斥的选择。在某单选按钮组(由两个或多个共享同一名称的按钮组成)中选择一个按钮,就会取消选择该组中的所有其他按钮。,5,“列表”菜单:在一个滚动列表中显示选项值,用户可以从该滚动列表中选择多个选项。“菜单”选项在一个菜单中显示选项值,用户只能从中选择单个选项。,6,跳转菜单:是可导航的列表或弹出菜单,通过它用户可以插入一种菜单,这种菜单中的每个选项都链接到某个文档或文件。,制作登录界面,4,必备知识,7,文件域:使用户可以浏览到其计算机上的某个文件并将该文件作为表单数据上传。,8,图像域:使用户可以在表单中插入一个图像。图像域可用于生成图形化按钮,例如“提交”或“重置”按钮。,制作登录界面,4,必备知识,操作步骤,3,4,2,1,创建站点,新建并保存文件,插入表格。设置表格为1行1列,宽为400px,边框为1px,表格居中对齐。,插入表单域。执行“插入记录表单表单”,如图2-26所示。,制作登录界面,4,必备知识,操作步骤,7,8,6,5,插入表格,插入图片,插入文本域,插入“登录”按钮图像域,制作登录界面,4,必备知识,操作步骤,10,9,插入“注册”按钮,预览,C,ontents,目录,制作第一个网页,1,制作进阶版网页,2,第五节 运用HTML制作简单网页,制作第一个网页,1,必备知识,在开始设计制作网页之前,需要注意以下3点:,(1)在指定区域,新建文件夹。在这个文件夹下创建两个子文件夹:一个名为images,专门用来放置素材图片;另一个名为pages,用来存放不同的网页。,(2)首页面的命名统一使用index,例如“index.html”“index.css”“index.js3”,子页面的命名可以使用纯英文命名的方式,或用中文拼音。,(3)文件名称命名规则统一,使用小写英文字母、数字、下划线和减号的组合,不得包含汉字空格和特殊符号,以便于理解和方便查找。,制作第一个网页,1,必备知识,操作步骤,(1)打开Dreamweaver。,(2)在菜单栏中,找到站点,创建站点。本地站点是用于存放本地用户网页、素材等资料的文件夹,是用户工作目录。执行“站点新建站点输入站点名称指定本地站点文件夹”,如图2-32所示。,制作第一个网页,1,必备知识,操作步骤,(3)在软件的初始界面选择“新建HTML”或者从文件菜单栏中选择“新建空白页HTML创建”,即可打开一张空白的HTML文档。然后执行“文件保存修改保存路径输入文件名(index)保存”命令保存文件。,(4)在Dreamweaver菜单栏上选择“插入表格”(插入表格快捷键Alt+Ctrl+T),在弹出的“表格”对话框中输入参数,单击“确定”按钮,如图2-33所示。,制作第一个网页,1,必备知识,操作步骤,(5)将光标定位于这行单元格内,在这个表格中嵌套一个表格,如图2-34所示,效果如图2-35所示。,(6)将光标定位于第一行单元格中,输入文字“我的第一个网页”,如图2-36所示。,制作第一个网页,1,必备知识,操作步骤,(7)在第二行单元格中,执行“插入图像选择欢迎.jpg图像确定”命令(插入图像快捷键Ctrl+Alt+I),整体效果如图2-37所示。,(8)按F12键查看整体效果,如图2-38所示。,制作进阶版网页,2,必备知识,操作步骤,在这一活动中,我们将为导航条添加背景图片。首先,我们需要在设置导航栏的表格内右击鼠标,然后,点击标签编辑器添加背景图片。需要注意的是:如果使用常规的插入图片,是无法在此表格内输入文字的。,软件的初始界面选择“新建HTML”或者从文件菜单栏中选择“新建空白页HTML创建”,即可打开一张空白的HTML文档。然后执行“文件保存修改保存路径输入文件名(index)保存”操作保存文件。,1,在菜单栏中,找到站点,创建站点。执行“站点新建站点输入站点名称指定本地站点文件夹”。,2,制作进阶版网页,2,必备知识,操作步骤,在Dreamweaver菜单栏上选择“插入表格”(插入表格快捷键Alt+Ctrl+T),在弹出的“表格”对话框中输入参数,单击“确定”按钮。并将表格居中,标题更改为苏州印象。,光标定位于第一行,执行“插入图像选择top.jpg图像确定”命令。第三行执行“插入图像选择jdjs.jpg图像确定”命令。第五行执行“插入图像选择bottom.jpg图像确定”命令。,3,4,制作进阶版网页,2,必备知识,操作步骤,将光标置于第二行,执行“拆分单元格”命令,将单元格拆分为5列。,添加背景图像“daohanlanbj.jpg”(快捷键为Shift+F5)。,5,6,在各个单元格中填入文字:“首页”“拙政园”“狮子林”“金鸡湖”“苏州博物馆”。,制作进阶版网页,2,必备知识,操作步骤,7,在第四行中,嵌套一个4行2列的表格,分别插入图片和文字,保存文件。,(8)预览。按F12键,预览首页。,8,拍摄与处理商品图片,3,认知相机,相机的设置,拍摄室内商品图片,室外商品的设置,商品图片的处理,C,ontents,目录,选择合适的相机,1,选择合适的配套工具,2,第一节,认知相机,选择合适的相机,1,必备知识,1.全手动曝光模式,在全手动曝光模式(M)下,可调整光圈、快门、感光度、自定义和白平衡等,如图3-1所示。,4.设置白平衡,白平衡真实地还原了产品的颜色,保证拍摄的照片不偏色，如图3-4所示。,3.微距功能,微距对于拍摄小型产品来说是非常重要的,它能使产品在画面中所占的像素更多、更大。微距图标如图3-3所示。,2.机顶热靴,热靴就是相机顶部的金属方槽,如图3-2所示。,选择合适的相机,1,知识拓展,如果用单反相机,应该选什么镜头呢?,主要还是要看焦段。焦段就是变焦范围,即镜头本身的焦距范围。,焦距代表了镜头可视范围大小的能力,焦距数字越大,表示可见范围越小,一般很少用广角拍摄产品,因为广角很容易让产品变形。也不常使用长焦,过长的长焦会局限你的布光及拍摄空间。,选择合适的配套工具,2,必备知识,1.光源,(1)自然光。,(2)人造光。,2.其他工具,(1)背景。,(2)静物台。,选择合适的配套工具,2,知识拓展,选择什么样的图片格式进行拍摄好?,在相机的设置中,最常见的有两种照片格式,RAW和JPEG。,RAW是专业摄影师常用的格式。,JPEG文件小,节省存储空间,方便共享或快速浏览,虽然画面质量有所下降。,C,ontents,目录,认识相机的拍照模式,1,认识相机的常用功能,2,第二节,相机的设置,认识相机的拍照模式,1,必备知识,认识相机的拍照模式,1,必备知识,1.AUTO模式(自动模式),一般都被标记成绿色,故又称为“绿色模式”，,又称为“傻瓜模式”,。该模式下的光圈、快门、感光度、测光模式等都由相机自动设置,对焦模式和是否开启机顶闪光灯等也由相机控制,自动模式的优缺点如表3-1所示。,2.P模式(程序自动模式),P模式即程序自动模式,拍摄者仍可以对相机的曝光补偿、感光度、白平衡等参数进行设置和调整,保留部分拍摄自主权。,认识相机的拍照模式,1,必备知识,3.A(Av)模式(光圈优先),A(Av)模式就是光圈优先,是指由相机自动测光系统计算出曝光量的值,然后根据你选定的光圈大小自动决定用多少的快门。光圈优先可以很好地控制景深。,4.Tv模式(快门优先),Tv模式和Av模式刚好相反，拍摄者能调节的是快门速度,相机会根据你选定的速度给予合适的光圈和曝光。,5.M模式(手动曝光模式),M模式即手动曝光模式,被称为“骨灰挡”“专业挡”,完全由拍摄者手动操控曝光三个参数(光圈、快门、感光度),实现对画面的影调控制。M 模式还有另一个显著的优势,那就是可以固定曝光参数其他模式曝光参数可能都会因为环境而改变。,认识相机的拍照模式,1,必备知识,6.微距模式,利用微距可以充分展示商品的细节,符合小件商品拍摄的特点。,注意事项:,(1)若想突出某一部分细节,可选用较大的光圈;反之若想拍摄整体,则应选择较小的光圈。,(2)拍摄时由于距离过近,若一般要选择较快的快门速度或借助三脚架固定相机,也可以选择坐姿拍摄来提高稳定性。,(3)在微距模式下,拍摄需要特别注意照明强度,应加强照明以减小相机本身造成的环境光影响。,认识相机的常用功能,2,必备知识,1.对焦,对焦(Focus)是指使用照相机时调整好焦点距离,通常数码相机有多种对焦方式,分别是自动对焦、手动对焦和多重对焦方式。,(1)自动对焦/手动对焦。,对焦模式分为两种,一种是自动对焦,另一种是手动对焦。自动对焦又有三种模式,分别是AF-S、AF-C、AF-A,如图3-12所示。,(2)对焦系统的好坏。,判断一台相机对焦系统的好坏需要从下面两点来看:,1)对焦点个数。,2)对焦点覆盖面积。,认识相机的常用功能,2,必备知识,2.曝光的核心三个参数:光圈、快门、感光度,如图3-14所示的三张图片,分别是欠曝、正常、过曝的情况。,(1)光圈。,在快门不变的情况下,光圈越大,进光量越多,画面越亮;光圈越小,窗越小,能吸入的光线越少,画面越暗。,认识相机的常用功能,2,必备知识,(2)快门。,快门打开,曝光进行;快门关闭,曝光结束。,1)高速快门和慢速快门。,高速快门和低速快门拍摄效果分别如图3-17、图3-18所示。,2)安全快门。,(3)ISO(感光度),在保证光圈和快门不变的情况下,拉高ISO就是拉高感光元件对光线的敏感程度,使它能够捕捉到更微弱的光线。,C,ontents,目录,做好室内拍摄的场景布置,1,围巾和帽子的拍摄技巧,2,第三节,拍摄室内商品图片,做好室内拍摄的场景布置,1,必备知识,1.整理好周围的杂物,使商品处于整洁有序的环境中,2.布置好闪光灯,3.使用反光板等辅助设备布置场景,4.控制好光线方向,做好室内拍摄的场景布置,1,知识拓展,不同商品的光线运用,1.表面光滑的商品,一是要采用柔和的散射光线进行照明,二是可以采取间接照明的方法,2.表面粗糙的商品,应采用侧逆光或侧光照明,3.透明的商品,一般都采用侧光或底部光进行照明,4.无影静物,使用一块架起来的玻璃台面,将要拍摄的商品摆在上面,在玻璃台面的下面铺一张较大的白纸或半透明描图纸。灯光从下面作用在纸的上面,通过这种底部的用光可以拍出没有投影的商品照片。,5.服装类商品,如果使用自然光,那么一定要注意在光线充足且避免直射的时候进行拍摄,如果有条件,可以采用人造光拍摄,虽然还是“主光+辅助光”的方式。,围巾和帽子的拍摄技巧,2,必备知识,C,ontents,目录,室外拍摄场地的布置,1,室外拍摄的技巧,2,第四节,室外商品的设置,室外拍摄场地的布置,1,必备知识,在布置场景时,要注意以下3个方面:,(1)不要选过于复杂的背景,否则容易使顾客将视线转移到其他地方。最关键的是,背景与商品要协调。,(2)必须准备可以给特定部分增加光线的反光板。,(3)一定要在规定时间内完成所有拍摄。,室外拍摄的技巧,2,必备知识,室外拍摄有模特展示的商品时需要注意以下4点:,(1)选择合适的背景,并决定光的方向。可以的话,最好选择射光或阴影,如果光线不足,可以利用反光板来补充光线。一般来说,商品拍摄不要采用背光拍摄。,(2)最好景深较浅,创建外聚焦效果,以便突出模特。但景深也不能太浅,浅到看不出户外背景的话,那外景拍摄的目的也就没有了。,(3)最好不要使用闪光灯。一般相机的内置闪光灯容易使脸部生硬、不自然。,(4)拍摄角度选择。,C,ontents,目录,图片调整处理,1,图片修复美化,2,第五节,商品图片的处理,图片抠图取像,3,图片调整处理,1,必备知识,1.图片的裁剪,2,1,启动Photoshop CS3,打开需要裁剪的图片,然后选择“工具箱”上的“裁剪工具”。,通过调整图片中的8个调节点来调整裁剪区域的大小,调整好裁剪区域大小后,按键盘上的Enter键,图片的截图就完成了。,图片调整处理,1,必备知识,双击鼠标左键,打开需要处理的图片,然后用Photoshop中的拖动工具将需要处理的图片拖动到新建的图层中。,2,3,1,打开Photoshop,按快捷键Ctrl+N新建一张我们需要的大小的图层360像素260像素。,按快捷键Ctrl+T(自由变换),之后再按快捷键Shift+Alt(等比例缩放图片),将图片拖到合适的位置后,按Enter键。,2.图片尺寸的调整,图片调整处理,1,必备知识,3.图片亮度和色彩的调节,（,1,）调整亮度。,通过Photoshop的色阶工具可以调整图片的亮度。,在调整的同时要观察图片的亮度变化,合适后即可松开鼠标。,图片调整处理,1,必备知识,(2)调整偏色图片。,要在产品照片拍摄后对偏色的照片进行调色处理。,1)单击“窗口直方图”。,2)在直方图面板的右上角,单击小三角标志,选择“全部通道视图”。,3)在直方图面板的右上角,单击小三角标志,选择“用原色显示通道”。,4)选择“图像调整色阶。,5)同样的操作对绿色、蓝色通道进行调整,最后使红绿蓝三个通道的色阶波峰在同一垂直线上。,图片调整处理,1,必备知识,(3)调整图片色相及饱和度。,选择“图像调整色相/饱和度”,左右调整饱和度,使其接近真实的商品颜色。,图片修复美化,2,必备知识,1.污点修复工具的使用,处理这类污点最常用的就是污点修复工具。,画笔的中心内容将由画笔的周边内容来替代,但保留中心点的亮度信息。,打开污点修复工具,画笔范围大小调整的快捷键是“”(缩小)、“”(放大)。模式一般选择“正常”模式。,污点修复的类型有三种:近似匹配表示取样点向污点填充时边界较生硬;创建纹理表示污点由纹理内容填充;内容识别表示取样点向污点填充时自然过渡,效果较近似匹配要好一些。,图片修复美化,2,必备知识,2.修补工具的使用,修补工具用于修改有明显裂痕或污点等有缺陷或者需要更改的图像。细节处理则需要用仿制图章工具,并且在选择状态为“源”的时候(源需要被修复),将污点选区拖动到完好区域实现修补。,选择状态为“目标”的时候(目标需要被修复),选取足够盖住污点区域的选区,并将其拖动到污点区域,盖住污点实现修补。,图片修复美化,2,必备知识,3.仿制图章工具的使用,(1)选择仿制图章工具。,(2)按住Alt键,出现一个有十字的圆环,这个圆环所盖住的像素就是复制的部分。,(3)单击需要修复的部分,“+”就是采集的像素,将其覆盖到“”上,达到修复的目的。,(4)用同样的办法将绳子的剩余部分消除,。,图片抠图取像,3,必备知识,1.选框工具,选框工具包括矩形选框工具、椭圆选框工具、单行选框工具和单列选框工具。,图片抠图取像,3,必备知识,操作步骤,1,打开图片,单击工具栏里“放大镜”工具,选择“实际像素”按钮,.,2,新建一个名为“细节图”的画布,将画布的宽度、高度分别设置为240像素和240像素。,3,单击工具箱中的“矩形选框工具”,在需要裁剪的部分,按住鼠标左键设置选区。,4,选择“编辑拷贝”对选区进行复制,然后在“细节图”窗口中进行“编辑粘贴”操作,矩形选区内的细节图就被粘贴到新画布中了。,5,在工具箱中选择“移动工具”,拖动粘贴过来的鞋跟细节图到合适的位置。用同样的办法,用“椭圆选框工具”将鞋头剪切下来到细节图中。,图片抠图取像,3,必备知识,2.套索工具,套索工具有三种:套索工具、多边形套索工具、磁性套索工具。,打开,选择工具箱中的磁性套索工具。,单击选择相应的猕猴桃边缘,出现锚点,拖动鼠标沿着猕猴桃边缘选择需要抠取的部分。,最后回到原点,形成封闭的虚线框,复制并粘贴到上一图中。,在工具箱中选择“移动工具”,拖动惊恐的猕猴桃到合适的位置,最后效果如图所示。,1,2,3,4,图片抠图取像,3,必备知识,3.其他抠图工具,除了选框工具、套索工具外,魔棒工具和钢笔工具也可以抠图。,(1)魔棒工具。,魔棒工具是Photoshop提供的一种比较快捷的抠图工具,对于一些分界线比较明显的图像,通过魔棒工具可以快速将图像抠出。钢笔工具是在绘图软件中用来创造路径的工具,创造路径后,还可再编辑。,魔棒的使用技巧,(1)在勾选选区的时候注意图像的放大放小操作,这对于细致位置的勾选大有益处。,(2)放大图像快捷键为“Alt+滚动轮往上”,放小图像快捷键为“Alt+滚动轮往下”。,(3)使用快速选择工具时,缩小画笔的快捷键为“”(字母p右边的键),放大画笔的快捷键为“”。注意:英文输入法的状态下才可以操作!,网店的设计与搭建,4,制作网店的,logo,制作网,店,的店招,制作网,店,的导航栏,制作网,店,的促销海报,制作网店的分类导航,C,ontents,目录,认识网店的logo,1,制作网店的logo,2,第一节,制作网店的logo,认识网店的logo,1,必备知识,1.淘宝店铺logo的构成标志,(1)文字标志:主要是以文字和拼音字母等单独构成的标志,适用于口口相传等多种传播方式,如图4-1所示。,(2)图案标志:顾名思义,是仅用图形构成的标志。这种标志比较形象生动,色彩明快,而且不受语言限制,易于识别,如图4-2所示。但图案标志没有名称,因此表达的意思不如文字标志准确。,(3)组合标志:就是把文字标志与图案标志两种构成方式组合而成的标志。这种标志发挥了文字及图案标志的优点,图文并茂,形象生动,又易于识别,如图4-3所示。,认识网店的logo,1,必备知识,2.淘宝店铺logo的设计原则,(1)构图要有创意,做到构图新颖,富于个性化,才容易与其他店铺标志有区别。,(2)含义要深刻,才能体现出店铺的个性特征、独特品质以及精神风貌等。,(3)保持稳定性,店标一旦确立,不要随意改动。,(4)设计必须符合法律法规,且注重国际化、统一化。,认识网店的logo,1,知识拓展,淘宝店铺logo设计要点,1.设计要有领导性,2.设计要有造型,3.设计要具有识别性,4.设计要具有统一性,5.设计要具有系统性,6.设计要具有时代性,7.设计要具有延伸性,制作网店的logo,2,必备知识,操作步骤,打开Photoshop。新建一张80px80px的画布(新建画布快捷键Ctrl+N)。,1,2,3,4,5,按住Alt键,滚动鼠标滚轮将画布放大到合适大小,找到“椭圆工具”。,新建图层(快捷键Shift+Ctrl+N),按住Shift键或者Alt键,在画布中间拉出一个圆形。,6,将缩小后的选区填充颜色#ffffff(背景色填充快捷键Ctrl+Delete)。取消选区(取消选区的快捷键Ctrl+D),并将圆环调整到合适的尺寸。,在“工具”中找到“自定义形状工具”。,选择“菜单栏选择”(快捷键Alt+S),“修改”(快捷键M),“收缩”(快捷键C),将收缩量调整为3像素。,上传logo,2,必备知识,操作步骤,(1)选中卖家中心,点击免费开店,进入自己的店铺,将光标放置于头像框处,点击店铺设置,如图4-10所示。,(2)修改个人信息,并将logo上传至淘宝店铺中,如图4-11所示。,C,ontents,目录,确定店招内容,1,店招构图,2,第二节,制作网店的店招,上传店招,3,确定店招内容,1,必备知识,1.店招必备的四点内容,(1)图形标识(logo);,(2)店铺名称;,(3)店铺收藏;,(4)广告语。,2.店招可以选择的内容,(1)爆款宝贝;,(2)搜索(旺旺);,(3)二维码(可微信);,(4)优惠券;,(5)联系方式。,确定店招内容,1,知识拓展,三个公式,1.傻瓜型公式:产品关键词+联系方式,2.营销型公式:主营业务+促销活动+联系方式,3.标准型公式:logo+店铺名+主营业务+联系方式,店招构图,2,必备知识,在店招的构图中最常用且最容易掌握的构图有两种:居中构图和三步跳构图。,(1)居中构图:就是将重点信息放在画面的正中,这种构图版面相对来说有点严肃、庄重,常用在旗舰店、形象店等。,(2)三步跳构图:在以950px120px为有效区域的基础上,店铺名、logo放左上角,主营业务区(促销产品、活动信息、爆款商品等)放中间,联系方式放右下角。三步跳的构图方式显得更灵活,版面也很活泼,有很强的层次感。,上传店招,3,必备知识,在店招的设计过程中,要注意以下4个细节:,(1)淘宝店招一般尺寸为950px120px,阿里巴巴店招最大可以做成1920px200px,但是核心的内容如店铺名、促销商品务必放在画面中央,即950px以内。不同的电商平台有不同的店招尺寸、内容等规定,具体尺寸、内容等要按照该平台的规定来确定。,(2)店招上可以留下卖家的联系方式,这样更方便消费者与卖家取得联系,更好地维系消费者与店铺之间的情感联系。,(3)店招上可以放促销商品,并且将促销内容加上超链接,链接到该商品的详情页界面。,(4)整体风格要与logo相匹配,要与网店整体设计风格协调。,上传店招,3,必备知识,单击“选择文件添加图片”,将自己设计好的店招图片上传至淘宝图片空间。,操作步骤,3,2,1,点击进入店铺装修界面,选择“首页”,装修该界面。,单击“编辑”按钮,就可以设置我们的店招了。,C,ontents,目录,认识导航栏,1,导航栏内容,2,第三节,制作网店的导航栏,认识导航栏,1,登录天猫,查看“三只松鼠”(见图4-21)、“茵曼”(见图4-22)、“阿芙”(见图4-23)等官方旗舰店的导航栏,。,认识导航栏,1,必备知识,通常按位置可以将导航划分为三个区域:,(1)顶部导航:包括商品分类、搜索栏、自定义页面(品牌故事、会员专区、购物须知等)。,(2)左侧栏:包括商品分类、收藏按钮、在线客服、热销热藏、商品推荐、其他超链接(手机店铺、加入帮派等)。,(3)自由导航:包括图片(文字)、超链接(可以指向某一分类或自定义页面,多数用于活动,可摆放在页面的任意位置)。,导航栏内容,2,查看“阿芙”(见图4-24)、“茵曼”(见图4-25)、“欧舒丹”(见图4-26)等官方旗舰店的导航栏。,导航栏内容,2,必备知识,1.顶部导航:隐形推荐,在导航栏分类页面上,常见商品分类方式如下:,(1)理性分类:按品