Home Technology peripherals It Industry Generating Responsive Image Assets with Photoshop CC 2014

Generating Responsive Image Assets with Photoshop CC 2014

Feb 21, 2025 pm 12:03 PM

Efficiently use Photoshop CC 2014 to create responsive image resources

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

Generating Responsive Image Assets with Photoshop CC 2014

Generating Responsive Image Assets with Photoshop CC 2014

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:

Generating Responsive Image Assets with Photoshop CC 2014

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.

Generating Responsive Image Assets with Photoshop CC 2014 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.

Generating Responsive Image Assets with Photoshop CC 2014

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.

Generating Responsive Image Assets with Photoshop CC 2014

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).

Generating Responsive Image Assets with Photoshop CC 2014

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

Generating Responsive Image Assets with Photoshop CC 2014

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1671
14
PHP Tutorial
1276
29
C# Tutorial
1256
24
CNCF Arm64 Pilot: Impact and Insights CNCF Arm64 Pilot: Impact and Insights Apr 15, 2025 am 08:27 AM

This pilot program, a collaboration between the CNCF (Cloud Native Computing Foundation), Ampere Computing, Equinix Metal, and Actuated, streamlines arm64 CI/CD for CNCF GitHub projects. The initiative addresses security concerns and performance lim

Serverless Image Processing Pipeline with AWS ECS and Lambda Serverless Image Processing Pipeline with AWS ECS and Lambda Apr 18, 2025 am 08:28 AM

This tutorial guides you through building a serverless image processing pipeline using AWS services. We'll create a Next.js frontend deployed on an ECS Fargate cluster, interacting with an API Gateway, Lambda functions, S3 buckets, and DynamoDB. Th

Top 21 Developer Newsletters to Subscribe To in 2025 Top 21 Developer Newsletters to Subscribe To in 2025 Apr 24, 2025 am 08:28 AM

Stay informed about the latest tech trends with these top developer newsletters! This curated list offers something for everyone, from AI enthusiasts to seasoned backend and frontend developers. Choose your favorites and save time searching for rel

CNCF Triggers a Platform Parity Breakthrough for Arm64 and x86 CNCF Triggers a Platform Parity Breakthrough for Arm64 and x86 May 11, 2025 am 08:27 AM

CI/CD puzzles and solutions for open source software in Arm64 architecture Deploying open source software on Arm64 architecture requires a powerful CI/CD environment. However, there is a difference between the support levels of Arm64 and traditional x86 processor architectures, which are often at a disadvantage. Infrastructure components developers for multiple architectures have certain expectations for their work environment: Consistency: The tools and methods used across platforms are consistent, avoiding the need to change the development process due to the adoption of less popular platforms. Performance: The platform and support mechanism have good performance to ensure that deployment scenarios are not affected by insufficient speed when supporting multiple platforms. Test coverage: Efficiency, compliance and

Benefits of Custom Telecommunication Software Benefits of Custom Telecommunication Software May 11, 2025 am 08:28 AM

Customized telecom software development is undoubtedly a considerable investment. However, in the long run, you may realize that such a project may be more cost-effective because it can increase your productivity like any ready-made solution on the market. Understand the most important advantages of building a customized telecommunications system. Get the exact features you need There are two potential problems with the off-the-shelf telecom software you can buy. Some lack useful features that can significantly improve your productivity. Sometimes you can enhance them with some external integration, but that isn't always enough to make them great. Other software has too many functions and is too complicated to use. You probably won't use some of these (never!). A large number of features usually adds to the price. Based on your needs

See all articles