Responsive Web Design with Adobe Photoshop

Responsive Web Design with Adobe Photoshop

by Dan Rose
Released January 2015
Publisher(s): Adobe Press
ISBN: 9780134035727

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

For a couple of decades now, designers have used Photoshop to mock up Web page designs. However, that work generally results in a static graphic of the page, which has to be translated by a developer into the components of a Web page: HTML files and Web-compatible image files.

Our multi-device world has shown us that this approach to web design, including full-page comps done in Photoshop, is increasingly problematic. Modern web designers are adopting a new approach: creating flexible web pages whose layout can adapt to suit the screen on which they are displayed. This is “Responsive Web Design” [RWD].

Until now, books on designing responsive Web sites have focused on HTML and CSS – in other words, they've been very code-centric, and visual creativity seems to take a back seat.

This new book is aimed at the visual Web designer who’s accustomed to working in Photoshop. Adobe Photoshop CC contains many new features that help streamline the process of converting a static page design to a set of components for a responsive web page.

Dan Rose is one of the best-known advocates of this new way of working in Photoshop. He’s observed that only a few people are talking about Photoshop for RWD constructively, yet a majority (63% as of his last informal poll) of web designers are using Photoshop for more than simple asset creation. This transition is a pain point for many designers.

His new book will balance coverage of conceptual issues (how to fit tools like Photoshop to the design workflow rather than fitting a workflow to the tools) with practical design exercises tailored to help communicate the overall design direction of the page while respecting the needs of the fluid Web. In addition, he will introduce methods for taking HTML back into Photoshop for further refinement.

