




已阅读5页,还剩3页未读, 继续免费阅读
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
清新教育提供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
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 重庆市中医院自身抗体临床解读考核
- 中国天然橡胶项目投资计划书
- 中国可溶性聚四氟乙烯项目创业计划书
- 中国氰乙酸正辛酯项目商业计划书
- 运城市人民医院管理决策能力考核
- 鹤岗市中医院复杂颅底肿瘤多学科协作考核
- 廊坊市中医院质量检查组织考核
- 2025年颗粒剂工艺操作流程风险评估方案
- 中国高性能沥青基碳纤维项目投资计划书
- 中国水性环氧漆项目经营分析报告
- 校本学习辅导资料编写及奖励方案
- GJB《质量分析报告》模板
- Flexsim(仿真软件)中文版教程
- GB 31187-2014体育用品电气部分的通用要求
- 商标法课件新
- 测量血压的正确方法(讲课完整)课件
- 在役隧道结构安全、健康监测与评估
- 人事档案转递通知单
- 医学专题心肺脑复苏新1
- 现代电池技术:第6章 氢-镍电池
- 汽车吊接地比压计算
评论
0/150
提交评论