《网店美工（第3版）》高职全套教学课件

工作领域1网店美工概述全套可编辑PPT课件网店美工概述Photoshop网店美工网店页面设计网店视觉营销综合技能实训目录任务1初识网店美工任务2网店配色任务3文字的应用思政园地一名网店美工初学者需要克服重重困难，努力钻研和学习，并不断实践，唯有日积月累才会让自己有所突破，才能具备品牌视觉、营销视觉、产品视觉等职业能力。另外，要想成为一名优秀的网店美工师，不仅要提高职业能力，还应该具备良好的道德文化修养。例如，应知晓有版权的图片要经过授权才能使用；应有敏锐的触觉，能正确分析设计作品和欣赏不同类别的设计作品；要有团队精神，善于沟通。任

务1初识网店美工任务1初识网店美工新生王强在淘宝网上开了一家网店，他很想在竞争激烈的同行中脱颖而出，可是他不懂网店美工，不会制作商品详情页，在页面策划、文案设计等方面很费心力，他的网店几乎无人问津，商品详情页也没有吸引力。要想摆脱上述问题的困扰，王强首先应该了解一些网店美工的基础知识，如确定网店美工的风格、色彩搭配等。任务1初识网店美工任务目标（1）理解网店美工的定义及重要性。（2）掌握确定适合自己网店美工风格的方法。（3）了解网店美工过程中需要注意的问题。职业素养目标培养大局观，树立从局部认知整体的意识，加强职业技能培训与职业素质培养。任务1初识网店美工1.1.1网店美工基础知识1.网店美工的概念网店美工主要是完成网店页面设计美化、网店促销海报制作、直播电商封面制作、把商品图片转换成商品描述中所需要的图片、设计电子宣传单等工作。判断一家网店优秀与否，首先要看网店的美工。没有专业、恰当的美工，哪怕网店中的商品质量再好，也不一定能销售出去；或者虽然商品的销量还可以，但是从长远来看对提升网店品牌形象无益。任务1初识网店美工图1-1所示为皮带的原始图片，如果不对其进行修饰和润色，就直接将图片放到网店页面中，可能会在很大程度上影响皮带的销量。任务1初识网店美工设计师先借助专业的图像处理软件对原始图片中的皮带的色彩进行还原，使其既美观又真实，如图1-2所示；任务1初识网店美工再将商品图像抠出并制作成商品主图，如图1-3所示。任务1初识网店美工从原始图片处理开始，通过素材之间的组合，结合当前活动主题，最终制作成网店页面的过程就是网店美工。计算机端网店首页设计示例如图1-4所示。任务1初识网店美工网店美工是企业形象的化身，展现着企业文化和企业精神，是企业在互联网中的一张名片。所以，网店美工要符合企业的经营理念，无论是色调、风格，还是结构布局，都要与企业所属的行业相吻合。只有这样，顾客在浏览网店时才会感受到企业的实力和专业，才能有效提升企业的形象和知名度。爱美之心人皆有之，好的网店美工可以给顾客带来视觉上的愉悦和心灵上的震撼，让人过目不忘、流连忘返，有助于提高成交转化率。无论是网店首页还是商品详情页的每一处细节，都需要设计师的精心设计。手机端网店首页设计示例如图1-5所示。任务1初识网店美工2.网店美工的重要性网店美工要注意整体搭配，网店的美化如同实体店的装修一样，要让顾客从视觉上和心理上都能感受到店主对网店的用心，并且能够最大限度地提升网店的形象，以利于网店品牌的形成，从而提高网店的浏览量。影响网店成交的因素有很多，其中决定性因素有质量保证、首页美工、商品主图、详情页描述、可信度描述、销量、服务保障、顾客评价、客服等。而这些决定性因素中的大部分是需要以网店美工为基础的。任务1初识网店美工网店的商品固然非常重要，但是绝对不能忽视对商品的美化。如图1-6所示，服饰没有经过后期的色调调整，显得毫无生气，很难让顾客产生购买的兴趣；任务1初识网店美工而经过后期的色调调整，如图1-7所示，展现出服饰的明亮、鲜艳和品质感。任务1初识网店美工3.网店美工与成交转化率的关系网店的“高大上”除了需要商品极具价值之外，还应靠美工，才能使得顾客的浏览时间更长，增加出单率。网店美工的目的是引来更多的流量和提高成交转化率。因此，要及时到系统后台（如“千牛”）查看数据的波动，如图1-8所示。任务1初识网店美工网店美工花里胡哨，反而适得其反。做好网店美工，可以为网店带来很多好处，如引入流量，提升销量，为顾客提供方便，使其能快速找到需求的产品；还能够提高品牌的认知度，让顾客对店内情况有一个清晰的了解，最终提升网店的成交转化率。大多数设计师会依据品牌的美感进行网店美工。然而，这种网店其实是企业用来展示品牌的，真正要实现销售的转化是很难的。这是因为顾客网购的目的很明确，之所以进店，一定是对产品感兴趣，所以在进行网店美工时切记不可喧宾夺主，不要花过多的时间在美工上。任务1初识网店美工4.网店美工风格的确定网店美工的风格五花八门，如何吸引顾客的眼球，是网店店主非常关心的问题。网店美工首先要确定网店的整体风格，卖什么产品就用什么风格，不然会给人一种不伦不类的感觉。另外，网店的各个页面、元素最好也保持相同的风格，使网店有整体感。下面以某品牌手机端网店首页美工（见图1-9）为例介绍确定网店美工风格的方法。任务1初识网店美工（1）网店美工风格要与主营产品相符。针对不同的消费群体应有不同的主题模板，一般来说插画、时尚、可爱、桃心、花边等风格适用于女装网店。而黑白搭配、有金属质感的设计风格更适用于男装网店。毋庸置疑，童装网店适合采用卡通风格。（2）合理使用色彩。除了风格，色彩的选用也很重要。网店中选用的色彩不但可以提高顾客的购买欲，也可以提高商品的水准。任务1初识网店美工（3）风格要统一。网店的整体风格要一致。从店标的设计到主页的风格再到商品页面，应采用同一色系，最好有同样的设计元素，使网店有整体感。在选择分类栏、网店公告、音乐、计数器等设计元素时要有整体的考虑。任务1初识网店美工（4）增加背景音乐。是否增加背景音乐是一个很有争议的问题。有的顾客会因为喜欢背景音乐而频繁光顾网店（或查看商品），有的顾客则因不喜欢网店的背景音乐而选择不再光顾。另外，如果音乐文件过大，会使页面打开速度变慢，所以使用的音乐文件最好不要太大，一般来说，MIDI格式的音乐比较合适。任务1初识网店美工（5）主题突出，切忌花里胡哨。网店美工做得好，确实能更多地吸引顾客的眼球。但要清楚一点，网店的装饰不能抢了商品的“风头”，毕竟是为了卖商品而不是秀网店，弄得太多太乱反而影响商品展示的效果。应避免使用太多的图片。店主特别是新手店主可能会觉得图片越多网店越好看，其实这是一个误区。图片太多、质量太高会影响页面打开的速度，这也是网店与实体店铺的不同之处，除了注重“装修”效果之外，还要考虑到页面打开速度的问题。任务1初识网店美工5.网店美工过程中需要注意的问题（1）网店定位。网店定位中的风格定位尤为重要，风格定位要结合网店产品所对应的目标顾客，基本分为清爽型、商业型、耍酷型、可爱型四种。（2）网店名称。建议确定网店名称时要突出网店的个性，突出特色品牌和商品，最好与网店的商品有关，让人一看就懂，并且了解网店经营的范围。（3）商品分类。虽然商品类目以图片分类更能体现出网店的个性，但是，作为新手店主，更多的是需要浏览量和人气。建议不用图片进行分类，而是用关键词进行分类。任务1初识网店美工商品描述模板4使用的颜色5背景音乐6建议商品描述模版少用图片，多用代码；不要过于花哨，要突出对商品的描述。网店的颜色不要太丰富，要统一，要有一个固定的配色方案。为了让顾客选购商品时心情舒畅，打开网页的速度更快，建议不要增加背景音乐。任务1初识网店美工1.1.2合理布局，让产品更抢眼众所周知，网店的首页就相当于实体店的门面，其影响不亚于产品的详情描述。网店首页美工的质量会直接影响顾客的购物体验和网店的成交转化率。1.分析首页的布局任务1初识网店美工为了对一家网店的个人计算机（personalcomputer，PC）端首页进行规划布局，此处以旺铺专业版为例，在其自定义模块上进行美工。一家正常营业的网店首页主要有店招、导航条、全屏海报、广告促销区、产品分类或优惠券展示、客服旺旺、产品自定义主图展示、网店页尾、背景等部分组成，如图1-10所示。任务1初识网店美工PC端网店首页布局示例如图1-11、图1-12所示。任务1初识网店美工如今，网店手机端的使用规模已经远远超过PC端。作为设计师，不仅要做好网店PC端的设计，对网店手机端的设计也要重视起来。网店手机端因为屏幕尺寸小，在设计首页时可以按照全屏海报、广告促销区、产品分类或优惠券展示的顺序进行设计。任务1初识网店美工网店首页及商品详情页应尽可能将活动和商品的信息最大限度地传达给顾客。一方面，要找到网店首页与商品协调的色调，给人一种良好的印象；另一方面，整个网店首页的排版很重要，如果排版不好，有可能会影响整个页面布局。所以，网店首页设计有时越简单反而作用越大。任务1初识网店美工图1-13所示为一家化妆品类目的手机端网店的首页。任务1初识网店美工（1）图像。网店美工布局中，图像主要是指商品的图片、模特，以及修饰画面的形状、符号和插画等。这些图像包含一定的信息，对商品进行表现或者辅助进行商品的表现，以及为画面营造出一种特定的氛围。任务1初识网店美工（2）背景。设置海报或者促销活动的背景是为了更有效地营造出与主题概念相统一的页面氛围，可以使用图案、纯色和图像等进行平铺。PC端美工时，由于平台设置的尺寸，网店的两侧背景占据了大部分空间，如果不想使两侧的背景太单调，可以将主要的内容设计得多种多样，如将网店的背景图片、网店手机二维码或网店一些重要的折扣信息加入网店背景中。任务1初识网店美工文字用于传递商品信息，字体的设计风格应保持与商品的风格一致，字体常常作为一种装饰元素被置于画面中，达到平衡布局组成元素的效果。设计师应建立常用字体库。（3）文字。文字设置应遵循简单的原则，在布局过程中主要对商品的信息进行解释说明，精简的文字能更好地传达主旨。文字是布局元素中最重要的组成部分之一。任务1初识网店美工（4）留白。留白是在布局时要给整体的画面留有一定的空间，使人的视觉有回旋的余地和想象的空间。留白在画面上的作用如同标点符号在文章中的作用一样，能辅助作者表达感情，给人以思考和想象的空间，并留下进一步判断的余地，富有韵味和情趣。任务1初识网店美工2.常见的商品详情页布局商品详情页是提高成交转化率的入口，可激发顾客的购买欲望，树立顾客对网店的信任感，打消顾客的消费疑虑，促使顾客下单。虽然优化商品详情页对成交转化率有提升的作用，但是起决定性作用的还是商品自身。很多新手店主以为制作商品详情页就是简单地摆放几张商品图，然后加入一些参数表，最后放置几个5星好评即可。其实不然，商品详情页将直接影响商品的销量。任务1初识网店美工基本的、较为常用的商品详情页布局如下。（1）中间对齐模式的页面布局。中间对齐模式的页面布局（见图1-14）是应用得最为广泛的一种商品详情页布局方式，页面结构清晰、主次分明，是初学者最容易上手的布局方法，贴近顾客的阅读习惯，同时能够集中顾客的视线。其缺点是规矩、呆板，如果不注意细节的色彩，很容易使人感到乏味。任务1初识网店美工（2）Z形模式的页面布局。Z形模式的页面布局使顾客的视线沿曲线前进，视线形成Z形路径，如图1-15所示。Z形模式的页面布局具有更佳的叙事效果，层次清晰，路径明确，很受设计师的欢迎，但是太生动的背景会分散用户的注意力。因此，在Z形模式的页面布局中，背景应力求简洁。任务1初识网店美工（3）左对齐模式的页面布局。左对齐模式的页面布局中，用户的视线首先从左至右移动，设计师要善于抓住阅读者的兴趣，每行只传达一个要点（以图片显示），再将要点以文字分散论述。左对齐模式的页面布局适用于表现有顺序的内容，如商品的使用说明（见图1-16）、商品的制作过程等。任务1初识网店美工（4）对称型的页面布局。对称是一种美，生活中有许多事物都是对称的。但过度的对称就会给人一种呆板、死气沉沉的感觉，因此要适当地打破对称，制造变化。在进行页面布局时，即使两边的组成元素不是按照完全相同的尺寸和排列方式布置的，只要两边的空间宽度和重量感相同，就可以体现出对称的布局效果。如果页面左右两部分搭配协调，网页的视觉效果就会非常好，很有冲击力，而且有主有次、重点突出，如图1-17、图1-18所示。任务1初识网店美工图1-18，对称型的页面布局2。任务1初识网店美工（5）棋盘式的页面布局。典型的棋盘式页面布局与围棋棋盘一样，是四四方方的布局，把很多商品图片一次性地呈现给顾客，如图1-19、图1-20所示。任务1初识网店美工这种布局在设计关联营销时最常用，有时也适用于展示商品的细节部分。顾客可以将众多的商品图片集中起来进行比较，在视觉上具有统一、协调的效果。任务1初识网店美工（6）口字形模式的页面布局。这种布局类似于一个方框，就是页面左边和右边一般是小图，中间是放大后的小图，即将鼠标指针移动到某张小图上，中间就呈现该小图放大后的图片，如图1-21所示。任务1初识网店美工这种布局的优点是充分利用版面，信息量大；缺点是页面拥挤，不够灵活。拓展视频：口字型案例任务1初识网店美工因此，要想对商品详情页进行合理、有效的布局，就需要确定商品的特点和意图表现的氛围，并结合上述的页面布局方式进行设计，才能带给顾客视觉上的美观、大方、方便、舒适，最终提高销量。总之，商品详情页在展示商品的过程中只能使用文字和图片。排列、布置好文字和图片，是营造良好的顾客体验、把浏览者转化为顾客的重要前提。由于商品的性质不同，需要的美工风格、内容也就不同。任务1初识网店美工任务1初识网店美工任务评价具体包括教师评价、学生互评、学生自评、小组评价。其中，教师评价占比60%，学生互评占比20%，学生自评、小组评价各占比10%。任务1初识网店美工任务1初识网店美工任

