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

This article was sponsored by Adobe. Thank you for supporting the sponsors that make SitePoint possible!

本文由Adobe赞助。 感谢您支持使SitePoint成为可能的赞助商！

Photo: Andy Schofield – cc

照片：Andy Schofield – cc

合适设备的合适资产 (The right assets for the right devices)

Five years ago the web was a more predictable place, wasn’t it?

五年前，网络是一个更加可预测的地方，不是吗？

As web developers, we could reasonably expect web browsers no narrower than 640 pixels, and no wider than 1240 — it was as if our ‘internet super-highway’ was trafficked only with family sedans.

作为Web开发人员，我们可以合理预期的Web浏览器不超过640个像素窄，宽度不超过1240 -就好像我们的“互联网超级高速公路”与家庭轿车只贩卖。

Our current reality is a very different picture.

我们当前的现实情况截然不同。

Today, mobile users often make up more than half of our traffic. The truth is, in 2014 there are as many motorbikes on ‘our super-highway’ as there are sedans and trucks.

如今，移动用户通常占我们流量的一半以上 。 事实是，2014年，“我们的高速公路”上的摩托车和轿车和卡车一样多。

So, why are we still loading the same ‘family-sized’ images onto all these wildly different devices?

那么，为什么我们仍然将相同的“家庭大小”图像加载到所有这些截然不同的设备上？

但这真的重要吗？ (But does it really matter?)

Last month Tammy Everts published some very sobering figures on the effects of site performance on user behaviour. They include:

上个月，Tammy Everts 发布了一些非常醒目的数字 ，说明了网站性能对用户行为的影响。 它们包括：

1. Slow web pages correlate to more than $3b lost sales annually
   缓慢的网页与每年超过$ 3b的销售损失相关

2. 44% of shoppers interpret slow performance as ‘something went wrong’

   44％的购物者将绩效下降解释为“出了点问题”

3. A 2-second delay during a transaction = 87% shopping cart abandonment rate
   交易过程中的2秒延迟= 87％的购物车放弃率

Tammy’s numbers tell us that sending slow, family-sized images to baby-sized devices isn’t just bad manners — it’s actually costing us customers and money. By tailoring our images to the limitations of the each device, we can deliver pages faster while saving bandwidth costs – a win for everyone.

塔米(Tammy)的数据告诉我们，将缓慢的，家庭大小的图像发送到婴儿大小的设备不仅是不好的举止，而且实际上在浪费我们的客户和金钱。 通过根据每个设备的限制定制图像，我们可以更快地交付页面，同时节省带宽成本，这对每个人来说都是一个胜利。

提供正确的图像 (Delivering the right images)

There are already a number of established methods for delivering adaptive image content to devices. The current best options are:

已经存在许多用于将自适应图像内容传递到设备的已建立方法。 当前的最佳选择是：

Squeezr.it

Squeezr.it

• Adaptive-images.com: Matt Wilcox’ solution is a current favorite of many developers. It’s device-agnostic and mobile-first, although it does usually requires some Apache and PHP setup knowledge.

  Adaptive-images.com：Matt Wilcox的解决方案是许多开发人员当前的最爱。 尽管通常它确实需要一些Apache和PHP设置知识，但它与设备无关，并且是移动设备优先。

• Squeezr.it: Squeezr is heavily inspired by adaptive-images, but favors a client side strategy for determining and reacting to breakpoints.

  Squeezr.it：Squeezr在很大程度上受到自适应图像的启发，但是偏向于确定和响应断点的客户端策略。

Have no fear: these are both excellent solutions, but we’re not going to focus on them today. Instead I’d like to look at the other part of the problem: the image assets.

不用担心：这两个都是出色的解决方案，但是今天我们将不再关注它们。 相反，我想看看问题的另一部分：图像资产。

How do we generate all these different image assets?

我们如何生成所有这些不同的图像资产？

Adobe has put a lot of thought into this problem and it shows in Photoshop CC 2014. They offers a suite of tools – some new, some older – designed to help.

Adobe已对此问题进行了很多思考，并在Photoshop CC 2014中进行了显示。他们提供了一套旨在帮助您的工具-有些是新的，有些是旧的。

Here are some tips to get started with responsive images.

以下是开始使用自适应图像的一些技巧。

