PHOTOSHOP CC与前端的那些事

   自动切图(含WebP、SVG格式):

  前端开发人员经常需要将很多图层切出成独立的图片。有了自动切图功能,无需花更多时间来切图了。只需在图层名后添加相应格式后缀(如.png),即可自动输出所需格式的图片。

  请保持菜单“编辑->首选项->增效工具”中的“生成器”为启用状态;

  依次点击菜单“文件->生成->图像资源”,确认该菜单项已被勾选;


  试着修改某个图层命名(如 iTunes.png),然后检查当前 psd 文件所在目录下的“文件名-assets” 的目录,打开此目录,发现 iTunes.png 已经躺在里面了。


  常用技巧:


  @2x Retina 图片的输出,在图层前添加 200% 即可,如 200% logo@2x.png ;

  开启 WebP、SVG 格式的自动输出: 新建 generator.json 文件,内容如下:

  {

  "generator-assets": {

  "svg-enabled": true,

  "webp-enabled": true

  }

  }

  将此配置文件拷贝至: Windows: (Win+R后输入 %USERPROFILE% )目录下,如 C:Usersxxx Mac OS: $HOME 如“Macintosh HD>Users>xxx” 目录下 WebP 输出暂只支持 Mac OS。

  复制 CSS

  Photoshop CC 终于推出了“复制CSS” 功能。它能让开发人员快速获取形状的 CSS 代码。其实不少设计师也很想学习 CSS,有了这个功能,可以让这些爱学习的设计师熟悉 CSS 代码与图形的对应关系;


  右击图层面板上的图层,选择“复制 CSS”,或点击菜单“图层->复制 CSS”;

  多个图层的批量获取,请选择多个图层,执行 Ctrl+G,将所选图层转为图层组。然后在该组上右击,选择“复制 CSS”,即可批量获取 CSS 代码。

  智能对象暂不支持“复制 CSS”功能,您可以栅格化该图层再来使用。

  当前的版本的此功能,包含了很多冗余信息和不太友好的写法,可能不是大家真正需要的。于是 ISUX 前端团队改进了这个功能,您可以下载“PhotoshopCopyCSS”来增强 Photoshop CC 自带的“复制 CSS”功能,提升 CSS 代码的真正采用率;目前的优化有:

  * 自动识别 CSS Sprite 图片,获取 background-position 信息;

  * 自动识别是否图标;

  * 优化 CSS3 渐变、文字、边框、阴影等 CSS 代码;

  * 优化 RGB 颜色值成 十六进制颜色;

  * 去除冗余 CSS 属性,如 position, z-index, left, top 等。

  您也可以反馈更好的建议,让这个功能真正为大家所用。

  图层管理

  前端开发同学接手的 psd 文档,往往有大量图层,我们需要对其进行整理。例如删除空白、锁定、文本等图层。我们还可以通过图层类型、名称、效果、属性等条件进行快速定位图层。


  使用此功能可以很方便定位到当前选定图层,非常适合含有大量图层的 psd 文档。

  另外隔离图层也是个很不错的功能。开启隔离图层功能之后,我们可以通过移动选择工具,点选画布上的内容,找出我们需要的图层将其整理成一个独立的 psd 文件。


  WebP 插件

  WebP 是 Google 为减少数据量、加速网络传输的目的而开发的图片格式。特别适合移动端图片的传输。大大节省带宽,目前只有 Google Chrome 浏览器对其原生支持。

  Photoshop CC 的 Mac OS 版自带输出 WebP 功能。Windows 下您可以下载此插件来输出 WebP 格式。安装后,可以在 Photoshop 菜单“文件->另存为” 对话框中选择“WebP格式图片”。

  WebP for Photoshop v0.5b5, 16 December 2013 Mac | Win

  动作条件

  Photoshop CC 新增了动作条件,可以根据不同条件执行命令或其他动作。


  智能参考线/使用图层颜色

  这两个功能并不是 Photoshop CC 的新功能。为什么要在这里说呢,因为它能辅助我们一秒居中对齐、一秒贴边,这个非常实用。另外也建议设计师使用图层颜色来标出改动位置,这样前端开发同学便能快速定位图层。


分类:

  • PS入门教程
时间: 2024-11-10 01:10:47

PHOTOSHOP CC与前端的那些事的相关文章

Photoshop CC 与前端那些事

  Photoshop 是视觉设计师最强有力的武器之一,其实 Photoshop 也为前端开发同学带来很多惊喜. 特别是从 Photoshop CC 版本开始,它变得越来越有趣.今天笔者就其中几个新特性给大家介绍一下.如果您也有更多新的发现,请在下方留言与大家进行讨论. 自动切图(含WebP.SVG格式): 前端开发人员经常需要将很多图层切出成独立的图片.有了自动切图功能,无需花更多时间来切图了.只需在图层名后添加相应格式后缀(如.png),即可自动输出所需格式的图片. 请保持菜单"编辑->

