Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Photoshop Etiquette For Responsive Web Design

It’s been almost five years since Photoshop Etiquette151 launched, which officially makes it a relic on the web. A lot can happen on the web in a few years, and these past five have illustrated that better than most.

In 2011, everyone was just getting their feet wet with responsive web design. The traditional comp-to-HTML workflow was only beginning to be critiqued, and since then, we’ve seen a myriad of alternatives. Style Tiles2, Style Prototypes3, Visual Inventories4, Element Collages5, style guides6, and even designing in the browser have all been suitable approaches to multi-device design. With a shift from page-based design to building a design system, it’s truly an exciting time.

Further Reading on SmashingMag: Link

There’s also been an explosion of tools attempting to make a responsive workflow more efficient. Applications like Webflow and Macaw have made breakpoint visualization digestible for the code-averse. Many designers have moved on from Photoshop as their workhorse to Sketch, Affinity Designer, or similar. Others have adopted apps like Keynote for prototyping.

A flurry of new tools and techniques has seemingly put good ol' fashioned etiquette on the back burner.11
A flurry of new tools and techniques has seemingly put good ol’ fashioned etiquette on the back burner.

Is ‘Etiquette’ Still Relevant? Link

With alternatives to the heavy Photoshopping we may be familiar with, it’s fair to question if we still need etiquette. For the sake of this article, we’ll define etiquette as transferring files in an organized, clear, and discernible way. Responsive design typically comes with a lot of moving pieces, from @2x images, concatenated CSS files, and more. With seemingly more to do in order to publish a website, being efficient is unquestionably high priority, if we want to be profitable.

Often masked as efficiency, poor organization and communication are products of rushing to ship a project. With Photoshop taking on different roles in our workflows, layers and exported files are easy targets for cutting corners. The fact remains: anything worth doing is worth doing well.

If we want to save time, we need to invest a bit upfront in staying organized and clear. Inefficiency is inheriting a file from a coworker and spending valuable time attempting to figure out where to start because it’s not clearly labeled. It’s having to fix images that have already been exported. At worst, it’s not being able to find the file you need in the first place.

What’s New In Photoshop Etiquette? Link

Photoshop Etiquette was given a fresh coat of paint by Adjacent12, a design studio in Syracuse, NY. For those new to the concept, Photoshop Etiquette is a best practices guide that promotes efficiency through clarity in web design. Though engineered for Photoshop, many of these principles apply to Sketch and similar, layer-based design tools.

The guide is broken down into the following sections:

  • File organization
  • Layer structure
  • Asset exporting
  • Type execution
  • Effect application
  • Quality check

Those familiar with the site will see a lot of familiar guidelines, such as quintessential tips like ‘Name Your Layers’ and ‘Name Files Accurately’, each an attempt at ridding the earth of practices like ‘Layer copy copy 5’ and ‘client-final-v3.psd’, respectively. If you dig a little deeper, you’ll find a glut of responsive resources attached to various guidelines, and a few tips for designing for multiple devices.

1. Consolidate Your PSDs Link

If you’re making multiple comps for multiple pages, Photoshop now has artboards that can help you stick to a single document. This helps eliminate confusion about which PSD is the right PSD.

If you can swing it, try using artboards, layer comps, or smart objects instead of managing tons of PSDs.
If you can swing it, try using artboards, layer comps, or smart objects instead of managing tons of PSDs.

2. Work Collaboratively Link

With the addition of Creative Cloud Libraries and Linked Smart Objects, designers can share assets quite easily. For example, if you’re creating a pattern or component guide in Photoshop, one designer can be working on a component while another designer simultaneously works on a different one. These components can be shared within a Library, or as Linked Smart Objects that are pulled into a master PSD.

Between Linked Smart Objects and CC Libraries, there's plenty of options for being collaborative.
Between Linked Smart Objects and CC Libraries, there’s plenty of options for being collaborative.

3. Don’t Design To The Device Link

This can be argued, but if responsive design is about embracing all devices, perhaps we shouldn’t use popular Apple device presets as document sizes in Photoshop. Instead, allow your design to dictate breakpoints because of layout stress, wherever it falls. The exception is if you’re designing a device or platform-specific app, where targeting such presets is helpful.

