(中职） Photoshop CC网店视觉设计第八章教学课件.ppt

《(中职） Photoshop CC网店视觉设计第八章教学课件.ppt》由会员分享，可在线阅读，更多相关《(中职） Photoshop CC网店视觉设计第八章教学课件.ppt（34页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Y CF(中职）Photoshop CC 网店视觉设计第八章教学课件第八章 网店促销广告的视觉设计 8.1 图像视觉设计常用技术 8.2 淘宝直通车促销广告视觉设计 8.3 聚划算店铺促销图的视觉设计下一页 返回8.1 图像视觉设计常用技术 8.1.1 滤镜在图像效果制作中的应用 1.滤镜的概念 滤镜实际上是一些独立开发设计的小程序，它们可以被图像编辑程序所调用，用来处理已经打开的图像中的像素，通过对原图像像素的颜色及亮度值的重新计算与修改，以产生变化后的图像。Photoshop 除了可以调用自带的滤镜外，还可以调用预知兼容的第三方厂商提供的外挂滤镜，这些滤镜能使图像产生许多特殊的效果。Pho

2、toshop 的内置滤镜共有14 组，达100 多种，每种滤镜都有自己不同的功能和图像效果。下一页 返回8.1 图像视觉设计常用技术 在Photoshop 中，大多数滤镜都是破坏性滤镜，这些滤镜执行的效果非常明显，有时会使被处理的图像面目全非，产生无法恢复的破坏。破坏性滤镜包括：艺术效果滤镜组、画笔描边滤镜组、扭曲滤镜组、像素化滤镜组、渲染滤镜组、素描滤镜组、风格化滤镜组、纹理滤镜组等。滤镜就是处理已经打开的图像中的像素，通过对原图像像素的颜色及亮度值的重新计算修改，使之产生特殊的艺术效果。Photoshop 除了可以使用自带的滤镜外，还可以安装与之兼容的外挂滤镜，安装后的滤镜都在“滤镜”菜单

3、下，这些滤镜能使图像产生更多特殊的效果。上一页 下一页 返回8.1 图像视觉设计常用技术 2.滤镜的使用 在执行“滤镜”菜单命令时，如果滤镜名称后跟有省略号（），就会弹出该滤镜的参数设置命令。滤镜参数命令中一般都有预览窗口，用来预览滤镜效果，预览满意后正式应用滤镜。在对话框中，当用鼠标拖动某个滤镜参数下的三角滑块或在参数输入框内设置不同的参数值后，预览比例数值下的线条会不停地闪烁，表示Photoshop 正在处理预览，当线条停止闪烁时，滤镜预览框就会显示出该参数下的滤镜预览效果。单击预览框下的“+”按钮，可以放大预览图像的显示比例，可预览图像细部的变化，此时如将鼠标指向预览框，则光标会变成手抓

4、工具，拖动鼠标就可预览图像的不同区域；上一页 下一页 返回8.1 图像视觉设计常用技术 单击预览框下的“”按钮，可以缩小预览图像的显示比例，可预览滤镜作用后整幅图像的效果；当改变不同的参数预览效果后，想要回到刚打开参数设置对话框时的参数值状态时，可按住Alt 键，此时“取消”按钮变成“复位”按钮，单击“复位”按钮就会回到最初的设置状态。对预览效果满意后，就可单击对话框中的“确定”按钮，则退出滤镜参数设置对话框，正式应用滤镜效果。图像尺寸越大，分辨率越高，应用所要的时间越长。滤镜创建特殊效果的运用有以下几个途径。上一页 下一页 返回8.1 图像视觉设计常用技术（1）创建边缘效果。可以使用多种方法

5、来处理只应用于部分图像的边缘效果。要保留清晰边缘，只需应用滤镜即可。要得到柔和的边缘，则将边缘羽化，然后应用滤镜。要得到透明效果，请应用滤镜，然后使用“渐隐”命令调整选区的混合模式和不透明度。（2）将滤镜应用于图层。可以将滤镜应用于单个图层或多个连续图层以加强效果。要使滤镜影响图层，图层必须是可见的，并且必须包含像素，例如中性的填充色。（3）将滤镜应用于单个通道。可以将滤镜应用于单个的通道，对每个颜色通道应用不同的效果，或应用具有不同设置的同一滤镜。上一页 下一页 返回8.1 图像视觉设计常用技术（4）创建背景。将效果应用于纯色或灰度形状可生成各种背景和纹理。然后可以对这些纹理进行模糊处理。尽

6、管有些滤镜（例如“玻璃”滤镜）在应用于纯色时不明显或没有体现出效果，但其他滤镜却可以产生明显的效果。（5）将多种效果与蒙版或复制图像组合。使用蒙版创建选区，可以更好地控制从一种效果到另一种效果的转变。例如，可以对使用蒙版创建的选区应用滤镜。也可以使用历史记录画笔工具将滤镜效果绘制到图像的某一部分。首先，将滤镜应用于整个图像。接下来，在“历史记录”面板中返回到应用滤镜前的图像状态，并通过单击该历史记录状态左侧的方框将历史记录画笔源设置为应用滤镜后的状态。然后绘制图像。上一页 下一页 返回8.1 图像视觉设计常用技术（6）提高图像品质和一致性。可以掩饰图像中的缺陷，修改或改进图像，或者对一组图像应

7、用同一效果来建立关系。使用“动作”面板记录修改一幅图像的步骤，然后对其他图像应用该动作。3.滤镜库 滤镜库可提供许多特殊效果滤镜的预览。可以应用多个滤镜、打开或关闭滤镜的效果、复位滤镜的选项以及更改应用滤镜的顺序。如果用户对预览效果感到满意，则可以将它应用于图像。滤镜库并不提供“滤镜”菜单中的所有滤镜。选取“滤镜滤镜库”，单击滤镜的类别名称，可显示可用滤镜效果的缩览图。上一页 下一页 返回8.1 图像视觉设计常用技术 4.艺术效果滤镜“艺术效果”滤镜用来模拟天然或传统的艺术效果。运用这些滤镜可以使图像看上去具有不同画派艺术家使用不同的画笔和颜料创作的艺术品。“艺术效果”滤镜共包括15 种滤镜，

8、此组滤镜不能应用于CMYK 和Lab 模式的图像。由于Photoshop 中滤镜很多，本书只做简要的介绍，不一一全面展开。5.画笔描边滤镜“画笔描边”滤镜主要模拟使用不同的画笔和油墨进行描边创造出的绘画效果。该滤镜组共包含8 个滤镜，可以分别为图像添加杂色、细化边缘、增加纹理的效果。此类滤镜也不能应用在CMYK 和Lab 模式下的图像。该滤镜通过为图像产生交叉网线来模拟钢笔画素描效果。上一页 下一页 返回8.1 图像视觉设计常用技术 在滤镜参数设置对话框中，通过调节方向平衡的值来控制两种交叉线的比例，当值大于 50 时，主要为“|”线条；小于50 时，主要为“”线条；线条长度值用来控制线条的长

9、度；锐化程度值用来控制线条的锐利程度，值越小，线条的饱和度就越低，线条之间的反差就降低，图像就越模糊、柔和。6.扭曲效果滤镜“扭曲效果”滤镜通过对图像应用扭曲变形实现各种效果。共包含十几种滤镜效果。这些滤镜在运行时会占用很多内存。因此，在使用扭曲滤镜组时要谨慎处理，并要对达到的变形程度和变形效果进行精心调整。上一页 下一页 返回8.1 图像视觉设计常用技术 7.像素化滤镜 像素化滤镜将图像分成一定的区域，将这些区域转变为相应的色块，再由色块构成图像，类似于色彩构成的效果。（1）点状化滤镜。该滤镜将图像分解为随机分布的网点，模拟点状绘画的效果。使用背景色填充网点之间的空白区域。主要用Cell S

10、ize 单元格大小调整单元格的尺寸，来控制网点的尺寸，范围是3 300。值越大，网点尺寸越大。（2）铜版雕刻滤镜。该滤镜根据所选模式的不同，会将灰度图像转换为黑白区域的随机图案，或将彩色图像转换为全饱和颜色随机图案。它共有10 种类型，分别为精细点、中等点、粒状点、粗网点、短线、中长直线、长线、短描边、中长描边和长边。上一页 下一页 返回8.1 图像视觉设计常用技术（3）马赛克滤镜。马赛克滤镜会将选区内图像颜色相近的像素合并在方块区域内，产生马赛克效果。Cell Size 单元格大小用来调整色块的尺寸。范围在2 64 平方像素，值越大，马赛克的尺寸越大。8.渲染效果滤镜 渲染效果滤镜使图像产生

11、三维映射云彩图像、折射图像和模拟光线反射等效果，还可以用灰度文件创建纹理进行填充，具体有以下几种。（1）云彩滤镜。（2）分层云彩滤镜。上一页 下一页 返回8.1 图像视觉设计常用技术 8.1.2 通道在图像效果制作中的应用 1.通道的概念 在Photoshop 中通道是非常独特的，它不像图层那样容易上手。通道是由分色印刷的印版概念演变而来的。例如，我们在生活中司空见惯的五颜六色的彩色印刷品，其实在其印刷的过程中仅仅用了四种颜色。在印刷之前先通过计算机或电子分色机将一件艺术品分解成四色，并打印出分色胶片；一般地，一张真彩色图像的分色胶片是四张透明的灰度图，单独看每一张单色胶片时不会发现什么特别之

12、处，但如果将这几张分色胶片分别着以C（青）、M（品红）、Y（黄）和K（黑）四种颜色并按一定的网屏角度叠印到一起时，我们会惊奇地发现，这原来是一张绚丽多姿的彩色照片。上一页 下一页 返回8.1 图像视觉设计常用技术 所以从印刷的角度来说通道（Channels）实际上是一个单一色彩的平面。它是基于色彩模式这一基础上衍生出的简化操作工具。譬如说，一幅RGB 三原色图有三个默认通道：Red（红）、Green（绿）、Blue（蓝）。但如果是一幅CMYK 图像，就有了四个默认通道：Cyan（蓝绿）、Magenta（紫红）、Yell（黄）、Black（黑）。2.通道的作用 在图像的通道中，记录了图像的大部分

13、信息，这些信息从始至终与各种操作密切相关，具体看起来，通道的作用主要有：（1）表示选择区域。通道中白色的部分表示被选择的区域。黑色部分表示没有选中。用通道，一般可以建立精确选区。上一页 下一页 返回8.1 图像视觉设计常用技术（2）表示墨水强度。利用Info 面板可以体会到这一点，不同的通道都可以用256 级灰度来表示不同的亮度。在Red 通道里的一个纯红色的点，在黑色的通道上显示就是纯黑色，即亮度为0。（3）表示不透明度。（4）表示颜色信息。例如预览Red 通道，无论鼠标怎样移动，Info 面板上都仅有R 值，其余的都为0。3.通道的分类 通道作为图像的组成部分，是与图像的格式密不可分的，图

14、像颜色、格式的不同决定了通道的数量和模式，在通道面板中可以直观的看到。在Photoshop 中涉及的通道主要有：上一页 下一页 返回8.1 图像视觉设计常用技术（1）复合通道（Compound Channel）（2）颜色通道（Color Channel）（3）专色通道（Spot Channel）（4）Alpha 通道（Alpha Channel）（5）单色通道上一页 下一页 返回8.1 图像视觉设计常用技术 4.Alpha 通道的编辑方法 对图像的编辑实质上是对通道的编辑。因为通道是真正记录图像信息的地方，无论色彩的改变、选区的增减、渐变的产生，都可以追溯到通道中去。常见的编辑方法有：（1）利

15、用选择工具：Photoshop 中的选择工具包括遮罩工具（Marquee）、套索工具（Lasso）、魔术棒工具（Magic Wand）、字体遮罩（Type Mask）以及由路径转换来的选区等，其中包括不同羽化值的设置。利用这些工具在通道中进行编辑与对一个图像的操作是相同的。上一页 下一页 返回8.1 图像视觉设计常用技术（2）利用绘图工具：绘图工具包括喷枪（Airbrush）、画笔（Paintbrush）、铅笔（Pencil）、图章（Stamp）、橡皮擦（Eraser）、渐变（Gradient）、油漆桶（Paint Bucket）、模糊锐化和涂抹（Blur、Sharpen、Smudge）、加深

16、减淡和海绵（Dodge、Burn、Sponge）。选择区域可以用绘图工具在通道中去创建，去修改，利用绘图工具编辑通道的一个优势在于可以精确的控制笔触，从而得到更为柔和以及足够复杂的边缘。上一页 下一页 返回8.1 图像视觉设计常用技术（3）利用滤镜：在通道中进行滤镜操作，通常是在有不同灰度的情况下，而运用滤镜的原因，通常是因为我们刻意追求一种出乎意料的效果或者只是为了控制边缘。原则上讲，可以在通道中运用任何一个滤镜去试验，从而建立更适合的选区。各种情况比较复杂，需要根据目的的不同做相应处理。（4）利用调节工具：特别有用的调节工具包括色阶（Level）和曲线（Curves）。在用这些工具调节图像

17、时，会看到对话框上有一个Channel 选单，在这里可以调整所要编辑的颜色通道。按住Shift 键，再单击另一个通道，可以强制这些工具同时作用于一个通道。上一页 下一页 返回8.1 图像视觉设计常用技术 8.1.3 路径在图像效果制作中的应用 1.创建新的工作路径 2.用钢笔工具创建路径 3.路径面板 4.绘制矢量图形 5.绘制形状 6.在形状图层上创建形状 7.编辑形状 8.形状工具选项上一页 返回8.2 淘宝直通车促销广告视觉设计 8.2.1 淘宝直通车基本知识 淘宝直通车是由阿里巴巴集团下的雅虎中国和淘宝网进行资源整合，推出的一种全新的搜索竞价模式。其竞价结果不只可以在雅虎搜索引擎上显示

18、，还可以在淘宝网（以全新的图片+文字的形式显示）上充分展示。每件商品可以设置200 个关键字，卖家可以针对每个竞价词自由定价，并且可以看到在雅虎和淘宝网上的排名位置，排名位置可用淘大搜查询，并按实际被点击次数付费。淘宝直通车将推出“个性化搜索”服务，所谓个性化搜索，即搜索同一关键词，搜索结果将根据不同消费者的特征，将商品进行个性化展示投放。下一页 返回8.2 淘宝直通车促销广告视觉设计 直通车是为淘宝卖家量身定制的，按点击付费的效果营销工具，实现商品的精准推广。淘宝直通车推广，在给商品带来曝光量的同时，精准的搜索匹配也给商品带来了精准的潜在买家。淘宝直通车推广，用一个点击，让买家进入指定的店铺

19、，产生一次甚至多次的店铺内跳转流量，这种以点带面的关联效应可以降低整体推广的成本和提高整店的关联营销效果。同时，淘宝直通车还给用户提供了淘宝首页热卖单品活动和各个频道的热卖单品活动以及不定期的淘宝各类资源整合的直通车用户专享活动。直通车的出价看起来简单，但是商户常常为不知道应该出多少钱而犯愁，淘宝直通车的出价也是很讲究技巧的，因为这是决定直通车效果的关键指标之一。出价越高意味着排名越靠前，被展现的概率越多，带来的流量也就越多。上一页 下一页 返回8.2 淘宝直通车促销广告视觉设计 淘宝直通车的优点可以简单地概括为：多、快、好、省四个字。多是指：多维度、全方位提供各类报表以及信息咨询，为推广商品

20、打下坚实的基础。快是指：快速、便捷的批量操作工具，让商品管理流程更科学、更高效。好是指：智能化的预测工具，商户在制定商品优化方案时更胸有成竹，信心百倍。省是指：人性化的时间、地域管理方式，有效控制推广费用，省时、省力、更省成本。上一页 下一页 返回8.2 淘宝直通车促销广告视觉设计 8.2.2 淘宝直通车广告图视觉优化策略 在直通车推广中，商品图片是获得点击率的最重要因素。商品图片不美观，甚至模糊不清，根本不能引起消费者的注意，就没法吸引消费者点击商品，没有关注就没有点击率，没有点击率就没有流量，没有流量就等于没有销量，开展直通车推广也就不会有什么效果。从最开始的商品展示（商品图片）、商品包装

21、（主图设计）、商品展示（文字与图片展示）等都会影响消费者的视觉感官，消费者通过搜索从直通车展示位最先看到的就是图片和标题，图片又占了大部分位置，极大程度上影响了点击率的好坏，好的图片能吸引消费者，继而刺激消费者下单，从而提升直通车推广的效果。所以在直通车推广中必须要进行商品图像的视觉优化，上一页 下一页 返回8.2 淘宝直通车促销广告视觉设计 8.2.3 淘宝直通车广告图的视觉设计 直通车的广告图在淘宝平台上是系统直接调用商品主图的，但有时需要另外制作。但是钻石展位广告图是需要设计的，有些网络销售平台与淘宝平台不一样，具体要看投放平台的系统要求，每个平台的大小要求也是不一样的，有需要提供310

22、310 像素的，或者320320 像素的，也有400600 像素的，还有要求800800 像素的，但都会有详细的说明。上一页 返回8.3 聚划算店铺促销图的视觉设计（1）运行Photoshop 软件，创建一个新的图像文件，设置文件大小为宽度468 像素，高度187 像素，文件高度与宽度应根据平台的要求来确定，分辨率72 像素/英寸，RGB 色彩模式。（2）在软件的工具箱中选取渐变填充工具，设置渐变方式为径向渐变，混合模式为正常，不透明度为100%，具体如图8.37 所示。（3）设置渐变填充颜色类型为前景色到背景色，设置前景色RGB 为（52、45、37），设置背景色RGB 为（17、13、11

23、），接着在图像文件的图层面板创建一个新图层，用设置好的渐变填充工具进行径向渐变填充，具体如图8.38 所示。下一页 返回8.3 聚划算店铺促销图的视觉设计（4）选择软件的工具箱中的矩形选择工具，设置羽化值为0 像素，在图像文件的下方绘制一个矩形选区，设置前景色为黑色，创建一个新图层后填充长方形选区。（6）在软件中打开系列鞋的素材文件，运用移动工具将素材拖进图像文件中，执行Ctrl+T 命令对素材图像进行大小位置调整，具体如。（7）选用选择工具，在确定当前编辑图层为素材图像所在的图层，选中素材的背景，并删除背景，可以用橡皮擦工具辅助擦除背景。（8）打开花瓣素材文件，对花瓣素材图像进行编辑删除背景

24、。上一页 下一页 返回8.3 聚划算店铺促销图的视觉设计（9）选用选择工具与移动工具，将部分花瓣图像移到目标文件中，用CTRL+T 命令进行大小与位置的调整。（10）使当前的工作图层分别为花瓣素材所在的图层，复制花瓣素材所在的图层，建立副本，然后用编辑菜单中的垂直翻转命令将花瓣素材翻转，适当设置倒转以后的花瓣图像所在图层的透明度。（11）运用软件的圆角形状工具，设置绘图方式为形状，描边选项为无，设置圆角半径为4 个像素。上一页 下一页 返回8.3 聚划算店铺促销图的视觉设计（12）创建一个新图层以后，在图像的右上角绘制一个圆角矩形形状，并使圆角矩形在合理的位置。双击圆角矩形形状所在的图层，设置

25、图层样式，首先设置“斜面与浮雕”样式，在结构模块中，设置样式为内斜面，方法为雕刻柔和，深度为42%，方向向上，大小为4 像素，软化为3 像素，阴影角度为120 度。（14）设置完成渐变叠加与浮雕图层样式以后。（15）在软件的工具箱中选择多边形套索工具，设置羽化值为0 像素，上一页 下一页 返回8.3 聚划算店铺促销图的视觉设计（16）单击前景色按钮设置前景色，选取一种黄色，也可以设置RGB 为（246、221、3）。（17）在圆角矩形形状的左上角，运用多边形套索工具绘制一个斜线相互平行的条形选区，创建一个新图层后用前景色填充。（18）在图层面板，在条形填充与圆角矩形形状之间，按住ALT 键单击，创建剪切图层，然后运用文字工具，设置字体为方正粗宋简体，大小为18 点，字符间距为5，颜色为白色，斜体。（19）在圆角矩形形状范围内输入文字“厂家直销”，并将文字移到合适的位置，最后效果如图8.51 所示。上一页 返回图8.37 设置渐变选项返回图8.38 渐变填充返回图8.51 最后效果图返回