电商美工培训课件.ppt

1、东莞市动点信息科技有限公司Desigened by Hao0101 Photoshop基础0202 旺铺首页设计0303 主图美化04 04 搜索列表页设计0505 宝贝详情页设计0101 Photoshop基础0202 旺铺首页设计0303 主图美化04 04 搜索列表页设计0505 宝贝详情页设计1Photoshop 基础基础1.1 Photoshop1.1 Photoshop默认界面默认界面A.文档窗口B.停放折叠为图标的面板C.面板标题栏D.菜单栏E.选项栏 F.“工具”调板G.“折叠为图标”按钮H.垂直停放的三个调板（面板）组ABCDEFGH操作界面1Photoshop 基础基础1.

2、2 1.2 工具面板工具面板 在 Photoshop 中称为“工具”调板，包含用于创建和编辑图像、图稿、页面元素等的工具。相关工具将编为一组。1Photoshop 基础基础1.2 1.2 工具面板工具面板1.2.1 选择工具：选择工具：选框工具移动工具套索工具魔棒工具快速选择工具1Photoshop 基础基础1.2 1.2 工具面板工具面板1.2.2 裁剪工具：裁剪工具：裁剪工具切片工具切片选择工具1Photoshop 基础基础1.2 1.2 工具面板工具面板1.2.3 修饰工具：修饰工具：污点修补工具修复画笔工具修补工具红眼工具仿造印章工具图案印章工具橡皮擦工具背景橡皮擦工具1Photosh

3、op 基础基础1.2 1.2 工具面板工具面板1.2.3 修饰工具：修饰工具：魔术橡皮擦工具模糊工具锐化工具涂抹工具减淡工具加深工具海绵工具1Photoshop 基础基础1.2 1.2 工具面板工具面板1.2.4 画笔工具：画笔工具：画笔工具铅笔工具颜色替换工具历史记录画笔工具历史记录艺术画笔工具渐变工具油漆桶工具1Photoshop 基础基础1.2 1.2 工具面板工具面板1.2.5 绘图和文字工具：绘图和文字工具：路径工具文字工具文字蒙版工具钢笔工具形状工具直线工具自定义形状工具1Photoshop 基础基础1.2 1.2 工具面板工具面板1.2.6 其他工具：其他工具：注释工具吸管工具测

4、量工具抓手工具缩放工具1Photoshop 基础基础1.3 1.3 调板调板调板可帮助您监视和修改您的工作。默认情况下，将显示某些面板，可以通过从“窗口”菜单中选择任何面板来添加该面板。很多面板都具有菜单，其中包含特定于面板的选项。可以对面板进行编组、堆叠或停放。1Photoshop 基础基础1.4 1.4 菜单栏菜单栏 同其他同其他Windows应用程序一样，应用程序一样，Photoshop CC提供了丰富的菜单命提供了丰富的菜单命令，许多操作都可以通过菜单命令令，许多操作都可以通过菜单命令来完成，来完成，Photoshop CS3的主菜单共的主菜单共有有11个。个。Photoshop CC

5、界面1Photoshop 基础基础1.5 1.5 位图与矢量图位图与矢量图 在我们设计轮播海报、宝贝主图等图片的时候，尽量选取矢量图形或高像素的图片作为我们的设计素材，避免出现失真现象。位图图像：位图图像：位图也叫栅格图，由象素点组成，每个象素点都具有独立的位置和颜色属性。在增加图像的物理象素时，图像质量会降低。矢量图形：矢量图形：由矢量的直线和曲线组成，在对它进行放大、旋转等编辑时不会对图像的品质造成损 失，如其它软件创造的AI、CDR、EPS文件等。1：1比例下的位图图像和矢量图像：放大后的位图图像和矢量图像：1Photoshop 基础基础1.6 1.6 象素与选区象素与选区 巧用选区配合

6、印章等修图工具可以更好的对图像的指定位置进行修改与处理，避免影响到其他不相关的区域。象素象素：象素是构成图像的最基本元素，它实际上一个个独立的小方格，每个象素都能记录它所在的位置和颜色信息。下图中每一个小方格就是一个象素点，它记载着图像的各种信息。选区：选区：也叫选取范围，是PS对图像做编辑的范围，任何编辑对选区外无效。当图像上没有建立选择区时，相当于全部选择。下图中的黑白相间的细线就是选择区的边界，对图像的操作只对选择区内有效。1Photoshop 基础基础1.7 1.7 容差与流量容差与流量容差：容差：图像上像素点之间的颜色范围，容差越大，与选择象素点相同的范围越大，其数值为0-255。下