Allow your design to dictate breakpoints, not popular-for-the-moment device widths.
Allow your design to dictate breakpoints, not popular-for-the-moment device widths.

4. Be Non-Destructive Link

With the rising implementation and support for SVG, it’s important for designers to sustain vector assets in Photoshop and not flatten them. Photoshop now allows you to save out SVGs, giving us one more reason to be nondestructive with our pixels.

5. Be Aware Of Screen Resolution Link

Speaking of SVG, it has really become a great approach to serving one asset that can adapt to any size and not lose fidelity. Having a Retina asset workflow13, whether SVG or @2x/@3x images, has become part of a responsive practitioner’s workflow.

6. Compress Link

Performance is a worthy cause, not only for a developer but for a designer. I’ve often rationalized that if I want to include heavy web fonts and their Open Type features in my projects, I’ll need to make up the difference by aggressively compressing my images to stay within a performance budget. Third party tools like TinyPNG14 have made image compression a breeze.

Performance is a designer's task. Make sure you're squeezing any extra file size out of your images.
Performance is a designer’s task. Make sure you’re squeezing any extra file size out of your images.

As our web design workflows and use of Photoshop continues to change, so will the site. While it encompasses a Photoshop-centric workflow, there’s a few tips for ones where Photoshop is used sparingly, as well. The guide only advocates that if, and when, you use Photoshop, communicate your intent as clearly as possible.

Fueled By Community Link

One of the primary focuses for Photoshop Etiquette151 is growth, manifested in more guidelines, more resources, and more perspectives. A feature has been added to the site providing easier access to submit a new guideline for review, something hundreds of designers and developers did over the years by tracking me down on Twitter or hunting down an email address.

In the wake of Google Translate’s inaccuracies, there’s also an open call for translations by community volunteers.

It’s exciting to see how Photoshop Etiquette has resonated with so many organizations and individuals. How can it help you and your team?

(vf, il)

Footnotes Link

  1. 1 http://photoshopetiquette.com/
  2. 2 http://styletil.es/
  3. 3 http://seesparkbox.com/foundry/our_new_responsive_design_deliverable_the_style_prototype
  4. 4 http://danielmall.com/articles/visual-inventory/
  5. 5 http://danielmall.com/articles/rif-element-collages/
  6. 6 http://styleguides.io/
  7. 7 https://www.smashingmagazine.com/2015/05/retina-design-in-photoshop/
  8. 8 https://www.smashingmagazine.com/2015/06/creating-advanced-animations-in-photoshop/
  9. 9 https://www.smashingmagazine.com/2016/03/the-retina-asset-workflow-youve-always-wanted-for-photoshop/
  10. 10 https://www.smashingmagazine.com/2016/01/responsive-image-breakpoints-generation/
  11. 11 http://photoshopetiquette.com/
  12. 12 http://weareadjacent.com
  13. 13 https://www.smashingmagazine.com/2015/05/retina-design-in-photoshop/
  14. 14 http://tinypng.com
  15. 15 http://photoshopetiquette.com/

↑ Back to top Tweet itShare on Facebook