务2网

店

配

色任务2网

店

配

色对于新手店主李芳来说，网店配色是一个非常令人头痛的问题，不是想要的色彩与店面的风格不匹配，就是使用的色彩太暗沉。其实，网店的配色主要应与自己所出售的产品相匹配，要把顾客的体验放在第一位。李芳首先要掌握色彩的一些基础知识，然后才能设计出令人满意的配色方案。任务2网

店

配

色任务目标（1）理解色彩的基本种类及属性。（2）学会色彩的搭配。（3）学会为不同风格的产品进行配色的方法。职业素养目标树立科学健康的审美观、积极向上的审美情趣，在学习和实践中不断提高艺术修养。任务2网

店

配

色1.2.1色彩基础知识1.色彩的基本种类常用的计算机显示器等器材所显示的色彩就是色光的色彩，而RGB就是色光的三原色。其中，R表示红色，G表示绿色，B表示蓝色。色彩可分为无彩色和有彩色两大类。无彩色是指黑色、白色和深浅不一的灰色，而其他所有色彩均属于有彩色。任务2网

店

配

色2.色彩的属性要理解和运用色彩，必须掌握色彩归纳、整理的原则和方法。而其中最重要的就是掌握色彩的属性。色彩的属性可以用色相、明度和饱和度表示。（1）色相。色相即各类色彩的相貌称谓，是色彩的首要特征，是区别各种不同色彩的最准确的标准。事实上，任何黑色、白色、灰色以外的色彩都有色相的属性，可通过色相呈现出色彩本质的面貌。任务2网

