电商部美工培训教程

（以淘宝美工为例）

淘宝美工须知

1、淘宝美工需掌握的软件

Photoshop，

Dreamweaver

Flash，

Illustrator，

另外，还需要网络美工具备如下素质：扎实的美术功底、丰富的想象力和良好的创造力，网页设计/平面设计/广告设计工作经验，美术类/平面设计/广告及相关专业，较好的文字功底。不仅要求会相关的绘图软件，还要求懂一定的网页设计语言和有一定的文字功底。

2、淘宝美工的相关知识

淘宝美工平时需要设计店铺运营所需图片，宝贝主图，宝贝详情页，店铺首页装修，淘宝活动海报，店招设计，店铺LOGO设计等等。

宝贝主图即商品图片尺寸：800*800 px

宝贝详情页面就是平时大家浏览商品时所看到介绍宝贝的网页尺寸：宽度一般为

750px 高度不限。

店招即店铺的开头，尺寸950*120px左右

店铺活动海报，一般为3种，分别为宽屏海报和950px宽度以及750px宽度海报，高度不固定。

PX指的是像素。

淘宝美工平时设计图片的分辨率一般为72.

3、淘宝美工的待遇：据统计，网店美工的工资待遇一般在4000元/月左右，部分掌柜还包吃住，再有好的会交5险1金。有2年网店美工经验的人员，底薪通常在3000-6000

之间。一般大城市美工分为初级、中级和高级：初级美工，月薪3000-5000元，半年淘宝经验；中级美工，月薪4000-6000元，1年以上美工经验；高级美工，月薪5000-8000元，3年以上美工经验。

4、淘宝美工的工作压力：通常大一些的网店，美工做的事情都比较细化，如美化/优化网店、处理商品图片、设计banner广告图、拍摄新产品的各种展示照片，而小的网店的美工可能还要兼职摄影、宝贝描写甚至是商品上架。因此，在享受较高收入的同时，网店美工要处理众多的产品，工作压力也比较大。

PhotoShop 的使用

第一课：工具的使用

一、Photoshop 简介：

Adobe 公司出品的Photoshop 是目前最广泛的图像处理软件，常用于广告、艺术、平面设计等创作。也广泛用于网页设计和三维效果图的后期处理，对于业余图像爱好者，也可将自己的照片扫描到计算机，做出精美的效果。总之，Photoshop 是一个功能强大、用途广泛的软件，总能做出惊心动魄的作品。

二、认识工具栏

1、 选框工具：用于选取需要的区域

----选择一个像素的横向区域 ----选择一个像素的竖向区域

属性栏：

注：按

shift键+框选，可画出正方形或正圆形区域

2、移动工具： -----用于移动图层或选区里的图像

3、套索工具：

----用于套索出选区

----用于套索出多边形选区

----可根据颜色的区别而自动产生套索选区

4、魔术棒工具： ----根据颜色相似原理，选择颜色相近的区域。

注：“容差”，定义可抹除的颜色范围，高容差会抹除范围更广的像素。

5、修复工具：

且是 ----类似于“仿制图工具”，但有智能修复功能。

----用于大面积的修复

一新 ----用采样点的颜色替换原图像的颜色

注：Alt+鼠标单击，可拾取采样点。

6、仿制图章工具----仿制图章工具从图像中取样，然后您可将样本应用到其它图像或同一图像的其它部分。

----仿制图章工具从图像中取样，然后将样本应用到其它图像或同

一图像的其它部分（按Alt键，拾取采样点）。

----可先自定义一个图案，然后把图案复制到图像的其它区域或其它图像上。

三、小技巧：

①、取消选区：【Ctrl＋D】

②、反选选区：【Shif+F7】

③、复位调板：窗口—工作区—复位调板位置。

④、ctrl+[+、-]=图像的缩放

⑤空格键：抓手工具

⑥Atl+Delete = 用前景色填充

Ctrl+Delete = 用背景色填充

第二课：工具的使用二

一、工具栏

二、小技巧

1、自由变换工具

：【

Ctrl

＋T 】

2、使用框选工具的时候，按【

Shift

】后再框选，则框选出正圆或正方形。 按【Alt 】后再框选，则选区以鼠标点为中心 3、 ：可以使图像的亮度提高。 ：可以使图像的区域变暗。

：可以增加或降低图像的色彩饱和度。 4、用前景色来填充：【Alt ＋Delete 】 用背景色来填充：【Ctrl ＋Delete 】

第二课：工具的使用02