PHOTOSHOP CC 2014新功能详解

  Adobe在6月18日发布了产品线2014年的重大更新,今天@PS梦工场 带领大家一起领略一下Photoshop CC 2014版的新增功能. Adobe Photoshop CC 2014 附带数种新功能和增强,可极大地丰富您的数字图像处理体验.继续阅读对新增功能的快速介绍以及提供详细信息的资源链接. 智能参考线 Photoshop CC 2014 引入了许多有用的智能参考线增强功能: 按住 Option(Mac)/Alt(Win)键并拖动图层: 如果在按住 Option(Mac)或 Al

Photoshop CC 14.0新功能与安装教程

享有更多的自由.速度和功能,让令人惊叹的影像栩栩如生.您可取用数十种的新增和重新研发的功能,包括市面上最先进的锐利化工具.直接从 Photoshop CC 将作品分享至 Behance,以获得回馈并展示您自己的项目.每当新功能一发布,就能立即取用.完整的创意挥洒空间,一个应用程序就满足您的所有需求.一切尽在 Creative Cloud. Photoshop CC 提供了众多新增功能.您可使用全新的智能型锐利化 工具使细节更为鲜明,还可将低分辨率的相片转化为高分辨率的大型影像,更可取得所有先进的

Photoshop CC也能创建网页

Adobe公司发布了全新的Creative Cloud系列创意软件.不出所料,新一代软件更加强调不同组件间的互联互通,而在本周召开的台湾Adobe MAX用户大会上,来自Adobe的创意解决方案专业讲师Paul Burnett就专门对CC系列在网页设计工作中的新特性进行了讲解. 据介绍,Adobe为Creative Cloud系列创意软件融入了全新的CSS Property功能,该功能将赋予诸如Photoshop CC以及Illustrator CC软件导出CSS代码的能力.以往用户只能通过这些

Photoshop CC常用快捷键

Photoshop CC常用快捷键          1.工具箱 移动工具 [V] 矩形.椭圆选框工具 [M] 套索.多边形套索.磁性套索 [L] 快速选择工具.魔棒工具 [W] 裁剪.透视裁剪.切片.切片选择工具 [C] 吸管.颜色取样器.标尺.注释.123计数工具 [I] 污点修复画笔.修复画笔.修补.内容感知移动.红眼工具 [J] 画笔.铅笔.颜色替换.混合器画笔工具 [B] 仿制图章.图案图章工具 [S] 历史记录画笔工具.历史记录艺术画笔工具 [Y] 像皮擦.背景橡皮擦.魔术橡皮擦工具

Photoshop CC怎么画箭头

  我们在工作中常常会用到标注的地方,有的时候就需要使用箭头来作为引导了,在pscc中箭头的效果能给我们带来许多乐趣,下面就跟着小编一起来看看在Photoshop CC怎么画箭头,希望能够帮助到大家. Photoshop CC怎么画箭头: 1.首先打开 photoshop CC,新建一个 500px X 500px 的文档.   2.在工具栏里找到"矩形工具",如图所示.   3.用鼠标右击它,或者用左键长击它,就会出现一个下拉菜单,在下拉菜单里找到"直线工具",点

Photoshop CC如何制作动画里萦绕美女身边的光线

  在网上我们可以看到许多图片上人物身上都会有光圈环绕,这个效果怎么做出来呢,其实在pscc中能够很简单的通过路径和者画笔做出这种效果,下面小编就给大家详细的讲解一下在Photoshop CC如何制作动画里萦绕美女身边的光线. 1.首先打开PHOTOSHOP CC软件,单击菜单[文件]-[打开]命令,打开一张美女图片.     2.点击左侧工具栏中的钢笔工具,在图片上画出一条螺旋的曲线,慢慢调整好后如图.   3.点击图层面板的新建按钮,新建一个图层,选择画笔工具,笔尖选择最小,点击路径选择工具

使用Photoshop CC中的ACR滤镜添加分离色调效果

  新版的Photoshop CC中随着Camera Raw滤镜的加入,我们能使用Camera Raw滤镜中的灰度/HSL面板与分离色调面板一次性完成将照片处理为黑白并添加分离色调效果的操作.这种操作同样是非破坏性的,可以随时根据我们的需要,随时更改设置.更重要的是,我们可以在调整过程中随时对任意图层进行该操作,而无须向传统方式那样在打开文件时通过"打开为"命令进入ACR编辑模式. 操作步骤 01 打开文件 执行"文件>打开"命令,打开这张照片.执行"

Photoshop CC防抖滤镜详细解析实测

提起Photoshop的这个防抖滤镜,其实由来已久,记得第一次听说它还是在一年多以前的Adobe MAX 2011开发者大会上.由于种种原因,这项功能并未出现在当年的Photoshop CS6,而是选择了一年后发布的Photoshop CC(CREATIVE CLOUD).那么实际效果究竟如何?是否真的像Adobe介绍的那样神奇?一篇文章带大家亲身体验一下. 图1 迸发的CC启动画面,会让你的思绪也迸发么? 其实手抖模糊修正已经不是第一次被Photoshop相中了,之前大家熟知的智能锐化中便有一