店

配

色如图1-22所示，最初的基本色相为红色、橙色、黄色、绿色、蓝色、紫色，从而得到六色相环；在各色中间插入一两种中间色，其头尾色相按光谱顺序为红色、红橙色、橙色、黄橙色、黄色、黄绿色、绿色、蓝绿色、蓝色、蓝紫色、紫色、红紫色，从而得到十二色相环；若在各主要色相间再取中间色，可以得到二十四色相环；等等。从光学意义上来看，即便是同一类色彩，也能分为几种色相，如绿色可以分为深绿色、浅绿色、蓝绿色等。任务2网

店

配

色在色相环的圆圈中，各色相按一定的角度排列，则十二色相环每一色相相距30°，二十四色相环每一色相相距15°。任务2网

店

配

色如图1-23、图1-24所示，利用Photoshop中调整色相的相关命令，可使绿色的树叶变成红色。任务2网

店

配

色图1-24，树叶色相调整后。拓展阅读：色彩的属性之间的关系色彩的属性之间的关系色彩的三个基本属性——色相、明度和饱和度（纯度），之间存在着密切的关系。它们的相互作用会决定人们看到的颜色的外观和感觉。以下是对它们之间关系的详细分析：1.色相与饱和度的关系色相和饱和度共同决定了颜色的基本外观。色相指的是颜色的种类，而饱和度则指颜色的纯度或强度。饱和度越高，颜色越鲜艳、纯正，视觉效果越强烈。例如，纯正的红色饱和度很高，给人一种热情和活力的感觉。饱和度越低，颜色越灰暗、不纯正，视觉效果越柔和。例如，浅粉色是红色中加入了白色成分，饱和度降低，显得更加柔和、温馨。2.色相与明度的关系色相和明度共同决定了颜色的亮度。色相决定了颜色的基本类型，而明度则决定了颜色的明暗程度。明度越高，颜色越明亮、轻盈。例如，黄色的明度较高，因此给人一种轻快、愉悦的感觉。明度越低，颜色越暗淡、沉重。例如，深蓝色是蓝色中加入了黑色成分，明度降低，显得更加深沉、庄重。拓展阅读：色彩的属性之间的关系3.明度与饱和度的关系明度和饱和度共同决定了颜色的深浅程度。明度反映了颜色的亮暗程度，而饱和度则反映了颜色的纯度或强度。当饱和度相同的时候，明度越高，颜色越浅，视觉效果越柔和。例如，浅绿色是绿色中加入了白色成分，明度提高，饱和度不变，颜色显得更加清新、自然。明度越低，颜色越深，视觉效果越强烈。例如，深红色是红色中加入了黑色成分，明度降低，饱和度不变，颜色显得更加浓郁、有力。4.三者之间的综合关系色相、明度和饱和度三个要素之间的相互作用十分复杂，不同的组合可以创造出不同的色彩效果。在艺术创作、设计等领域中，设计师可以通过调整这三个要素的比例和关系，来表达不同的情感、氛围和主题。例如，暖色调（如红色、橙色）与高明度、高饱和度的组合可以营造出热情、活力四溢的氛围；而冷色调（如蓝色、绿色）与低明度、低饱和度的组合则可以营造出宁静、深沉的氛围。综上所述，色彩的三属性之间存在着密切的关系，它们共同决定了颜色的外观和感觉。在理解和运用色彩时，需要综合考虑这三个要素的影响和作用。任务2网

店

配

色（2）明度。明度是指色彩的亮度，即色彩有深浅、明暗的变化，所有的色彩都有一定的亮度。其中，暗色称为低明度色，亮色称为高明度色。例如，深黄色、中黄色、淡黄色、柠檬黄色等黄色系在明度上就不一样，紫红色、深红色、玫瑰红色、大红色、朱红色、橘红色等红色系在明度上也不尽相同。明度变化如图1-25所示。任务2网

店

配

色有彩色的明度差别包括两个方面：一是指在某一色相中混入黑色或白色后产生的深浅变化，二是指有彩色不同色相间存在的明度差别。例如，在未调配过的原色中，黄色的明度最高，黄色比橙色亮，橙色比红色亮，红色比紫色亮，紫色比黑色亮。任务2网

店

配

色如图1-26和图1-27所示，利用Photoshop中调整明度的相关命令，可使树叶的色彩变得更深。任务2网

店

配

色图1-27，树叶明度调整后。任务2网

店

配

色（3）饱和度。饱和度也称为纯度、彩度或鲜艳度，是指色彩的纯净程度，即对色相感觉明确或含糊、鲜艳或混浊的程度。以红色为例，有鲜艳无杂质的纯红色，也有较淡薄的粉红色。它们的色相虽相同，但饱和度不同。色彩的饱和度越高，就越纯、越鲜艳；色彩的饱和度越低，就越涩、越混浊。任务2网

店

配

色如图1-28、图1-29所示，利用Photoshop中调整饱和度的相关命令，可使化妆品包装由暗淡无光变得鲜艳夺目。任务2网

店

配

色无彩色没有色相、饱和度的特征，只有明度的特征。如图1-30至图1-32所示，调整色相和饱和度后图片不会有任何变化，只有调整明度后图片才会有变化。任务2网

店

配

色图1-31，无彩色调整饱和度前后比较。任务2网

店

配

色图1-32，无彩色调整明度前后比较。任务2网

店

配

色3.色彩的心理感觉当人们看到色彩时，会由于受到色彩的视觉刺激而在思维方面产生对生活经验和环境事物的联想，这就是色彩的心理感觉。（1）冷暖感。色彩的冷暖感称为色性。例如，红色、黄色、橙色等给人的视觉刺激较强，使人联想到太阳、火光，感到温暖，所以称为暖色；青色、蓝色使人联想到天空、河流、阴天，感到寒冷，所以称为冷色。（2）兴奋感与沉静感。凡明度高、纯度高又属偏红色、橙色的暖色系，均使人有兴奋感；凡明度低、纯度低又属偏蓝色、青色的冷色系，均使人有沉静感。任务2网

店

配

色03膨胀感与收缩感。同一面积、同一背景的物体，色彩不同，给人带来的视觉效果也不同。凡色彩明度高的物体，看起来会大一些，给人以膨胀感；凡明度低的物体，看起来会小一些，给人以收缩感。前进感与后退感。暖色和明色给人以前进感，冷色和暗色给人以后退感。轻重感。高明度的色彩给人以轻感，低明度的色彩给人以重感。0405任务2网

店

配

色4.色彩的意义（1）红色。红色是最强有力的色彩，

能引起肌肉的兴奋和冲动。（3）黄色。黄色的亮度最高，尤其灿烂、辉煌，象征着智慧之光，象征着权力、骄傲，经不起白色的冲淡。（2）橙色。橙色较温和，是一种很活泼、辉煌的色彩，给人一种富足、快乐的感觉，稍加黑则显稳重。（4）绿色。绿色具有中性的特点。绿色是和平色，偏向自然美，代表宁静、生机勃勃，是宽容的色彩。任务2网

