RESPONSIVE

WEB DESIGN
with Adobe Photoshop

DAN ROSE
RESPONSIVE
WEB DESIGN
with Adobe Photoshop

DAN ROSE
Responsive Web Design with Adobe Photoshop
Dan Rose

Copyright © 2015 Dan Rose

Adobe Press books are published by Peachpit, a division of Pearson Education.

For the latest on Adobe Press books, go to www.adobepress.com. To report errors, please send a note to errata@
peachpit.com.

Adobe Press Editor: Victor Gavenda

Development Editor: Stephen Nathans-Kelly
Production Editor: Maureen Forys, Happenstance Type-O-Rama
Compositor: Cody Gates, Happenstance Type-O-Rama
Technical Editors: Dennis Kardys and Joel Baer
Copyeditor: KimWimpsett
Proofreader: Kim Wimpsett
Indexer: Jack Lewis
Cover Design: Aren Straiger
Interior Design: Maureen Forys, Happenstance Type-O-Rama

Notice of Rights

All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic,
mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For infor-
mation on getting permission for reprints and excerpts, contact [email protected].

Notice of Liability

The information in this book is distributed on an “As Is” basis, without warranty. While every precaution has been
taken in the preparation of the book, neither the author, Adobe Systems Incorporated, nor the publisher shall have
any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indi-
rectly by the instructions contained in this book or by the computer software and hardware products described in it.

Trademarks

Adobe, Photoshop, Fireworks, Dreamweaver, InDesign, Illustrator, Creative Cloud, Generator, Typekit, and Flash are
either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
All other trademarks are the property of their respective owners.

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks.
Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations appear
as requested by the owner of the trademark. All other product names and services identified throughout this book are
used in editorial fashion only and for the benefit of such companies with no intention of infringement of the trade-
mark. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with this book.

Printed and bound in the United States of America

ISBN-13: 978-0-134-03563-5
ISBN-10: 0-134-03563-1

9 8 7 6 5 4 3 2 1
Acknowledgments

This book was guided by the resourcefulness of Victor Gavenda, the eagle eye of
Stephen Nathans-Kelly (and the Adobe Press team), and the sage wisdom of Dennis
Kardys. My gratitude to Dan Mall for trailblazing the Photoshop-for-RWD path. My
love and dedication to Amanda for her support and encouragement, to Holly and
Norah for play and snuggle breaks, and to Jesus, with whom all things are indeed
possible.
This page intentionally left blank
Contents

1 Photoshop’s New Groove . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Called Into Question . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Stick in the Mud . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Fear of the Unknown? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4
Can I Still Get by Without Knowing Code? . . . . . . . . . . . . . . . . . . . . . . . . . .4

More Process Than Tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

A Battle of Two Short Words. . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Not on the Menu Tonight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

The Core Tenets of Responsive Web Design . . . . . . . . . . . . . . . . . . . . . . . . .8
Responsive Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8
Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
Photoshop Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
The Minutiae of Version Disparity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
The Merits of Comparable Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9

Finding Photoshop’s Groove . . . . . . . . . . . . . . . . . . . . . . . . . . 10

We Need to Make This Responsive! . . . . . . . . . . . . . . . . . . . . 11

2 How Did We Get Here? . . . . . . . . . . . . . . . . . . . . . . . . . . 13

How We Used to Know Photoshop . . . . . . . . . . . . . . . . . . . . 14

The Faults of Traditional Photoshop . . . . . . . . . . . . . . . . . . . . 15

On Full-Page Comps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Pain Point du Jour . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Fixed-Width Comps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Lack of Interactivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22
Some Fonts Are Better Than No Fonts? . . . . . . . . . . . . . . . . . . . . . . . . . . .23
The Big Reveal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25
What Did You Expect? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26
Presentation Woes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26
Bound by Approval . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28
vi CONTENTS

Not So Stable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29

Less-Than-Seamless Exporting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29
Empty Your Pockets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30
Double the Effort, Double the Pain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

If Not Photoshop, What? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

3 The Case for Designing in the Browser. . . . . . . . . . . . . . 33

You Get a Tool! And You Get a Tool! Everyone Gets a Tool! . . 33

Designing in the Browser 101 . . . . . . . . . . . . . . . . . . . . . . . . 34

Text Editor and Live Preview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35
Inspect Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Fluid by Nature: The Inherent Benefits of the Browser . . . . . 37

Interactivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38
Global Changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .39
Free . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40
1x the Effort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40

Web Design’s Natural Habitat . . . . . . . . . . . . . . . . . . . . . . . . . 42

Public Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43
PSDs for Proofreading, Browser for Evaluating Behavior . . . . . . . . . . . . . .43
Reaffirming Expectations That Things Look Different in
Different Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44
Easy to Change on the Fly . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .45
Assessment as a Client Education Tool . . . . . . . . . . . . . . . . . . . . . . . . . . .45
Fold . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .46

Designer/Developer Bonding . . . . . . . . . . . . . . . . . . . . . . . . . 47

OK to Kill Photoshop Now?. . . . . . . . . . . . . . . . . . . . . . . . . . .48

4 A Plea for Photoshop–Browser Harmony . . . . . . . . . . . .49

Photoshop Is the New Vinyl . . . . . . . . . . . . . . . . . . . . . . . . . . 49

The Power of Manipulation . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

Creative Mode vs. Correct Mode . . . . . . . . . . . . . . . . . . . . . . 52

The Path of Least Resistance . . . . . . . . . . . . . . . . . . . . . . . . . 52

 CONTENTS vii

Responsive Design Sameness. . . . . . . . . . . . . . . . . . . . . . . . . 56

Using Photoshop Only When Necessary. . . . . . . . . . . . . . . . . 58

The Megaman Principle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59
Practical Photoshopping: An Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

5 Vetting Direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63

The Contrast Conundrum . . . . . . . . . . . . . . . . . . . . . . . . . . . .64
The Comp Approach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .64
Within the Realm of Possibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .65

Including Your Stakeholders in the Design Process . . . . . . . .66

Moodboards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Methods of Moodboarding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68
Finding and Storing Inspiration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .70

Visual Inventories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
The Pursuit of Efficiency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Conversations, Not Deliverables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Experimenting with Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

6 Establishing Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Suitable Mock-up Replacements. . . . . . . . . . . . . . . . . . . . . . . 79
On Sketching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .80
Style Tiles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Style Prototypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .84

Component Inventory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

Element Collages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .90

Stripping Out the Abstraction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Crafting an Element Collage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Covering a Lot of Ground Quickly . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .94
Do Not Make It Look Like a Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .96
Color Comparisons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99
Scope Creep . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
Asking the Right Questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Do Make It Look Like a Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
viii CONTENTS

Point of Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

I Still Can’t See It . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

What’s Missing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

7 Establishing the System . . . . . . . . . . . . . . . . . . . . . . . . 107

