第二部分：装修2(ps等)【3】

第二部分：装修目录2.1网店装修的意义2.2网店装修攻略2.3商品图片拍摄技术2.4处理吸引顾客眼球的商品照片2.4.1商品图片美化在淘宝店铺中的作用2.4.2图片处理的基本工具——Photoshop2.4.3图片处理的其它工具——光影魔术手2.5使用HTML制作网店店铺2.6网店装修通用技巧2.7网店精装修2.4

处理吸引顾客眼球的商品照片商品图片美化在淘宝店铺中的目的是什么？2.4.1商品图片美化在淘宝店铺中的作用

增加我们的产品被潜在顾客发现的概率影响买家购买决策提高自己在同类商品卖家中的竞争力提升销量，引起供货商的重视，得到更好的服务以及更优惠的条件2.4.1商品图片美化在淘宝店铺中的作用合格的商品图片应该具备那些特征处理过的图片和没处理的图片在淘宝搜索页面上的对比

处理过的图片和没处理的图片在淘宝搜索页面上的对比处理过的图片和没处理的图片在淘宝搜索页面上的对比

我们用什么方法让产品变得清晰直观呢，吸引眼球呢？

处理前后产品图片的对比1抠图效应处理前后产品图片的对比2边框效应！处理前后产品图片的对比3细节效应处理前后产品图片的对比4美女效应

处理前后产品图片的对比5水印效应

2.4.2图片处理的基本工具

——PhotoshopAdobePhotoshop，简称“PS”，是由Adobe

Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。从功能上看，该软件可分为图像编辑、图像合成、校色调色及功能色效制作部分等。图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等；也可进行复制、去除斑点、修补、修饰图像的残损等。标题栏控制面板工具栏工作区Photoshop界面2.4.2图片处理的基本工具

——Photoshop2.4.2图片处理的基本工具

——PhotoshopPhotoshop的灵魂--图层图层窗口2.4.2图片处理的基本工具

——PhotoshopPhotoshop的灵魂--图层2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤打开图片正方形裁剪图象大小色差亮度调整抠图方法智能锐化水印制作图框制作储存2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤展示2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—打开图片2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—裁剪成正方形2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—裁剪成正方形保持正方型的裁剪方法将宽度高度设置一样或者按住Shift操作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—裁剪成正方形保持正方型的裁剪方法2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—调整图片大小调节图象明暗度及对比度

曲线工具色阶工具色彩平衡色相饱和度打开图片正方形裁剪图象大小色差亮度调整抠图方法智能锐化水印制作图框制作储存2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—色彩调节2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—色彩调节2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—色彩调节曲线工具色阶工具色彩平衡色相饱和度调节图象明暗度及对比度功能上色阶不如曲线来的灵活

打开图片正方形裁剪图象大小色差亮度调整抠图方法智能锐化水印制作图框制作储存2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—色彩调节2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—色彩调节

2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—色彩调节曲线工具色阶工具色彩平衡色相饱和度调整轻微色差，偏色打开图片正方形裁剪图象大小色差亮度调整抠图方法智能锐化水印制作图框制作储存2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—色彩调节PS图片处理步骤曲线工具色阶工具色彩平衡色相饱和度调整亮度，色彩度，严重色差打开图片正方形裁剪图象大小色差亮度调整抠图方法智能锐化水印制作图框制作储存2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—色彩调节2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—色彩调节魔棒工具多边形套索钢笔工具打开图片正方形裁剪图象大小色差亮度调整抠图方法智能锐化水印制作图框制作储存2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—色彩调节图片一图片二图片三魔棒工具多边形套索钢笔工具魔棒工具适合抠背景颜色单一的图，并且主体和背景色要有很大反差和对比打开图片正方形裁剪图象大小色差亮度调整抠图方法智能锐化水印制作图框制作储存2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法图片一2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法魔棒工具多边形套索钢笔工具

适合抠主体线条为直线的图片打开图片正方形裁剪图象大小色差亮度调整抠图方法智能锐化水印制作图框制作储存2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法图片二2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法1234562.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法魔棒工具多边形套索钢笔工具钢笔工具是最精确的抠图工具，使用时要配合多个键（shift,ctrl,alt）使用，掌握难度稍大。打开图片正方形裁剪图象大小色差亮度调整抠图方法智能锐化水印制作图框制作储存2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法图片三2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法CTRL：用处是可以将你描的那个点任意摆放，按住ctrl键再在节点上点鼠标左键，那么这个节点就可以随意移动了，(比如是你钩的那个路径和实图的路径相差太远那么，就用ctrl调动的再次调节)ALT：用处是在钩点的同时只要按住它,它会增加两个支点以便你钩完后方便的调结它的路径。SHIFT：和鼠标左键结合使用可以保持路径一直走直线。抠图之方法三2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法ALT+鼠标滚轮拉近图片处理细节2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法按住Shift多项选择2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法抠好图片后可以进行多种操作 1.清除杂色，制作纯色背景2.更换图片背景2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法删除背景杂色获得纯白背景2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法

