此外,当您必须以不同比例切割和切片数百个图层时,它变得越来越复杂。

在设计过程中进行切割和切片无疑是耗时的工作。

您需要的是一个插件。

但是这些方法在加快剪切和切片过程中没有多大帮助。

当然,在Photoshop中复制合并,将图层导出到文件切片功能的功能。

导出的文件也具有各种比例和分辨率,例如iPhone或HDPI的视网膜,Android的LDPI,MDPI和XHDPI。

然后,您可以为iPhone,Android或桌面设备导出图层。

Cut&Slice Me是Photoshop的扩展程序,用于简化剪切和切片设计的过程

剪切并切片我安装

下载插件 (以及稍后将要使用的示例PSD文件)。

要使用Cut&Slice Me插件,您至少需要在计算机上安装Adobe Photoshop CS6 / CC

按照说明进行操作,然后重新启动您的Photoshop(如果已打开)。

下载完成后, 双击CutAndSliceMe.zxp文件Adobe Extension Manager将自动开始安装。

使用Cut&Slice Me轻松导出Photoshop图层

要使该插件在您的Photoshop右侧面板中可见,只需转到窗口>扩展>剪切并切片我

使用Cut&Slice Me轻松导出Photoshop图层

入门

Cut&Slice Me易于使用,但您必须首先做一些工作,以确保插件在切割和切片时有效地工作。

您还需要要导出的图层组名称的末尾添加“ @”符号

首先,您必须将图层对象组织到文件夹中,因为Cut&Slice Me仅检查组名。

切片定义的大小

要将导出的文件保持在所需的大小,请执行以下操作:

在导出过程中将删除所有不必要的透明像素。

1.确保已在 编辑”>“首选项”>“常规 ”中选中了“捕捉矢量工具和转换为像素网格”设置。

2.然后,为所需大小创建一个矩形矢量层。

3.将此形状放在组的最顶部,这样会告诉插件您要导出的区域大小。最后,将形状命名为“#”

使用Cut&Slice Me轻松导出Photoshop图层

不同的国有资产

处理通常具有不同状态的按钮时,可以使用一种特殊的方法。

1.在导出按钮时,为按钮创建一个新的图层组,并在其名称中包含“ _BTN”标签

组状态名称应如下所示:

2.在组按钮内,创建另一个包含按钮状态的组,并根据状态命名它们

  • 正常
  • 徘徊
  • 点击/按下
  • 已选
  • 残障人士

除了按钮之外,此规则还可应用于状态可能不同的其他元素例如以下屏幕截图。

使用Cut&Slice Me轻松导出Photoshop图层

使用Cut&Slice Me

如前所述,我们将使用Cut&Slice Me主页上的 PSD设计样本文件。

现在,让我们看看Cut @ Slice Me如何为您提供设计帮助。

将示例设计切片并导出到iPhone。

您可以选择切片所有资产,子组或选定的图层。

如前所述,当前的Cut&Slice Me可让您导出到iPhone,AndroidWeb

使用Cut&Slice Me轻松导出Photoshop图层

导出过程完成后,您将发现结果文件位于原始PSD文件位置 (参见图片)。

使用Cut&Slice Me轻松导出Photoshop图层

因此,让我们尝试将插件与其他设计一起使用。

到目前为止,我假设您对插件的工作原理已有扎实的了解。

使用Elemis Freebies的 Webpaint模板 ,您将看到如何从头开始设置插件规则

使用Cut&Slice Me轻松导出Photoshop图层

以下屏幕快照比较了准备使用之前和之后各层的结构。

为简单起见, 我们仅将设计的一半用于导出。

重新排列并重命名图层的状态后,我们到达右侧的内容(蓝色)。

左侧(红色)是原始图层。

使用Cut&Slice Me轻松导出Photoshop图层

由于设计模板将用于网络,因此在插件面板中,选择桌面的设备模式(显示器 图标)。 击中削减所有资产

使用Cut&Slice Me轻松导出Photoshop图层

现在,已定义的资产已成功切片,就像这样。

使用Cut&Slice Me轻松导出Photoshop图层

该插件执行设计的完整分辨率,然后按比例缩小以导出为不同大小

请注意,如果要对自己的设计进行切片,则需要以最高分辨率进行处理,因为最终图像用于Android中的xhdpi和用于Apple设备中的视网膜

结论

通过对层组织进行更多的规范,甚至可以轻松,精确地对复杂的设计进行切片。

使用此Photoshop插件进行剪切和切片时,不会浪费任何时间。


翻译自: https://www.hongkiat.com/blog/cutslice-me-photoshop/

相关文章:

  • 2021-12-22
  • 2021-04-04
  • 2021-12-18
  • 2022-12-23
  • 2021-10-27
  • 2022-02-11
  • 2021-08-01
  • 2021-10-22
猜你喜欢
  • 2021-07-07
  • 2021-11-30
  • 2021-10-07
  • 2021-11-08
  • 2021-12-14
  • 2021-08-02
  • 2022-12-23
相关资源
相似解决方案