店铺装修的基础工具

1、Chapter 04 店铺装修的基础工具 美图秀秀和DWLOGO目录4.1 最易上手的商品图片修饰软件美图秀秀4.2 专业的网页制作工具DreamweaverLOGO4.1最易上手的商品图片修饰软件美图秀秀 1 认识美图秀秀认识美图秀秀美图秀秀是一款免费的图片处理软件，不用学习就会用，比Adobe Photoshop简单很多，能够实现图片特效、美容、拼图、场景、边框、饰品等功能，界面直观，操作简单，比同类软件更好用，其界面如下图所示。LOGO当在美图秀秀的标签中选择一种编辑方式时，会打开如右图所示的对话框，在其中单击“打开一张图片”按钮，即可在弹出的对话框中打开所需处理的图片，此外，还可以通过

2、“打开百度云网盘图片”和“打开近期编辑过的图片”功能对所需的图片进行选择。 在美图秀秀中进行编辑之前，还需要对一些常规的图片设置进行更改，为了提高软件功能运行的速度，当商品图片在美图秀秀中打开之后都会被进行一定程度的质量压缩，可能会导致我们编辑后的商品图片不能很清晰的显示在网店中。遇到这种情况，只需在软件右上角单击 按钮，在弹出的菜单中选择“设置”命令，即可打开“设置”对话框，在该对话框的“保存设置”和“打开设置”标签中即可对图片的压缩程度进行设置。4.1最易上手的商品图片修饰软件美图秀秀 LOGO4.1最易上手的商品图片修饰软件美图秀秀 2 超炫特效让宝贝照片一键变身超炫特效让宝贝照片一键变

3、身在美图秀秀中对商品照片进行编辑，如果想要拍摄的照片快速实现一些特殊的效果，可以使用该软件中的特效来对商品照片进行一键变身，如右图所示中可以看到该软件中的特效区域中显示了多种图片处理效果。在美图秀秀的一键变身操作非常的简单，将美图秀秀切换到“美化”标签中，只需在特效显示区域的标签中选择一种需要的特效，在其图像上单击，可以快速实现操作。LOGO4.1最易上手的商品图片修饰软件美图秀秀 3 为宝贝添加美轮美奂的智能边框为宝贝添加美轮美奂的智能边框在进行网店装修的过程中，有的店家为了让商品能够在同类商品中脱颖而出，会使出浑身的解数，其中为商品的橱窗照添加边框就是一个常用的装修方法。为整店的商品橱窗照

4、添加上统一的边框效果，不仅可以让顾客感受到一种统一的视觉，也让店铺的品质得到提升。美图秀秀中的“边框”标签中可以轻松为商品图片添加上各种类型的边框，如左图所示为“边框”标签中的编辑界面，在界面的左侧可以选择边框的类型，右侧则显示出了边框的各种预览效果。LOGO4.1最易上手的商品图片修饰软件美图秀秀 4 制作个性动感的制作个性动感的GIF图片图片 在美图秀秀中打开一张需要制作闪图的女鞋图片，切换到“更多功能”标签的“闪图”界面中，选择“动感闪图”来进行编辑，如下左图所示，在界面的右侧选择“特效”标签中的一种指定闪图效果，单击后在界面左侧的“动感闪图”标签中会显示出当前使用的闪图特效的每个帧的画

5、面效果，完成闪图的编辑后，单击“修改闪图大小”和“保存”按钮可以打开相应的对话框，在其中可以对选项进行设定，控制闪图的大小及保存的位置和名称，如下图所示。LOGO4.1最易上手的商品图片修饰软件美图秀秀 5 拼图功能让宝贝全方位展示拼图功能让宝贝全方位展示在进行网店装修的过程中，有时候为了让顾客直观的感受到商品的细节，会在进行网店装修的过程中，有时候为了让顾客直观的感受到商品的细节，会将商品的各个部位进行放大展示，并且将其拼合在一个画面中，这时拼图操将商品的各个部位进行放大展示，并且将其拼合在一个画面中，这时拼图操作就显得非常的必要了。作就显得非常的必要了。在美图秀秀中可以通过简单的操作实现多

6、张图片的拼接，如右图所示为美图在美图秀秀中可以通过简单的操作实现多张图片的拼接，如右图所示为美图秀秀中秀秀中“拼图拼图”标签中的界面效果，在其左侧显示出了标签中的界面效果，在其左侧显示出了“自由拼图自由拼图”、“模模板拼图板拼图”、“海报拼图海报拼图”和和“图片拼接图片拼接”四种拼图方式，用户可以根据喜好四种拼图方式，用户可以根据喜好和需要来进行选择。和需要来进行选择。LOGO4.1最易上手的商品图片修饰软件美图秀秀 6 为商品照片添加上水印为商品照片添加上水印在美图秀秀中有一个专门用于编辑文本的“文字”标签，如下图所示，该标签中可以为图片添加任意的文字，并能对文字的颜色、效果、大小等外观属性