按删除键>取消选区

2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法抠好图片后可以进行多种操作 1.清除杂色，制作纯色背景2.更换图片背景2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法更换图案背景1.打开准备好的背景2.选择移动工具2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法3.直接拖动选区图片到背景区2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤—抠图方法2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤6—智能锐化2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤6—智能锐化2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤6—智能锐化文字水印图案水印打开图片正方形裁剪图象大小色差亮度调整抠图方法智能锐化水印制作图框制作储存2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤7—水印制作第一种：文字型水印2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤7—水印制作第二种：图案形水印2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤7—水印制作文字水印图案水印文字工具，图层样式应用打开图片正方形裁剪图象大小色差亮度调整抠图方法智能锐化水印制作图框制作储存2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤7—水印制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤7—水印制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤7—水印制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤7—水印制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤7—水印制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤7—水印制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤7—水印制作文字水印图案水印移动工具，图层合并和图层透明度应用打开图片正方形裁剪图象大小色差亮度调整抠图方法智能锐化水印制作图框制作储存2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤7—水印制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤7—水印制作自由变换调整选区图片大小(按SHIFT保持长宽比)2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤7—水印制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤7—水印制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤7—水印制作按SHIFT选择要合并的图层

2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤7—水印制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤7—水印制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤7—水印制作将背景删除，然后另存为，以后每次都可以用了2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤7—水印制作单页图框多图组合打开图片正方形裁剪图象大小色差亮度调整抠图方法智能锐化水印制作图框制作储存2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤8—图框制作图框展示2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤8—图框制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤8—图框制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤8—图框制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤8—图框制作单页图框多图组合打开图片正方形裁剪图象大小色差亮度调整抠图方法智能锐化水印制作图框制作储存2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤8—图框制作制作多图组合2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤8—图框制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤8—图框制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤8—图框制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤8—图框制作按shift操作形成正方型路径2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤8—图框制作利用路径选择工具选择路径。

用键盘的箭头进行位置调整用ctrl+c（复制）ctrl+V（粘贴）路径2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤8—图框制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤8—图框制作删除路径选区2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤8—图框制作删除选区后请务必取消选择，进行下一步操作

取消选择2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤8—图框制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤8—图框制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤8—图框制作用自由变换调整图片大小角度2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤8—图框制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤8—图框制作2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤9—储存2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤9—储存2.4.2图片处理的基本工具

——PhotoshopPhotoshop图片处理步骤9—储存2.4.3图片处理的其它工具——光影魔术手是一个对数码照片画质进行改善及效果处理的工具软件。光影魔术手简单易用,不需要任何专业的图象处理技术,就可以制作出专业胶片摄影的色彩效果对于在淘宝开店的掌柜，光影魔术手给我们商品图片的美化提供了更实实在在的应用。

光影魔术手——图片大小的调整根据大众显示器分辨率的设置1。800×6002。1024×7683。更高分辨率依据淘宝网站对商品图片限制进行设置1。图片大小限制在120k内2。在1024×768的情况下只能显示940的宽度2.4.3图片处理的其它工具——光影魔术手

光影魔术手——图片大小的调整根据大众显示器分辨率的设置1。800×6002。1024×7683。更高分辨率依据淘宝网站对商品图片限制进行设置1。图片大小限制在120k内2。在1024×768的情况下只能显示940的宽度建议大家制作图片的时候宽度选择范围最好在500px--700px左右，这样的大小在以上各个分辨率下都是能完整的显示图片的，避免图片显示不全造成的成交失败！2.4.3图片处理的其它工具——光影魔术手

光影魔术手——图片大小的调整2.4.3图片处理的其它工具——光影魔术手

光影魔术手——图片大小的调整2.4.3图片处理的其它工具——光影魔术手

光影魔术手——图片大小的调整2.4.3图片处理的其它工具——光影魔术手

光影魔术手——图片大小的调整2.4.3图片处理的其它工具——光影魔术手

光影魔术手——图片大小的调整2.4.3图片处理的其它工具——光影魔术手

光影魔术手——图片大小的调整2.4.3图片处理的其它工具——光影魔术手

光影魔术手——图片大小的调整2.4.3图片处理的其它工具——光影魔术手

光影魔术手——图片亮度色彩等的调整

如果觉得补光按钮达到的亮度效果不太理想，可点击菜单栏“调整”“曲线”工具进行细调。曲线调整功能2.4.3图片处理的其它工具——光影魔术手

光影魔术手——图片亮度色彩等的调整

2.4.3图片处理的其它工具——光影魔术手

光影魔术手——图片亮度色彩等的调整

色阶调整功能2.4.3图片处理的其它工具——光影魔术手

光影魔术手——图片亮度色彩等的调整