Now It’s the Browser’s Turn . . . . . . . . . . . . . . . . . . . . . . . . . 108

Defining the Style Guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

Web-Specific . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Why the Style Guide Should Live in the Browser . . . . . . . . . . . . . . . . . . . 114

Building the Component Library. . . . . . . . . . . . . . . . . . . . . . 114

Contents of a Comprehensive Component Library . . . . . . . . . . . . . . . . . . 116
Choosing the Best Environment for Your Components. . . . . . . . . . . . . . . 124

Prototyping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Roughing It in Low-Fidelity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
High-Fidelity and Beyond! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

8 Getting Back into Photoshop with Page Layers . . . . . . 131

Rough Waters Ahead. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

Introducing Page Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

The Struggle to Increase Fidelity . . . . . . . . . . . . . . . . . . . . . 134

Don’t Get Too Comfortable in Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . 135
Leveraging Linked Smart Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

There’s No Easy Way to Suggest Tweaks . . . . . . . . . . . . . . . 137

The Old Screenshot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
The New Screenshot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

Our Pages Lack Cohesion . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

Framing Content and the Big Picture . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Where Skeuomorphism Worked . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

Some Elements Suffer from Responsive Wonkiness . . . . . . 143

Width-Specificity in Page Layers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

Exit Strategy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

 CONTENTS ix

9 Extracting Your Way Out of Photoshop . . . . . . . . . . . . . 147

Asset Extraction Is Like Pulling Teeth . . . . . . . . . . . . . . . . . . 147
Crop and Save . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Copy Merged . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Save for Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

Adobe Generator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

Auto-magic Generation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Pixel Precision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Speaking Fluent Generator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Layer Naming as a Practice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

Extract Assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

Extract . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Downloading Assets via Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Extracting Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Generating CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

10 Extending Photoshop. . . . . . . . . . . . . . . . . . . . . . . . . . 167

Building the “You” Version of Photoshop . . . . . . . . . . . . . . . 167

Artwork . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Subtle Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Random User Generator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Social Kit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Pictura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Transform Each . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
DevRocket . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Bjango Actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
WebZap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Composer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Layout Wrapper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
RotateMe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
x CONTENTS

Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
0to255 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Adobe Color (formerly Kuler) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Adobe Color CC for iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Coolorus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

Assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
iOS Hat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
OtherIcons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Glifo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
FlatIcon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
TinyPNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
ImageOptim . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187

Prototyping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Framer, Composite, and Stand In . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
InVision . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190

Organization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
GuideGuide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191
Renamy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Ink 192
psdiff . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193

Miscellaneous Photoshoppery . . . . . . . . . . . . . . . . . . . . . . . 194

ShortcutFoo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Photoshop Secrets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195

11 Remembering Etiquette . . . . . . . . . . . . . . . . . . . . . . . . 197

The Problem with Inheriting PSDs . . . . . . . . . . . . . . . . . . . . 197

What Is Photoshop Etiquette? . . . . . . . . . . . . . . . . . . . . . . . . 199

Improves Efficiency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Keeps You Organized. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Creates Conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Increased Importance in an RWD Workflow . . . . . . . . . . . . . . . . . . . . . . 200

Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Name Files Appropriately . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
 CONTENTS xi

Store Assets Relative to PSD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .202

File Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .202

Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .203
Name Layers and Be Accurate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .203
Use Groups and Globalize Where Possible . . . . . . . . . . . . . . . . . . . . . . . .204
Delete Unnecessary Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .205

Images. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .205
Be Nondestructive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .206
Use Blend Modes with Care . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .207
Be Aware of Resolution and Density . . . . . . . . . . . . . . . . . . . . . . . . . . . . .207

Type. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Standardize Font Access . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .207
Don’t Stretch Type. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .208
Control Your Text Boxes and Separate Them . . . . . . . . . . . . . . . . . . . . . .209

Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .209
Use Overlays Appropriately . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Nail Tileable Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Be Deliberate. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

QA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Proofread . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Account for All Assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Be Familiar with Browser Compatibility . . . . . . . . . . . . . . . . . . . . . . . . . . 212

12 Adopting a Completely New Workflow . . . . . . . . . . . . 215

Looking Back at Moving Forward . . . . . . . . . . . . . . . . . . . . . 215
Full-Page Photoshop Comps Are Disharmonious with RWD. . . . . . . . . . . 215
Designing in the Browser Helps, But Not As Much
As We’d Like. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
2 Cups Browser, 1 Cup Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Vetting Direction Efficiently Is Critical . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Style Can Be Established Through Small Exercises . . . . . . . . . . . . . . . . . 216
Page-Building Is Easier with Component-Based
Systems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
xii CONTENTS

Page Layers Makes Going from HTML to

Photoshop Simple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
New Extraction Tools Get Us Back to the
Browser Quicker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
We Can Customize Photoshop for RWD with
Useful Third-Party Extensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
A Little Etiquette Goes a Long Way . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219

On Adoption . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Strategies for Getting Buy-in Internally. . . . . . . . . . . . . . . . . . . . . . . . . . .220
Strategies for External Getting Buy-In . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
What Happens When Things Go Wrong . . . . . . . . . . . . . . . . . . . . . . . . . .226

Adjusting Your Perspective on Tools . . . . . . . . . . . . . . . . . . . 227

Repurposing Tools May Be Better Than Getting New Ones . . . . . . . . . . .228

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .229
4
A PLEA FOR PHOTOSHOP–
BROWSER HARMONY
In Chapter 3, I presented the case for a browser-based approach to web design. In
this chapter, I’ll take the browser approach down a peg, but I don’t want to diminish
its importance in a responsive workflow. The browser is still the centerpiece of what
we’re doing. But we need to work Photoshop back in to the fold—and not just because
we’re Photoshop fanboys and fangirls. If it didn’t make sense to include Photoshop,
I wouldn’t waste your time advocating its importance in the responsive web design
(RWD) workflow.
The good news is that Photoshop, more so than any other tool I can think of, fills an
important role missing in a browser-only design process.

Photoshop Is the New Vinyl

Have you ever had someone send you a link to a YouTube video and, before you know
it, you start going down a never-ending hole watching related video after related video?
That happened to me recently, and it started with the popular show “How It’s Made.”
My binge-watching led me to a fascinating piece on vinyl records. (If you just had to
Google vinyl records, you’re probably not the only one.)
The history of vinyl records is arguably more interesting than their manufacturing.
Many of us remember their popularity in the 1970s and 1980s. Even when the cassette
tape began to dominate music sales in the mid-1980s, records were still holding their
own. It wasn’t until the compact disc (CD) became the preferred music medium in the
1990s that vinyl records really fell out of favor. In fact, CDs were so superior to records
for most music consumers’ purposes that they pushed vinyl to the brink of extinction.
50 RESPONSIVE WEB DESIGN WITH ADOBE PHOTOSHOP

