电商美工培训

1、东莞市动点信息科技有限企业美工培训Desigened by Hao电商美工培训第1页01 Photoshop基础02 旺铺首页设计03 主图美化04 搜索列表页设计05 宝贝详情页设计电商美工培训第2页01 Photoshop基础02 旺铺首页设计03 主图美化04 搜索列表页设计05 宝贝详情页设计电商美工培训第3页Photoshop 基础1.1 Photoshop默认界面A.文档窗口B.停放折叠为图标面板C.面板标题栏D.菜单栏E.选项栏 F.“工具”调板G.“折叠为图标”按钮H.垂直停放三个调板（面板）组ABCDEFGH操作界面4电商美工培训第4页1Photoshop 基础1.2 工具面

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

3、：魔术橡皮擦工具含糊工具锐化工具涂抹工具减淡工具加深工具海绵工具电商美工培训第9页1Photoshop 基础1.2 工具面板1.2.4 画笔工具：画笔工具铅笔工具颜色替换工具历史统计画笔工具历史统计艺术画笔工具渐变工具油漆桶工具电商美工培训第10页1Photoshop 基础1.2 工具面板1.2.5 绘图和文字工具：路径工具文字工具文字蒙版工具钢笔工具形状工具直线工具自定义形状工具电商美工培训第11页1Photoshop 基础1.2 工具面板1.2.6 其它工具：注释工具吸管工具测量工具抓手工具缩放工具电商美工培训第12页1Photoshop 基础1.3 调板调板可帮助您监视和修改您工作。默认

4、情况下，将显示一些面板，能够经过从“窗口”菜单中选择任何面板来添加该面板。很多面板都含有菜单，其中包含特定于面板选项。能够对面板进行编组、堆叠或停放。电商美工培训第13页1Photoshop 基础1.4 菜单栏 同其它Windows应用程序一样，Photoshop CC提供了丰富菜单命令，许多操作都能够经过菜单命令来完成，Photoshop CS3主菜单共有11个。Photoshop CC界面电商美工培训第14页1Photoshop 基础1.5 位图与矢量图 在我们设计轮播海报、宝贝主图等图片时候，尽可能选取矢量图形或高像素图片作为我们设计素材，防止出现失真现象。位图图像：位图也叫栅格图，由象

5、素点组成，每个象素点都含有独立位置和颜色属性。在增加图像物理象素时，图像质量会降低。矢量图形：由矢量直线和曲线组成，在对它进行放大、旋转等编辑时不会对图像品质造成损 失，如其它软件创造AI、CDR、EPS文件等。1：1百分比下位图图像和矢量图像： 放大后位图图像和矢量图像：电商美工培训第15页1Photoshop 基础1.6 象素与选区 巧用选区配合印章等修图工具能够更加好对图像指定位置进行修改与处理，防止影响到其它不相关区域。象素：象素是组成图像最基本元素，它实际上一个个独立小方格，每个象素都能统计它所在位置和颜色信息。下列图中每一个小方格就是一个象素点，它记载着图像各种信息。选区：也叫选取

6、范围，是PS对图像做编辑范围，任何编辑对选区外无效。当图像上没有建立选择区时，相当于全部选择。下列图中黑白相间细线就是选择区边界，对图像操作只对选择区内有效。电商美工培训第16页1Photoshop 基础1.7 容差与流量容差：图像上像素点之间颜色范围，容差越大，与选择象素点相同范围越大，其数值为0-255。下列图是用魔术棒选择工具在不一样容差值下对图像做不连续选区结果。流量：控制画笔作用到图像上颜色浓度，流量越大产生颜色深度越强，其数值为0%-100%。下列图是用一样画笔在不一样流量控制下对图像操作结果。 电商美工培训第17页1Photoshop 基础1.8 蒙版与样式 蒙板：蒙板是用来保护

7、图像任何区域都不受编辑影响，并将对它编辑操作作用到它所在图层。以下列图，蒙板将对其黑白控制转化为透明后作用到图像上，蒙板上黑色部分为完全透明，白色为完全不透明。 样式：对活动图层或选区进行定制风格化编辑，类似动作。下列图是对图像各个图层内容指定不一样样式结果。电商美工培训第18页1Photoshop 基础1.9 通道与图层 图层：为了方便图像编辑，将图像中各个部分独立起来，对任何一部分编辑操作对其它部分不起作用。下列图实际上是由多个图层合成一张成品稿。 通道：通道是完全统计组成图像各种单色颜色信息和墨水强度，并能存放各种选择区域、控制操作过程中不透明度。下列图是一张色彩模式为RGB图像在彩色（

