使用Photoshop CC 2014生成响应式图像资产

高效利用Photoshop CC 2014创建响应式图片资源

本文由Adobe赞助。感谢您对SitePoint的支持！

图片：Andy Schofield – cc

关键要点

• Photoshop CC 2014 提供了一套工具来生成响应式图像资源，包括使用智能对象、图层编组和“提取资源”功能。这些工具允许高效地调整图像大小、转换和导出，而不会损失质量。
• 尽可能使用 SVG（可缩放矢量图形），因为它能够提供小文件，可以即时重新缩放而不会损失图像质量。这在响应式设计中特别有用，因为它意味着只需为所有分辨率管理一个文件。
• Adobe 的新型在线服务 Creative Cloud Assets 允许轻松共享和协作处理 PSD 作品。这包括能够与客户共享 PSD 以供审核、将 PSD 分发给外部承包商以及让同事访问以提取资源，所有这些都不需要他们自己安装 Photoshop。

为合适的设备提供合适的资源

五年前，网络是一个更可预测的地方，不是吗？作为 Web 开发人员，我们可以合理地预期 Web 浏览器的宽度不小于 640 像素，不超过 1240 像素——就好像我们的“互联网高速公路”只通行轿车一样。我们目前的现实情况却大相径庭。如今，移动用户通常占我们流量的一半以上。事实是，在 2014 年，“我们的高速公路”上的摩托车和轿车以及卡车一样多。那么，为什么我们仍然将相同的“家庭尺寸”图像加载到所有这些截然不同的设备上呢？

但这真的重要吗？

上个月，Tammy Everts 发布了一些关于网站性能对用户行为影响的令人警醒的数据。其中包括：

1. 缓慢的网页每年会导致超过 30 亿美元的销售损失
2. 44% 的购物者将缓慢的性能解释为“出现错误”
3. 交易过程中延迟 2 秒 = 87% 的购物车放弃率

Tammy 的数据告诉我们，向小型设备发送缓慢的、家庭尺寸的图像不仅是不礼貌的——实际上还会让我们损失客户和金钱。通过根据每个设备的限制调整图像，我们可以更快地交付页面，同时节省带宽成本——对每个人来说都是双赢的。

交付正确的图像

已经有一些成熟的方法可以将自适应图像内容交付到设备。目前最好的选择是：

Squeezr.it

• adaptive-images.com：Matt Wilcox 的解决方案是许多开发人员当前最喜欢的方案。它是与设备无关的，并且是移动优先的，尽管它通常需要一些 Apache 和 PHP 设置知识。
• Squeezr.it：Squeezr 的灵感很大程度上来自 adaptive-images，但更倾向于使用客户端策略来确定和响应断点。

不用担心：这些都是极好的解决方案，但我们今天不会关注它们。相反，我想看看问题的另一部分：图像资源。我们如何生成所有这些不同的图像资源？Adobe 对这个问题进行了大量的思考，这在 Photoshop CC 2014 中得到了体现。它提供了一套工具——有些是新的，有些是旧的——旨在提供帮助。

以下是一些开始使用响应式图像的技巧：

技巧 1：将所有图像嵌入为智能对象

智能对象并不是什么新鲜事物——它们自 2005 年以来就存在于 Photoshop 中——但它们已成为响应式设计中的核心工具。即使在我们对它们应用了破坏性转换之后，智能对象也会始终保留与其原始图像状态的引用链接。例如，在大多数情况下，多次重新缩放图像会在每次迭代时降低图像质量。但是，智能对象会将每个新的转换应用于原始图像状态，而不会损失图像质量。这使得将您的所有高分辨率图像资源（头像、背景、照片等）转换为智能对象几乎成为一种必然的选择，允许您调整大小、旋转、转换和重新定位它们而无需担心。将任何图层转换为智能对象就像右键单击它并选择“转换为智能对象”一样简单。

技巧 2：利用图层编组

在响应式设计的时代，“布局”已成为“布局”。我们需要一种方法来管理相同页面元素在两个、三个或更多位置和大小中的位置。

这就是“图层编组”的设计目的。将每个新的“图层编组”视为在特定时间点图层面板的“快照”。然后，您可以随时单击图层编组面板中的单个按钮返回该快照状态。

在实践中，这通常意味着构建移动布局（移动优先），然后将其捕获为新的图层编组。然后，您可以开始为平板电脑重新设计布局，并再次将其捕获到另一个图层编组中。

