Photoshop提取:移动图形制作继续加力

08年1月

什么是提取资产

在Photoshop中创建一个comp。

Photoshop CC 2014的全新Extract Assets功能为后续繁忙的应用程序Web设计(RWD)图像创建工作流程带来了加力。 让我们来看看解压缩资产命令如何在几分钟内快速将网页压缩减少到组装就绪资产。

让我们从一个明显的问题开始:什么是提取资产?

简单来说,Extract Assets是Photoshop中的一项新功能,它提供了Photoshop的Generator功能,并带有一个界面,可帮助自动从Photoshop文件创建用于网页和屏幕设计的图像资源。 Extract Assets命令允许您定义要为其创建资产的一个或多个图层,它们的物理大小,文件格式和磁盘上的保存位置。 此功能不适用于文本,除非打算将文本转换为位图,这真的不是一个好主意。

让我们开始吧。

08年2月

打开一个Photoshop .psd文件

我们从在Photoshop中准备的网页压缩开始。

我使用的示例包含来自Illustrator的智能对象,一些文本,包含文本的英雄单元,图像和按钮以及一系列强化网站主题的户外图像。 这里的关键是将图层分组。 这是必要的,因为任务是将所有这些项目从comp中提取出来,以便它们可以快速添加到适合不同屏幕分辨率和大小的web布局。

08年3月

两种提取资产的方法

提取资源可以在“文件”菜单中找到,或右键单击一个图层。

与Generate不同,Generate通过向图层名称添加图形扩展来提取对象, Extract Assets使用可以通过右键单击图层或选择图层并选择File> Extract Assets来访问的界面。

08年04月04日

提取资产界面

提取资产对话框。

“提取资源”对话框非常直观。 您会看到要提取的图层或选区。 在它上面显示的文件大小和它下面的控件,允许您放大和缩小对象。 对话框的右侧是魔术发生的地方。 顶部的四个按钮允许您选择对象的分辨率/大小。 下一个条显示所选图层,然后单击+号可让您以另一种格式输出所选图层。 垃圾箱从队列中移除图层。 在下一个分割条中,可以选择文件类型,并且可以调整输出图像的宽度和高度。

08年05月05日

提取SVG图像

提取svg图像。

Photoshop不处理svg图像,浏览器和设备无法显示Illustrator图像。 这导致了svg文件被用于矢量图形的崛起,例如这里显示的Illustrator徽标。 作为矢量它们的分辨率与设备无关,这意味着它们可以缩放而不会损失细节或图像。 要将Illustrator智能对象转换为svg,请从弹出窗口中选择svg并单击提取

08年06月

提取资产流程

图像放置在与.psd图像相同的位置的文件夹中。

点击提取按钮时会发生一些事情。 您将首先被警告文件名称可能会改变。 这不是什么大问题。 然后你会被告知正在创建一个新的文件夹来保存资产。 过程完成后,与原始.psd文件放置在相同位置的文件夹将打开并显示新资产。

08年7月

设置按钮是你新的最好的朋友

容纳设备分辨率。

点击设置按钮打开一个非常有用的设置对话框 。 左侧的设置是比例因子。 他们所做的是创建开发人员在媒体查询中使用的图像的各种副本,以针对特定设备的屏幕分辨率。 例如,3x版本将针对iPhone或iPad视网膜显示器,而1.25系数则会指向Android设备。 后缀将添加到文件名的末尾,以便开发人员轻松识别要在媒体查询中使用的图像。 完成后,单击确定按钮,您的选择将在对话框中的提取资源区域中亮起。 您也可以通过点击界面右侧上提取资产区域中的齿轮图标来访问该设置

08年08月

整理起来

提取具有不同格式和分辨率的多个图像。

当您单击解压缩按钮时,所有资产将被创建并添加到该文件夹​​中。 此时,您只需要向开发人员发送该文件夹的副本并转到下一个项目。