店

配

色（5）蓝色。蓝色代表永恒、博大，使人有遥远感。（6）紫色。大面积紫色会使人有恐惧感，紫红色尤其明显。（7）黑色与白色。黑色与白色既对立又有共性，能够用来表达富有哲理性的事物。（8）灰色。灰色是色彩中最为被动的色彩，受有彩色的影响极大，靠邻近的色彩获得“生命”，近冷则暖，近暖则冷。任务2网

店

配

色5.色彩的搭配所有的色彩可排成一环形，这种色相的环状配列称为色相环。利用色相环进行配色时，可以了解两种色彩间有多大的间隔，从而搭配出邻近色、间隔色、对比色等配色方案。色彩像音乐一样，是一种感觉。音乐需要依赖音阶保持秩序，而形成一个体系。同理，色彩的三种属性如同音乐中的音阶一般，可以用于维持繁多色彩之间的秩序，形成一个容易理解又方便使用的色彩体系。拓展阅读：色彩的搭配技巧色彩搭配技巧色彩的搭配技巧是艺术创作、时尚设计、家居装饰等领域中的重要技能。以下是一些实用的色彩搭配技巧：1.基础配色法（1）采用基础色彩组合：如黑、白、灰等无色系，它们可以与任意彩色搭配，展现出经典耐搭的美感。这种搭配方式既简约又高级，适合各种场合和人群。（2）临近色搭配：选择色环上相邻的颜色进行搭配，如黄绿、绿、蓝绿等。这种搭配方式强调颜色的顺延，使整体看起来既简约又具深度，能展现出不凡的品味。2.撞色搭配法（1）互补色搭配：选择色环上相对的颜色进行搭配，如红与绿、蓝与橙等。这种搭配方式能产生强烈的视觉冲击效果，吸引目光，同时显白且显高级。但需要注意明度和饱和度的调和，以避免过于突兀。（2）对比色搭配：通过明度、纯度或色相的对比来突出设计的重点。例如，在一个以暗色调为主的画面中，加入少量明亮的色彩作为点缀，可以营造出鲜明的层次感。3.同色系搭配法深浅不一的同色调搭配：选择同一色系但深浅不一的颜色进行组合，如浅蓝与深蓝、浅灰与深灰等。这种搭配方式能确保整体搭配和谐统一，展现出清新且充满活力的风格。拓展阅读：色彩的搭配技巧4.改变色彩纯度和明度（1）纯度中和：对于过于鲜艳或突兀的颜色，可以通过加入其他颜色来中和其纯度，使其达到和谐统一的效果。例如，红配绿时，可以通过调整两种颜色的饱和度来中和突兀感。（2）明度对比：利用明度的对比来增强画面的立体感和层次感。例如，在一个明亮的背景上放置暗色的物体，可以突出物体的轮廓和形状。5.运用渐变色渐变色是一种由一种颜色逐渐过渡到另一种颜色的色彩搭配方式。它可以起到引导视线的作用，让画面更具视觉吸引力。在时尚设计、网页设计等领域中，渐变色被广泛应用。6.增加中性色中性色（如黑、白、灰）在色彩搭配中起到调和和平衡的作用。它们可以与任意彩色搭配，使整体看起来更加和谐统一。同时，中性色还能增加画面的稳重感和高级感。7.注意色彩面积比例在色彩搭配中，不同颜色所占的面积比例也会影响整体效果。一般来说，主色调应占据较大的面积比例，而辅助色和点缀色则应占据较小的面积比例。这样可以确保整体搭配既有重点又不失和谐。综上所述，色彩的搭配技巧多种多样，需要根据具体场合、目的和个人喜好进行选择和应用。掌握这些技巧可以帮助我们更好地运用色彩来传达信息和表达情感。任务2网

店

配

色众所周知，不同的色彩会给人不同的视觉感受。网店美工在配色时是有一定的技巧和规则的，只有掌握了这些技巧和规则，才能使网店的配色既让人看着舒服，又能突出想要表达的内容。（1）选择主色调。首先选出一种色彩作为页面的主色调，然后调整其透明度或饱和度，即将色彩加深或减淡，以产生新的色彩，使页面看起来色彩统一，有层次感。如图1-33所示，选择蓝色作为主色调，在页面中配出深浅不一的蓝色，这种配色方法在许多设计中都会用到。任务2网

店

配

色对于网店的主色调，既可以根据网店的目标顾客群确定，也可以根据网店的商品特点确定。例如，麦当劳官网的主色调是红色，辅助色是黄色，这种配色正好符合食物的特征，会让人联想到麦当劳的食品。网店美工任务2网

店

配

色如图1-34所示，Photoshop的拾色器中，H表示色相，S表示饱和度，B表示亮度。其中，色相就像每一张色卡的“页码”，从0°到360°

；饱和度就是色卡横向的色彩变化趋势，越往左，就与其间隔180°的色彩（补色）混合而变得越淡。任务2网

店

配

色配出同一种色彩的方法是在保证色相和饱和度不变的前提下调整亮度。如图1-35所示，四个色块的色调、饱和度是一样的，只是亮度不同。任务2网

店

配

色如图1-36（a）所示，在两个色块中，任意挑选两种及两种以上的色彩作为渐变色都是没有问题的。这种渐变色填充看起来立体感和质感会比较强。值得注意的是，渐变一般不用两个色系的色彩，如红色到蓝色、黄色到蓝色等，如图1-36（b）所示。任务2网

店

配

色（2）使用对比色。在白纸上写白色字是看不到的；但是如果写红色字，就可以清楚地看到。在这里，白色和红色就是对比色。同理，网店美工时，如果在蓝色底上输入白色字，或在暗红色底上输入黑色字，都会让人难以分辨，因为这些色彩都不是对比色，对比效果不明显，如图1-37所示。任务2网

店

配

色网店中如果不运用对比色，就会看起来很单调，而且没有重点。但如果设计师在选择对比色时只凭感觉，可能会使设计出的对比色不够清晰或者太刺眼，色调不统一，如图1-38所示。任务2网

店

配

色而对比色突出可使整体协调，如图1-39所示。任务2网

店

配

色可以利用Photoshop寻找某种底色的对比色。如图1-40所示，左上角的对比色与背景色只是亮度不同，其余三个图形对比色的亮度值不变，只是对色相和饱和度进行了调节。从这四个图形的对比中可以看出，大多数情况下，对比色与背景色的色相、饱和度统一的搭配看起来使色彩更稳重，色调更统一，而且层次分明。任务2网

店

配

色（3）同一色系配色。简单地说，同一色系就是使人有同一种感觉的一系列色彩，如浅粉色、浅蓝色、浅黄色或者暗红色、暗黄色等。在实际应用中，同一色系的配色要领是在保证亮度和饱和度不变的前提下任意调节色相，如图1-41所示。任务2网

店

配

色6.配色的禁忌（2）背景和前文的对比要尽量大，避免使用花纹繁复的图案作为背景，以便突出主要文字内容。（1）不要使用过多种类的色彩，尽量控制在三种以内。任务2网

店

配

色1.2.2获得令人满意的配色方案1.配色方案的设计方式设计配色方案主要有以下两种方式。（1）通过色彩的色相、明度、纯度的对比控制视觉刺激，达到配色的效果。如图1-42所示，黄色和色就是邻近色的搭配。任务2网

店

配

色如图1-43所示，背景色为产品色彩的明度和纯度变化，字体的亮色与背景的暗色形成对比。任务2网

店

配