提示1：将所有图像嵌入为SmartObjects (Tip #1: Embed All Images as SmartObjects)

SmartObjects are nothing new – they’ve existed in Photoshop since 2005 – but they’ve become a central tool in responsive design. SmartObjects always keep a reference link to their original image state, even after we’ve applied destructive transformations to them.

SmartObjects并不是什么新鲜事物-自2005年以来就已在Photoshop中使用-但它们已成为响应式设计的核心工具。 即使我们已经对其进行了破坏性转换，SmartObjects仍始终保持指向其原始图像状态的引用链接。

For instance, in most situations, re-scaling an image multiple times would degrade the image at each iteration. However SmartObjects apply each new transformation to the original image state, with no image quality loss.

例如，在大多数情况下，多次缩放图像会在每次迭代时降低图像质量。 但是，SmartObjects会将每个新转换应用到原始图像状态，而不会降低图像质量。

This makes it almost a no-brainer to begin your project by converting all your high resolution image resources — avatars, backgrounds, photos and the like — into a SmartObjects, allowing you to resize, rotate, transform and reposition them without fear.

通过将所有高分辨率图像资源(化身，背景，照片等)转换为SmartObjects，您几乎可以轻松地开始项目，无需担心即可调整它们的大小，旋转，变换和重新放置它们。

Converting any layer to a SmartObject is as simple as right-clicking it and selecting ‘Convert to SmartObject‘.

只需将鼠标右键单击并选择“ 转换为SmartObject ”，即可将任何图层转换为SmartObject 。

提示2：利用Layer Comps (Tip #2: Take Advantage of Layer Comps)

In the era of responsive design, ‘THE layout‘ has become ‘the LAYOUTS’. We need a way to manage the SAME page elements in two, three or more positions and sizes.

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

That’s precisely what ‘Layer comps’ are designed for. Think of a each new ‘Layer comp’ as a ‘snapshot’ of your layers panel at a particular moment in time. You can then return to that snapshot state at any time with a single click in your layers comp panel.

这正是“图层组合”的设计目标。 将每个新的“图层组合”都视为在特定时间的图层面板的“快照”。 然后，您可以随时在图层编辑面板中单击一下以返回到该快照状态。

In practice, this usually means building your mobile layout (mobile first), and then capturing it as a new layer comp. You can then begin re-engineering the layout for tablets, and once again capturing this to another layer comp.

实际上，这通常意味着先构建您的移动版式(首先移动)，然后将其捕获为新的图层组合。 然后，您可以开始重新设计平板电脑的布局，然后再次将其捕获到另一个图层组件中。

Layer comps in action

图层组合动作

The layers comp panel allows you to instantly switch between any of these states with a click. Layer comps reduce duplication in your layers panel, and simplify your project file as a whole.

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

提示3：忘记“保存为网络...” –使用“提取资产” (Tip #3: Forget ‘Save for web..’ – Use ‘Extract Assets’)

I must admit, I always liked Fireworks’ image export panel. Photoshop had Image Ready as a separate application, and its own built-in ‘Save for Web’ function, but for me neither was as simple, powerful or fast as Fireworks.

我必须承认，我一直很喜欢Fireworks的图像导出面板。 Photoshop将Image Ready作为一个单独的应用程序，并具有其内置的“为Web保存”功能，但是对我而言，它既没有Fireworks那样简单，强大或快速。

Launching the Extract Assets panel from inside the Layers panel.

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

Photoshop CC 2014 takes a fresh, much-improved approach to image export – a new ‘Extract Assets’ function. Let’s take a closer look.

Photoshop CC 2014对图像导出采用了一种全新的，经过改进的方法-一种新的“提取资产”功能。 让我们仔细看看。

The Extract Assets panel will target whatever layers you have selected in the Layers panel. In theory, that could be a single layer, all layers, or any combination in between.

“ 提取资产”面板将定位在“图层”面板中选择的任何图层。 从理论上讲，可以是单层，所有层或两者之间的任何组合。

You can launch this new panel from two places:

您可以从两个地方启动这个新面板：

1. By right-clicking on any layer/s and selecting ‘Extract Assets’
   通过右键单击任何图层并选择“提取资产”
2. Or by selecting ‘Extract Assets’ from the File Menu
   或从文件菜单中选择“提取资产”

Let’s take a look at the new Extract Assets panel.

让我们看一下新的“提取资产”面板。

Layers can be exported in any one of six image formats:

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

1. PNG8
   PNG8
2. PNG24
   PNG24
3. PNG32
   PNG32
4. JPG
   JPG格式
5. GIF
   GIF
6. SVG (Yes. More on that later)
   SVG(是的，稍后再介绍)

You can also choose to simultaneously generate images in up to eight different resolutions — ranging from 25% up to 400%. Photoshop also makes it easy for you to automatically prefix each filename and export to sensible folder names.

您还可以选择同时生成高达八种不同分辨率的图像-范围从25％到400％。 Photoshop还使您可以轻松地自动为每个文件名加上前缀并导出为明智的文件夹名称。

You can even set it to automatically re-generate the entire set of files any time you update the original document. It’s not hard to see what a huge timesaver this could become.

您甚至可以将其设置为在您更新原始文档时自动重新生成整个文件集。 不难看出这可能会节省大量时间。

Note that if you are comfortable with your current workflow, the classic ‘Save for web’ option is still available. However, I suspect most will see the power and flexibility of the new functionality.

请注意，如果您对当前的工作流程感到满意，则仍然可以使用经典的“为网络保存”选项。 但是，我怀疑大多数人会看到新功能的强大功能和灵活性。

提示4：尽可能使用SVG (Tip #4: Use SVG When Possible)

SVG has been one of the hot web design trends of 2014, so it’s exciting to see SVG support come to Photoshop. Vectors are uniquely well-suited to responsive design as they deliver tiny files that instantly re-scale with no loss in image quality.

SVG一直是2014年Web设计的热门趋势之一，因此很高兴看到SVG对Photoshop的支持。 向量非常适合响应式设计，因为它们可以提供微小的文件，这些文件可以立即重新缩放而不会降低图像质量。

In purely practical terms, using SVG (where practical) means you only need to manage a single file for all resolutions (not including fallbacks for older clients).

用纯粹的实用术语来说，使用SVG(如果可行)意味着您仅需要为所有分辨率管理一个文件(不包括较旧客户端的后备 )。

The SVG export facility in Photoshop

Photoshop中的SVG导出工具

Although Photoshop will allow you to export any layer/s to SVG, pixel-based image elements are unlikely to deliver good results. Any path-based graphics — including logos, icons, masks and other shapes — will likely be ideal candidates for SVG export.

尽管Photoshop允许您将任何图层导出到SVG，但是基于像素的图像元素不太可能产生良好的效果。 任何基于路径的图形(包括徽标，图标，蒙版和其他形状)都可能是SVG导出的理想选择。

提示5：不要忘记创意云资产 (Tip #5: Don’t Forget Creative Cloud Assets)

One of the new side-benefits of working with PSD is Adobe’s new online services. Syncing your PSD comps to Creative Cloud unlocks a raft of handy tricks. I covered this in more detail in my last article, but the headline points are:

使用PSD的新附带好处之一是Adobe的新在线服务。 将您的PSD补偿文件同步到Creative Cloud可以解锁许多方便的技巧。 我在上一篇文章中对此进行了更详细的介绍 ，但标题是：

与客户轻松共享您的PSD (Share your PSDs with clients easily)

Extracting assets via the browser.

通过浏览器提取资产。

Forget about sending JPEG comps for client review. Creative Cloud lets them view and comment on your PSD comps live in the browser. That’s correct — they no longer need Photoshop to review PSDs.

无需再发送JPEG压缩文件以供客户审查。 Creative Cloud使他们可以在浏览器中实时查看和评论PSD合成。 没错-他们不再需要Photoshop来检查PSD。

将PSD分发给外部承包商 (Distribute PSDs to external contractors)

External contractors can work directly with the latest versions of assets, exporting assets directly using the browser.

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

向同事提供提取资产的权限 (Provide colleagues with access to extract assets )

You now have an easy way to share version-managed PSDs with your team. They can even extract CSS, images and other assets from you PSD without needing a their own Photoshop install.

现在，您可以轻松地与团队共享版本管理的PSD。 他们甚至可以从PSD中提取CSS，图像和其他资源，而无需自己安装Photoshop。

This service is available to anyone with a free Adobe account.

拥有免费Adobe帐户的任何人都可以使用此服务。

总结 (The Wrap-up)

Biodiversity is a good thing! Our browser ecosystem — phones, tablets, laptops, desktops, even TVs — is rich and varied, and it’s only going to get more diverse in the years to come. This makes our job both harder and more interesting.

生物多样性是一件好事！ 我们的浏览器生态系统-手机，平板电脑，笔记本电脑，台式机，甚至是电视-种类繁多，并且在接下来的几年中只会越来越多样化。 这使我们的工作既困难又有趣。

Responsive Web Design has taught us that ‘the page’ has actually become a ‘family of pages’ – a papa page, a mama page and some baby pages. For the same reasons ‘the image’ has become a ‘family of images’ too.

响应式Web设计告诉我们，“页面”实际上已成为“ 页面家族 ” –爸爸页面，妈妈页面和一些婴儿页面。 出于同样的原因，“ 图像 ”也已成为“ 图像家族 ”。

Photoshop CC 2014 now provides a relatively painless and fast workflow for generating those ‘image families’.

Photoshop CC 2014现在提供了一个相对轻松，快速的工作流程，用于生成那些“图像族”。

Check it out.

看看这个。

翻译自: https://www.sitepoint.com/responsive-image-assets-photoshop-css-2014/