1.1 设计师必知的Photoshop CC软件7项新功能
Photoshop CC的面世意味着Adobe提倡的“创意云”时代的到来，Photoshop软件在互联网时代的用途也因此更加广泛。在本节中，作者将与大家分享Photoshop CC在淘宝店面设计方面新添加的7项实用新功能。
1.1.1 无损缩放让大图、小图都清晰
通常，当我们使用Photoshop软件对素材图像进行放大时，总会影响图像的品质，而现在Photoshop CC新增的图像无损缩放功能帮助我们很好地弥补了这一遗憾。但要注意，无损缩放是相对的，因此，尽可能地提高素材图像的品质才能保证最终的设计效果和质量。
位置 图像→图像大小。
作用 可以运用这一功能制作网站首页轮播广告中经常用到的图像效果，从而展现网站更为精美的视觉效果。
应用技巧分享
步骤1 打开一幅素材图像（如图1.1所示），执行“图像→图像大小”命令，然后在弹出的对话框中设置重新取样为“保留细节（扩大）”，即可更改图像的尺寸为我们所需要的数值，如图1.2所示。
图1.1
图1.2
步骤2 通过调整“减少杂色”还可以有效降低放大图像过程中所产生的杂点干扰。
步骤3 以前我们在使用Photoshop软件修编图像时，只能通过按Ctrl+T组合键缩放图像来实现，而且反复缩放图像会损失图像的像素。
步骤4 图像运算结束后，我们发现图像的尺寸发生了变化。选择裁切工具，将我们需要的部分裁切出来，如图1.3所示。
图1.3
图像处理完成以后，自然需要将图像进行锐化处理。新的智能锐化滤镜让我们可以更加自如地提高图像清晰度，同时最大限度地减少其他因素的影响。在实际应用时，我们可以控制参数的数量、半径，降低噪声，以及选择模糊类型。
位置 滤镜→锐化→智能锐化。
应用技巧分享
步骤1 打开需要进行锐化操作的图像。除了以前我们常用的3个可控参数以外，我们还可以控制锐化效果在阴影和高光中的应用程度，如图1.4所示。
图1.4
步骤2 在输出最终设计稿时，经常会由于我们没有对图像进行锐化操作而出现效果模糊的情况，因此我们一定要注意对图像进行最后的锐化操作之后再输出保存。实际应用效果对比如图1.5、图1.6所示。
图1.5
图1.6
1.1.2 消除抖动，让宝贝更靓丽
清除拍摄抖动对照片的影响是大家对Photoshop CC期待已久的功能。该功能允许设计师自动降低由于拍摄抖动引起的图像模糊。Photoshop系统会自动分析抖动模糊区，选择最适合的图像防抖算法，确定模糊的性质，对整个图像进行适当的更正。
位置 滤镜→锐化→防抖。
应用技巧分享
步骤1 素材分析。打开一幅需要矫正抖动的素材图像，如图1.7所示。如果照片抖动得太厉害，作者认为就不能再为了炫耀技术而强行运用该功能进行矫正了。
图1.7
步骤2 使用该功能可将抖动图像的清晰度最大化并同时将杂色和光晕最小化。此外，系统还允许我们对多个区域进行微调，以取得外观自然的高品质结果，如图1.8所示。
图1.8
步骤3 单击“高级”选项，可清晰地观察到消除抖动的细节。关于“模糊描摹设置”中的4个重要控制参数的作用，大家可将光标放置于标签文字之上，帮助说明文字就会自动显示，如图1.9所示。
图1.9
步骤4 效果对比十分明显。如图1.10、图1.11所示。
图1.10
图1.11
1.1.3 圆角矩形及CSS复制
圆角矩形工具最大的变化在于我们使用圆角矩形工具绘制一个形状后，在“属性”面板中可以自由更改所有的圆角弧度，也可以单独调整每个边角。
位置 工具箱→圆角矩形工具。
应用技巧分享
步骤1 选择圆角矩形工具，绘制出图1.12所示的圆角矩形。打开“属性”面板，对其进行如下的调节，如图1.13所示。
图1.12
图1.13
步骤2 为形状添加特定的图层样式。执行“图层→图层样式”命令，在弹出的对话框中为圆角矩形添加渐变叠加样式和投影样式，如图1.14、图1.15所示。
图1.14
图1.15
步骤3 通过美化圆角矩形的外观（包括但不限于渐变叠加和投影），我们获得了满意的效果。正如Adobe描述的创意云（Creative Cloud）那样，现在我们可以轻松地将此创意效果应用到网页设计之中。我们只需在圆角矩形的图层缩略图上单击鼠标右键，选择“复制CSS样式”命令，然后将其粘贴在网页设计CSS代码编辑器的窗口中即可实现效果的跨平台移植。
步骤4 如果我们想首先预览一下生成的CSS代码，可按住Ctrl键不松开，然后用鼠标右键单击这个图层，即可看到CSS代码，如图1.16所示。
图1.16
现在我们学习网页设计还担心不会编写CSS样式代码吗？放心大胆地学习Photoshop CC（Creative Cloud）吧，创意云会有许多意想不到的效果。如果您还有点担心，下面作者再与大家分享一个网页设计中的“干货”：插件CSS3Ps。
CSS3Ps是一款基于云的免费Photoshop插件，可以将Photoshop图层特效转为CSS3代码。可以对图层的一些特效（如阴影、发光、圆角、渐变等）进行CSS3.0的完整代码输出。
插件下载地址：http://css3ps.com/Download/。
提示大家，如果Photoshop软件已经开启，那么在安装该插件之前需要暂时先将Photoshop软件关闭。
应用技巧分享
步骤1 执行“开始→所有程序→Adobe Extension Manager CC”命令在“Adobe Extension Manager”中单击“获取”按钮，接下来就会对插件进行安装。插件安装完成后如图1.17、图1.18所示。
图1.17
图1.18
步骤2 这样我们就可以在Photoshop中选择需要转换为CSS样式代码的图层，实现相应的操作了。可以在Adobe Photoshop菜单项“窗口→ 扩展”中查看到相关的插件信息。
步骤3 现在我们就可以使用该插件了。当然，前提是我们要先设计好自己喜欢的图形效果。选择我们需要输出CSS3.0样式的图层，如图1.19所示。
图1.19
步骤4 接下来，执行“文件→脚本→浏览……”命令，然后在弹出的对话框中选择“CSS3Ps.jsx”，如图1.20、图1.21所示。
图1.20
图1.21
然后即可在浏览器中看到所转换的CSS样式代码及效果了。此时，直接将该代码文件保存，等后期需要使用时，直接将该代码复制到样式文件中就可以了，如图1.22所示。这样将节省我们很多编写代码的时间和精力。最明显的优点是，我们再也不用为“不认识代码”而发愁了！让我们为这个小插件点个赞吧！
图1.22
1.1.4 形状和路径的应用更简单
使用Photoshop CC提供的多种形状和路径选择，我们在进行广告设计时可以同时选取多个路径、形状和矢量蒙版，而不需按多次鼠标即可完成更多任务。即使在拥有多条路径的多图层文件中，也可以使用新的滤镜模式，直接在画布上锁定路径（及任何图层），如图1.23、图1.24所示。
图1.23
图1.24
此外，在Photoshop CC中虚线的绘制也变得十分便利，我们只需在“实时形状属性”面板中直接选择需要的虚线类型，然后就可进行绘制，如图1.25、图1.26所示。
图1.25
图1.26
1.1.5 智能移除，让页面宝贝更突出
智能移除工具Camera Raw的工作原理与我们熟悉的修复画笔工具的功能类似。我们只需要在素材图像上基于需要移除的对象绘制一个选区，然后拖曳修复控制点（绿点）至适合的区域，便可实现智能移除和更换。
智能移除工具主要包括两种修复类型，即修复和仿制模式：前者的采样区域是纹理、光照和阴影；后者适用于图像采样面积。我们可以设置画笔的大小和不透明度级别来影响移除杂质的强度。
位置 滤镜→Camera Raw滤镜。
应用技巧分享
步骤1 如图1.27所示，在拍摄宝贝的照片时，不小心出现了一个多余的钱包一角。所以在设计页面的推广效果时，首先要移除这部分多余的内容。
图1.27
步骤2 打开Camera Raw滤镜，单击“污点去除”命令按钮，然后通过调整笔触的大小、选区的羽化强度及移除对象的不透明度参数（如图1.28所示），即可快速实现多余杂质的移除。
图1.28
1.1.6 径向滤波器，让宝贝尽显魅力
Camera Raw径向过滤工具，允许我们创建椭圆以选定区域而进行图片的局部调整。这为淘宝店面设计师将宝贝转变为版面的视觉焦点提供了便利。当然也可以给宝贝添加多个径向过滤器效果，并且为每个区域应用不同的调整。
位置 滤镜→Camera Raw滤镜。
应用技巧分享
步骤1 设计师希望将产品置身于特定的环境之中，以此增加产品的实际体验度。如图1.29所示，如果我们希望销售的是实木木桌，我们就需要将木桌作为画面的视觉焦点，同时弱化沙发对场景的影响。
图1.29
步骤2 打开Camera Raw滤镜，我们通过调整对比度、高光、阴影、清晰度、锐化等参数，使得我们的目标产品得到了强化，如图1.30所示。
图1.30
TIPS 模糊和锐化的功能刚好相反，所以在降低“锐化”数值的同时，实际就是在强化周边环境的模糊度。
1.1.7 更智能化的切图功能
将智能切图这一强大的功能应用在图像输出上非常方便，我们再也不必为后期在Dreamweaver软件中排版而发愁了。在本节中，作者就和大家分享这一便捷的操作方式。
TIPS 要确保正常使用智能切图，需要先将Photoshop CC升级到14.1.2版。这是必须的，请大家一定要注意。
步骤1 将需要输出的文档中多余的内容进行隐藏或删除。如图1.31、图1.32所示，打开图层面板，将PSD源文件中的图层或者群组按照我们想要输出的文件名称和格式进行命名。
图1.31
图1.32
TIPS 在对图层或图层组进行命名时，一定要包含文件的名称和格式类型。否则将无法实现对图像的智能裁切。
步骤2 要从一个图层或图层组生成多个资源，需要用逗号（,）分隔资源名称。例如，以下图层名称生成3个资源：Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png。此外，系统还允许我们使用加号（+）作为图像资源名称之间的分隔符。例如：“42% Rounded_rectangle_1.png24+100×100 Rounded_rectangle_1.jpg90%”等同于“42% Rounded_rectangle_1.png24, 100×100 Rounded_rectangle_1.jpg90%”。
TIPS 图层名称不支持特殊字符“/”“:”和“⋆”。
步骤3 执行“文件→生成→图像资源”命令。它是保证我们完成智能裁切图像的关键操作，如图1.33、图1.34所示。
图1.33
图1.34
步骤4 执行“文件→存储为”命令。在弹出的对话框中，我们就会发现在保存PSD格式文件的同时，切图文件也会自动生成到与源文件相同路径下的子文件夹中，如图1.35所示。
图1.35