色（2）通过心理层面的感观传达间接性地改变色彩，从而达到配色的效果。例如，冬天会使人想到蓝色，夏天会使人想到红色，春天会使人想到绿色，等等。但是，在设计中不建议对夏天使用红色，对冬天使用蓝色，而是与之相反，对夏天使用蓝色，给人以清凉的感觉；冬天本来就已经很冷，再采用冷色的设计，只会让人感到心里冷到极点，这时就应该传递温暖的感觉。任务2网

店

配

色如图1-44、图1-45所示，从标题的配色中能感觉到清爽，其符合夏天的感觉，会使人想到夏日、蓝天、沙滩、大海、冰块等。任务2网

店

配

色图1-45，夏天主题的配色2。任务2网

店

配

色2.色彩的基本搭配方法对于网店美工师而言，学习配色必须了解配色比例和色彩的关系，这样才能设计出优秀的作品。日本的设计师提出过一个配色黄金比例，即70∶25∶5，如图1-46所示。其中，70%为大面积使用的主色，25%为辅助色，5%为点缀色。一般情况下，建议画面中使用的色彩不超过3种。这里的3种是指3种色相，如深蓝色和天蓝色其实是一种色相。任务2网

店

配

色一般来说，色彩用得越少越好，色彩越少画面就越简洁，作品就会显得越成熟。色彩越少，就越容易控制画面，除非有特殊情况，如一些节日类的海报等设计要求画面有一种热闹、充满活力的氛围，可使用多种色彩，使画面显得很活跃，但是色彩越多就越要严格按照配色比例进行色彩的分配，否则会使得画面显示非常混乱，难以控制。任务2网

店

配

色3.以网店首页美工为例讲解配色方案一家网店的成功包含多方面的因素，其中网店美工中的色彩应用是比较重要的一个因素。此处以网店首页美工为例讲解配色方案。过于花哨的页面会让访客心生混乱之感，所以网店的整体色彩一定要给人统一协调的感觉。当然，统一的外观并不是说只能用一种色彩，而是指主色调（在页面中占据的面积最大具有主导作用的色彩）只能有一种，在此基础上搭配一些其他色彩。（1）统一的外观。任务2网

店

配

色如图1-47所示，主色调是绿色，以红色或白色的文字点缀其间，使得整个页面既统一又不古板。统一的外观不仅仅指某一个页面，而是对整个网店的所有页面都适用。如果不同页面间的风格差异太大，当顾客从一个页面进入另一个页面时，很容易产生进入不同网店的错觉。当然，除了色彩的统一，其他元素（如店招、导航菜单等）也要统一。任务2网

店

配

色（2）色彩的搭配。色彩总的应用原则应该是总体协调、局部对比，也就是说，页面的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。色彩搭配的常用方法如下。①单一色彩页面。选择单一色彩并不表示毫无变化，可以通过调整透明度或者饱和度，使单一色彩深浅有别。如图1-48所示，主色调是蓝色，对店招、商品修饰图及部分文字采用了蓝紫色、浅蓝色、深蓝色等，使得整个页面看起来色彩统一、富有层次感。任务2网

店

配

色②对比色页面。先选定一种色彩，然后选择其对比色（对比色就是第二种色彩）。一般来说，色彩的对比越强烈，看起来就越有诱惑力，能够起到集中视线的作用。如图1-49所示，采用了橙色和蓝色之间的对比，这属于较为强烈的色相对比，令人感受到一种极强烈的色彩冲突，从而产生深刻的印象。如何才能找到对比最强烈的色彩?可用色相环辅助完成。在色相环中，间隔180°的两种色彩的对比是最强烈的。在这一角度范围内，间隔角度越大的两种色彩的对比越强烈，反之越弱。任务2网

店

配

色③类似色页面。类似色虽不是同一种色彩，但是非常接近，在色相环中是相邻的两种色彩。类似色由于色相对比不强而给人以平静、调和的感觉。如图1-50所示，使用了蓝色和紫色的类似色彩搭配，这两种色彩都属于低明度色，因为在色相环属于类似色，所以在搭配时显得较为自然。这种色彩搭配方案在时尚领域较为常见，多面向女性受众和一些要求色彩较为时尚的场合。总之，在配色过程中，无论采用几种色彩的组合，首先要考虑以何种色彩作为主色调，如果各种色彩的面积平均分配，色彩之间互相排斥，就会使页面显得凌乱。任务2网

店

配

色（3）使用色彩的注意事项。①合理地使用色彩，可使页面变得鲜艳、生动和富有活力。但色彩数量的增加并不能与页面的表现力成正比。要有一种主色贯穿其中，主色不一定是所占面积最大的色彩，但一定是最重要、最能揭示和反映主题的色彩。不要用太多种色彩，尽量控制在三种。任务2网

店

配

色②页面要尽量少用视疲劳度高的色彩。一般来说，高明度、高纯度的色彩刺激强度高，疲劳度也大。在无彩色中，白色的明度最高，明度最低的是黑色；在有彩色中，最明亮的是黄色，最暗的是紫色。不宜大面积使用刺激强度高的色彩，其出现的频率也不宜高。低明度色的疲劳度虽然小，但往往使人产生压抑感。因此，比较理想的方法是多用柔和、明快的浅调暖色。任务2网

店

配

色任务2网

店

配

色任务评价具体包括教师评价、学生互评、学生自评、小组评价。其中，教师评价占比60%，学生互评占比20%，学生自评、小组评价各占比10%。任务2网

店

配

色任务2网

店

配

色任