2.4.3图片处理的其它工具——光影魔术手什么是白平衡？白平衡英文名称为WhiteBalance。物体颜色会因投射光线颜色产生变，在不同光线的场合下拍摄出的照片会有不同的色温。例如以钨丝灯(电灯泡)照明的环境拍出的照片可能偏黄，一般来说，CCD没有办法像人眼一样会自动修正光线的改变。(ＣＣＤ在摄像机里是一个极其重要的部件，它起到将光线转换成电信号的作用)。下面的图片就显示了在不同颜色光线下的不同图象。

光影魔术手——图片白平衡的调整

2.4.3图片处理的其它工具——光影魔术手遇到照片的颜色偏色怎么办？在正常光线下看起来是白颜色的东西在较暗的光线下看起来可能就不是白色，还有荧光灯下的“白”也是“非白”。对于这一切如果能调整白平衡，则在所得到的照片中就能正确地以"白"为基色来还原其他颜色。

光影魔术手——图片白平衡的调整

2.4.3图片处理的其它工具——光影魔术手调节白平衡后的照片

光影魔术手——图片白平衡的调整

2.4.3图片处理的其它工具——光影魔术手

光影魔术手——图片白平衡的调整

2.4.3图片处理的其它工具——光影魔术手

光影魔术手——图片白平衡的调整

2.4.3图片处理的其它工具——光影魔术手

光影魔术手——图片白平衡的调整

2.4.3图片处理的其它工具——光影魔术手

光影魔术手——锐化图片提高清晰度2.4.3图片处理的其它工具——光影魔术手

光影魔术手——锐化图片提高清晰度2.4.3图片处理的其它工具——光影魔术手

再比较下处理前后的照片2.4.3图片处理的其它工具——光影魔术手总结图片调整4个步骤1.图片大小的调整2.亮度色彩饱和度的调整3.白平衡的功能4.锐化提高精度2.4.3图片处理的其它工具——光影魔术手

光影魔术手——给图片加边框2.4.3图片处理的其它工具——光影魔术手

光影魔术手——里面自带的边框效果

2.4.3图片处理的其它工具——光影魔术手

光影魔术手——里面自带的边框效果

2.4.3图片处理的其它工具——光影魔术手

光影魔术手——里面自带的边框效果

2.4.3图片处理的其它工具——光影魔术手

光影魔术手——里面自带的边框效果

2.4.3图片处理的其它工具——光影魔术手

光影魔术手——给图片加边框

2.4.3图片处理的其它工具——光影魔术手

光影魔术手——图片加上中白边框的效果

2.4.3图片处理的其它工具——光影魔术手2.5

使用HTML制作网店店铺2.5.1HTML的基本概念一、

HTML基础代码介绍

每一个动物、每一个生物都有自己的语言，而计算机也不例外，同样有自己的语言，在计算机繁杂的编程语言中，最简单最容易理解的就属HTML语言，在淘宝店铺里所有的店铺装修无疑都是靠这样一种语言来完成的（当然同样也要靠图片设计工具），虽然现在有很多的辅助工具来帮助我们进行直观的设计，但学习HTML还是对店铺装修有很大帮助的，HTML为超文本连接，他是目前网络上应用最为广泛最为基础的一种描述性语言，目前进行对网页进行编辑的最好的工具为“Macromedia

Dreamweaver

8”，利用这款软件我们可以进行非常直观的将网页进行界面式设计，但有些时候在调试代码或者修改一小段代码的时候，我们则必须懂得这些代码的意思，下面我就来讲解一下HTML的一些基础。

2.5.1HTML的基本概念

例1、

<html>

<head>

<title>淘宝网</title>

</head>

<body>

<p>你好，我是淘宝网的忠实店家</p>

</body>

</html>

例子解析：

以上是一个完整的基础网页代码，所有的编写必须遵守以上规则，网页必须是以<html>开头以</html>结尾

；<head></head>之间是文本头信息，可以显示在网页的浏览器最顶端的标题栏里，例子中网页标题栏会显示”淘宝网”。

<body></body>是最主要的部分，绝大部分的编辑都要在这里面进行，是网页的主体。

<p></p>是文本标签，在网页中会显示“你好，我是淘宝网的忠实店家”

大部分编辑必须遵循<>开头</>结尾。

2.5.1HTML的基本概念二、HTML在淘宝中的应用

在淘宝的编辑器里，过滤了很多功能，如javascripts的脚本语言，这是因为怕有一些不法店主利用这个语言来编写病毒或进行网页跳转等等，但我们还是可以有很多功能可用，下面我逐一介绍主要功能。

2.5.1HTML的基本概念二、HTML在淘宝中的应用

1、表格

<table

width="200"

border="1"

cellpadding="0"

cellspacing="1">

<tr>

<td> </td>

<td> </td>

</tr>

</table>

例子样式如右：2.5.1HTML的基本概念二、HTML在淘宝中的应用

1、表格

<table></table>为表格标签，必须以此开头和结尾。属性：border=“1”表格边框宽度为1

cellpadding=“0”表格填充，一般我们都选0

cellspacing=“1”表格间距，一般我们也选0<tr></tr>为表格中的行标签；<td></td>为表格中的列标签，例子