Responsive Web Design with Adobe Photoshop

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