务3文字的应用任务3文字的应用李飞逛网店时经常被网店图片中的字体所吸引。这些字体不仅外形美观，而且非常符合网店的风格。他每次进行图片设计时总会因不知道选择什么样的字体而烦恼。虽然字体有很多种，但经常用的可能只有几种，并且有时会根据季节性变化进行一两种字体的调整。任务3文字的应用任务目标（1）了解常见的基础字体。（2）掌握字体的不同创作手法。（3）学会文字的搭配与布局。职业素养目标选用字体时要注意字体的版权问题，以免日后出现版权纠纷。任务3文字的应用1.3.1字体的选择字体作为网店美工的一部分，其选择与编排直接影响商品信息的表现与传达，在图片中占有举足轻重的作用。合适的字体会使商品的卖点或者亮点更加突出。从某种程度上看，字体如同人的一张脸，代表着一个人独特的风格。只有了解字体的这些风格，才能更好地设计字体，将字体与图片甚至整个网店的风格统一起来。任务3文字的应用目前，从网店美工的角度来看，常见的基础字体如下。（1）宋体（见图1-51）。宋体是默认文档的字体，客观、典雅、严肃，给人以古色古香的视觉效果，在网页中的应用较为普遍。宋体的点、撇、捺、钩等笔画有尖端，属于衬线字体。宋体笔画中的横笔较细，不好识别，所以在海报设计中运用得比较少。任务3文字的应用（2）黑体（见图1-52）。黑体给人以时尚、厚重、抢眼的感觉，多用于标题制作、字幕展示，可达到强调的效果。Windows系统自带的黑体笔画较细，不太适合直接用于广告设计中。目前，标题、导语多为粗黑、大黑、中黑、雅黑加粗等。任务3文字的应用（3）书法体（见图1-53）。书法体的传统韵律比较强，在中华优秀传统文化类的设计对象中运用广泛。例如，隶书刚柔并济、优雅、表现力丰富、古色古香、韵味十足，因而适用于中华优秀传统文化类广告的设计。任务3文字的应用（4）创意字体（见图1-54）。创意字体即艺术体。艺术体的形式比较多变，造型风格各有千秋。例如，娃娃体稚嫩可爱；饰艺体造型复古、优美又活泼，犹如西文的花体字。因此，创意字体常用于特定人群或节日等创意型、个性型的设计中。任务3文字的应用值得一提的是，选择字体时要注意字体的版权。通常情况下，Windows自带的字体是可以直接使用的；对于其他下载的字体，理论上都须经授权后才可使用，尤其不能直接用于网店的标志中，以免日后出现版权纠纷。不一样的字体会呈现不同的文字风格，具有不同的文化底蕴，给人的感觉也不同。任务3文字的应用1.3.2创意字体的设计1.字体创意设计的种类信息的传达离不开文字，文字在视觉传达中能使网店主题更引人注目。字体设计是在了解文字结构、字形之间的有机联系的基础上，根据文字的使用场所，针对对象和文字的含义强化加以装饰、变形，使文字造型实用并体现个性化。常见的字体创意设计（以下示例图片中的线框处表示字体变化的地方）如下。任务3文字的应用（1）形象变化。形象变化是将整个文字进行形象化处理。如图1-55所示，笔画共用是文字图形化创意设计中广泛运用的一种形式。文字是一种视觉图形，它的线条有着强烈的构成性，可以从单纯的构成角度来看笔画之间的异同，寻找笔画之间的内在联系，找到可以共同利用的条件并将其提取出来。任务3文字的应用如图1-56所示，采用代替法，如以圆形代替方形，将竖线、横线或折互相转换。任务3文字的应用如图1-57所示，以标志中的一个点或一条线为原点，将其适当拉长，可起到画龙点睛的作用。任务3文字的应用如图1-58所示，叠加法是使文字的笔画互相重叠，或使文字与文字、文字与图形相互重叠的表现手法。叠加能使图形产生立体空间感，通过叠加处理实形和虚形，可以增加设计的内涵，以图形的巧妙组合与表现使单调的形象变得丰富。任务3文字的应用如图1-59所示，将一些封合包围的字适当地断开，或在左边断一截，或在右边去一截，称为断肢法。提示：要在能识别文字的前提下采用断肢法。任务3文字的应用（2）装饰变化。装饰变化是通过肌理、渐变、装饰等变化方式使文字的表现更加具象化。如图1-60所示，替换法是在统一形态的文字元素中加入另类不同的图形元素或文字元素。其本质是根据文字的内容用某一元素替代文字的某个部分或某一笔画。这些元素或写实或夸张，对文字笔画进行局部替换，使文字的内涵外露，在形象和感官上都增加了一定的艺术感染力。任务3文字的应用如图1-61所示，可在文字上添加渐变效果，强调主题活动，提前告知顾客网店的销售信息。任务3文字的应用（3）意象变化。意象变化是根据字词的含义及图片的应景需要来设计文字的整体形象。如图1-62所示，将横线拉成圆弧形。此外，还有一点就是色彩，只有为处理过的文字加上色彩，才能使设计出的字体俏皮可爱。任务3文字的应用如图1-63所示，可将左右排改为左上左下排、上下排或斜排（一边高一边低），使文字错落有致。任务3文字的应用（4）立体变化。立体变化是利用文字的三维空间感在视觉上给人以震撼，这种立体效果很容易被记住。如图1-64所示，主题文字的立体变化有利于营造出特定的销售氛围。任务3文字的应用2.字体创意设计所营造的意境网店美工中的字体设计不仅要符合网店的风格，还要根据季节、节日的变化进行相应的变换。简单的文字配合一些气氛的营造或色调的渲染，可使海报整体呈现出不一样的视觉效果；还可通过改变颜色、字体等方式使主要文字在画面整体的排列中更加突出。通过文字传递信息、营造意境是设计的有效方式之一。不同的字体具有不同的特征，如黑体显庄重肃穆、楷体显优美圆润、隶书显严谨秀气、草书显张狂飞扬等，这些多样化字体的运用丰富了画面的意境。任务3文字的应用如图1-65所示，画面中的文字稍微倾斜，同时主题文字带有立体效果，再配上漂浮的红丝带，从整体上营造出动态的效果；在文字上使用帽子、小熊、爱心等素材，突出“萌”“爱”的主题；色彩背景给人以清新、淡雅的感觉，再搭配暖色调的主题文字，营造出浓浓的亲子情。任务3文字的应用如图1-66所示，借助书法体，将画面中的主题文字抽象成视觉符号，并借助轻重缓和之笔表现书法体独特的形式美，赋予其浓厚的人文情怀。而模特形象的缥缈、促销文字的浑厚、“生命的颜色”的隽秀打造出了一种极富艺术魅力、质朴飘逸的东方意境之美。除此之外，画面中的红色文字模块突出了节日的氛围，传递出网店活动的主要内容，以及紧张的促销氛围。任务3文字的应用如图1-67所示，设计师以营造凉爽的意境为出发点，网页的主色为蓝色，搭配冰块、海鸥、水波等素材，给人以非常清凉的感觉。同时，画面中的白色文字以立体效果突出主题，并且将文字的角变成直尖、弯尖、斜卷尖，使文字看起来比较硬朗；而且主题字体向外扩散，营造出一种清凉至极的意境。任务3文字的应用1.3.3文字的布局与搭配1.文字的层次布局从信息清晰有力的传播目的来看，图片传达信息是有主次之分的。如图1-68所示，设计师一定要清楚顾客浏览图片的顺序，这一顺序就是要表达文字的层次，依据文字区各个部分的重要性可将其划分为主标题区、副标题区和附加内容区。任务3文字的应用如图1-69所示，该图片的主要设计焦点是文字的应用和布局，采用创意型的字体，将装饰性元素附加在“大”字上，展现出促销产品的丰富，给人以“接地气”的感觉。另外，对促销字眼“五折封顶”通过字体变化、颜色对比吸引受众的眼球。整个画面中的字体具有感染力，而且更加生动形象，为画面带来了视觉冲击力，让顾客能够很清楚地获取画面的核心信息。任务3文字的应用文字的排版主要是指文字的字号、文字横竖的排列方式、文字的位置和间距等。不同的文字排版方式能产生不同的风格和视觉效果。顾客会不自觉地根据相近的关系进行统一式阅读，因为顾客会认为以相似方式处理的文字之间是有联系的，所以排列在一起的文字间的对比至关重要。2.文字的排版任务3文字的应用如图1-70所示，黑体字和宋体字搭配组合，字号有大有小；同时，文字颜色的不同使顾客首先能看到主要信息，如“好灯曝光”“1212”为一系列同一鲜艳颜色或底色的文字，可以传达视觉重点，然后从其他不同的组合文字中读出细节信息。任务3文字的应用3.字体与产品风格的搭配字体设计与产品风格的联系很紧密。对于不同种类和风格的产品，文字粗细、大小等的运用应有所区别。如图1-71所示，经常可以在化妆品等女性品牌中看到女性化风格的字体，它们通常纤细、秀美，线条流畅，字形有粗细等细节的变化，显得有韵律，或者将装饰性元素与文字相结合。因为衬线字体具有衬线这种可装饰性元素，所以很多女性化风格的字体为衬线字体，如细黑体、细倩简体等。任务3文字的应用对于男性产品的描述，通常使用具有粗犷、强劲有力、拐角分明、力量感强等特征的、有男性化风格的字体，如图1-72所示。任务3文字的应用对于儿童产品的描述，可以使用具有活泼、可爱、肥圆、呆萌、调皮等卡通风格的字体，如图1-73所示。任务3文字的应用对于文艺青年相关产品的描述，可以选择文静、素雅的文艺字体。图1-74所示的设计就使用了文艺风格的字体，给人以很安静的感觉。任务3文字的应用对于成熟女性和男性的产品的描述，适当应用中英文字体组合，不仅可以给人一种雍容华贵的感觉，还可以显示产品品质的国际化，如图1-75所示。任务3文字的应用对于一些潮流服装，可以将各种字体组合使用，以表现活泼、个性、时尚的特点，如图1-76所示。任务3文字的应用任务3文字的应用任务评价具体包括教师评价、学生互评、学生自评、小组评价。其中，教师评价占比60%，学生互评占比20%，学生自评、小组评价各占比10%。任务3文字的应用任务3文字的应用THANKYOUFORWATCHING谢谢观看工作领域2使用Photoshop助力网店美工目录任务1初识Photoshop任务2让商品图片更美观目录任务3拼合出商品效果图任务4制作吸引顾客眼球的图片思政园地网店美工师掌握了基本功并模仿了一定数量的作品后，不能故步自封，安于现状，要继续进步，开阔眼界，多看、多学习国内外优秀设计作品，这样才能具备较强的审美能力和美工功底，而把时尚潮流的元素融入作品。网店美工师还要有良好的营销思维，在设计图片时一定要清楚地知道图片传递的信息能否打动顾客。一张设计优秀的图片是有核心、有“灵魂”的，图片的“灵魂”能够让顾客产生共鸣，并产生购买商品的欲望。优秀的网店美工师是懂技术、懂产品、懂审美、懂营销、懂广告、懂设计的复合型人才。任