一、工具栏

1、画笔工具：画笔工具以前景色进行绘画。

方工业 ----画笔工具以前景色以基础,绘制画笔状的线条。

----铅笔工具创建硬边手画线。

注：

①“流量”指定画笔工具应用油彩的速度，相当于画笔的出水量。

②★要绘制直线，请在图像中点按起点。然后按住 Shift 键并点按终点。

③自定义画笔：[编辑]—[定义画笔]。

2、历史记录画笔工具

-----用于恢复图像之前某一步的状态。

墨纸砚 -----利用所选状态或快照，模拟不同绘画风格的画笔来绘画。

3、填充工具

-----用渐变色来填充选区或图像。

-----用前景色填充着色相近的区域。

4、橡皮擦工具

墨纸砚 -----橡皮擦在背景层把画面擦为背景色，在普通层把画面完全擦除。

-----背景橡皮擦能将背景层的画面完全擦除，使背景层透明。用期 -----以魔术棒的原理，删除鼠标点击处相似的像素。

5、色调工具

素 -----可以使图像的亮度提高。

-----可以使图像的区域变暗。

-----可以增加或降低图像的色彩饱和度。

6、聚焦工具

-----对图像内的硬边进行模糊处理。

-----锐化图像内的柔边。

-----可模拟在湿颜料中拖移手指的动作，产生涂抹效果。

二、小技巧

1、自由变换工具：【Ctrl＋T】

2、[ ]：中括号，可控制画笔工具笔刷的大小。

3、Shift + [ ] :可控制画笔工具笔刷的硬度。

4、Shift + 画笔工具：可绘制出直线。

第三课：图层

一、图层的概念：

1、图层就像一张张叠在一起的胶片，最上层的图像档住下面的图像，使之看不见。

2、上层图像中没有象素的地方为透明区域，通过透明区域可以看到下一层的图像。

3、图层是相对独立的，在一个图层编辑时，不影响其它层。

4、每次只能在一个图层上工作，不能同时编辑多个图层。

二、图层面板

三、矢量图与位图

矢量图使用直线和曲线来描述图形，这些图形的构成元素是一些点、线、矩形，多边形，圆和弧线等，它们都是通过数学公式计算获得的。所以矢量图形文件体积一般较小。矢量图形最大的优点是：无论放大，缩小或旋转等都不会失真；缺点是：难以表现色彩层次丰富的逼真位图像效果。代表软件是corelDRAW

在平面设计方面,corelDRAW 常用于绘图，如标志，排版，框架。

位图图像亦称为点阵图像或栅格图像，是由称作像素(图片元素)的单个点组成的。这些点可以进行不同的排列和颜色以构成图像。当放大位图时，可以看见构成图像的无数单个的方块。位图的优点是：颜色丰富，效果逼真；而缺点是：放大后会失真,出现马赛克，并且图像文件越大，容量也越大，占用电脑资源也越大。代表软件是photoshop 在平面设计方面，photoshop 主要用于做图像处理，特效制作。

四、技巧

1、Ctrl+Alt+“+，-”号，缩放图像（图像的窗口会跟着缩放）

2、Ctrl+0缩放图像到最合适大小

3、Ctrl+J通过拷贝图层

4、Ctrl+单击图层: 可选择图层的像素

5、D还原前景色和背景色为黑白色

6、方向键←↑↓→：可移动图层一个像素的距离

7、自由变换工具的几种方式：缩放、旋转、斜切、扭曲、透视

9、复制图层：【Alt＋拖动图层】或【Alt＋方向键】

10、总结：

新建图层：

删除图层：

复制图层：

排列图层：

链接图层：

合并图层：

隐藏\显示图层：

第四课：色彩原理和图层的混合模

一、色彩的原理

我们已经讲到，人们只有凭借着光才能看到物体的形状、色彩，有了光才有了人的色彩感觉，从而获得了对客观事物的认识。因此，色就是光刺激人的眼睛的视觉反映。

发光配色：我们能看到太阳和灯，是因为这些物体都能自发光，发出的光刺激我们的眼晴，让我们感觉到颜色，光的波长不同，我们感觉的色就不一样。

光在物理学上是电磁波的一部分，其波长自700~400nm，在此范围称为可视光线。当把光线引入三棱镜时，光线被分离为红、橙、黄、绿、青、蓝、紫，因而得出的自然光是七色光的混合。这种现象称作光的分解或光谱，七色光谱的颜色分布是按光的波长排列的。