7、进行设置，接下来就让我们一起来学习如何在美图秀秀中制作水印。LOGO4.1最易上手的商品图片修饰软件美图秀秀 7 使用美图秀秀批量处理商品照片使用美图秀秀批量处理商品照片 在美图秀秀的首页中单击“批量处理”按钮，可以通过该功能对网店装修中的多张照片进行批量处理，大大提高网店装修的效率。在单击“批量处理”按钮后，没有安装批量处理插件的会自动对该插件进行加载，成功安装后，单击“立即体验”按钮，即可进入到美图秀秀的批量处理模式中，如下图所示。LOGO4.2专业的网页制作工具Dreamweaver1 认识认识Dreamweaver工欲善其事，必先利其器，在学习的开始，让我们一起来了解工欲善其事，必先利

8、其器，在学习的开始，让我们一起来了解Dreamweaver CC的操作环的操作环境。在首次启动境。在首次启动Dreamweaver CC时会出现一个欢迎界面，在这个页面中包括时会出现一个欢迎界面，在这个页面中包括“打开最近打开最近项目项目”、“新建新建”和和“主要功能主要功能”这三个方便实用的项目，具体显示效果如右图所示。这三个方便实用的项目，具体显示效果如右图所示。新建或打开一个文档，进入新建或打开一个文档，进入Dreamweaver CC的标准工作界面，如下图所示，其中包括了的标准工作界面，如下图所示，其中包括了菜单栏、代码视图、设计视图和多个悬浮的面板。菜单栏、代码视图、设计视图和多个悬

9、浮的面板。LOGO4.2专业的网页制作工具Dreamweaver2 用表格功能制作商品尺寸简介用表格功能制作商品尺寸简介在编辑某些商品的详情页面的过程中，由于经营产品的特殊性，经常要在自家宝贝描述当中为宝贝的实际尺寸、材质、规格等进行介绍，以方便顾客对商品的信息有更加深入的了解。利用Dreamweaver中的表格可以快速制作出宝贝描述信息，接下来将通过具体的步骤来对其操作进行讲解，LOGO4.2专业的网页制作工具Dreamweaver3 为网页元素添加超链接为网页元素添加超链接在网店首页的装修的过程中，为了给顾客更多的信息，或者让顾客更方便的对某些区域的信息进行扩展了解，需要为特点的区域添加上

10、超链接。这里给大家介绍如何使用Dreamweaver给图片特定区域添加超链接，以本书中的案例图片为素材，给大家演示一下具体的操作步骤，LOGO4.2专业的网页制作工具Dreamweaver4 插入图像更改网页显示效果插入图像更改网页显示效果在Dreamweaver中还可以轻松的为设计的网店插入所需的图像，其操作也非常的简单，只需要使用“图像”功能即可轻松插入所需的图像到文件中，具体如下。新建一个html文件，打开“插入”面板，在“图像”下拉列表中选择“图像”选项，接着在“选择图像源文件”对话框中选中需要添加的照片，单击“确认”按钮将所需的照片添加到文件中，使用“拆分”模式可以看到插入的图像效果

11、。LOGO4.2专业的网页制作工具Dreamweaver4 插入图像更改网页显示效果插入图像更改网页显示效果此时插入的图像大小为原始大小，可以按住此时插入的图像大小为原始大小，可以按住Shift键的同时使用鼠标在图像直键的同时使用鼠标在图像直角位置单击并拖曳，调整图像的大小，或者直接在角位置单击并拖曳，调整图像的大小，或者直接在“属性属性”面板的面板的“宽度宽度”和和“高度高度”数值框中输入所需的像素值，如下图所示。数值框中输入所需的像素值，如下图所示。LOGO4.2专业的网页制作工具Dreamweaver4 插入图像更改网页显示效果插入图像更改网页显示效果单击“属性”面板中的“提交图像大小”

12、按钮，在弹出的对话框中直接单击“确定”按钮，即可在预览区域看到操作后图像中的锯齿消失，如上图所示。在Dreamweaver中可以设置鼠标经过图像的图像变化效果，鼠标经过图像实际上由两个图像组成，原始图像就是当首次载入页时显示的图像，鼠标经过的图像就是当鼠标指针移过主图像时显示的图像，它们共同组成“鼠标经过图像”的内容。这两张图片要大小相等，如果它们的尺寸不相等，Dreamweaver自动调整两个图像大小一致。单击“插入”面板“图像”下拉列表中的“鼠标经过图像”选项，在弹出的“出入鼠标经过图像”对话框中可以设置相关的选项，如下图所示。LOGO4.2专业的网页制作工具Dreamweaver5 文本的输入和编辑文本的输入和编辑文本是网店装修页面中最常见、运用最广泛的元素之一，是网页内