务1初识Photoshop任务1初识Photoshop李平的老师告诉他，要想成为一名网店美工师，必须熟练掌握Photoshop的用法。于是李平开始努力学习和运用Photoshop。作为一名设计师，仅有丰富的想象力是不够的，更要熟悉且灵活自如地使用Photoshop，用它实现心中所想。值得注意的是，记住Photoshop中的快捷键可以让设计事半功倍。任务1初识Photoshop任务目标（1）熟悉Photoshop的工作界面。（2）理解图层的含义。职业素养目标培养利用工具解决问题的意识，逐步具备创新性思维。任务1初识Photoshop2.1.1Photoshop的工作界面不同版本的Photoshop的界面会有些许差异。本书所涉及的案例均是使用Photoshop2024完成的。任务1初识Photoshop步骤1打开Photoshop2024，其界面如图2-1所示。任务1初识Photoshop步骤2查看菜单栏。菜单栏包括文件、编辑、图像、图层等一些基本操作项，如图2-2所示。步骤3查看工具栏。工具栏中列出了Photoshop2024的基本工具（见图2-3），通过执行“窗口”→“工具”命令可以显示或隐藏工具栏。任务1初识Photoshop步骤4

将鼠标指针置于矩形选框工具

上，系统将显示该工具的名称。如果工具的右下角有三角符号，就表示它是一个组合工具，还包括其他的工具。右击或长按三角符号，就会将该工具所包含的工具都显示出来，如图2-4所示。任务1初识Photoshop步骤5

查看属性栏。当选中了工具栏中的工具时，属性栏中将显示该工具的相关属性。例如，当选中工具栏中的移动工具时，其属性栏会显示出来，如图2-5所示。步骤6软件界面中间的灰色区域是文件编辑区。编辑文件都是在这里进行的。任务1初识Photoshop步骤7

软件界面的右边是一些活动面板，包括图层、历史记录等。活动面板可以被最小化或关闭。执行“窗口”命令，在弹出的下拉菜单中所列出的就是活动面板的内容。选中选项表示相应的活动面板是被打开的，反之则是没有被打开的。任务1初识Photoshop步骤8打开的活动面板可以被随意拖动至界面上的任何位置。但这样做可能会使界面变得很乱，可以通过执行“窗口”→“工作区”→“复位基本功能”命令迅速将活动面板恢复到系统默认的设置，如图2-6所示。任务1初识Photoshop步骤9

按Tab键可以隐藏或显示所有的工具栏和活动面板，如图2-7和图2-8所示；按Shift+Tab组合键，可以隐藏或显示右边的活动面板。作图过程中，当因活动面板的遮挡而无法看清图片的全貌时，这一操作将非常有用。任务1初识Photoshop图2-8，显示工具栏和活动面板。任务1初识Photoshop2.1.2文档窗口的使用方法Photoshop2024中是以选项卡的形式排列当前打开的文件的，其优点是在打开多个图像后一目了然，并且选择选项卡即可快速切换至图像编辑窗口。如果打开了多个图像文件，则选项卡式文档窗口右上方将会有一个展开按钮

，单击它便弹出文件列表，可从中选择要进行操作的图像文件，如图2-9所示。提示：按Ctrl+Tab组合键，可以对当前打开的所有图像文件从左向右依次进行切换；如果按Ctrl+Shift+Tab组合键，可以逆向切换这些图像文件。任务1初识Photoshop使用选项卡式文档窗口管理图像文件，可以更加快捷、方便地对图像文件进行各类操作。（1）改变图像的前后顺序。在某图像文件的选项卡上按住鼠标左键不放，将其拖至一个新的位置后释放，可以改变该图像文件在选项卡中的位置顺序。网店美工任务1初识Photoshop（2）取消图像文件的叠放状态。在某图像文件的选项卡上按住鼠标左键不放，将其从选项卡中拖出，可以取消该图像文件的叠放状态，使其成为一个独立的窗口，如图2-10所示。任务1初识Photoshop2.1.3控制面板的基本用法活动面板是Photoshop必不可少的组成部分，默认情况下活动面板按默认的位置被放置在一起，共用一个控制窗口。用户可以根据个人习惯显示或摆放活动面板，并可将多个活动面板上下叠放。下面讲解一些有关活动面板的基本操作。任务1初识Photoshop需要组合活动面板时，可以将一个活动面板拖至另一个活动面板旁边的位置，待其周围出现一个蓝色方框时释放鼠标左键即可。1.组合活动面板的用法任务1初识Photoshop2.拆分活动面板的用法想要单独拆分出一个活动面板，可以直接选中对应的图标或标签，按住鼠标左键将其拖至工作区中的空白位置，如图2-11和图2-12所示。任务1初识Photoshop图2-12，拖出后的“颜色”活动面板。任务1初识Photoshop3.伸缩活动面板的用法对于已展开的活动面板，单击其顶部的

按钮，可以将其折叠为图标，如图2-13所示。任务1初识Photoshop反之，如果单击未展开活动面板顶部的

按钮，则可以展开该活动面板，如图2-14所示。任务1初识Photoshop4.拖动活动面板的用法按住鼠标左键不放，可以把所需的活动面板向上或向下拖出，待上方出现一条蓝色粗线时，释放鼠标左键即可，如图2-15和图2-16所示。任务1初识Photoshop图2-16，增加“调整”活动面板后。任务1初识Photoshop2.1.4常用的Photoshop基本操作1.对文件的四大基本操作及文件格式（1）对文件的四大基本操作。①新建文件。执行“文件”→“新建”命令（或按Ctrl+N组合键），打开“新建文档”对话框，如图2-17所示。在该对话框中可以设置新建文件的名称、宽度、高度、分辨率、颜色模式和背景内容等属性。提示：淘宝网店需要的图片是按像素长宽比设置的。有时Photoshop默认长宽是以厘米为单位的，一定要进行修改。任务1初识Photoshop②打开文件。执行“文件”→“打开”命令（或按Ctrl+O组合键），可以在打开的“打开”对话框中打开已有的图像文件。如果在新建文件前曾进行过复制操作，则“新建”对话框中显示的文件尺寸将与所复制对象的尺寸相同。任务1初识Photoshop③保存图像文件。在实际工作中，需要将新建的图像文件或更改后的图像文件保存，以便在以后的工作中使用。执行“文件”→“存储”命令，可以存储对当前文件所做的更改，或以某种格式保存一个新文件。执行“文件”→“存储为”命令，可以在不同的位置保存图像，或设置不同的文件名、格式及其他选项以保存图像文件。任务1初识Photoshop淘宝网常用的图片格式如下。a.PSD格式。PSD格式可以用于保存图层、参考线等内容，以便以后修改图片，但是不能直接上传到淘宝网页中。b.GIF格式。将颜色单一的图片或文字保存为GIF格式，占用的空间较小。c.JPG格式。图像色彩丰富的图片一般被保存为JPG格式。d.PNG格式。对需要透明背景的图片常采用PNG格式进行保存。任务1初识Photoshop④恢复与关闭图像文件。通常对当前图像进行若干操作后，如果希望将其恢复到最初的操作状态，可以执行“文件”→“恢复”命令。提示：上述操作也可以通过“历史记录”活动面板完成。关闭图像可以执行“文件”→“关闭”命令，或按Ctrl+W组合键，或单击图像文件右上方的“关闭”按钮

