Generating Responsive Image Assets with Photoshop CC 2014
Feb 21, 2025 pm 12:03 PMEfficiently use Photoshop CC 2014 to create responsive image resources
This article is sponsored by Adobe. Thank you for your support for SitePoint!
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:
- Slow web pages can result in more than $3 billion in sales losses per year
- 44% of shoppers interpret slow performance as "Error occurred"
- 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:
- 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.
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:
- By right click on any layer/layer and select "Extract Resource"
- 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:
- PNG8
- PNG24
- PNG32
- JPG
- GIF
- 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).
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
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!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

When developing learning platforms similar to Udemy, the focus isn't only on content quality. Just as important is how that content is delivered. This is because modern educational platforms rely on media that is accessible, fast, and easy to digest.

In a world where online trust is non-negotiable, SSL certificates have become essential for every website. The market size of SSL certification was valued at USD 5.6 Billion in 2024 and is still growing strongly, fueled by surging e-commerce business

A payment gateway is a crucial component of the payment process, enabling businesses to accept payments online. It acts as a bridge between the customer and the merchant, securely transferring payment information and facilitating transactions. For

In what seems like yet another setback for a domain where we believed humans would always surpass machines, researchers now propose that AI comprehends emotions better than we do.Researchers have discovered that artificial intelligence demonstrates a

A new artificial intelligence (AI) model has demonstrated the ability to predict major weather events more quickly and with greater precision than several of the most widely used global forecasting systems.This model, named Aurora, has been trained u

Artificial intelligence (AI) began as a quest to simulate the human brain.Is it now in the process of transforming the human brain's role in daily life?The Industrial Revolution reduced reliance on manual labor. As someone who researches the applicat

Like it or not, artificial intelligence has become part of daily life. Many devices — including electric razors and toothbrushes — have become AI-powered," using machine learning algorithms to track how a person uses the device, how the devi

Artificial intelligence (AI) models can threaten and blackmail humans when there’s a conflict between the model's objectives and user decisions, according to a new study.Published on 20 June, the research conducted by the AI firm Anthropic gave its l