8、RGB）、红色（R）、绿色（G）、蓝色（B）通道下显示效果。电商美工培训第19页1Photoshop 基础1.10 图层样式投影内阴影外发光内发光斜面浮雕光泽颜色叠加渐变叠加图案叠加描边电商美工培训第20页1Photoshop 基础1.11 滤镜 滤镜：利用摄影中滤光镜原理对图像进行特殊效果编辑。即使其源自滤光镜，但在PS中将它功效发挥到了滤光镜无法比拟程度，使其成为PS中最神奇部分。PS中有13大类(不包含Digmarc滤镜)近百种内置滤镜。 原图：使用不通滤镜结果：电商美工培训第21页1Photoshop 基础1.12 文件保留 分辨率：单位长度内(通常是一英寸)象素点数量多少。针对不一样

9、输出要求对分辨率大小也不一样，如惯用屏幕分辨率为72象素/英寸，而普通印刷分辨率为300象素/英寸。 文件格式：为满足不一样输出要求，对文件采取存放模式，并依据一定规格对图像各种信息和品质做取舍，它相当于图像各种信息实体描述。 下面是PS惯用文件格式。 输出：将图像转换成其它文件格式，以到达不一样软件之间文件交换目标，或是满足其它输出需求求。色彩式模：将图像中象素按一定规则组织起来方法，称之为色彩模式。不一样输出需要图象有不一样色彩模式。惯用色彩模式如RGB、CMYK、Lab等。电商美工培训第22页01 Photoshop基础02 旺铺首页设计03 主图美化04 搜索列表页设计05 宝贝详情页

10、设计电商美工培训第23页2旺铺首页设计2.1 装修界面尺寸介绍旺铺整体版面宽度为1440-1920px,普通情况下选取1440px即可。主体内容最大宽度尺寸为950px；其它主体模块内容分别为190px与750px。招牌尺寸：950 x120px页头尺寸：1440 x150px导航尺寸：950 x30px电商美工培训第24页2旺铺首页设计2.2 旺铺店招设计制作进入装修页面之后，选择店招编辑按钮即可进入店招编辑界面。店招制作方法有三种：1.默认招牌2.自定义招牌3.BannerMaker电商美工培训第25页2旺铺首页设计2.2.1 默认招牌设计制作1.招牌类型选择默认招牌2.将显示店铺名称勾去

11、掉3.背景图处点击选择文件按钮，将已经制作好店招图片上传到招牌4.点击保留按钮即可。注意事项：在装修店招时候，先要在把你所要放店招图片准备好。店招图片尺寸为：950 x120 px（店招详细高度能够依据你版面需求有所改变。）（默认店招只能单独放一张图片，不足太大，不提议使用）电商美工培训第26页2旺铺首页设计2.2.2 自定义招牌设计制作1.招牌类型选择自定义招牌2.点击插入空间图片按钮，上传店招图片3.店招如要添加收藏、点击等功效，能够切换到源码页，添加相关代码。4.点击保留按钮即可。注：自定义招牌是我们美工经常使用一个招牌类型，可在源码页面自由设计自己招牌，自由度在3种招牌类型里面是最高。

12、电商美工培训第27页2旺铺首页设计2.2.3 BannerMaker招牌类型1.招牌类型选择BannerMaker2.点击进入BannerMaker设置，进入banner图购置页面3.挑选你喜欢banner图类型，购置相关banner图即可。4.点击保留按钮即可。注意事项：BannerMaker这个界面适适用来寻找设计灵感，并不提议使用这种图片，一个方面是因为要用钱，另一个方面是这种banner图不一定真适合你店铺，不足太大。电商美工培训第28页2旺铺首页设计2.2.4 头部页头设计专业版页头制作方法：1.打开后台左侧页头设置页面2.如若需使用背景色，则可更换页头背景色，假如不许使用则把那勾去

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

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

