电商美工培训

东莞市动点信息科技有限公司——
美工培训
Desigened by @ Hao
01 Photoshop基础 02 旺铺首页设计 03 主图美化 04 搜索列表页设计
05 宝贝详情页设计
01 Photoshop基础 02 旺铺首页设计 03 主图美化 04 搜索列表页设计
05 宝贝详情页设计
1
Photoshop 基础
选区：也叫选取范围，是PS对图像做编辑的范围，任何编辑对选区外无效。当图像上没有建立选择 区时，相当于全部选择。 下图中的黑白相间的细线就是选择区的边界，对图像的操作只对选择区内有效。
1
Photoshop 基础
1.7
容差与流量
容差：图像上像素点之间的颜色范围，容差越大，与选择象素点相同的范围越大，其数值为0-255。
首页色块 .skin-box-bd .menu-list .menuselected .link{background:url(图片链接);} .skin-box-bd .menu-list .menuselected .link .title{background:url(图片链接);}
“所有分类”的背景色代码如下： .all-cats .link{background:#000000;}
输出：将图像转换成其它的文件格式，以达到不同软件之间文件交换的目的，或是满足其它输出的需求求。 色彩式模：将图像中象素按一定规则组织起来的方法，称之为色彩模式。不同输出需要的图象有不同的色彩模式。常用的色彩模式如RGB、 CMYK、Lab等。
01 Photoshop基础 02 旺铺首页设计 03 主图美化 04 搜索列表页设计
• 污点修补工具
• 修复画笔工具
• 修补工具 • 红眼工具 • 仿造印章工具
• 图案印章工具
• 橡皮擦工具 • 背景橡皮擦工具
1
Photoshop 基础
1.2
工具面板
1.2.3 修饰工具：
• 魔术橡皮擦工具
• 模糊工具
• 锐化工具 • 涂抹工具 • 减淡工具
• 加深工具
• 海绵工具
1
Photoshop 基础
注： 自定义招牌是我们美工经常使用的一种 招牌类型，可在源码页面自由设计自己 的招牌，自由度在3种招牌类型里面是最 高的。
2
旺铺首页设计
2.2.3
BannerMaker招牌类型
1.招牌类型选择BannerMaker 2.点击进入BannerMaker设置，进入 banner图购买页面 3.挑选你喜欢的banner图类型，购买相 关的banner图即可。 4.点击保存按钮即可。
4.点击保存按钮即可。
注意事项： 在装修店招的时候，先要在把你所要放 的店招图片准备好。 店招图片尺寸为：950x120 px
（店招具体高度可以根据你的版面需求 有所变化。）
（默认店招只能单独放一张图片，局限性太大，不建议使用）
2
旺铺首页设计
2.2.2
自定义招牌设计制作
1.招牌类型选择自定义招牌 2.点击插入空间图片按钮，上传店招图 片 3.店招如要添加收藏、点击等功能，可 以切换到源码页，添加相关代码。 4.点击保存按钮即可。
Photoshop 基础
1.11
滤镜
滤镜：利用摄影中滤光镜的原理对图像进行特殊的效果编辑。虽然其源自滤光镜，但在PS中将它的功 能发挥到了滤光镜无法比拟的程度，使其成为PS中最神奇的部分。PS中有13大类(不包括Digmarc滤镜)近 百种内置滤镜。
原图：
使用不通滤镜的结果：
1
Photoshop 基础
图层：为了方便图像的编辑，将图像中的各个部分 独立起来，对任何一部分的编辑操作对其它部分不起作 用。下图实际上是由多个图层合成的一张成品稿。
1
Photoshop 基础
1.10
• 投影
图层样式
• 内阴影
• 外发光
• 内发光 • 斜面浮雕 • 光泽 • 颜色叠加 • 渐变叠加 • 图案叠加 • 描边
1
1
Photoshop 基础
1.6Hale Waihona Puke Baidu
象素与选区
象素：象素是构成图像的最基本元素，它实际上一个个独立的小方格，每个象素都能记录它所在 的位置和颜色信息。 下图中每一个小方格就是一个象素点，它记载着图像的各种信息。
巧用选区配合印章等修图工具可以 更好的对图像的指定位置进行修改与处 理，避免影响到其他不相关的区域。
2
旺铺首页设计
2.3.1
导航设计制作方法
1.点击显示设置，添加导航控制代码 2.点击保存
2
旺铺首页设计
2.3.1 导航设计制作方法 色块: background:#000000; 自定义图片: background:url(图片链接); 前半段 .skin-box-bd .link{background:#000000;}
1.2
工具面板
1.2.4 画笔工具：
• 画笔工具
• 铅笔工具
• 颜色替换工具 • 历史记录画笔工具 • 历史记录艺术画笔工具
• 渐变工具
• 油漆桶工具
1
Photoshop 基础
1.2
工具面板
1.2.5 绘图和文字工具：
• 路径工具
• 文字工具
• 文字蒙版工具 • 钢笔工具 • 形状工具
• 直线工具
A
1.1
Photoshop默认界面
B
C G
A.文档窗口 B.停放折叠为图标的面板
D E
C.面板标题栏
D.菜单栏 E.选项栏 F.“工具”调板 G.“折叠为图标”按钮 H.垂直停放的三个调板（面板）组
F
H
操作界面
1
Photoshop 基础
1.2
工具面板
在 Photoshop 中称为“工具”调板， 包含用于创建和编辑图像、图稿、页 面元素等的工具。相关工具将编为一 组。
旺铺首页设计
2.2
旺铺店招设计制作
进入装修页面之后，选择店招的编辑按 钮即可进入店招编辑界面。
店招制作方法有三种：
1.默认招牌 2.自定义招牌 3.BannerMaker
2
旺铺首页设计
2.2.1
默认招牌设计制作
1.招牌类型选择默认招牌 2.将显示店铺名称的勾去掉
3.背景图处点击选择文件按钮，将已经 制作好的店招图片上传到招牌
• 自定义形状工具
1
Photoshop 基础
1.2
工具面板
1.2.6 其他工具：
• 注释工具
• 吸管工具
• 测量工具 • 抓手工具 • 缩放工具
1
Photoshop 基础
1.3
调板
• 调板可帮助您监视和修改您的工作。 默认情况下，将显示某些面板，可 以通过从“窗口”菜单中选择任何 面板来添加该面板。很多面板都具 有菜单，其中包含特定于面板的选 项。可以对面板进行编组、堆叠或
样式：对活动图层或选区进行定制的风格化编辑，类似动作。 下图是对图像的各个图层内容指定不同样式的结果。
1
Photoshop 基础
1.9
通道与图层
通道：通道是完全记录组成图像各种单色的颜色信 息和墨水强度，并能存储各种选择区域、控制操作过程 中的不透明度。 下图是一张色彩模式为RGB的图像在彩色（RGB）、 红色（R）、绿色（G）、蓝色（B）通道下的显示效果。
05 宝贝详情页设计
2
旺铺首页设计
2.1
装修界面尺寸介绍
旺铺整体版面宽度为1440-1920px,一般情况下选用1440px即可。
招牌尺寸：950x120px 页头尺寸：1440x150px
导航尺寸：950x30px
主体内容最大宽度尺寸为950px；其他主体模块内容分别为190px与750px。
2
基础版的店铺是没有设置页头的权限的，对此我 们可以用代码来设计，代码如下： body{background:url(图片地址) no-repeat fixed center top transparent;}
2
旺铺首页设计
2.3.1
导航设计制作方法
1.点击导航编辑按钮，进入导航编辑界 面
2.可以点击添加按钮，在导航上添加二 级页面
停放。
1
Photoshop 基础
1.4
菜单栏
同其他Windows应用程序一样 ，Photoshop CC提供了丰富的菜单 命令，许多操作都可以通过菜单命 令来完成，Photoshop CS3的主菜单 共有11个。
Photoshop CC界面
1
Photoshop 基础
1.5
位图与矢量图
在我们设计轮播海报、宝贝主图等 图片的时候，尽量选取矢量图形或高像 素的图片作为我们的设计素材，避免出 现失真现象。
注意事项： BannerMaker这个界面适合用来寻找设 计灵感，并不建议使用这种图片，一个 方面是因为要用钱，另一个方面是这种 banner图不一定真的适合你的店铺，局 限性太大。
2
旺铺首页设计
2.2.4 头部页头设计
专业版页头制作方法： 1.打开后台左侧页头设置页面
2.如若需使用背景色，则可更换页头背 景色，如果不许使用则把那勾去掉
2
旺铺首页设计
2.3.1 导航设计制作方法 色块: background:#000000; 自定义图片: background:url(图片链接);
二级分类文字代码如下： .popup-content .cats-tree .fst-cat .cat-name{font-size:字号px;color:#颜色代 码;font-weight:bold/bolder/normal;} 二级分类背景代码如下： .popup-content{background:#000000;} 三级分类文字代码（除去“所有宝贝”分类）如下 .popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色代 码;font-weight:bold/bolder/normal;} 三级分类文字代码（包括“所有宝贝”分类字体大小）这样就无法改变字体 颜色，如下 .popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色;} 三级分类背景代码： .popup-content .cats-tree .snd-pop-inner{background:#000000;}
下图是用魔术棒选择工具在不同容差值下对图像做不连续选区的结果。
流量：控制画笔作用到图像上的颜色浓度，流量越大产生的颜色深度越强，其数值为0%-100%。 下图是用同样的画笔在不同流量控制下对图像操作的结果。
1
Photoshop 基础
1.8
蒙版与样式
蒙板：蒙板是用来保护图像的任何区域都不受编辑的影响，并将对它的编辑操作作用到它所在的图层。 如下图，蒙板将对其的黑白控制转化为透明后作用到图像上，蒙板上黑色部分为完全透明，白色为完全 不透明。
2
旺铺首页设计
2.3.1 导航设计制作方法 色块: background:#000000; 自定义图片: background:url(图片链接);
竖线编辑： 一级导航分类（除去“所有宝贝”分类）分隔线颜色代码如下： .menu-list .menu{border-color:#000000;}
一级导航“所有宝贝”分类分隔线颜色代码如下： .all-cats .link{border-color:#000000;}
3.页头下边距10像素，选择关闭 4.如要使用自定义的页头，则选用更换 图片按钮，上传图片。页头图片高度为 150像素，宽度不少于1440像素 5.选择合适的背景显示方式及对齐方式 后，点击保存
所谓的页头，就是指店招与导航左右两边的空白区 域，我们做页头的目的就是把这空白区域的色块补充完 整，如上图所示。
后半段 .skin-box-bd .menu-list{background:#000000;}
最右边1小块 .skin-box-bd{background:url(图片链接);}
2
旺铺首页设计
2.3.1 导航设计制作方法 色块: background:#000000; 自定义图片: background:url(图片链接);
位图图像：位图也叫栅格图，由象素点组成，每个象素点都具有独立的位置和颜色属性。在增加图 像的物理象素时，图像质量会降低。
矢量图形：由矢量的直线和曲线组成，在对它进行放大、旋转等编辑时不会对图像的品质造成损 失， 如其它软件创造的AI、CDR、EPS文件等。 1：1比例下的位图图像和矢量图像：
放大后的位图图像和矢量图像：
1
Photoshop 基础
1.2
工具面板
1.2.1 选择工具：
• 选框工具
• 移动工具
• 套索工具 • 魔棒工具 • 快速选择工具
1
Photoshop 基础
1.2
工具面板
1.2.2 裁剪工具：
• 裁剪工具
• 切片工具
• 切片选择工具
1
Photoshop 基础
1.2
工具面板
1.2.3 修饰工具：
1.12
文件保存
分辨率：单位长度内(通常是一英寸)象素点的数量多少。针对不同的输出要求对分辨率的大小也不一样，如常用的屏幕分辨率为72象 素/英寸，而普通印刷的分辨率为300象素/英寸。
文件格式：为满足不同的输出要求，对文件采取的存储模式，并根据一定的规格对图像的各种信息和品质做取舍，它相当于图像各种 信息的实体描述。 下面是PS常用的文件格式。