懂代码设计更容易!PS CC与前端那些事.doc

清新教育提供1.办公2.平面3.网页4.室内5.模具6.淘宝7.UI8. 动漫9.SEO培训10.程序（PHP，JAVA，IOS，安卓）等10大课程培训 _懂代码设计更容易！PS CC与前端那些事【PConline 教程】Photoshop是视觉设计师最强有力的武器之一，其实Photoshop也为前端开发同学带来很多惊喜。特别是从Photoshop CC版本开始，它变得越来越有趣。今天笔者就其中几个新特性给大家介绍一下。如果您也有更多新的发现，请在评论中留言与大家进行讨论。Photoshop CC与前端那些事一、自动切图（含WebP、SVG格式）前端开发人员经常需要将很多图层切出成独立的图片。有了自动切图功能，无需花更多时间来切图了。只需在图层名后添加相应格式后缀（如.png），即可自动输出所需格式的图片。1、请保持菜单“编辑-首选项-增效工具”中的“生成器”为启用状态；2、依次点击菜单“文件-生成-图像资源”，确认该菜单项已被勾选；图01图02试着修改某个图层命名（如iTunes.png），然后检查当前psd文件所在目录下的“文件名-assets”的目录，打开此目录，发现iTunes.png已经躺在里面了。图03常用技巧：1、见下图；图042、2x Retina图片的输出，在图层前添加200%即可，如200%logo2x.png;3、开启 WebP、SVG 格式的自动输出：新建generator.json 文件，内容如下： generator-assets: svg-enabled: true, webp-enabled: true 将此配置文件拷贝至： Windows: （Win+R后输入 %USERPROFILE% ）目录下，如 C:Usersxxx Mac OS: $HOME 如“Macintosh HDUsersxxx”目录下WebP输出暂只支持Mac OS。二、复制CSSPhotoshop CC终于推出了“复制CSS” 功能。它能让开发人员快速获取形状的CSS代码。其实不少设计师也很想学习CSS，有了这个功能，可以让这些爱学习的设计师熟悉CSS代码与图形的对应关系；图051、右击图层面板上的图层，选择“复制CSS”，或点击菜单“图层-复制CSS”；2、多个图层的批量获取，请选择多个图层，执行Ctrl+G，将所选图层转为图层组。然后在该组上右击，选择“复制CSS”，即可批量获取CSS代码。3、智能对象暂不支持“复制CSS”功能，您可以栅格化该图层再来使用。当前的版本的此功能，包含了很多冗余信息和不太友好的写法，可能不是大家真正需要的。于是 ISUX 前端团队改进了这个功能，您可以下载“PhotoshopCopyCSS”来增强Photoshop CC自带的“复制 CSS”功能，提升CSS代码的真正采用率；目前的优化有：* 自动识别CSS Sprite图片，获取background-position信息；* 自动识别是否图标；* 优化CSS3渐变、文字、边框、阴影等CSS代码；* 优化RGB颜色值成 十六进制颜色；* 去除冗余CSS属性，如position, z-index, left, top等。三、图层管理前端开发同学接手的psd文档，往往有大量图层，我们需要对其进行整理。例如删除空白、锁定、文本等图层。我们还可以通过图层类型、名称、效果、属性等条件进行快速定位图层。图06（7-8）图07（9-10）使用此功能可以很方便定位到当前选定图层，非常适合含有大量图层的psd文档。另外隔离图层也是个很不错的功能。开启隔离图层功能之后，我们可以通过移动选择工具，点选画布上的内容，找出我们需要的图层将其整理成一个独立的psd文件。图08四、WebP插件WebP是Google为减少数据量、加速网络传输的目的而开发的图片格式。特别适合移动端图片的传输。大大节省带宽，目前只有Google Chrome浏览器对其原生支持。Photoshop CC的Mac OS版自带输出WebP功能。Windows下您可以下载此插件来输出WebP格式。安装后，可以在Photoshop菜单“文件-另存为”对话框中选择“WebP格式图片”。WebP for Photoshop v0.5b5, 16 December 2013Mac |Win五、动作条件Photoshop CC新增了动作条件，可以根据不同条件执行命令或其他动作。图09六、智能参考线/使用图层颜色这两个功能并不是Ph