15、设计制作方法色块: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;电商美工培训第33页2旺铺首页设计2.3.1 导航设计制作方法色块:background:#000000;

16、自定义图片:background:url(图片链接); 竖线编辑：一级导航分类（除去“全部宝贝”分类）分隔线颜色代码以下：.menu-list .menuborder-color:#000000;一级导航“全部宝贝”分类分隔线颜色代码以下：.all-cats.linkborder-color:#000000;电商美工培训第34页2旺铺首页设计2.3.1 导航设计制作方法色块:background:#000000; 自定义图片:background:url(图片链接); 二级分类文字代码以下：.popup-content .cats-tree .fst-cat .cat-namefont-siz

17、e:字号px;color:#颜色代码;font-weight:bold/bolder/normal;二级分类背景代码以下：.popup-contentbackground:#000000;三级分类文字代码（除去“全部宝贝”分类）以下.popup-content.cats-tree.snd-pop-innerfont-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal; 三级分类文字代码（包含“全部宝贝”分类字体大小）这么就无法改变字体颜色，以下.popup-content.cats-tree.snd-pop-innerfont-size:字

18、号px;color:#颜色;三级分类背景代码：.popup-content .cats-tree .snd-pop-innerbackground:#000000;电商美工培训第35页2旺铺首页设计2.3.1 导航设计制作方法色块:background:#000000; 自定义图片:background:url(图片链接); 鼠标滑过一级分类导航文字变换背景色代码以下：.menu-list .menu-hover .linkbackground:#000000;鼠标滑过一级分类导航文字变换颜色代码以下：.menu-list .menu-hover .link .titlecolor:#FFFF

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

20、ground:#000000; 自定义图片:background:url(图片链接); 鼠标滑过三级分类导航文字变换背景色代码以下：.popup-content .cats-tree .snd-cat-hd-hoverbackground:#000000;修改“全部宝贝”右边小图标代码以下：.all-cats .link .popup-iconbackground:url(图片连接);电商美工培训第38页2旺铺首页设计2.3.1 导航设计制作方法色块:background:#000000; 自定义图片:background:url(图片链接); 修改二级分类右侧图标代码以下（有三级分类才会显示

21、）：.popup-content .cats-tree .fst-cat-iconbackground:url(图片连接);在三级分类前加上小块白色代码以下：.popup-content .cats-tree .snd-cat-icondisplay:block;height:3px;width:3px;电商美工培训第39页2旺铺首页设计2.4 全屏海报制作淘宝上惯用宽度尺寸有1440、1680、1920这三种。 淘宝后台默认最大宽度为950,假如要超出这尺寸必须经过代码实现。另外，这全屏代码只能在淘宝首页使用，子页面是不兼容。1440px 全屏海报：（宽度1440px，高度随便自己调，同时修

22、改两处500px即可） 电商美工培训第40页2旺铺首页设计2.5 万能热区代码介绍万能热区是淘宝上最常见一个点击功效，它能是图片上某一个区域实现页面跳转。万能热区按钮： 万能热区工具网址：/hotpoint/电商美工培训第41页2旺铺首页设计2.6 其它代码介绍在线客服与收藏店铺也是淘宝里面很常见一个互动功效。收藏店铺普通来说会放到招牌或者详情页左侧。在线客服普通会放到首页轮播图下方、首页主产品上方或详情页左侧。在线客服代码：收藏店铺代码：电商美工培训第42页01 Photoshop基础02 旺铺首页设计03 主图美化04 搜索列表页设计05 宝贝详情页设计电商美工培训第43页3主图美化3.1 做图前准备事项一张好淘宝主图制作，离不开你充分准备工作。只有对同行产品充分了解，你才能充分突出你产品，提升点击量。影响主图排名相关原因：1.主图创意度2.周围主图区分（主图颜色等）3.主图点击率4.宝贝成交率主图制作前准备事项：1.同行产品对比，找出产品卖点。2.对宝贝排名附近产品进行对比，确定主图主色调。3.撰写文案，展示宝贝优势，字数不宜过多。4.准备主图相关素材5.对主宝贝进行修图，对产品上脏东西及明暗度进行调整。电商美工培训第44页3主图美化3.2 主图制作注意事项每一个宝贝上都能够有5张主图，其中有两