图层编组实际应用

图层编组面板允许您单击即可立即在任何这些状态之间切换。图层编组减少了图层面板中的重复，并简化了整个项目文件。

技巧 3：忘记“存储为 Web...”——使用“提取资源”

我必须承认，我一直很喜欢 Fireworks 的图像导出面板。Photoshop 将 Image Ready 作为单独的应用程序，以及它自己的内置“存储为 Web”功能，但对我来说，两者都不如 Fireworks 简单、强大或快速。

从图层面板内部启动“提取资源”面板。

Photoshop CC 2014 采用了一种全新的、改进的图像导出方法——新的“提取资源”功能。让我们仔细看看。

“提取资源”面板将定位您在图层面板中选择的任何图层。理论上，这可以是单个图层、所有图层或两者之间的任何组合。您可以从两个地方启动此新面板：

1. 通过右键单击任何图层/图层并选择“提取资源”
2. 或从“文件”菜单中选择“提取资源”

让我们来看看新的“提取资源”面板。

图层可以导出为六种图像格式中的一种：

1. PNG8
2. PNG24
3. PNG32
4. JPG
5. GIF
6. SVG（是的，稍后会详细介绍）

您还可以选择同时生成多达八种不同分辨率的图像——范围从 25% 到 400%。Photoshop 还使您可以轻松地自动为每个文件名添加前缀并导出到合理的文件夹名称。您甚至可以将其设置为在您更新原始文档时自动重新生成整个文件集。不难看出这可以节省多少时间。请注意，如果您对当前的工作流程感到满意，则仍然可以使用经典的“存储为 Web”选项。但是，我怀疑大多数人都会看到新功能的强大功能和灵活性。

技巧 4：尽可能使用 SVG

SVG 一直是 2014 年 Web 设计的热门趋势之一，因此看到 SVG 支持进入 Photoshop 令人兴奋。矢量特别适合响应式设计，因为它们提供可以即时重新缩放而不会损失图像质量的小文件。从纯粹的实践角度来看，使用 SVG（在实际情况下）意味着您只需要为所有分辨率管理一个文件（不包括针对旧版客户端的回退）。

Photoshop 中的 SVG 导出工具

尽管 Photoshop 允许您将任何图层/图层导出为 SVG，但基于像素的图像元素不太可能提供良好的结果。任何基于路径的图形（包括徽标、图标、蒙版和其他形状）都可能是 SVG 导出的理想候选对象。

技巧 5：不要忘记 Creative Cloud Assets

使用 PSD 的新附加好处之一是 Adobe 的新型在线服务。将您的 PSD 作品同步到 Creative Cloud 可以解锁一系列方便的技巧。我在上一篇文章中更详细地介绍了这一点，但要点是：

轻松地与客户共享您的 PSD

通过浏览器提取资源。

忘记发送 JPEG 作品以供客户审核。Creative Cloud 允许他们在浏览器中实时查看和评论您的 PSD 作品。没错——他们不再需要 Photoshop 来审核 PSD。

将 PSD 分发给外部承包商

外部承包商可以直接使用最新版本的资源，直接使用浏览器导出资源。

为同事提供提取资源的访问权限

您现在有了一种简单的方法可以与您的团队共享版本管理的 PSD。他们甚至可以从您的 PSD 中提取 CSS、图像和其他资源，而无需安装他们自己的 Photoshop。这项服务可供任何拥有免费 Adobe 帐户的人使用。

总结

生物多样性是一件好事！我们的浏览器生态系统——手机、平板电脑、笔记本电脑、台式机，甚至电视——丰富多样，并且在未来几年只会更加多样化。这使得我们的工作既更难也更有趣。响应式 Web 设计教会我们，“页面”实际上已成为“页面系列”——父页面、母页面和一些子页面。出于同样的原因，“图像”也已成为“图像系列”。Photoshop CC 2014 现在提供了一种相对轻松快捷的工作流程来生成这些“图像系列”。试试看。

Photoshop 和 CSS 中响应式图像资源的常见问题解答 (FAQ)

(此处省略了FAQ部分，因为篇幅过长，且与伪原创目标不符。可以根据需要选择性保留或重新改写FAQ部分。)

以上是使用Photoshop CC 2014生成响应式图像资产的详细内容。更多信息请关注PHP中文网其他相关文章！