CDs offered a smaller, portable format that could fit significantly more music than
records. They were even more durable, depending on how you stored them. It’s no
shock that CDs were became more popular than vinyl. When the iPod ushered in the
digital music revolution of the mid-2000s and began to marginalize disc media, you
would assume it made vinyl go away altogether, right?
Wrong. An incredibly strange thing happened: In 2006, people started buying more
records. Today, vinyl growth is steady, and while it’s by no means equal to digital in
sales and mainstream consumer use, it remains relevant. Amazingly, market analysts
have assigned no single concrete reason for vinyl’s uptick in popularity (see Figure 4.1).

Figure 4.1 Vinyl has withstood some major innovations in music media, staying relevant even to the
current day. Can Photoshop do the same in the face of new apps such as Sketch and workflow
alternatives such as designing in the browser?

So, who or what gets the credit for sustaining the life of the vinyl record? Two main
audiences: audiophiles, who prefer vinyl’s sound quality and treasure their massive
record collections, and disc jockeys (DJs). DJs have mastered the art of combining the
digital and the analog, so to speak. Digital tracks play off a computer while the DJ spins
a record on a turntable for scratching, looping, and adding a host of physical effects.
Curious, I sought after some rationale from a friend of mine who is a popular Boston-
area DJ. Why does he prefer to use vinyl in his work? It’s the same thing we Photo-
shop users enjoy but sometimes have trouble putting words to: direct manipulation.
 4 A PLEA FOR PHOTOSHOP–BROWSER HARMONY 51

The Power of Manipulation

At last, we find Photoshop’s first legitimate way back into a respectable design pro-
cess. It’s unrealistic we’d completely abandon the visual techniques we’ve mastered for
years in favor of code-abstracted design. One of the major reasons we tend to feel more
“comfortable” in Photoshop is our ability to stretch, squish, shrink, and reposition ele-
ments. Sure, it’s possible to do those things with CSS somewhat easily. However, those
manipulations sit behind a wall of abstraction, adjusting values and refreshing to see
the results (see Figure 4.2).

Figure 4.2 The Free Transform tool, the Move tool, and a host of others offer an ease of use that enables the
exploration we desperately need—and won’t readily find in a coding-only design environment.

Designing in the browser can’t compete with the benefits of direct manipulation. Don’t
underestimate the value of drawing a shape in Photoshop and seeing every step in its
implementation. Your brain is processing all the sizes, colors, and positions, looking
for the one that feels right.

“I move shapes around until they make sense.”