Dan Rose is a designer at Adjacent, a focused design studio in Syracuse, NY. He's the author of Responsive Web Design with Adobe Photoshop and the creator of Photoshop Etiquette.

  1. 1

    Absolutely helpful article and guideline thank you :)

    3
  2. 2

    Thank you! Very good advice and information.

    1
  3. 3

    Tristan Duncan

    August 17, 2016 3:20 pm

    Good to see this updated, but how are supposed to let your design dictate breakpoints in Photoshop?

    With all the devices now, designing in any software where you have to define the size of te canvas means your design is just a snapshot of a few possible outcomes. And that’s fine. Just be smart about what sizes you choose to represent your design when showing the client.

    Clients usually expect to see an example of how the design will look on a particular device. Dive into their analytics and see which devices are getting the most traffic, and use those device sizes for the design.

    If it’s a brand new site/app/whatever you will need to choose the sizes of devices that best represent your target audience.

    -2
    • 4

      When responsive design started, there were only a handful of devices and even devices from non apple manufacturers shared the same viewports, so it was easy to adopt the apple device’s viewports. Now though, there are so many different viewports that it is impossible to design against a device. I agree that you have to keep in mind the physical devices you are designing against (not to mention ergonomics/real size etc) but essentially, it is the content that dictates the breakpoints.

      One good example is the decision to turn a 2 column grid to 4 or 6 and this is the perfect reason why ALL front end frameworks WILL faill, all the time, without exception, when proper content is inserted into their grid system.

      When exactly is it the right size to make 2 columns 4 or 6? A common misconception in front-end frameworks is to have 1 or 2 columns max on mobile devices, then 4 around the ipad or before the ipad size then 6 or more at desktop size. Which is simply not good enough. Cause the content inside the columns will tell you when they look good in a 2 4 or 6 configuration.

      Which is why, i usually (as a developer) request a design in desktop and mobile, then build in between states myself (using the content as the guide) then bringing the designer in to discuss/amend or redesign parts.

      There is simply no other way around it. Any other method is square pegs round holes and hoping for the best :)

      7
      • 5

        Tristan Duncan

        August 18, 2016 12:51 am

        Exactly right. That’s the method I use as well.
        If there is a lot of traffic on tablet I’ll design a tablet size as well, but for the most part it’s desktop and mobile and then tablet becomes a mix of the 2.

        A good designer will have and understanding of how the elements will resize and reflow at different sizes, and plans for that when designing for different size screens. There definitely needs to be more collaboration and communication between designers and developers now, and as a Designer, my job is not finished when the PSDs are handed over – it’s only just beginning :)

        I just meant in the context of Photoshop (and any other fixed canvas size graphic software) we have no choice but to pick a width to design to – whether it’s desktop or a mobile device. So the point of “Don’t design to the device” is not as simple as it sounds.

        In fairness, we’ve ALWAYS had to design for different sized screens. It was just a lot easier before the massive segmentation from the mobile device revolution.

        1
      • 6

        This used to be true a couple of years ago, but viewport widths of most used devices haven’t changed dramatically in quite a while. ipad has 768px width. ipad pro 1024px. iphones have been 320px and 375px for ages. Most Android phones have been in the area of 360px for ages also.

        -2
  4. 7

    Imageoptim is also a very good image compressing app for mac

    2
    • 8

      I agree. All Adobe apps suck at compressing files. Exporting video from Premier or After Effects results in a huge file. I run it through Handbrake and it compresses it by almost 50%. Same thing with Photoshop PNGs and GIFs running through ImageOptim.

      0
  5. 9

    Keep fighting the good fight Dan!

    0
  6. 10

    well fi anyone wants to learn photoshop easy and fast visit my site it has quality tutorial for bigenners and pros photoshopedu.weebly.com

    -8
  7. 11

    D-BLIZZY IN DA HOUSE!

    -5
  8. 12

    Awesome article, Dan! I use WordPress CMS almost exclusively these days to expedite the FED workflow and simplify deployment for my SBO/SMB web projects. Having used Genesis/StudioPress, I’ve started to incorporate frameworks and customizable, bootstrap and fluid/grid-based element and theme builder apps (i.e. Avada4 by ThemeFusion, BeTheme, from Muffin Group, and Customizr). Thanks for your insight and tips for efficient and effective responsive web design.

    1
  9. 13

    I’m astounded that people still use Photoshop for web design. Then again I suppose there are people who still try to hammer in screws as well.

    As for the guidelines, some are good, some are bad. The artboard issue is the same for Sketch, Illustrator or any software you design in. Using artboards is fun and dandy until you want to collaborate. Then it is hell.

    0
  10. 14

    Photoshop etiquette for RWD?

    Proper etiquette for RWD would be to use Sketch, and not Photoshop.

    -1
    • 15

      And how would you handle editing photographs for use on a website in Sketch?

      0
    • 16

      Tristan Duncan

      August 22, 2016 11:51 pm

      In which ways is sketch specifically better than Photoshop for the task of responsive web design?

      I’m not saying Photoshop is better. I’m just sick of people arguing that one tool is better than another, or telling us what we SHOULD be using. Tools are tools. Results come as a result of the person wielding the tool, not the tool itself. From my experience, there is no one tool currently available that has everything I need. It’s always a combination.

      Almost every argument I have read explaining what Sketch does better comes down to the person not knowing how to do that thing (or the equivalent to it) in Photoshop. I use both Photoshop and Sketch on a regular basis. As well as everything else! I took the time to learn all the tools so I can pick the right one for the job at hand.

      2
    • 17

      I find sketch to be an unworkable piece of garbage, but to each their own.

      1
  11. 18

    Does anyone else absolutely hate Photoshop’s new export panel? It doesn’t have nearly the level of control the legacy one has. I can’t even export individual artboards. I have to export all or nothing.

    1
    • 19

      Tristan Duncan

      August 22, 2016 11:43 pm

      Depends how you get to it. The real power is when you select something in the layers panel, then right click and select “export as…”

      You can export an artboard, you can export a layer group, or a single layer. verything comes up in the export dialog together. You can change export settings for multiple assets at a time, add scaled assets etc.

      It’s a hell of a lot easier then the old generate assets.

      1
  12. 20

    Dan, thank you for the article!

    We included it in the “Best Reads of the Week” – https://icons8.com/articles/best-reads-of-the-week-myths-about-the-future-of-ux-and-photoshop-etiquette/

    0
  13. 21

    Honestly, I’m very disillusioned by the current state of tools for the job. I’ve been a web designer as long as I’ve been a Photoshop user, and that’s 18 years now. The requirements of responsive design have quickly outgrown all the available graphic design tools out there, and that’s why many of us are starting to design in the browser. However, I’m not a strong coder so it’s not an option for me.

    I’ve looked at other options and have been following and testing the Adobe Edge Tools from birth to cancellation.

    Photoshop’s current support for typography; considering it needs to cater to CSS styles and multiple breakpoints, is pathetically limited not to mention buggy. Artboards are a great addition, but not the right solution.

    The single most promising piece of new software out there is Adobe Xd, but it still has a very long way to go. It’s rapidly improved my prototyping, but until it supports smart-object linking with Photoshop and Illustrator, it’s cumbersome to use as a design tool for many tasks. They’re trying to make it all-in-one but I think they’ll miss some important things in the attempt to encompass everything. Also, the continued reliance on artboards for multi-device layouts is the same flawed concept as Photoshop and Sketch.

    What all these apps need is some way of resizing your canvas as you design, so you’re essentially designing and defining breakpoints in one go. I guess what I’m saying is we need to ditch the aged concept of a fixed size document, and start introducing more CSS- and HTML-based methods for designating placement and appearance of objects. We need something to bridge the gap between design and actual responsive representation of what we’re working on.

    1
  14. 22

    Mark Aldrich Dela Santa

    October 3, 2016 9:07 am

    Thank you for sharing this!

    0
  15. 23

    In an alternate universe, web designers are using QuarkXpress to do web design and they are defending that its a good practice… Using Photoshop to DESIGN a webpage was born out of the lack of any other tool – there’s no need to defend that premise.

    Now do you see the ridiculousness of the argument to defend PS as a web design tool? Was it VIABLE years ago? Sure. Are there better tools to use? Absolutely. However, the issue with many of the comments here is that the commenters are trying to say one solution is inherently better than the other. This is a weak premise. It’s not whether one is better its whether one should be used. Can you dig a house’s foundation with a shovel? Sure. But we’ve progressed to the point that a backhoe is a faster and better solution. RWD has essentially hobbled the use of PS. Having all of those layers within layers is mind-glowingly inefficient.

    I’ve been using Adobe XD and Muse with my developers over the past few months and its working excellently. XD gives the precise measurements while Muse gives the storyboard interactivity to get the point across. It makes no sense to use a tool that, within its very name, was created for photo manipulation.

    So instead of the “Ford vs. Chevy” banter let’s try to figure out whether what is the best solution to use.

    0

↑ Back to top