。任务1初识Photoshop（2）文件格式。①PSD格式。PSD格式是Photoshop自带的格式，可以用于存储Photoshop中所有的图层、通道、参考线、注解和颜色模式等信息。在保存图像时，若图像中含有层，则一般以PSD格式保存。具体的操作步骤如下。任务1初识Photoshop步骤1

执行“文件”→“打开”命令，打开文件，如图2-18所示。任务1初识Photoshop步骤2执行“文件”→“存储为”命令，打开“存储为”对话框，在“保存类型”下拉列表框中选择“Photoshop（*.PSD；*.PDD；*.PSDT）”选项，如图2-19所示。步骤3

单击“保存”按钮，完成保存操作。任务1初识Photoshop采用PSD格式保存文件时会将文件压缩，以减少占用的磁盘空间；但PSD格式所包含的图像数据信息较多（如图层、通道、剪辑路径、参考线等），因此比其他格式的图像文件还是要大得多。由于PSD格式的文件保留了所有原图像的数据信息，因而修改起来也较为方便。由于网店美工需要的图片格式不支持PSD格式，所以必须在图像处理完成后将其转换为其他占用空间小且存储质量好的文件格式。任务1初识Photoshop②JPG格式。JPG格式是常用的图片格式。在Photoshop中将图片保存为JPG格式文件的具体操作步骤如下。步骤1执行“文件”→“打开”命令，打开文件。步骤2执行“文件”→“存储为”命令，在打开的“存储为”对话框的“保存类型”下拉列表框中选择“JPEG（*.JPG；*.JPEG；*.JPE）”选项，如图2-20所示。任务1初识Photoshop步骤3

单击“保存”按钮，打开“JPEG选项”对话框，在“品质”数值框中输入“8”，如图2-21所示。任务1初识Photoshop因为网店的图片最终是通过显示器呈现给顾客的，在相同的浏览器和网速的条件下设置“品质”为“8”或“12”（见图2-22），虽然浏览效果差不多，但是图片大小相差很大，前者因为图片较小而可提高访问速度。步骤4

单击“确定”按钮。任务1初识Photoshop2.纠正错误操作Photoshop提供了很多纠正错误操作的方法。（1）使用命令纠错。①“恢复”命令。执行“文件”→“恢复”命令，可以返回到最近一次保存文件图像的状态，但如果刚刚对文件进行了保存操作，则无法执行“恢复”命令。如果当前文件没有被保存到磁盘，则“恢复”命令也是不可用的。任务1初识Photoshop②“还原”与“重做”命令。执行“编辑”→“还原”命令，可以回到上一步的操作状态；执行“编辑”→“重做”命令，可以重做被执行了“还原”命令的操作。任务1初识Photoshop（2）使用快捷键纠错。按Ctrl+Z组合键可以撤销最后一步的操作。按Ctrl+Alt+Z组合键可以撤销多步操作。按Ctrl+Shift+Z组合键可以恢复多步操作。030201任务1初识Photoshop（3）使用“历史记录”活动面板纠错。执行“窗口”→“历史记录”命令，打开“历史记录”活动面板，如图2-23所示。任务1初识Photoshop该活动面板会记录用户所进行的每一步操作。如果要改变“历史记录”步骤的数量，可以执行“编辑”→“首选项”→“性能”命令（或按Ctrl+K组合键），在打开的“首选项”对话框中改变默认的参数值，如图2-24所示。任务1初识Photoshop如果希望回退至某个历史状态，只需选中该历史记录的名称即可，此时在所选历史记录后面的操作都将显示为灰色，如图2-25所示。任务1初识Photoshop3.图层图层是Photoshop中最基本也是最重要的概念之一。图层可以被理解为一张张上下顺序叠起来的透明纸，没有绘制内容的区域是透明的，透过透明区域可以看到下方图层的内容，将在每个图层上绘制的内容叠加起来就构成了一幅完整的图像。任务1初识Photoshop每一个图层都具有独立性，因此可以将图像的不同元素绘制在不同的图层上，这样在对某一个图层中的元素进行编辑修改时，不会影响到其他图层中的元素。另外，在每一个图层上还可以单独使用调整图层、填充图层、图层蒙版和图层样式等特殊功能，使图像产生特殊的效果。任务1初识Photoshop（1）“图层”活动面板。“图层”活动面板用于管理或操作图层。可执行“窗口”→“图层”命令打开“图层”活动面板，如图2-26所示。任务1初识Photoshop“图层”面板各部分内容的含义如下。①设置图层混合模式。可在“模式”下拉列表框中选择当前图层与下方图层之间的混合方式。②设置不透明度。“不透明度”选项用于控制当前图层的透明度，100%为不透明，0%为透明。③锁定。可完全或部分锁定图层以保护其内容。例如，锁定透明度后图像的透明区域将受到保护，无法被编辑。任务1初识Photoshop④切换图层可见性。“切换图层可见性”按钮用于控制当前图层是否显示在图像区域中，有“眼睛”图标

时表示显示。⑤图层效果展开/折叠。单击“图层效果展开/折叠”按钮

，可控制图层效果是否在“图层”活动面板上显示。⑥链接图层。单击“链接图层”按钮

，可将选定的多个图层链接在一起，再次单击此按钮可取消链接。任务1初识Photoshop⑦添加图层样式。单击“添加图层样式”下拉按钮

，在下拉列表中可选择相应的选项，为图层添加一个新的图层样式，如图2-27所示。任务1初识Photoshop⑧添加图层蒙版。单击“图层蒙版”按钮

，可在图层上添加一个图层蒙版。⑨创建新的填充或调整图层。单击“创建新的填充或调整图层”下拉按钮

，在下拉列表（见图2-28）中可选择相应的命令，从而在当前图层上添加填充图层或调整图层。任务1初识Photoshop创建新组。单击“创建新组”按钮

，可在当前图层或组之上创建新图层组。（10）创建新图层。单击“图层”按钮

，可在当前图层之上添加新图层。（11）删除图层。将不需要的图层直接拖到“删除图层”按钮

上，可删除该图层。（12）任务1初识Photoshop（2）图层的种类。在Photoshop中，可将图层分为背景图层、普通图层、文字图层、蒙版图层、形状图层、调整图层和填充图层等类型。任务1初识Photoshop①背景图层。背景图层是创建新图像时系统自动生成的图层，背景图层始终位于“图层”活动面板的最下部，名称为“背景”，如图2-29所示。一幅图像中只有一个背景图层。在背景图层的右边有一个“锁定”图标

，这表示不能更改背景图层的堆叠顺序、混合模式或不透明度。任务1初识Photoshop②普通图层。普通图层也称为常规图层，是Photoshop中最常用的图层。普通图层是一个透明的图层。在“图层”活动面板上，其缩略图显示为灰白相间的方格，如图2-30所示。在没有选择锁定选项的情况下，普通图层的编辑不受限制。任务1初识Photoshop③文字图层。文字图层是用来处理和编辑文本的图层。当使