—JARED ERONDU (https://twitter.com/erondu/status/465981370930450432)

Sure, there are some disadvantages to the freedom direct manipulation provides. It
engenders the “silo” effect, where we designers go solo and play in Photoshop for
extended periods of time, discouraging collaboration. Direct manipulation is neither
systematic nor object-oriented, meaning the process by which we transform type and
shape often doesn’t adhere to a pattern or set of preset constraints.
But exploring in Photoshop sure does help get the creative juices flowing.
52 RESPONSIVE WEB DESIGN WITH ADOBE PHOTOSHOP

Creative Mode vs. Correct Mode

I am usually superior creatively in Photoshop but better at being correct in HTML &
CSS. I have a propensity to try outlandish ideas on the Photoshop canvas, knowing
my actions have few repercussions, whereas when I’m coding, I’m sometimes fearful
of not being able to revert to a point when everything was “working.” Most designers
I know operate this way, although a rare few are just as creative in code as they are in
Photoshop.
As responsive web designers, we need to be “correct” in our execution of code, but we
also need to be able to vet our ideas adequately. I’m just not sure we can do both in a
single environment.
When I first set out to design in the browser, I assumed that because it had similar
tools to Photoshop, I’d be able to explore creative ideas in the same way. I could not
have been more wrong. Not only were my designs looking less distinctive and con-
sidered, but the amount of time I was spending on them increased significantly. I’d sit
for hours in CSS just trying one thing, reverting, trying another approach, and never
really nailing it.
This is where direct manipulation makes all the difference. Code abstracts design by
a layer of syntax. Instead of choosing position, size, and color by dragging or stretch-
ing, we use letters and numbers to assign a value. By no means is the latter approach
objectively wrong, but the former feels right for many of us. If you come from a print
background, you most likely agree that this abstraction hinders your ability to ideate.
The more I’ve thought about this abstraction, the more I’ve been able to attribute it to
one significant concern: following the path of least resistance.

The Path of Least Resistance

Even though we have the tools to pull off Photoshop-like effects in CSS, I don’t think
we always approach using them the same way.
Check out the audience navigation in Figure 4.3 (on the next page). This low-fidelity
prototype was built in HTML & CSS, and now it’s ready for styling. My first impulse
was to apply the button styles I was already toying with elsewhere and use them
accordingly.
 4 A PLEA FOR PHOTOSHOP–BROWSER HARMONY 53

Figure 4.3 A styling-ready, low-fidelity prototype built in HTML & CSS

Objectively, there’s nothing wrong with this approach, and certainly it communicates
that these are five areas you can visit. When I showed the client, they were quite under-
whelmed. The feedback I received was that the section didn’t have adequate emphasis
relative to the importance of the content.
My reaction was to fill the containing divs with the button color (see Figure 4.4 on
the next page). Bigger = more important, right?
54 RESPONSIVE WEB DESIGN WITH ADOBE PHOTOSHOP

Figure 4.4 Bigger buttons. Don’t laugh—you would have done the same thing.

Again, the clients were underwhelmed. They expected to have buttons and appreciated
the increased size, but they thought it was a missed opportunity to tell more of the
story behind the content. It’s a high school, and these portals are all part of the journey.
It wasn’t until I toyed around with that section in Photoshop that I started to layer some
new elements in, like screened photos and sideways text. The point isn’t that those tech-
niques are exclusive to Photoshop (because they’re not: adding a simple background
image and “transform: rotate” in an HTML & CSS editor is just as easy), but the idea
came more naturally in Photoshop.
Sarah Parmenter had a similar assessment of designing in the browser.

“It’s a guilty secret I’ve been harboring for about a year: I

cannot design directly into the browser. My creative brain
switches at the point when I open my HTML/CSS editor
(Espresso) and starts thinking in terms of structure and how
to achieve the look of my design using as much native CSS
as possible. If I don’t have my design to follow, the whole
process breaks down for me. I’ve tried, goodness knows I’ve
tried, but my designs end up suffering, looking boxy, bland,
and uninspiring.
”
—SARAH PARMENTER (www.sazzy.co.uk/2012/02/why-i-cant-design-in-
the-browser/)
 4 A PLEA FOR PHOTOSHOP–BROWSER HARMONY 55

Figure 4.5 A much more robust and considered direction

While I won’t advocate for having your entire design predetermined before HTML &
CSS, the example shown in Figure 4.5 is a case where taking one small section or com-
ponent into Photoshop makes a world of difference.
As unpopular as the idea may be, I think it’s easier to take the path of least resistance
in the browser than in Photoshop; working in an HTML & CSS editor makes you more
inclined to think in terms of boxes, containers, and the styles you usually employ than
ones you don’t. Heavy layering, offsetting only a single element and not others, and
breaking convention usually mean tweaking more than just a few HTML tags and CSS
properties. Sometimes, that amount of trial isn’t worth the inevitable error. Suffice it
56 RESPONSIVE WEB DESIGN WITH ADOBE PHOTOSHOP

to say, for whatever reason, I’m more inclined to play it safe in the design techniques
I use in code than in Photoshop.
Is it possible that lack of courage in our code-exclusive designs is the reason that all
RWD sites look so similar?

Responsive Design Sameness

The idea that responsive sites all look the same isn’t a new one. It’s a topic that’s been
broached many times, and you’ll find some interesting perspectives on it.

“Have you ever noticed how many websites look the same?
How many are just a bunch of rectangles? How many seem
to copy from one another? Where’s the uniqueness and
creativity?
”
—STEVEN BRADLEY (The Web is a Rectangle, www.vanseodesign.com/
web-design/rectangular-web/)

“Isitefeeldesign.
like responsive design has sucked the soul out of web-
Everything is boxes and grids. Where has the
creativity gone?
”
—NOAH STOKES (http://esbueno.noahstokes.com/post/44088237921/
where-has-all-the-soul-gone)

“Iprojects
wonder if #RWD looks the way it does because so many
aren’t being run by designers but by front-end dev
teams.
” —MARK BOULTON (https://twitter.com/markboulton/status/
445943150247702528)

The question of “Why do all RWD sites look the same?” is a pertinent one when you
consider that diversity in the pre-RWD era was fairly extraordinary. One could even
argue that Flash-based sites were the most distinctive of the lot. Today, it’s common-
place to pick out the sites designed in the browser from ones designed in Photoshop et
al. This notion is where we get such statements like “It looks like a Bootstrap/Founda-
tion site” and “It’s like they just slapped their logo on a responsive WordPress theme.”
 4 A PLEA FOR PHOTOSHOP–BROWSER HARMONY 57

Figure 4.6 Examples of similarities in responsive site design. Common components include “boxy” layouts, white
background headers, and hero images with white text overlaid.

Figure 4.7 Examples of similarities in sites designed on the Bootstrap framework. Unadjusted button styles are a
clear giveaway.

Figure 4.8 Examples of similarities in sites designed as WordPress themes. Similar content layout is a hallmark
of blogs.

To some extent, there will undoubtedly be shared styles and components from site to
site, no matter how original we think we’re being (Figures 4.6-4.8). That’s OK. I’d much
rather have a Web that works than one that succeeds in diversity for diversity’s sake.
Remember, the originality we established using Photoshop didn’t always translate to
58 RESPONSIVE WEB DESIGN WITH ADOBE PHOTOSHOP

the browser in a way that was user-friendly, either. Karen McGrane made this witty
retort to the complaint of RWD sameness as it applies to print:

“But why do all the magazines have the binding on the left?
And columnar layouts, so tired. Where’s the innovation?
”
—KAREN MCGRANE (https://twitter.com/karenmcgrane/status/
515162632551411712)

I’m not sure we can fault responsive design for a lack of uniqueness in sites, but cer-
tainly its introduction has added to the number of design considerations we need to
make. By extension, new considerations may not always be tested across all screen
sizes, so we rely on what “works” and what’s familiar. We’re still getting our feet wet
designing responsively; creativity will come.
That doesn’t mean we need to stifle uniqueness or “soul” in the name of being respon-
sively correct. We need to think creatively about being creative.

“Emulation is a part of the evolution of design. And the web,

for that matter. But design sameness tends to fade when
one forgets all of the existing patterns, all of the Bootstraps,
all of the preconceived design solutions. Design sameness
fades when designers stop focusing on which solutions for
their problem are out there and start focusing on the prob-
lem at hand.
”
—STEPHEN HAY (www.the-haystack.com/2014/03/21/responsive-design-
sameness/)

I contend that Photoshop can greatly assist in our efforts to infuse our designs with the
unconventional and unique. Where designing in the browser may introduce friction
in the creative process, Photoshop can help us focus on the best approach regardless
of the amount of code needed to execute it.

Using Photoshop Only When Necessary

Photoshop can ride along with designing in the browser, but we need to determine to
what degree. It would be counterproductive to revert to full-page comps, but we still
need Photoshop to throw down some high-fidelity ideas on. Likewise, we still need the
 4 A PLEA FOR PHOTOSHOP–BROWSER HARMONY 59

browser to keep our designs flexible, while curtailing the amount of time and effort we
exhaust trying to come up with truly unique ideas.
If a responsive workflow is your goal, I recommend adopting the following philoso-
phy: Photoshop can’t be the workhorse we’ve made it in years past. Instead, Photoshop
takes a backseat to in-browser design, but we still use it to ideate when necessary. To
what extent do we keep Photoshop involved?
In his article “Responsive Web Design in the Browser Part 1: Kill Photoshop,” Josh
Long makes the following statement:

“IfPhotoshop
you want to be a better designer, I’d start by killing

”
—JOSH LONG (http://blog.teamtreehouse.com/responsive-web-design-in-
the-browser-part-1-kill-photoshop)

While some of this sentiment seems in line with what we’ve explored, I object to
the notion that discarding any tool makes you a better designer. Becoming a better
designer has more to do with knowing the limits of the tools you use and knowing
when to use them for the greatest gain.
The browser can bear the majority of many layout and style decisions, which is great
because it’s ultimately where our design will live. We’d be shooting ourselves in the foot
if we tried to make every decision before writing a line of HTML or CSS. That puts the
onus on adopting a workflow that allows the flexibility needed to refine design solu-
tions after being in the browser (I’ll talk more about how to sell this kind of process
internally and externally in Chapter 12).

The Megaman Principle

Raise your hand if you’re also a child of the 1980s and grew up playing Nintendo. No,
not you, Wii whiz kids. Not you, Atari fans. I’m talking about the 8-bit Nintendo Enter-
tainment System. Specifically, I’m talking about my favorite series of games: Megaman.
For those unfamiliar, Megaman was pretty much the best thing ever. You controlled
a blue, android-like robot in a classic quest of good versus evil. Your mission was to
take down an army of bad robots, each of which had a unique weapon, be it ice, fire,
stones, bubbles, or the even more obscure piles of trash Junk Man used. When you
defeated these bad guys, you’d inherit their weapon.
60 RESPONSIVE WEB DESIGN WITH ADOBE PHOTOSHOP

In most instances, you’d be hard-pressed to find a use for your default Mega Buster
arm cannon, so the quintessential strategy for beating each boss was to use another’s
weapon. Ice Man’s Ice Slasher was critically effective against Fire Man, for example.
Choosing the right weapon at the right time was, essentially, a glorified game of Rock-
Paper-Scissors. Mastering when to use each weapon made the game infinitely easier
(see Figure 4.9).

Figure 4.9 Just as Megaman leveraged timing to beat his enemies, can we do the same with Photoshop?
Specifically, I mean the enemies called “boxy,” “bland,” and “uninspiring.”

Collecting weapons and knowing when to use them is not so different from the prob-
lem we face in web design. By using the right tool, at the right time, for the right pur-
pose, we extract more out of said tool than normal. Knowing when to use Photoshop
is the only thing that can logically keep it in our workflows. Using it too often, too
early, or for the wrong purpose produces frustration, wasted time, and potentially
wasted money.
 4 A PLEA FOR PHOTOSHOP–BROWSER HARMONY 61

Practical Photoshopping: An Overview

In the next few chapters, you’ll look at when, why, and how to use Photoshop alongside
the browser. Because every project is different, implementations will vary, but you’ll
discover a few inventive ways of getting the most out of Photoshop.

Inspiration
If our plan is to present multiple design concepts to clients, where does RWD fit in? It
seems like a daunting task to show contrasting design directions through Photoshop
mock-ups at a few different sizes, so what’s a more effective way to move the project
forward?
The secret may be getting everyone on track toward a shared ideal far before anything
is done in Photoshop. You’ll explore a few ways to hedge what would otherwise be dis-
carded work by using inspiration from around the Web to drive your directions. Equally
important, you’ll discover techniques for extracting more useful feedback from your
clients.

Art Direction
The conundrum of page comps in a responsive world hasn’t been ignored. While some
of the industry has turned to producing tools to make comps more quickly, a strong
contingent of designers have devised better design documents altogether. You’ll take
a look at this landscape in Chapter 6, including one I find to be the best suited for a
responsive process: element collages.

Building Blocks
You may have created style guides in the past or be familiar with their longstanding
print implementation. I’ll define what style guides mean for the Web and, more impor-
tantly, as part of a responsive process.
Similarly, component (or pattern) libraries extend what’s introduced in a style guide
into functional collections of elements.
While it behooves us to develop both of these elements in code, there’s plenty of oppor-
tunity to spice them up in Photoshop, long before we run into any funky page designs.

Repair
It’s incredibly optimistic—naïve, even—to expect all the disparate elements of a
responsive site design to come together seamlessly. When it’s time to build pages from
components, we usually find ourselves scrambling to make everything look like the
coherent page it should be.
Let’s determine to expect the wonkiness of putting components together and combat
the seamless spots with Photoshop. You’ll take a look at some common examples of
where page design can fall short and feel disjointed in the absence of a system and
pivot swiftly into an environment to try some stitch-work.
All of this preparation will lead to the union of Photoshop and the browser and to a
better responsive workflow.
Index

Numbers alerts, in component libraries, 123

0to255 tool, for color variation, 179–180 Allsopp, John, 15
320px width comps, for smartphones, 18–19 Aptana Studio, 40
768px width comps, for tablets, 18–20 archiving files, 201
960px width comps, for desktops, 18–20 art direction, for Photoshop-browser
harmony, 61
artwork plug-ins/tools
A
Bjango Actions, 175–176
abstraction, balanced with detail, 91
Composer, 177
accessibility of files, 202
DevRocket, 174–175
accordions, 122
LayoutWrapper, 177–178
accuracy, of in-browser design, 42–43
Pictura, 172–173
active states, in Photoshop comps, 22
Random User Generator, 171
Adobe Color, 180
RotateMe, 178
Adobe Color CC, 181–182
Social Kit, 172
Adobe Creative Cloud. see CC
Subtle Patterns, 169
(Creative Cloud)
Transform Each, 173–174
Adobe Edge Reflow, for in-browser
WebZap, 176–177
design, 33–34
asset compression, with ImageMagick, 154
Adobe Generator
asset extraction
asset extraction overview, 152–153, 219.
Adobe Generator for, 152–157, 219
see also asset extraction
Copy Merged for, 150–151
background asset generation, 153
crop and save for, 148–150
exporting to folders/subfolders, 156–157
Extract Assets for, 157–160, 219
file formats produced by, 154–155
Extract online service, 160–165
layer naming for, 157
Save for Web in, 151–152
Photoshop CC addition, 30
asset plug-ins/tools
pixel precision with, 153–154
FlatIcon, 186
sizing images/group folders with, 156
Glifo, 185
UI layer, Extract Assets, 157–160
ImageOptim, 187
Adobe Photoshop. see Photoshop
iOS Hat, 183–184
Adobe Typekit, 24, 162, 207–208
OtherIcons, 184
adopting new workflow
TinyPNG, 186–187
client indecision on direction, 226
Asset Resolution presets, 159
designer-developer discord, 227
assets
external acceptance, 224–226
accounting for, 212
internal acceptance, 220–224
storing relative to PSD, 202
promotion difficulties, 219–220
Assets tab, 162
unsuccessful element collage, 226–227
Atomic Design (Frost), 222
Aizlewood, Jon, 96
230 INDEX

B CC Libraries
backgrounds creating buttons for, 125
fixed positioning of, 23 features/functions of, 124–126
gradient, 35 CC Market, as art resource, 170
Bearded design shop, 100 CCM (Christian Care Ministry), 92–93, 95
the big inclusion, 67 Chapman, Shaun, 180
the big reveal, 25–26, 67 character styles, in Photoshop, 88
bird’s-eye view, for cohesive style, 142 Chrometaphore’s Ink plug-in, 192–193
Bjango Actions, 175–176 Clandestine Photoshop (Rose), 222
blend modes Clarke, Andy, 150
careful use of, 207 Clearleft, 96, 97–98
with CSS, 35 client presentations
bloat, 128 the big reveal, 25–26
Bootstrap framework sites, 56–58 design process involvement, 66–67
Bowles, Cennyd, 145 educating on design, 45–46
Brackets, 40 element collages in, 101–102
breadcrumb navigation, in component on in-browser design, 43
libraries, 121 offering contrasting options, 64–66, 74
breakpoint(s) pursuing efficiency in, 75–77
difficulty of three, 18–22 selling new workflow ideas, 224–226
focus on single, 4 with traditional Photoshop, 26–27
browser(s) visual inventories for, 74
compatibility, awareness of, 212–213 Cloud.typography, 24
design variations in, 44 Coda, 40
Photoshop as complement to, 135–136 Code School, 5
resizing, 37–38 Codeacademy, 5
style guide created in, 114 coding skills, 4–6
style prototypes for, 84–87 cohesive page design
web design in. see in-browser design big picture perspective for, 140–142
buttons bird’s-eye view in, 142
calls-to-action, 119 lack of, 140
for CC Libraries, 125 skeuomorphism and, 142–143
in style guides, 111 collages, element. see element collages
Buxton, Bill, 65 collaging format, for moodboards, 68, 69
color plug-ins/tools
0to255 tool, 179–180
C Adobe Color, 180
Callahan, Ben, 222 Adobe Color CC, 181–182
calls-to-action buttons, 119 Coolorus, 182
canvas size, for element collages, 91–92 color(s)
Cascading Style Sheets. see CSS (Cascading cohesive design and, 142–143
Style Sheets) comparisons, in element collages, 99–100
CC (Creative Cloud) extraction of, 162–163
accessing character styles in, 88 manipulating with SVG mages, 155
Adobe Color CC, 181–182 in style guide, 109–110
benefits of, 9 comments, in component libraries, 123
for Extract online service, 160–165 communication
reducing costs with, 30 client, 17–18, 225. see also client
presentations
 INDEX 231

designer-developer, 47–48, 227 correct mode in, 52

internal, 17, 221–222, 223 Extract generating, 163–164
multiple channels of, 70–71 Photoshop effects with, 35
comp approach, to design options, 64–65. see Photoshop generating, 164–165
also full-page comps setting up colors in, 110
component inventories, 87–89
component libraries D
best environment choice for, 124–126 A Dao of Web Design (Allsopp), 15
breadcrumbs/pagination in, 121 deliverables
calls-to-action/sign-up modules in, 119 conversations vs., 77
comments/alerts/latest news/recent feeds style guides as, 114
in, 123 design conferences, 223–224
easier page-building and, 218 design gallery sites, 71
expanding panels in, 122 design process. see also web design
forms/input types in, 116 including stakeholders in, 66–67
hero blocks in, 117–118 moodboards in, 67–72
image grids/media blocks in, 117 offering contrasting options, 64–66, 74
image with caption in, 118 pursuing efficiency in, 75–77
navigation in, 119–120 through conversations, 77
overview of, 114–115 visual inventories for, 72–75
for Photoshop-browser harmony, 61 designer-developer communication, 47–48,
sidebar callouts in, 120–121 227
tabbed panels in, 121–122 DevRocket plug-in, 174–175
Composer plug-in, 177 documentation, Ink plug-in for, 192–193
Composite app, for interactive prototypes, downloading assets, 162
188–189 Dribble design gallery site, 71
comps drop shadows, with CSS, 35
fixed-width, static, 18–22 Dziak, Jason, 67
full-page. see full-page comps
conferences, design, 223–224
contrast E
defining, 74 Ebert, Ralf, 133
in design options, 64–66 Edwards, Marc, 175
conventions, creating, 200 effects etiquette
conversations, in design process, 77 deliberate layer effects, 210–211
Coolorus plug-in, 182 Overlay use/tileable images, 210
Copy All option, 163–164 efficiency, Photoshop etiquette and, 199
Copy CSS function, 164–165 element collages
Copy Merged, for asset extraction, 150–151 abstraction and detail in, 91
Creative Cloud. see CC (Creative Cloud) color comparisons in, 99–100
creativity, in Photoshop, 52 crafting, 91–93
cropping description/function of, 90–91
Adobe Generator precision in, 154–155 dissimilar to websites, 96–99
in asset extraction, 148–150 full-page comps and, 104–105
CSS (Cascading Style Sheets) iterative design with, 94–96
building a style guide in. see style guides limiting scope of, 100–101
coding skills with, 4–5 as point of reference, 103–104
component libraries and, 124 style exploration with, 216–217
controlling hover state, 155 useful client feedback for, 101–102
232 INDEX

visual metaphors in, 92–93 F

visualizing website from, 103 faults, Photoshop. see Photoshop faults
Ember cataloging tool, 71–72 featured articles, in component libraries, 123
Emmet tookit, 36 fidelity, Page Layers and, 135
Enns, Blair, 77 Fight phase, of ShortcutFoo app, 195
Erondu, Jared, 51 file share, for accessibility, 202
establishing style. see style, establishing file size
etiquette, Photoshop importance of, 149–150
effects and, 209–211 reducing, 187
files/folders and, 201–202 filename clarity, 201
images and, 205–207 filters, nondestructive technique for, 206
inheriting PSDs and, 197–198 fixed positioning, of background, 23
layers and, 203–205 fixed-width comps
quality assurance, 211–213 multiple, 20–22
reasons for, 199–200, 219 three-breakpoint trap and, 18–20
type and, 207–209 FlatIcon, free icons with, 186
website, 198 flexibility, of Illustrator, 173–174
Evernote cataloging tool, 71 flexible grids, 8
Evolving the Digital Style Guide (Pratt), 222 Flickr integration, with Pictura, 172–173
expanding panels, in component libraries, fluid images, 8
122 focus states, in Photoshop comps, 22
expectations the fold, 46–47
in adopting new workflow, 221–222 folders
resetting, with clients, 224–225 Adobe Generator exporting to, 156–157
extending Photoshop asset storage in, 202
artwork tools for. see artwork plug-ins/ fonts
tools with CSS, 35
assets for, 183–187 extraction of, 162–163
CC Market for, 170 in Photoshop comps, 23–24
color tools for, 179–182 rendering difficulties of, 24–25
organizational tools for, 191–194 standardizing access to, 207–208
overview of, 167–168, 219 true rendering of, 39–40
Photoshop proficiency tools, 194–196 Foral, Jason, 177
prototyping tools for, 188–190 forms, in component libraries, 116
website, 168 Framer app, for interactive prototypes, 188
Extract Assets Fried, Jason, 26, 41
image etiquette and, 207 Frost, Brad, 9, 222
overview of, 157–158, 219 full-page comps
setup for, 158–160 assessment limitations, 28–29
Extract online service code aversion/waterfall method and, 16–17
asset extraction with, 162 definition of, 15–16
extracting values with, 162–163 element collages and, 104–105
generating CSS with, 163–165 as exercises in proofreading, 43–44
overview of, 160 faulty communication and, 17–18
setup for, 161 inaccurate representation, 26
extracting assets. see asset extraction inefficiency of, 25–26
extracting values, 162–163 noninteractivity of, 22–23, 215–216
past function/goals of, 16
 INDEX 233

presentation difficulties, 26–27 Illustrator flexibility, 173–174

replacements for, 80–87 image
static fixed-width, 18–22 with caption, 118
web fonts and, 23–24 dimensions, 112
Future of Web Design conference, 219 image assets
Generator exporting. see Adobe Generator
G sizing, 156, 159
Gaussian Blur filter, 206 image blocks, in component libraries, 117
Generate function, in iOS Hat, 184 image borders, with CSS, 35
Generator. see Adobe Generator image etiquette
Get Your Visual Style On (Perez-Cruz, blend modes/resolution/density in, 206
Callahan & Mall), 222 use of nondestructive techniques, 205–207
GIF images, Generator exporting, 154 image grids, in component libraries, 117
Gimp, 30 ImageMagick, 154
GitHub ImageOptim, reducing file size with, 187
file accessibility with, 202 in-browser design
psdiff tool previewing in, 193–194 accuracy of, 42–43
Glifo, packaging icons with, 185 component library for. see component
global changes, in-browser design and, 39 libraries
gradient backgrounds, with CSS, 35 with CSS/HTML, 34–35
gray-box mock-ups designer-developer communication, 47–48
creating, 126–128 editing on the fly, 45
exporting to Photoshop, 135 educating clients and, 45–46
grids, flexible, 8, 117 evaluating design behavior in, 43–44, 216
group folders, Generator exporting, 156 fluid width with, 37–38
GuideGuide plug-in, 191 the fold and, 46–47
global changes and, 39
in-progress viewing, 43
H Inspect Element option, 37
Hay, Stephen, 22 interactivity in, 38
hero blocks, in component libraries, 117–118 less effort/more reality in, 40–42
high-fidelity prototypes, 129–130 limitations of, 216
hover states minimizing time in Photoshop, 135–136
CSS controlling, 155 no additional cost in, 40
in Photoshop comps, 22 options for, 33–34
HTML (Hypertext Markup Language) prototypes for. see prototypes
building a style guide in. see style guides realistic expectations with, 44
coding skills with, 4–5 style guide for. see style guides
component libraries done in, 124 text editor for, 35–36
correct mode in, 52 true font rendering and, 39–40
design choice of, 3 InDesign character styles, 88
designing in browser with. see in-browser Ink plug-in, for documentation, 192–193
design inner shadows, with CSS, 35
exporting components from, 133–134 input types, in component libraries, 116
Inspect Element option, 37
I inspiration
icons approach to moodboards, 68–70
packaging with Glifo, 185 finding/storing, 70–72
in style guides, 112–113 for Photoshop-browser harmony, 61
234 INDEX

interactivity, lack of, 22–23 Marcotte, Ethan, 8

InVision app, for interactive prototypes, 190 McEfee, Cameron, 191
iOS devices, DevRocket for, 174–175 McGrane, Karen, 58
iOS Hat, 183–184 Measure function, in iOS Hat, 184
iStock Photo watermark, 212 media blocks, in component libraries, 117
iterative design, 94–96 Media Queries design gallery site, 71
Megaman principle, 59–60
J Messina, Jim, 136
Jehl, Scott, 9 Mo, Atle, 169
JPEG images, Generator exporting, 154, 155 mock-ups
full-age comps for, 16–18
gray-box, 126–128, 135
K replacements for, 80–87
Kardys, Dennis, 65 Monteiro, Mike, 102
Khadeyev, Kamil, 174 moodboards
Kippt cataloging tool, 71 finding/storing inspiration for, 70–72
organic inspiration approach to, 68–70
L purpose of, 67–68
latest news, in component libraries, 123 traditional collaging format, 68, 69
layer naming movement, in Photoshop comps, 23
accuracy in, 203–204 multiple designers, Linked Smart Objects for,
Adobe Generator improving, 157 136–137
as-you-go method, 204 multiple formats, Generator exporting, 156
Extract Assets and, 159
layers N
converting to Smart Objects, 206 naming layers. see layer naming
deleting unnecessary, 205 navigation, in component libraries, 119–120
effects for, 210–211 New Guides, 139
groups/globalizing, 204–205 news, in component libraries, 123
Layout Wrapper, framing work in Safari Niice design gallery site, 71
browser, 177–178 Notepad, 40
Learn phase, of ShortcutFoo app, 195
Libraries. see CC Libraries
link styles, in style guides, 111 O
Linked Smart Objects, leveraging of, 136–137 one-direction approach to design options, 65
live previewing, 36 organic inspiration approach to moodboards,
LiveShare plug-in, for interactive prototypes, 68–70
190 organization, Photoshop etiquette and,
Loggins, Kenny, 136 199–200
Long, Josh, 59 organizational plug-ins
low-fidelity prototypes GuideGuide, 191
creating, 126–128 Ink, 192–193
exporting to Photoshop, 135 psdiff, 193–194
frameworks for, 128 Renamy, 192
Loyd, Jeremy, 85 OtherIcons plug-in, 184

M P
Macaw design app, 33–34, 180 Page Layers
Mall, Dan, 17, 72, 90, 92, 98, 222 benefits of working with, 138–140, 218
 INDEX 235

exporting components to Photoshop with, Character/Paragraph Styles in, 39

133–134 Linked Smart Objects in, 136–137
improving cohesiveness with, 140–143 Photoshop Color Shift option, 29
increasing fidelity with, 135 Photoshop Etiquette Manifesto for Web
New Guides/Smart Guides for, 139 Designers (website), 198
old screenshot methods vs., 137–138 Photoshop faults
width-specificity in, 145–146 assessment limitations, 28–29
pagination, in component libraries, 121 code aversion/waterfall method and, 16–17
Parmenter, Sarah, 54 cost factor, 30, 40
Pattern Tap design gallery site, 71 exporting difficulties, 29–30
Perez-Cruz, Yesenia, 222 faulty communication and, 17–18
performance of RWDs, 9 inaccurate representation, 26
Photoshop increased workload, 31
basics/version disparities of, 9 inefficiency of, 25–26
character styles in, 88 instability of, 29
as complement to browser, 135–136 noninteractive, 22–23
component libraries done in, 124 presentation difficulties, 26–27
Copy CSS function in, 164–165 static fixed-width, 18–22
direct manipulation with, 51, 216 web fonts and, 23–24
effects, utilizing CSS, 35 Photoshop proficiency tools
etiquette. see etiquette, Photoshop Photoshop Secrets, 195–196
extracting assets from. see asset extraction ShortcutFoo app, 194–195
falling out of favor, 2–3, 11 Pictura plug-in, 172–173
getting from browser back into. see Page Pinterest tool, 68, 71
Layers pixel density, image etiquette and, 207
modifying screenshots in, 137–140 pixel precision, of Adobe Generator, 154–155
optimizing. see extending Photoshop Pixelmator, 30
personal histories using, 14 plug-ins
as preferred web design tool, 9 artwork. see artwork plug-ins/tools
process with, 6–7 asset integration/generation, 183–187
role in RWD. see Photoshop-browser color, 179–182
harmony LiveShare for interactive prototyping, 45,
single breakpoint focus with, 4 190
superior creativity in, 52–56 organizational, 191–194
toolbars evolution, 13 PNG images, Generator exporting, 154, 155
traditional, faults of. see Photoshop faults The Post-PSD Era (Mall), 17
Photoshop-browser harmony Pratt, Andy, 222
creative mode/correct mode, 52 presentations
importance of, 216 promoting new workflow ideas, 220–221
Megaman principle for, 59–60 on style, 222
minimal use of Photoshop, 58–59 proofreading, 211–212
path of least resistance in, 52–56 prototypes
Photoshop’s manipulation in, 51 high-fidelity, 129–130
preparation for, 61–62 low-fidelity, 126–128
Photoshop CC Prototyping Style (Callahan), 222
Adobe Generator in, 152–157. see also prototyping tools
Adobe Generator Framer/Composite/Stand In, 188–189
Adobe Typekit in, 24 InVision, 190
236 INDEX

PSD, asset storage relative to, 202 Save for Web option, for asset extraction,
psdiff tool, for PSD previewing in GitHub, 29–30, 151–152
193–194 Save function, in asset extraction, 149–150
Scalable Vector Graphic (SVG) images, 155
R scope creep, 100–101
Raindrop cataloging tool, 71 screen resolution, image etiquette and, 207
Random User Generator, 171 screenshots
raster graphics, with Page Layers, 135 New Guides/Smart Guides for, 139
recent feeds, in component libraries, 123 old methods for modifying, 137–138
RedPen tool, 27 Page Layers for modifying, 138–140
Renamy plug-in, 192 search filters, 70
repair work, 61–62 selling workflow ideas internally
Responsible Responsive Design (Jehl), 9 attend conferences, 223–224
responsive design sameness, 140 establish supporters first, 222–223
Responsive Design Workflow (Hay), 22 give presentations, 220–221, 222
responsive patterns, 8–9 set realistic expectations, 221–222, 223
responsive web design. see RWD (responsive selling workflow ideas to clients
web design) affirm direction, 225–226
Responsive Web Design in the Browser Part 1: increase communication/involvement, 225
Kill Photoshop (Treehouse blog), 2 reset expectations, 224–225
Responsive Web Design (Marcotte), 8 Sheeran, Norm, 176
responsive wonkiness ShortcutFoo app, 194–195
fixing, 145–146 sidebar callouts, 120–121
identifying, 143–145 sign-up modules, 119
reverse-engineering style tiles, 83 Site Inspire design gallery site, 71
RotateMe script, 178 sizing images
rounded rectangles, with CSS, 35 with Adobe Generator, 156
RWD (responsive web design) previewing size for, 159
in browser. see in-browser design Sketch tool, 3, 30
contrasting options for, 64–66, 74 sketching, 80
core tenets of, 8 Sketching User Experiences (Buxton), 65
including stakeholders in, 66–67 Sketching User Experiences: The Workbook
lack of cohesive style, 140–143 (Greenberg et al.), 80
Linked Smart Objects for, 136–137 skeuomorphism, cohesive design and,
new workflow for. see adopting new 142–143
workflow slicing, 30
Page Layers for, 133–135 Smart Guides, 139
performance of, 9 Smart Objects
with Photoshop, 7 converting layers to, 206
Photoshop etiquette in, 200 editing, 136
Photoshop vs., 2–3 Social Kit plug-in, 172
potential difficulties in, 132–133 Sparkbox, 84
repurposing tools for, 228 spelling errors, proofreading for, 211–212
responsive patterns in, 8–9 stakeholders, in design process, 66–67
responsive wonkiness and, 143–146 Stand In app, for interactive prototypes,
188–189
state changes, in Photoshop comps, 22
S style, establishing
Sanchez, Edward, 195–196 component inventories for, 87–89
 INDEX 237

element collages for. see element collages TinyPNG plug-in, for compressing PNGs,
sketching, 80 186–187
style prototypes for, 84–87 toolbars, Photoshop, 13
style tiles for, 81–83 tools
style guides artwork. see artwork plug-ins/tools
color in, 109–110 asset integration/generation, 183–187
created in browser, 114 color, 179–182
defining, 108–109 for in-browser design, 33–34
icons in, 112–113 merits of comparable, 9–10
link styles/buttons in, 111 organizational, 191–194
for Photoshop-browser harmony, 61 prototyping, 188–190
tables/image dimensions in, 112 repurposing existing, 228
typography in, 110–111 Transform Each script, 173–174
style prototypes transparency
advantages of, 216 with CSS, 35
design elements of, 85 in design process, 66–67
flexibility of, 86–87 Treehouse, 5
function of, 84 Twitter Bootstrap site, 128
style tiles type etiquette
description/advantages of, 82 control/separate text boxes, 209
exploration through, 216 no stretching, 208
as mock-up alternative, 81 proofreading, 211–212
reverse-engineering, 83 standardize font access, 207–208
Styles tab, 163 typography, in style guide, 110–111
Sublime Text, 40
Subtle Patterns plug-in, 169 U
SVG (Scalable Vector Graphic) images, 155 UI Parade online catalog, 176
swatches, of design color options, 110 UI (user interface), Extract Assets as,
157–160
T Unmatched Style design gallery site, 71
tabbed panels, in component libraries,
121–122 V
tables, in style guides, 112 Verizon Wireless, 150
Terrett, Ben, 4 versatility, of style tiles, 82
Test phase, of ShortcutFoo app, 195 vetting direction
text blocks, in component libraries, 117 importance of, 216
text boxes, controlling/separating, 209 including stakeholders in, 66–67
text editor, for in-browser design, 35–36 moodboards in, 67–72
TextEdit, 40 offering contrasting options, 64–66, 74
The Win Without Pitching Manifesto (Enns), pursuing efficiency in, 75–77
77 through conversations, 77
This Is Responsive (Frost), 9 visual inventories for, 72–75
three-breakpoint trap, 18–20 video, in responsive web design, 8
three-direction approach, to design options, vinyl records, 49–50
64–65 visual inventories
“throw it over the wall” workflow, 16, 17 for design process, 72–75
thumbnails, use of Overlays and, 210 efficiency of, 75–77
time savings, with Page Layers, 139–140 visual metaphors, in element collages, 92–93
238 INDEX

W standardizing access to, 207–208

Warby Parker “Home Try-On” program, true rendering of, 39–40
40–41 Webflow app for in-browser design, 33–34
Warren, Samantha, 81 websites
waterfall method, 17 element collage dissimilarity, 96–99
web design. see also design process element collages leading to, 103
coding skills for, 4–6 WebZap plug-in, 176–177
Photoshop as tool of preference for, 9 weekly updates, on design ideas, 70
Photoshop history in, 14 wonkiness
responsive workflows for, 6–7 fixing, 145–146
switching away from Photoshop, 2–3 identifying, 143–145
weekly updates on new ideas, 70 Woodworth, Ken, 68
web fonts WordPress sites, 56–57
with CSS, 35
extraction of, 162–163 Z
in Photoshop comps, 23–24 Zeldman, Jeffrey, 36
rendering difficulties of, 24–25 Zurb Foundation site, 128