Generating Responsive Image Assets with Photoshop CC 2014

Efficiently use Photoshop CC 2014 to create responsive image resources

This article is sponsored by Adobe. Thank you for your support for SitePoint!

Picture: Andy Schofield – cc

Key Points

• Photoshop CC 2014 provides a set of tools to generate responsive image resources, including the use of smart objects, layer marshalling, and the "Extract Resource" feature. These tools allow efficient resizing, transforming, and exporting images without losing quality.
• Use SVG (scalable vector graphics) wherever possible, as it provides small files that can be rescaled instantly without losing image quality. This is especially useful in responsive designs, as it means only one file needs to be managed for all resolutions.
• Adobe's new online service, Creative Cloud Assets, allows easy sharing and collaborative processing of PSD works. This includes being able to share PSDs with customers for auditing, distributing PSDs to external contractors, and giving colleagues access to extract resources, all without requiring them to install Photoshop themselves.

Provide the right resources for the right equipment

Five years ago, the Internet was a more predictable place, wasn’t it? As web developers, we can reasonably expect the web browser to be no less than 640 pixels in width and no more than 1240 pixels—just as if our "Internet Highway" only passes serials. Our current reality is very different. Today, mobile users usually account for more than half of our traffic. The truth is, in 2014, there were as many motorcycles on "Our Highway" as cars and trucks. So why do we still load the same "home size" image on all these very different devices?

But is this really important?

Last month, Tammy Everts released some alert data about the impact of website performance on user behavior. These include:

1. Slow web pages can result in more than $3 billion in sales losses per year
2. 44% of shoppers interpret slow performance as "Error occurred"
3. 2 seconds delay during transaction = 87% cart abandonment rate

Tammy's data tells us that sending slow, home-sized images to small devices is not only impolite—it actually costs us customers and money. By adjusting the image to the limits of each device, we can deliver the page faster while saving bandwidth costs – a win-win for everyone.

Deliver the correct image

There are already some mature ways to deliver adaptive image content to the device. The best choice at the moment is:

Squeezr.it

• adaptive-images.com: Matt Wilcox's solution is the favorite solution for many developers. It is device-independent and mobile-first, although it usually requires some knowledge of Apache and PHP setup.
• Squeezr.it: Squeezr is inspired by adaptive-images to a large extent, but prefers to use client policies to determine and respond to breakpoints.

Don't worry: these are excellent solutions, but we won't be paying attention to them today. Instead, I want to look at another part of the problem: image resources. How do we generate all these different image resources? Adobe has thought a lot about this issue, which is reflected in Photoshop CC 2014. It provides a set of tools—some new, some old—to help.

Here are some tips to get started with responsive images:

Tip 1: Embed all images as smart objects

Smart objects are nothing new – they have been in Photoshop since 2005 – but they have become the core tool in responsive design. Even after we apply destructive transformations to them, smart objects always retain reference links to their original image state. For example, in most cases, rescaling the image multiple times will degrade image quality at each iteration. However, the smart object applies each new transformation to the original image state without losing image quality. This makes converting all your high-resolution image resources (avatars, backgrounds, photos, etc.) into smart objects almost an inevitable choice, allowing you to resize, rotate, transform and reposition them without worrying about it. Converting any layer to a smart object is as simple as right-clicking on it and selecting "Convert to a smart object".

Tip 2: Use layers to group

In the era of responsive design, "

Layout" has become "Layout". We need a way to manage the position of the same page element in two, three or more positions and sizes.

This is the purpose of "layer grouping". Think of each new Layer Group as a "snapshot" of the layer panel at a specific point in time. You can then click a single button in the Layer Grouping panel to return to that snapshot status at any time.

In practice, this usually means building a mobile layout (mobile-first) and then capturing it as a new layer marshalling. You can then start redesigning the layout for your tablet and capture it again into another layer group.

Practical application of layer grouping

The Layer Grouping panel allows you to switch between any of these states immediately by clicking. Layer grouping reduces duplication in the layer panel and simplifies the entire project file.

Tip 3: Forgot "Storage as Web..." - Use "Extract Resources"

I must admit that I have always loved Fireworks’ image export panel. Photoshop takes Image Ready as a separate application, and its own built-in "Storage as Web" feature, but for me, neither is as simple, powerful or fast as Fireworks.

Launch the Extract Resources panel from inside the layer panel.

Photoshop CC 2014 adopts a new and improved image export method - a new "Extract Resources" feature. Let's take a closer look.

The Extract Resources panel will locate any layer you selected in the Layers panel. In theory, this can be a single layer, all layers, or any combination between the two. You can launch this new panel from two places:

1. By right click on any layer/layer and select "Extract Resource"
2. Or select "Extract Resource" from the File menu

Let's take a look at the new "Extract Resources" panel.

Layers can be exported as one of six image formats:

1. PNG8
2. PNG24
3. PNG32
4. JPG
5. GIF
6. SVG (Yes, more on this later)

You also have the option to generate up to eight different resolutions simultaneously—ranging from 25% to 400%. Photoshop also makes it easy to automatically prefix each file name and export to a reasonable folder name. You can even set it to automatically regenerate the entire file set when you update the original document. It's not difficult to see how much time this can save. Note that if you are satisfied with your current workflow, you can still use the classic "Save as Web" option. However, I suspect most people will see the power and flexibility of new features.

Tip 4: Use SVG whenever possible

SVG has been one of the hot trends in web design in 2014, so it’s exciting to see SVG support enter Photoshop. Vectors are especially suitable for responsive designs because they provide small files that can be rescaled instantly without losing image quality. From a purely practical point of view, using SVG (in reality) means you only need to manage one file for all resolutions (excluding fallbacks for older clients).

SVG Export Tool in Photoshop

While Photoshop allows you to export any layer/layer as SVG, pixel-based image elements are unlikely to provide good results. Any path-based graphics, including logos, icons, masks, and other shapes, may be an ideal candidate for SVG exports.

Tip 5: Don't forget Creative Cloud Assets

One of the new added benefits of using PSD is Adobe's new online service. Synchronizing your PSD creations to Creative Cloud unlocks a range of handy tips. I covered this in more detail in the previous post, but the key points are:

Easy to share your PSD with customers

Extract resources through the browser.

Forgot to send JPEG works for customer review. Creative Cloud allows them to view and comment on your PSD work in real time in the browser. That’s right – they no longer need Photoshop to review PSDs.

Distribute PSD to external contractors

External contractors can directly use the latest version of the resources and export resources directly using the browser.

Provide colleagues access to extract resources

You now have an easy way to share version-managed PSD with your team. They can even extract CSS, images, and other resources from your PSD without installing their own Photoshop. This service is available to anyone with a free Adobe account.

Summary

Biodiversity is a good thing! Our browser ecosystem – phones, tablets, laptops, desktops, and even TVs – is rich and varied and will only be more diverse in the coming years. This makes our work harder and more fun. Responsive web design teaches us that “pages” have actually become “Page Series” – parent pages, mother pages and some child pages. For the same reason, "Image" has also become "Image Series". Photoshop CC 2014 now provides a relatively easy and fast workflow to generate these "image series". Try it.

FAQ for Responsive Image Resources in Photoshop and CSS

(The FAQ part is omitted here because the article is too long and does not match the pseudo-original goal. The FAQ part can be optionally retained or rewrited as needed.)

The above is the detailed content of Generating Responsive Image Assets with Photoshop CC 2014. For more information, please follow other related articles on the PHP Chinese website!