第4章-电子商务网站及商品美工设计-电子商务职业能力师资培训课件.pptx

1、第四章第四章 电子商务网站及商品美工设电子商务网站及商品美工设计计第第1节节 网店拍摄基础网店拍摄基础第第2节节 店铺装修基础店铺装修基础第第3节节 商品图片处理商品图片处理【本章学习目标】【本章学习目标】通过本章内容，主要应该完成以下学习目标：数码相机的工作原理及组成 各类商品在拍摄时场景与布光的方法，构图基本方法与拍摄技巧使用电商平台提供的工具或网页设计工具对店铺进行页面布局、色彩搭配等店铺装修技巧商品主图及描述页图片的规划方法熟练使用Photoshop等图片处理工具，能按照网店风格对图片进行美化处理，并设计出有特色的Logo、公告栏、促销广告2022-12-24第第1节节 网店拍摄基础网

2、店拍摄基础 数码相机的工作原理数码相机的工作原理 场景与布光场景与布光 拍摄构图方法与技巧拍摄构图方法与技巧 拍摄流程拍摄流程2022-12-24一、一、数码相机的工作原理数码相机的工作原理传感器（定义、用途）分辨率（定义、用途）镜头（结构、用途）焦距（定义、使用技巧）光圈（概念、F值、使用技巧）快门（概念、使用技巧）照片的存储（存储介质）p图像文件格式（BMP、GIF、PSD、PNG、JPEG）2022-12-24分辨率 分辨率越高，图片越清晰，占用存储空间也越大2022-12-24镜头 镜头的结构2022-12-24焦距 焦距：从镜头的光学中心到成像面（焦点）的距离2022-12-24光圈

3、 光圈F值=镜头的焦距/镜头光圈的直径 光圈 F 值越小，通光孔径越大2022-12-24快门 快门：照相机用来控制感光片有效曝光时间的机构。快门速度单位：秒 常见的快门速度有：1、1/2、1/4、1/8、1/15、1/30、1/60、1/125、1/250、1/500、1/1000、1/2000等，一般而言快门的时间范围越大越好。2022-12-24照片的存储 存储介质：CF卡、MMC卡、SD卡、记忆棒、软盘、硬盘或微盘、可写入CD和DVD等 与计算机连接的接口：串口、并口、SCSI口、USB口或FireWire口2022-12-24图像文件格式 五种常用图像文件格式：BMP、GIF、PSD

4、、PNG、JPEG 以上五种格式的特点及用途2022-12-24二、二、场景与布光场景与布光 场景（场景布置的原则）布光（光的分类、布光方法）2022-12-24场景 场景布置原则：简单整洁2022-12-24布光 光的分类：主光、背景光、辅助光等 布光方法(商品的摆放、灯光布置)无暗角拍摄法 立体感拍摄法 抠图拍摄法2022-12-24无暗角拍摄法2022-12-24立体感拍摄法2022-12-24抠图拍摄法2022-12-24三、拍摄构图方法与技巧三、拍摄构图方法与技巧2022-12-24线性构图方法黄金分割构图对角线构图横线构图竖线构图曲线构图不规则线的构图拍摄技巧相机抖动法则景深法则曝

5、光法则快速闪光输出法则闪光距离法则像素翻倍法则捕捉动态法则四、拍摄流程四、拍摄流程 准备工作（准备工作的内容）拍摄步骤2022-12-24第第2节节 店铺装修基础店铺装修基础 店铺装修的开发工具介绍店铺装修的开发工具介绍 店铺装修的页面布局店铺装修的页面布局 店铺装修的色彩搭配店铺装修的色彩搭配 店铺店铺Logo的设计的设计 公告栏设计公告栏设计 促销广告设计促销广告设计学会用图片说话学会用图片说话 做有声有色的店铺做有声有色的店铺2022-12-24一、一、店铺装修的开发工具介绍店铺装修的开发工具介绍 Frontpage（用途、特点）Dreamweaver（用途、特点）Photoshop（用

