淘宝美工讲义

电子商务专业人才培训教材：淘宝美工讲义淘金商学院2012年8月目录第一章：初识淘宝1、淘宝美工的岗位职责和学习内容2、了解店铺构造3、为什么要进行网店装修工作4、优秀店铺欣赏第二章：Photoshop软件基础操作1、软件基础知识及界面介绍2、工具箱介绍3、图层操作4、图层蒙版5、调色命令第三章店铺总体设计要领1、店铺装修注意事项2、操作练习3、作业点评第四章店招制作1、店招制作2、操作练习3、作业点评第五章：分类导航及客服中心制作1、分类导航及客服中心制作2、操作练习3、作业点评第六章：宝贝陈列设计1、宝贝陈列设计2、操作练习3、作业点评第七章：内页制作1、内页制作规则（以家纺内页制作规则为例）2、内页制作前准备（修图、美化图片、抠图、调色）2、操作练习3、作业点评第八章：产品上架1、上传宝贝及主图制作2、操作练习3、作业点评第九章：海报设计与制作1、海报设计与制作2、操作练习3、作业点评第十章：店铺整体色彩风格设计与装修1、整店风格设计与装修2、作业点评第一章：初识淘宝1、淘宝美工的岗位职责（淘宝店铺页面设计、美化、网店促销海报制做、宝贝内页设计、图片美化、切片、上传宝贝等）淘宝美工应该熟练使用Photoshop、Flash、fireworks、Dreamweaver等常用设计制作软件2、了解店铺构造（店招、首页海报、分类导航、客服中心、分区、侧边栏、主图、宝贝详情、内页海报、页尾）淘宝店铺首页的结构一般如下：3、为什么要进行店铺装修如果—个买家找到了三家店铺做对比，如果你的店铺装修得更专业到位，买家的眼球自然会被你的店铺吸引，那么你给这位买家之第—印象已经很好很深刻了。电视广告为什么要花血本做那么多动画广告呢？丢几张图片不为更省事，当然目的就为用动画营造视觉效果，让你对他们的产品印象更深刻！或许您会说，我店铺不装修生意—样非常好，商品质量才为王道，但有好的商品同样未必会有很好的生意，还要在装修上下点工夫，这里就要谈到淘宝店铺的装修了，试问有哪位买家有耐心看你写之乱七八糟之东西呢？装修不只为装修店铺，还要装修你的商品，把你的描述写得尽量言简意赅，宝贝图片尽量清晰！你要时刻站在买家之立场来装修你的店铺，还要时刻站在买家之立场来经营你的生意！4、网店装修之优秀店铺赏析从设计师和买家的角度，我们来对一些店铺的设计进行分析，希望对大家有所帮助。下面是男装类服装网店的装修解析。【整体色调】作为休闲男装类的店铺，既要考虑到休闲服装风格的多样性，也要注意表现男士适当的沉稳和严肃，太过于艳丽的暖色调会引起男生的反感，而过于冷静的中性灰或者黑色也不能传达休闲服装的那种张力与青春。所以卖家选用了一种蓝色，借用天空的色系表现张力，但将蓝色的饱和度适当降低，一来便于阅读（色彩饱和度低的颜色更加利于阅读），二来增加一些稳重的意味。小贴士：1.需要根据出售商品类别选择适合的店铺颜色；2.选择的店铺整体色彩的饱和度不宜过高，否则买家浏览容易视觉疲劳；【首屏设计】在首屏设计中大家觉得什么最重要？许多卖家会说是店招，另外一些卖家可能会说是广告，以自己的设计经验，告诉大家，首屏最重要的设计其实是导航，导航肩负着引领用户在不同店铺页面中流转，从商品详情到店铺，从店铺首页到公告页，从店铺分类页面回到店铺首页，都需要导航的引导以在设计上，最好能够首先突出店铺导航。小贴士：1.在首屏的设计中，导航条应该是最醒目突出的；2.店铺招牌只需要用户记住你的店铺品牌即可，需要做到简明扼要。加入品牌logo，主营商品类别，店铺名称即可，如果有品牌广告语可以填写，但尽量不要让店铺招牌的信息量过大；不然买家可能什么都记不住。【店铺分类图片设计】许多卖家都喜欢用图片形式的店铺分类展示，自己也非常喜欢，因为图片形式更加美观，更重要的是，图片形式能够让分类的视觉更有层次感，便于买家快速阅读。九天之城的分类图片设计层次感是非常好的，一级分类用了大块的深色调，一目了然，便于买家快速寻找。在找到一级类目之后，再在当前分类下找二级分类便是非常快速的了。小贴士：1.店铺分类图片设计需要层次感，一级类目的图片视觉表现要强于二级分类图片；2.店铺分类图片设计需要避免花哨，因为用户需要浏览的是文字信息；【广告图片设计】究竟什么样的广告才算好广告呢？无论是传统领域还是互联网，原则其实都是一样的：1.一个广告只说明一件事情，不要企图表达几件事情（一个主题）；2.广告最突出的，一般来说应该是商品，而不是图片漂亮的花边和修饰；3.文案简明扼要，最好不要超过20个字，阅读20个字的时间一般是4~5秒，对于买家来讲，太多的文字会直接pass掉（学会做减法，减到不能再减）。第二章：Photoshop软件基础操作1、软件基础知识及界面介绍Photoshop是Adobe公司开发的一个跨平台的平面图像处理软件，是专业设计人员的首选软件。Photoshop是图像处理软件，其优势不在图形创作。图像处理是对已有的位图图像进行编辑、加工、处理以及运用一些特殊效果。Photoshop的界面由菜单栏、工具选项栏、工具箱、图像窗口、浮动调板、状态栏等菜单栏：将Photoshop所有的操作进行分类。如编辑、图像、图层、滤镜；工具选项栏：会随着使用的工具不同，工具选项栏上的设置项也不同；工具箱：工具下有三角标记，即该工具下还有其它类似的命令。当选择使用某工具，工具选项栏则列出该工具的选项；按工具上提示的快捷键使用该工具按SHIFT+工具上提示的快捷键切换使用这些工具按TAB显示/隐藏工具箱、工具选项栏和调板按F切换屏幕模式（标准屏幕模式、带有菜单栏的全屏模式、全屏模式）状态栏：包含四个部分，分别为：图像显示比例、文件大小、浮动菜单按钮及工具提示栏；浮动调板：可在窗口菜单中显示各种调板。双击调板标题：最小化或还原调板拖动调板标签：分离和置入调板调板右边三角：调板菜单复位调板位置：窗口-工作区-复位调板位置存储工作区：窗口-工作区-存储工作区SHIFT+TAB：显示隐藏调板2、工具箱介绍一、规则选框工具M主要功能是在文件中创建各种类型的规则选择区域，创建后，操作只在选框内进行，选框外不受任何影响。包括矩形、椭圆、单行、单列选区工具。1、复位工具：右击工具选项栏前端，选择复位工具或复位所有工具，将该工具或所有工具选项恢复为默认的设置。2、填充和描边选区：建立选区，可使用ALT+DEL或ALT+BackSpace填充前景色，CTRL+DEL或CTRL+BackSpace填充背景色。建立选区，可使用编辑-填充（SHIFT+F5）或描边。3、羽化选区（CTRL+ALT+D）：使用边缘有光晕和柔和的效果，降低边缘的对比度。例子：BABY、山水羽化。4、消除锯齿：使圆形或弧形边缘更光滑；5、样式：正常，约束长宽比和固定大小。6、创建新选区时SHIFT+规则选框工具：绘制正的选区ALT+规则选框工具：从中心点开始绘制SHIFT+ALT+规则选区工具：从中心点开始绘制的正选区在绘制时，按SPACE键：可绘制移动选区CTRL+D：取消选区7、选区的布尔运算：选区创建后按SHIFT，再选：增加选区（加选）按ALT，再选：减小选区（减选）按SHIFT+ALT，再选：相交选区（交选）8、移动和复制选区内容按CTRL移动选区：移动选区内容按CTRL+ALT移动选区：复制选区内容规则选框工具选项栏中，有对应的选项。二、套索工具L用于建立复杂的几何形状的选区。1.普通套索工具：用于建立自由形状的选区。2.多边形套索工具：用于建立直线型的多边型选择区域。首次建立选区时按住Shift键可约束画线的角度为水平、垂直及45度。技巧：普通套索和多边形套索工具使用时，按ALT可临时互相切换。3.磁性套索工具：自动捕捉物体的边缘以建立选区。宽度：定义此工具检索的距离范围（1-40P）；边对比度：定义此工具查找时对边缘的敏感程度（1%-100%）；频率：生成固定点的多少；（0-100）钢笔压力：用来设置绘图板的笔刷压力。只有安装了绘图板和相关驱动才有效，勾选此项套索的宽度变细。技巧：在边缘精确定义的图像上，您可以试用更大的宽度和更高的边对比度，然后大致地跟踪边缘。在边缘较柔和的图像上，尝试使用较小的宽度和较低的边对比度，然后更精确地跟踪边缘。结束当前的路径，双击鼠标：曲线闭合选区结束当前的路径，按ALT+双击鼠标：直线闭合选区选区时，直接按DEL或Backspace：删除刚画好的锚点和路径片段动态改变磁性套索的宽度[、]（增大或减小）在磁性套索工具下，ALT+单击：切换磁性套索和多边形套索工具三、魔棒工具W魔棒工具是基于图像中相邻像素的颜色近似程度来进行选择的，适合选取图像中颜色相近或有大色块单色区域的图像（以鼠标的落点颜色为基色）。容差：决定选择区域的精度，值越大越不精确（0-255）；连续的：只选择与鼠标落点处颜色相近相连的部分；用于所有图层：选择所有层上与鼠标落点处颜色相近的部分；否则只选当前层。四、橡皮擦工具E橡皮擦工具：用于擦除图像中不需要的颜色。主要包括3个工具，分述如下：1.普通橡皮擦工具：擦除普通层时露出透明色，擦除背景层时露出背景色。画笔：选择大小及形状；模式：用于设置擦除的方式，包括3种：画笔、铅笔、块。不透明度、流量、喷枪与画笔工具一致（略）。抹到历史记录：勾选后等同于历史记录画笔工具。2.背景橡皮擦工具：无论是在普通层还是在背景层，均可将图像擦除为透明色。注：擦除背景层时自动会将背景层转化为普通图层。画笔：设定橡皮擦的大小和形状；限制：限制擦除颜色的范围：不连续：可删除所有取样颜色，在选定的区域内多次重复擦除；临近：只有取样颜色相关联的区域才会被擦除；一次性；查找边缘：擦除包含取样颜色相关联区域并保留边缘的清晰与锐利；（可将容差设为1，取样改为一次进行尝试）；保护前景色：与前景色相同的图像区域不会被擦除；取样：决定被擦除颜色的方式：连续：进行多次取样；一次：只进行一次选样；背景色板：首先设置背景色，然后找与背景相近的颜色进行擦除；3.魔术橡皮擦工具：根据颜色的近似程来确定将图像擦成透明的程度，例子：擦除花的背景总结：根据形状建立选区：1.规则形状：如矩形、椭圆、单列/行选区。2.不规则形状：自由套索和多边形套索根据颜色建立选区：1.魔棒工具：选取相同色彩范围内的像素；2.魔术橡皮擦工具：删除背景，把对象分离出来；3.色彩范围：提供了更多的色彩选取控制。根据形状和颜色建立选区：2.磁性套索工具：适用于对象的边缘与背景对比强烈时使用。3.抽出：适用于分离复杂图像。4.背景橡皮擦工具：适用于分离图像，但能对指定颜色保护。五、移动工具V移动工具：移动选区内容、辅助线或层的内容；也可以将内容置入其它文档中。注意：不管当前使用什么工具，只要按Ctrl键切换到移动工具（钢笔、抓手、缩放和切片工具除外）。移动对象时，按Alt键可以复制对象，在其它工具（钢笔、抓手、缩放和切片工具除外）下，按CTRL+ALT键也可复制对象。六、绘制路径1、钢笔工具（P）：使用钢笔工具，在其选项栏中单击路径图标，开始绘制第一个锚点，然后单击直线以节点为中心拖动曲线按CTRL键临时切换到“直接选择工具”按ALT键临时切换到“转换点工具”按CTRL+单击以开放路径结束使用自由钢笔工具，在其选项栏中单击路径图标，然后ALT键临时切换到直线绘制ALT键+拖动以手绘路径曲线拟合：数字越大，形成的路径简单，锚点越少；数字越小，路径上的锚点越多，路径也就相应地越符合物体的边缘。宽度、边对比度及频率是磁性套索工具一致。注意：使用钢笔工具或自由钢笔工具，可以用于描图并创建选区。在路径调板中查看路径。例子：脸谱。2、形状工具（U）：分为矩形形状工具、圆角矩形形状工具、椭圆形状工具、多边形形状工具、直线工具和自定义形状工具。使用形状图层：是带图层矢量蒙版的填充图层；使用路径：创建新的工作路径，在路径调板中查看路径。填充像素：在当前的图层中创建像素形状，由前景色填充。注意：使用形状工具创建的路径为工作路径，可以在路径调板中查看。也可以将当前路径，使用“编辑-定义自定形状”，便于以后的使用。3、文字转