10个你可能不知道的前端PS技巧

内容简介：10个你可能不知道的前端PS技巧

PS是各位前端开发者的基础技能，高效利用PS不仅能提高工作效率，更能带来身心上的愉悦——Jack Ma

在前端切图工作里，本质来说就是“选择图层-获取信息、编辑图层-导出图层”的过程，本文主要介绍在这个过程里的一些技巧。

1、面板

这里的面板指的是在顶部主菜单“窗口”下可开启的窗口。最常用的几个窗口必属“属性”、“信息”、“图层”，屏幕够大的同学建议把它们都展开在界面右边。那为什么说这几个面板很常用呢？下面会慢慢介绍到。

2、选择图层

在移动工具(V)下这个操作非常常用：option+右键/command+左键(windows:alt+右键)，在psd里快速选定图层，点哪选哪。不需要勾选“自动选择”图层选项也能快速选择图层。

而笔者比较喜欢用“option+右键”而不是“command+左键”，因为这个操作经常需要结合视图缩放(option+滚轮，windows:alt+滚轮)，这样来回切换会更方便。

3、属性面板

结合快速选择图层，属性面板可以展示不少图层信息，而这些信息在开发中非常有用：

• 可查看文本的字体大小和颜色等
• 可查看形状工具(U)画出的形状的填充色和圆角等信息
• 可查看智能对象的宽高

可以看出属性面板主要展示的是PS比较“原生”的对象的信息。

4、信息面板

“信息面板”和“属性面板”类似，只不过前者展现的信息和后者不太一样。

比如，快速选中图层后，如果在“属性面板”不能看到图层的宽高信息，可以 command+T (windows:ctrl+T)打开变形操作，在“信息”面板一定可以看到图层的 宽高 信息，看完后记得按esc顺手退出变形 工具 以免不小心误操作。

妈妈再也不用担心我矩形选框工具(M)取大概估算元素的宽高值啦……

5、吸管工具(I)

这个工具最基本的功能是吸取图层颜色，这里有几个技巧可以说一下：

• 左键点击吸取，颜色会实时展示在“信息面板上”；

• 设计稿经常会看到一些不太明显的渐变色背景色的模块，怎么才能快速知道这是属于渐变色还是纯色的块？按住左键拖动吸管，颜色信息展示在“信息面板”上，通过观察即可知道到底要用background-color还是linear-gradient；

• 右键需要获取的颜色点，然后会出现菜单，最后一项是“拷贝颜色的十六进制代码”，这里可以快速拷贝色值供css代码用；

• 如果图层有不透明度，请记得先把不透明度恢复到100%才可以吸取，否则色值会不正确，右键拷贝的色值也会不对；
• 按住shift键然后吸取，这样会吸取多个色值，并且依次记录在“信息面板”上，这个用于对比色值很有用，在图上相应位置也会标识出顺序，如下图：

6、获取margin的另一种方式

在移动工具下(V)，选中图层后，长按command(windows:长按ctrl)键，然后移动鼠标，此时鼠标停留处的图层会出现与选中图层之间的一些紫色标注的一些距离信息，这个用于获取margin比较有用。

7、复制css

在图层面板，右键图层，有个“复制css”选项。这个功能在PS里很早就加进来了，可能很多同学都觉得挺鸡肋的，觉得这是给设计师学习css用的。但是其实里面的有一些信息还是挺有用的，可减少一些工作量，比如下面一段css：

.圆角矩形_584 {
  border-radius: 15px;
  background-color: rgb(0, 0, 0);
  opacity: 0.302;
  box-shadow: 6px 10.392px 121.83px 9.17px rgba(79, 48, 193, 0.004);
  position: absolute;
  left: 283px;
  top: 306px;
  width: 136px;
  height: 32px;
  z-index: 34;
}

.矩形_1 {
  background-image: -moz-linear-gradient( 90deg, rgb(255,255,255) 0%, rgba(255,255,255,0) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(255,255,255) 0%, rgba(255,255,255,0) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(255,255,255) 0%, rgba(255,255,255,0) 100%);
  position: absolute;
  left: 348px;
  top: 572px;
  width: 113px;
  height: 78px;
  z-index: 25;
}

我们可以用到里面的圆角、背景色、透明度、阴影、宽高、渐变信息，不过说实话代码写法真的挺丑的，比如渐变那个，要进行一些人工的干预处理。不过总归可以少输入一点代码减少工作量，有些信息也不用麻烦各种手段去取、去猜……

一般来说只是 形状工具(U)画出来的形状 才会有比较有用的信息，如果是图片类的图层拷贝出来的信息一般只有宽高信息可以用。

8、复制图层到新文件编辑

经常会遇到一些设计稿特别大、而我们又不得不进行一些编辑的情况，很容易会出现下面的情况：

所以，从现在起你就应该这样做：

1. 选中图层(组)
2. 图层面板右键图层，选择“复制图层”
3. 在弹出的面板的文档单选框里选择“新建”，如下图

接下来就可以看到在新文件里放置了该图层，然后就可以放心的进行“裁剪、变形、合并图层”等操作了……真的 一点都不卡 。

9、资源生成器

这个功能在最新的几个版本PS里都得到支持，用于切图非常方便。具体操作方法：

1. 首先打开设置，在“增效工具”下，勾选“启用生成器”；然后在主菜单的“文件”-“生成”，勾选“图像资源”
2. 在图层面板选择要导出的图层，把文件名改为如“icon.png”带图片扩展名的图层名，然后就完成了资源生成的全部步骤，就这么简单。生成的资源在文件同目录下、以“-assets”结尾的文件夹里。

图层名可以怎么设置呢？下面列出了一些例子。

图层名	导出图片
logo.png	生成png-32，含透明通道
logo.png8	生成png-8
logo.png24	生成png-24，不含透明通道
img/logo.png24	资源保存在img下
logo.jpg	质量90%
logo.jpg8	质量80%
logo.jpg5、logo.jpg50%	质量50%
50% logo@1x.png	宽高为原图的50%
50% logo@1x.png + 100% logo@2x.png	用“+”或“,”分割可生成多份资源

图片格式还可以是gif、svg甚至webp等。可以看出资源生成器非常强大，甚至图层编辑后也会同步更新到导出的资源里。要注意图层名要唯一，否则资源会被覆盖。

以上只是一部分配置，有兴趣的同学可以参考文后资料看详细的语法。

10、微调导出的icon

网页用rem单位的同学都应该知道，如果png的icon的宽高四周没有空出1像素的透明空白，网页上的icon效果四周很可能会被“吃掉”一点点。所以在icon四周留出1像素的空白很必要。“资源生成器”不能提供这种设置，但是有以下方法可以做到：

1. 图层面板，选中图层(可按shift选多个图层，批量处理相似图层)，右键，选择“导出为”
2. 在弹出面板可设置画布大小，宽高可设置比原来的尺寸大2像素即可，2像素会分配到上下左右各1像素。如下图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。