6、途、特点）Fireworks（用途、特点）CorelDRAW（用途、特点）2022-12-24二、二、店铺装修的页面布局店铺装修的页面布局 店铺布局的原则 店铺布局的设置方法 合理布局，分清主次 区域划分，条理清晰 结合海报，突出重点2022-12-24合理布局，分清主次2022-12-24区域划分，条理清晰2022-12-24结合海报，突出重点2022-12-24三、店铺装修的色彩搭配三、店铺装修的色彩搭配 色彩的基本概念（概念、属性）色调（概念、特点）店铺装修的色彩搭配原则（搭配方法）色彩的象征意义2022-12-24色彩的基本概念2022-12-24彩色(除黑白灰以外的颜色)非彩色(黑白

7、灰)色相明度饱和度概念属性色彩的属性 色相：也称为色度，可以想成特定波长的可见光 明度：可以理解为颜色的亮度 饱和度：指的是色彩的纯度，也叫彩度，纯度越高，表现越鲜明2022-12-24色调2022-12-24店铺装修的色彩搭配原则 高调：底色浅 低调：底色深2022-12-24色彩的象征意义2022-12-24颜色颜色象征意义象征意义红色 热情，活力，奔放，奉献，能量，羞害白色纯洁，简单，智慧，神圣，清爽，空洞黑色权威，神秘，严谨，稳重，死亡，压抑棕色大地，义务，稳定，沮丧，死寂，狭隘紫色高贵，庄严，幽雅，情调，孤独，高傲灰色中立，低调，淡然，平静，灰心，冷漠绿色青春，新鲜感，生命力，嫉妒，

8、鲜明的黄色启蒙，思考，阳光，幸福，温和，懦弱橙色活跃，醒目，率直，温暖，紧张，警告蓝色宁静，理智，深沉，明朗，独立，忧郁粉红色浪漫，爱情，纯真，可爱，幼稚金色尊贵，灵感，财富，辉煌，光荣四、店铺四、店铺Logo的设计的设计 店铺Logo设计原则 富于个性，新颖独特 简练明确、信息表达 符合美学原理 店铺Logo制作的基本方法（设计原型）2022-12-24店铺Logo制作的基本方法 设计原型：自然图形、几何图形、文字和前三种的组合2022-12-24五、公告栏设计五、公告栏设计 纯文字公告栏设计（要显示的内容）图片公告栏设计（比文字公告栏更加醒目）动态公告栏设计（设计方法）2022-12-24

9、公告栏设计效果公告栏设计效果 纯文字公告栏设计效果 图片公告栏设计效果2022-12-24六、促销广告设计六、促销广告设计学会用图片学会用图片说话说话 必须准确传达主题 必须实现与买家的沟通 必须具有创造性 符合审美的需要2022-12-24促销广告设计效果图促销广告设计效果图2022-12-24七、做有声有色的店铺七、做有声有色的店铺 html代码中每个参数的含义2022-12-24第第3节节 商品图片处理商品图片处理 图片规划图片规划 抠图处理抠图处理 图片美化图片美化2022-12-24一、图片规划一、图片规划2022-12-24商品主图规划主图的尺寸要求主图背景色提高点击率描述页图片规

10、划描述页面的不同规格提高视觉舒适度的布局体现图文结合制作细节放大效果组合图片主图的尺寸要求 各种电商平台或者自建网站对主图尺寸的要求都不同，我们可以根据网站的需要进行设置，例如：淘宝网的主图的标准尺寸为310px310px的正方形图片。2022-12-24主图背景色 搭配主图背景色的原则如下 背景色以白色或者浅色为主，展现的图片会更加清晰，表达目的更加明确。针对商品的形象进行背景色搭配，例如想要呈现可爱的感觉，就以淡粉色为主。商品与背景色可以是同一色系的明暗度组合，会带给买家较强的视觉冲击。背景色不要与文字颜色相近，会降低可识别性。2022-12-24提高点击率 要打造一张吸引买家目光的好主图

11、，需要遵循以下三大设计原则 比例大小要适当 宜简不宜繁 丰富细节2022-12-24组合图片效果2022-12-24二、抠图处理二、抠图处理 钢笔工具抠图法（原理、操作）通道抠图法（原理、操作）蒙娜丽莎抠图法（原理、操作）2022-12-24钢笔工具抠图法2022-12-24原图抠图后抠图过程通道抠图法2022-12-24原图抠图后抠图过程蒙娜丽莎抠图法2022-12-24原图抠图后三、图片美化三、图片美化 调整曝光不足或曝光过度的照片 提高图片清晰度 为图片添加修饰边框 图片尺寸处理 图片保护-使用水印2022-12-24调整曝光不足2022-12-24原图调整后调整曝光过度2022-12-24原图调整后提高图片清晰度2022-12-24原图调整后为图片添加修饰边框2022-12-24原图调整后图片尺寸处理2022-12-24图片保护-使用水印单张图片添加水印 批处理添加水印2022-12-24