7、图是用魔术棒选择工具在不同容差值下对图像做不连续选区的结果。流量：流量：控制画笔作用到图像上的颜色浓度，流量越大产生的颜色深度越强，其数值为0%-100%。下图是用同样的画笔在不同流量控制下对图像操作的结果。1Photoshop 基础基础1.8 1.8 蒙版与样式蒙版与样式 蒙板：蒙板：蒙板是用来保护图像的任何区域都不受编辑的影响，并将对它的编辑操作作用到它所在的图层。如下图，蒙板将对其的黑白控制转化为透明后作用到图像上，蒙板上黑色部分为完全透明，白色为完全不透明。样式：样式：对活动图层或选区进行定制的风格化编辑，类似动作。下图是对图像的各个图层内容指定不同样式的结果。1Photoshop 基

8、础基础1.9 1.9 通道与图层通道与图层 图层：图层：为了方便图像的编辑，将图像中的各个部分独立起来，对任何一部分的编辑操作对其它部分不起作用。下图实际上是由多个图层合成的一张成品稿。通道：通道：通道是完全记录组成图像各种单色的颜色信息和墨水强度，并能存储各种选择区域、控制操作过程中的不透明度。下图是一张色彩模式为RGB的图像在彩色（RGB）、红色（R）、绿色（G）、蓝色（B）通道下的显示效果。1Photoshop 基础基础1.10 1.10 图层样式图层样式投影内阴影外发光内发光斜面浮雕光泽颜色叠加渐变叠加图案叠加描边1Photoshop 基础基础1.11 1.11 滤镜滤镜 滤镜：滤镜：

9、利用摄影中滤光镜的原理对图像进行特殊的效果编辑。虽然其源自滤光镜，但在PS中将它的功能发挥到了滤光镜无法比拟的程度，使其成为PS中最神奇的部分。PS中有13大类(不包括Digmarc滤镜)近百种内置滤镜。原图：使用不通滤镜的结果：1Photoshop 基础基础1.12 1.12 文件保存文件保存 分辨率：分辨率：单位长度内(通常是一英寸)象素点的数量多少。针对不同的输出要求对分辨率的大小也不一样，如常用的屏幕分辨率为72象素/英寸，而普通印刷的分辨率为300象素/英寸。文件格式：文件格式：为满足不同的输出要求，对文件采取的存储模式，并根据一定的规格对图像的各种信息和品质做取舍，它相当于图像各种

10、信息的实体描述。下面是PS常用的文件格式。输出：输出：将图像转换成其它的文件格式，以达到不同软件之间文件交换的目的，或是满足其它输出的需求求。色彩式模：色彩式模：将图像中象素按一定规则组织起来的方法，称之为色彩模式。不同输出需要的图象有不同的色彩模式。常用的色彩模式如RGB、CMYK、Lab等。0101 Photoshop基础0202 旺铺首页设计0303 主图美化04 04 搜索列表页设计0505 宝贝详情页设计2旺铺首页设计旺铺首页设计2.1 2.1 装修界面尺寸介绍装修界面尺寸介绍旺铺整体版面宽度为1440-1920px,一般情况下选用1440px即可。主体内容最大宽度尺寸为950px；

11、其他主体模块内容分别为190px与750px。招牌尺寸：950 x120px页头尺寸：1440 x150px导航尺寸：950 x30px2旺铺首页设计旺铺首页设计2.2 2.2 旺铺店招设计制作旺铺店招设计制作进入装修页面之后，选择店招的编辑按钮即可进入店招编辑界面。店招制作方法有三种：1.默认招牌2.自定义招牌3.BannerMaker2旺铺首页设计旺铺首页设计2.2.1 2.2.1 默认招牌设计制作默认招牌设计制作1.招牌类型选择默认招牌2.将显示店铺名称的勾去掉3.背景图处点击选择文件按钮，将已经制作好的店招图片上传到招牌4.点击保存按钮即可。注意事项：在装修店招的时候，先要在把你所要放

12、的店招图片准备好。店招图片尺寸为：950 x120 px（店招具体高度可以根据你的版面需求有所变化。）（默认店招只能单独放一张图片，局限性太大，不建议使用）2旺铺首页设计旺铺首页设计2.2.2 2.2.2 自定义招牌设计制作自定义招牌设计制作1.招牌类型选择自定义招牌2.点击插入空间图片按钮，上传店招图片3.店招如要添加收藏、点击等功能，可以切换到源码页，添加相关代码。4.点击保存按钮即可。注：自定义招牌是我们美工经常使用的一种招牌类型，可在源码页面自由设计自己的招牌，自由度在3种招牌类型里面是最高的。2旺铺首页设计旺铺首页设计2.2.3 BannerMaker2.2.3 BannerMake