吸光配色：有些物体本身不会发光的，之所以能看到它，是因为光源色经物体表面的吸收、反射，反映到视觉中的光色感觉。

我们能看到书本上的有各种颜色，不是因为书本会发光，而是因为书本的颜料吸收了太阳光部分波长的光，反射了其它波长的光，进而射入我们的眼晴，从而我们感觉书本的颜色。

二、色彩模式

1、RGB模式：

发光配色适合于自身发光的物体，比如显像管、霓虹灯。在发光配色时，红、绿、蓝成为三原色，规律是红色光与绿色光相加会形成黄色光，红色光与蓝色光相加会形成紫色光等。

（0、0、0）代表“黑色”（255、255、255）代表“白色”

（255，0，0）代表“红色”（0，255，0）代表“绿色”

2、CMYK模式

称为减色模式，模拟白光被物质吸收部分色光后的反射光。主要用于印刷行业

在吸光配色时，洋红色、黄色、青色被称为三原色。

1、 CMYK模式：代表印刷上用的四种油墨色：C代表青色，M代表洋红色，Y代表黄色，K代表黑色。

（0、0、0、0）代表“白色”（100、100、100、100）代表“黑色”

3、色彩的模式的转换

[图像]→[模式]

4、其它色彩模式

四、色彩调整：

★调整----对图片色彩、明暗度的所有调整命令

★色阶（C+L）——调图片的明暗度与对比度，较多的控制功能

★自动色阶——（C+S+L）自动调一下，不出对话框

★自动对比度——（C+S+A+L）自动调一下对比度，不出对话框

★自动颜色——命令通过搜索实际图像（而不是通道的用于暗调、中间调和高光的直方图）来调整图像的对比度和颜色。

★曲线（C+M）——与色阶功能大致相同淘宝美工需要的软件，较灵活

★色彩平衡（C+B）——可较直观的对图片加各种颜色，好用的命令

★亮度与对比度——没有色阶和曲线来的多的控制功能，对色彩不多的图可应用

★色相与饱和度（C+U）——可调各种色调以及单色的调整，特别好用的命令

★去色（C+S+U）——把图片的颜色都去掉，只剩灰度了

★替换颜色——把选择菜单下的颜色范围和色相与饱和度放在一起进行作用

★可选颜色——用六原色与黑白灰的九种指定颜色进行调整

★通道混合器——通过这个命令相当于对某通道的单独调整，很好的命令

★渐变映射——通过图片的明暗分布把指定的渐变映射到图片上产生特殊效果

★反相（C+I）——把图片的颜色变为相反的颜色（如黑变白、青变红、绿变洋红、蓝变黄）★色调均化——把当前图进行颜色平均，不出对话框

★阈值——把图片变为只有黑白两色，可控制各占多少比

★色调分离——把图片按指定的级进行分离，生成特殊效果。

★变化——变化命令通过显示替代物的缩览图，使您可以调整图像的色彩平衡、对比度和饱和度。

五、图层的混合模式：常用的模式

1、变暗：该模式选择底色或混合颜色中较暗的作为结果颜色。

比混合颜色亮的像素被混合颜色替换，而比混合颜色暗的像素不改变。

2、变亮：该模式选择底色或混合颜色中较亮的作为结果颜色。

比混合颜色暗的像素被混合颜色替换，而比混合颜色亮的像素不改变。

3、正片叠底：将底色与混合颜色相乘。结果总是较暗的颜色。

将任何颜色与黑色相乘产生黑色，与白色相乘则底色不变。

4、滤色：将底色与混合颜色颜色的互补色相乘。结果颜色总是较亮的颜色。

用黑色执行滤色模式使底色保持不变，用白色执行屏幕模式生成白色。

第五课：图层的样式

一，图层的样式

1、概念：

图层样式是 Photoshop 5.0新增的一个非常实用的功能，它为我们简化许多操作，利用它可以快速生成阴影、浮雕、发光等效果－－这些都是针对单个层而言，也就是说，如果给某个层加入阴影效果，那么这个层上所有非透明的部分都会投下阴影，甚至你用画笔随便涂了一笔，这一笔的影子也会随之产生。

为一个层增加图层样式，你可以将该层选为当前活动层，然后选择菜单栏的[图层] →[图层样式]，然后在子菜单中选择投影等效果。或者你可以在图层命令调板中，单击“添加图层样式”按钮，再选择各种效果。

2、图层样式的分类

二、样式的面板的使用

三、小技巧