Table of contents

  1. Title Page
  2. Copyright Page
  3. Acknowledgments
  4. Contents
  5. 1. Photoshop’s New Groove
    1. Called Into Question
    2. Stick in the Mud
      1. Fear of the Unknown?
      2. Can I Still Get by Without Knowing Code?
    3. More Process Than Tool
    4. A Battle of Two Short Words
    5. Not on the Menu Tonight
      1. The Core Tenets of Responsive Web Design
      2. Responsive Patterns
      3. Performance
      4. Photoshop Basics
      5. The Minutiae of Version Disparity
      6. The Merits of Comparable Tools
    6. Finding Photoshop’s Groove
    7. We Need to Make This Responsive!
  6. 2. How Did We Get Here?
    1. How We Used to Know Photoshop
    2. The Faults of Traditional Photoshop
      1. On Full-Page Comps
    3. Pain Point du Jour
      1. Fixed-Width Comps
      2. Lack of Interactivity
      3. Some Fonts Are Better Than No Fonts?
      4. The Big Reveal
      5. What Did You Expect?
      6. Presentation Woes
      7. Bound by Approval
      8. Not So Stable
      9. Less-Than-Seamless Exporting
      10. Empty Your Pockets
      11. Double the Effort, Double the Pain
    4. If Not Photoshop, What?
  7. 3. The Case for Designing in the Browser
    1. You Get a Tool! And You Get a Tool! Everyone Gets a Tool!
    2. Designing in the Browser 101
      1. Text Editor and Live Preview
      2. Inspect Element
    3. Fluid by Nature: The Inherent Benefits of the Browser
      1. Interactivity
      2. Global Changes
      3. Free
      4. 1x the Effort
    4. Web Design’s Natural Habitat
      1. Public Testing
      2. PSDs for Proofreading, Browser for Evaluating Behavior
      3. Reaffirming Expectations That Things Look Different in Different Browsers
      4. Easy to Change on the Fly
      5. Assessment as a Client Education Tool
      6. Fold
    5. Designer/Developer Bonding
    6. OK to Kill Photoshop Now?
  8. 4. A Plea for Photoshop–Browser Harmony
    1. Photoshop Is the New Vinyl
    2. The Power of Manipulation
    3. Creative Mode vs. Correct Mode
    4. The Path of Least Resistance
    5. Responsive Design Sameness
    6. Using Photoshop Only When Necessary
      1. The Megaman Principle
      2. Practical Photoshopping: An Overview
  9. 5. Vetting Direction
    1. The Contrast Conundrum
      1. The Comp Approach
      2. Within the Realm of Possibility
    2. Including Your Stakeholders in the Design Process
    3. Moodboards
      1. Methods of Moodboarding
      2. Finding and Storing Inspiration
    4. Visual Inventories
      1. The Pursuit of Efficiency
      2. Conversations, Not Deliverables
      3. Experimenting with Style
  10. 6. Establishing Style
    1. Suitable Mock-up Replacements
      1. On Sketching
      2. Style Tiles
      3. Style Prototypes
    2. Component Inventory
    3. Element Collages
      1. Stripping Out the Abstraction
      2. Crafting an Element Collage
      3. Covering a Lot of Ground Quickly
      4. Do Not Make It Look Like a Website
      5. Color Comparisons
      6. Scope Creep
      7. Asking the Right Questions
      8. Do Make It Look Like a Website
      9. Point of Reference
      10. I Still Can’t See It
    4. What’s Missing
  11. 7. Establishing the System
    1. Now It’s the Browser’s Turn
    2. Defining the Style Guide
      1. Web-Specific
      2. Why the Style Guide Should Live in the Browser
    3. Building the Component Library
      1. Contents of a Comprehensive Component Library
      2. Choosing the Best Environment for Your Components
    4. Prototyping
      1. Roughing It in Low-Fidelity
      2. High-Fidelity and Beyond!
  12. 8. Getting Back into Photoshop with Page Layers
    1. Rough Waters Ahead
    2. Introducing Page Layers
    3. The Struggle to Increase Fidelity
      1. Don’t Get Too Comfortable in Photoshop
      2. Leveraging Linked Smart Objects
    4. There’s No Easy Way to Suggest Tweaks
      1. The Old Screenshot
      2. The New Screenshot
    5. Our Pages Lack Cohesion
      1. Framing Content and the Big Picture
      2. Where Skeuomorphism Worked
    6. Some Elements Suffer from Responsive Wonkiness
      1. Width-Specificity in Page Layers
    7. Exit Strategy
  13. 9. Extracting Your Way Out of Photoshop
    1. Asset Extraction Is Like Pulling Teeth
      1. Crop and Save
      2. Copy Merged
      3. Save for Web
    2. Adobe Generator
      1. Auto-magic Generation
      2. Pixel Precision
      3. Speaking Fluent Generator
      4. Layer Naming as a Practice
    3. Extract Assets
      1. Setup
    4. Extract
      1. Setup
      2. Downloading Assets via Libraries
      3. Extracting Values
      4. Generating CSS
  14. 10. Extending Photoshop
    1. Building the “You” Version of Photoshop
    2. Artwork
      1. Subtle Patterns
      2. Random User Generator
      3. Social Kit
      4. Pictura
      5. Transform Each
      6. DevRocket
      7. Bjango Actions
      8. WebZap
      9. Composer
      10. Layout Wrapper
      11. RotateMe
    3. Color
      1. 0to255
      2. Adobe Color (formerly Kuler)
      3. Adobe Color CC for iOS
      4. Coolorus
    4. Assets
      1. iOS Hat
      2. OtherIcons
      3. Glifo
      4. FlatIcon
      5. TinyPNG
      6. ImageOptim
    5. Prototyping
      1. Framer, Composite, and Stand In
      2. InVision
    6. Organization
      1. GuideGuide
      2. Renamy
      3. Ink
      4. psdiff
    7. Miscellaneous Photoshoppery
      1. ShortcutFoo
      2. Photoshop Secrets
  15. 11. Remembering Etiquette
    1. The Problem with Inheriting PSDs
    2. What Is Photoshop Etiquette?
      1. Improves Efficiency
      2. Keeps You Organized
      3. Creates Conventions
      4. Increased Importance in an RWD Workflow
    3. Files
      1. Name Files Appropriately
      2. Store Assets Relative to PSD
      3. File Accessibility
    4. Layers
      1. Name Layers and Be Accurate
      2. Use Groups and Globalize Where Possible
      3. Delete Unnecessary Layers
    5. Images
      1. Be Nondestructive
      2. Use Blend Modes with Care
      3. Be Aware of Resolution and Density
    6. Type
      1. Standardize Font Access
      2. Don’t Stretch Type
      3. Control Your Text Boxes and Separate Them
    7. Effects
      1. Use Overlays Appropriately
      2. Nail Tileable Images
      3. Be Deliberate
    8. QA
      1. Proofread
      2. Account for All Assets
      3. Be Familiar with Browser Compatibility
  16. 12. Adopting a Completely New Workflow
    1. Looking Back at Moving Forward
      1. Full-Page Photoshop Comps Are Disharmonious with RWD
      2. Designing in the Browser Helps, But Not As Much As We’d Like
      3. 2 Cups Browser, 1 Cup Photoshop
      4. Vetting Direction Efficiently Is Critical
      5. Style Can Be Established Through Small Exercises
      6. Page-Building Is Easier with Component-Based Systems
      7. Page Layers Makes Going from HTML to Photoshop Simple
      8. New Extraction Tools Get Us Back to the Browser Quicker
      9. We Can Customize Photoshop for RWD with Useful Third-Party Extensions
      10. A Little Etiquette Goes a Long Way
    2. On Adoption
      1. Strategies for Getting Buy-in Internally
      2. Strategies for External Getting Buy-In
      3. What Happens When Things Go Wrong
    3. Adjusting Your Perspective on Tools
      1. Repurposing Tools May Be Better Than Getting New Ones
  17. Index

Product information

  • Title: Responsive Web Design with Adobe Photoshop
  • Author(s): Dan Rose
  • Release date: January 2015
  • Publisher(s): Adobe Press
  • ISBN: 9780134035727