13、r招牌类型招牌类型1.招牌类型选择BannerMaker2.点击进入BannerMaker设置，进入banner图购买页面3.挑选你喜欢的banner图类型，购买相关的banner图即可。4.点击保存按钮即可。注意事项：BannerMaker这个界面适合用来寻找设计灵感，并不建议使用这种图片，一个方面是因为要用钱，另一个方面是这种banner图不一定真的适合你的店铺，局限性太大。2旺铺首页设计旺铺首页设计2.2.4 2.2.4 头部页头设计头部页头设计专业版页头制作方法：1.打开后台左侧页头设置页面2.如若需使用背景色，则可更换页头背景色，如果不许使用则把那勾去掉3.页头下边距10像素，选择关

14、闭4.如要使用自定义的页头，则选用更换图片按钮，上传图片。页头图片高度为150像素，宽度不少于1440像素5.选择合适的背景显示方式及对齐方式后，点击保存 所谓的页头，就是指店招与导航左右两边的空白区域，我们做页头的目的就是把这空白区域的色块补充完整，如上图所示。基础版的店铺是没有设置页头的权限的，对此我们可以用代码来设计，代码如下：bodybackground:url(图片地址)no-repeat fixed center top transparent;2旺铺首页设计旺铺首页设计2.3.1 2.3.1 导航设计制作方法导航设计制作方法1.点击导航编辑按钮，进入导航编辑界面2.可以点击添加按

15、钮，在导航上添加二级页面2旺铺首页设计旺铺首页设计2.3.1 导航设计制作方法导航设计制作方法1.点击显示设置，添加导航控制代码2.点击保存2旺铺首页设计旺铺首页设计2.3.1 导航设计制作方法导航设计制作方法色块:background:#000000;自定义图片:background:url(图片链接);前半段.skin-box-bd.linkbackground:#000000;后半段.skin-box-bd.menu-listbackground:#000000;最右边1小块.skin-box-bdbackground:url(图片链接);2旺铺首页设计旺铺首页设计2.3.1 导航设计制

16、作方法导航设计制作方法色块:background:#000000;自定义图片:background:url(图片链接);首页色块.skin-box-bd.menu-list.menu-selected.linkbackground:url(图片链接);.skin-box-bd.menu-list.menu-selected.link.titlebackground:url(图片链接);“所有分类所有分类”的背景色代码如下：的背景色代码如下：.all-cats.linkbackground:#000000;2旺铺首页设计旺铺首页设计2.3.1 导航设计制作方法导航设计制作方法色块:backgro

17、und:#000000;自定义图片:background:url(图片链接);竖线编辑：竖线编辑：一级导航分类（除去一级导航分类（除去“所有宝贝所有宝贝”分类）分隔线颜色代码如下：分类）分隔线颜色代码如下：.menu-list.menuborder-color:#000000;一级导航一级导航“所有宝贝所有宝贝”分类分隔线颜色代码如下：分类分隔线颜色代码如下：.all-cats.linkborder-color:#000000;2旺铺首页设计旺铺首页设计2.3.1 导航设计制作方法导航设计制作方法色块:background:#000000;自定义图片:background:url(图片链接);

18、二级分类文字代码如下：二级分类文字代码如下：.popup-content.cats-tree.fst-cat.cat-namefont-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;二级分类背景代码如下：二级分类背景代码如下：.popup-contentbackground:#000000;三级分类文字代码（除去三级分类文字代码（除去“所有宝贝所有宝贝”分类）如下分类）如下.popup-content.cats-tree.snd-pop-innerfont-size:字号px;color:#颜色代码;font-weight:bold/

19、bolder/normal;三级分类文字代码（包括三级分类文字代码（包括“所有宝贝所有宝贝”分类字体大小）这样就无法改变字体分类字体大小）这样就无法改变字体颜色，如下颜色，如下.popup-content.cats-tree.snd-pop-innerfont-size:字号字号px;color:#颜色颜色;三级分类背景代码：三级分类背景代码：.popup-content.cats-tree.snd-pop-innerbackground:#000000;2旺铺首页设计旺铺首页设计2.3.1 导航设计制作方法导航设计制作方法色块:background:#000000;自定义图片:backgro

20、und:url(图片链接);鼠标滑过一级分类导航文字变换背景色代码如下：鼠标滑过一级分类导航文字变换背景色代码如下：.menu-list.menu-hover.linkbackground:#000000;鼠标滑过一级分类导航文字变换颜色代码如下：鼠标滑过一级分类导航文字变换颜色代码如下：.menu-list.menu-hover.link.titlecolor:#FFFFFF;2旺铺首页设计旺铺首页设计2.3.1 导航设计制作方法导航设计制作方法色块:background:#000000;自定义图片:background:url(图片链接);鼠标滑过二级分类导航文字变换背景色代码如下：鼠标滑