1、Ctrl+” 隐藏/显示网络线

第六课：图层蒙版和快速蒙版

一、 图层蒙版 1、概念：

◆使用蒙版可保护部分图层，该图层不能被编辑。蒙版可以控制图层区域内部分内容可

隐藏或是显示。更改蒙版可以对图层应用各种效果，不会影响该图层上的图像。 ◆图层蒙版是灰度图像，因此用黑色绘制的内容将会隐藏，用白色绘制的内容将会显示，

而用灰色色调绘制的内容将以各级透明度显示。

◆添加蒙版后，我们所做的操作是作用在蒙版上，而不是图层上。 ◆其常用于图像的合成中，让两个图像无缝的合成在一起

2、 蒙版的常用操作 【添加蒙版】：单击图层面板上的 （添加蒙版）。 【停用图层蒙版】：在图层栏蒙版缩略图单击右键，弹出命令对话框，选择【停用图层蒙版】。 【启用图层蒙版】：在图层栏蒙版缩略图单击右键，弹出命令对话框，选择【启用图层蒙版】。 【应用图层蒙版】：在蒙版缩览图上单击右键，选择【应用图层蒙版】，蒙版的效果即应用在

图层上，而蒙版会被去除。

【删除蒙版】：用鼠标左键按住蒙版缩览图向右下拖动到 （删除按钮）上。

二、快速蒙版

1、概念:

“快速蒙版”模式使您可以将任何选区作为蒙版进行编辑，而无需使用“通道”调板。

将选区作为蒙版来编辑的优点是灵活,而且几乎可以使用任何 Photoshop 工具或滤镜修改蒙版。例如，如果用选框工具创建了一个矩形选区，可以进入“快速蒙版”模式并使用画笔扩展或收缩选区，或者也可以使用滤镜扭曲选区边缘。也可以使用选区工具，因为快速蒙版不是选区。

三、小技巧

1、X键，切换前景色和背景色

2、Q 快速蒙版模式和标准模式的转换

3、Ctrl+A 全选

4、Ctrl+空格键放大镜

5、空格键平移

第七课：路径

一．概念：

所谓路径，就是用钢笔或自由钢笔工具所描绘出来的线或形状。

路径是矢量，不含具体的像素

路径是创建各选区最灵活、最精确的方法之一。

作用：

①可以绘制线条平滑的优美图形

②使用路径可以进行复杂的图像的选取； ③可以存储选区以备再次使用；

二．跟路径有关的工具

三．路径面板

四、技巧

1、Ctrl+Alt+Z撤消

2、【Shift】：画直线或45度角的线

【Ctrl】：在绘图路径过程中，按Ctrl键，可暂时转为“直接选择工具”

【Alt】：在绘图路径过程中，按Alt键淘宝美工需要的软件，可暂时转为“转换点工具”

3、Ctrl+Enter将路径转为选区

4、ctrl+Alt+“+ —”：放大、缩小图像（连同画布一起）

五、位图、矢量图

1、位图(代表：photoshop, 作用：图像处理，做其它效果)

a、由具有不同颜色值和位置的像素点构成图像

b、像素点是最小单位，不能再分割

c、文件容量跟图像大小有关, 速度也跟图像的大小有关，

d、表达能力很丰富

2、矢量图（代表：corelDRAW , 作用：绘图，广告排版，印刷）

A、用数学方法定义图形、（方向、线段）

B、图形放大不失真、占用电脑空间小

C、文件容量跟图像大小无关, 速度也跟图像的大小无关，

D、ps也有矢量图

1、文字层

2、路径

第八课：通道

一．通道的概念：

◆通道就是用于存放图像的颜色信息的地方,photoshop将图像分离成基本的信息,

每一个基本的颜色信息就是一个通道。不同的颜色模式，通道的数目类型不同。

1，灰度模式：只有一个“灰度”通道

2，RGB模式：分别有R、G、B与一个复合通道

3，CMYK模式：分别有C、M、Y、K与一个复合通道

◆通道最为重要的功能是保存和编辑选区

（可用各种绘画工具，调色工具，滤镜来编辑通道）

二．RGB通道的概念

三．通道面板

三、通道面板

第九课：滤镜

一、 概念：

photoshop 滤镜是图像的特效处理工具，它能对图像进行各种特效处理，以产生奇妙的效果。

photoshop 内置滤镜中有14

个滤

来源【写作训练营】自媒体，更多内容/合作请关注「辉声辉语」公众号，送10G营销资料！