21、过二级分类导航文字变换背景色代码如下：.popup-content.cats-tree.cat-hd-hoverbackground:#000000;鼠标滑过二级分类导航文字变换颜色代码如下：鼠标滑过二级分类导航文字变换颜色代码如下：.skin-box-bd.popup-content.cats-tree.cat-hd-hover.cat-namecolor:#ff0000;2旺铺首页设计旺铺首页设计2.3.1 导航设计制作方法导航设计制作方法色块:background:#000000;自定义图片:background:url(图片链接);鼠标滑过三级分类导航文字变换背景色代码如下：鼠标滑过三

22、级分类导航文字变换背景色代码如下：.popup-content.cats-tree.snd-cat-hd-hoverbackground:#000000;修改修改“所有宝贝所有宝贝”右边小图标代码如下：右边小图标代码如下：.all-cats.link.popup-iconbackground:url(图片连接);2旺铺首页设计旺铺首页设计2.3.1 导航设计制作方法导航设计制作方法色块:background:#000000;自定义图片:background:url(图片链接);修改二级分类右侧图标代码如下修改二级分类右侧图标代码如下（有三级分类才会显示）：（有三级分类才会显示）：.popup-

23、content.cats-tree.fst-cat-iconbackground:url(图片连接);在三级分类前加上小块白色代码如下：在三级分类前加上小块白色代码如下：.popup-content.cats-tree.snd-cat-icondisplay:block;height:3px;width:3px;2旺铺首页设计旺铺首页设计2.4 2.4 全屏海报制作全屏海报制作淘宝上常用的宽度尺寸有1440、1680、1920这三种。淘宝后台默认最大宽度为950,如果要超出这尺寸必须通过代码实现。另外，这全屏代码只能在淘宝首页使用，子页面是不兼容的。1440px 全屏海报：（宽度1440px，

24、高度随便自己调，同时修改两处500px即可）2旺铺首页设计旺铺首页设计2.5 2.5 万能热区代码介绍万能热区代码介绍万能热区是淘宝上最常见的一种点击功能，它能是图片上的某一个区域实现页面跳转。万能热区按钮：万能热区工具网址：http:/ 2.6 其他代码介绍其他代码介绍在线客服与收藏店铺也是淘宝里面很常见的一种互动功能。收藏店铺一般来说会放到招牌或者详情页的左侧。在线客服一般会放到首页轮播图下方、首页主产品上方或详情页的左侧。在线客服代码：收藏店铺代码：0101 Photoshop基础0202 旺铺首页设计0303 主图美化04 04 搜索列表页设计0505 宝贝详情页设计3主图美化主图美化

25、3.1 3.1 做图前准备事项做图前准备事项一张好的淘宝主图的制作，离不开你充分的准备工作。只有对同行产品的充分了解，你才能充分的突出你产品，提高点击量。影响主图排名相关因素：1.主图创意度2.周边主图区别（主图颜色等）3.主图点击率4.宝贝成交率主图制作前准备事项：主图制作前准备事项：1.同行产品对比，找出产品卖点。2.对宝贝排名附近的产品进行对比，确定主图主色调。3.撰写文案，展示宝贝优势，字数不宜过多。4.准备主图相关的素材5.对主宝贝进行修图，对产品上的脏东西及明暗度进行调节。3主图美化主图美化3.2 3.2 主图制作注意事项主图制作注意事项每一个宝贝上都可以有5张主图，其中有两张图一

26、般为创意图（直通车图），另外3张为产品细节图。也有人会在这3张细节图中选一张用来放物流信息或活动海报。1.主图尺寸为 800 x800 像素。2.保证主宝贝能完整的在主图中显示，无遮挡。3.主图色调不宜过多，要有主次，否则画面会显得很脏。4.文案应简明扼要，突然重点即可。0101 Photoshop基础0202 旺铺首页设计0303 主图美化04 04 搜索列表页设计0505 宝贝详情页设计4搜索列表页设计搜索列表页设计4.1 4.1 何为宝贝列表页？何为宝贝列表页？所谓的宝贝列表页，简单来说就是当客户点击导航上所有分类等分类按钮的时候打开的某个页面。4搜索列表页设计搜索列表页设计4.2 4.2 设计注意事项设计注意事项搜索列表页的左侧一般是放在线客服、收藏店铺、店铺活动等。制作方法与首页一样。0101 Photoshop基础0202 旺铺首页设计0303 主图美化04 04 搜索列表页设计0505 宝贝详情页设计5宝贝详情页设计宝贝详情页设计5.1 5.1 宝贝详情页简介宝贝详情页简介详情页，指的就是示意图中的蓝色区域上所放的内容。它是由图片、视频、文字。宽度为宽度为950px宽度为宽度为750px宽度为宽度为190px宝贝详情模块示意图宝贝详情模块示意图