طراحی وب واکنش‌گرا با ادوبی فتوشاپ، ویرایش اول

Title Page 2 Copyright Page 3 Acknowledgments 5 Contents 6 1. Photoshop’s New Groove 13 Called Into Question 13 Stick in the Mud 15 Fear of the Unknown? 15 Can I Still Get by Without Knowing Code? 16 More Process Than Tool 18 A Battle of Two Short Words 19 Not on the Menu Tonight 19 The Core Tenets of Responsive Web Design 19 Responsive Patterns 20 Performance 20 Photoshop Basics 20 The Minutiae of Version Disparity 21 The Merits of Comparable Tools 21 Finding Photoshop’s Groove 22 We Need to Make This Responsive! 22 2. How Did We Get Here? 24 How We Used to Know Photoshop 24 The Faults of Traditional Photoshop 25 On Full-Page Comps 26 Pain Point du Jour 28 Fixed-Width Comps 28 Lack of Interactivity 32 Some Fonts Are Better Than No Fonts? 34 The Big Reveal 35 What Did You Expect? 35 Presentation Woes 36 Bound by Approval 38 Not So Stable 39 Less-Than-Seamless Exporting 39 Empty Your Pockets 40 Double the Effort, Double the Pain 40 If Not Photoshop, What? 41 3. The Case for Designing in the Browser 42 You Get a Tool! And You Get a Tool! Everyone Gets a Tool! 42 Designing in the Browser 101 43 Text Editor and Live Preview 44 Inspect Element 46 Fluid by Nature: The Inherent Benefits of the Browser 47 Interactivity 47 Global Changes 48 Free 49 1x the Effort 49 Web Design’s Natural Habitat 51 Public Testing 52 PSDs for Proofreading, Browser for Evaluating Behavior 53 Reaffirming Expectations That Things Look Different in Different Browsers 53 Easy to Change on the Fly 54 Assessment as a Client Education Tool 54 Fold 55 Designer/Developer Bonding 57 OK to Kill Photoshop Now? 57 4. A Plea for Photoshop–Browser Harmony 58 Photoshop Is the New Vinyl 58 The Power of Manipulation 59 Creative Mode vs. Correct Mode 60 The Path of Least Resistance 61 Responsive Design Sameness 65 Using Photoshop Only When Necessary 68 The Megaman Principle 69 Practical Photoshopping: An Overview 70 5. Vetting Direction 72 The Contrast Conundrum 72 The Comp Approach 72 Within the Realm of Possibility 74 Including Your Stakeholders in the Design Process 74 Moodboards 75 Methods of Moodboarding 76 Finding and Storing Inspiration 79 Visual Inventories 81 The Pursuit of Efficiency 84 Conversations, Not Deliverables 86 Experimenting with Style 86 6. Establishing Style 87 Suitable Mock-up Replacements 87 On Sketching 87 Style Tiles 88 Style Prototypes 91 Component Inventory 95 Element Collages 98 Stripping Out the Abstraction 99 Crafting an Element Collage 99 Covering a Lot of Ground Quickly 102 Do Not Make It Look Like a Website 104 Color Comparisons 107 Scope Creep 108 Asking the Right Questions 109 Do Make It Look Like a Website 110 Point of Reference 110 I Still Can’t See It 111 What’s Missing 112 7. Establishing the System 113 Now It’s the Browser’s Turn 113 Defining the Style Guide 113 Web-Specific 114 Why the Style Guide Should Live in the Browser 119 Building the Component Library 119 Contents of a Comprehensive Component Library 120 Choosing the Best Environment for Your Components 128 Prototyping 130 Roughing It in Low-Fidelity 131 High-Fidelity and Beyond! 133 8. Getting Back into Photoshop with Page Layers 137 Rough Waters Ahead 137 Introducing Page Layers 139 The Struggle to Increase Fidelity 139 Don’t Get Too Comfortable in Photoshop 141 Leveraging Linked Smart Objects 141 There’s No Easy Way to Suggest Tweaks 143 The Old Screenshot 143 The New Screenshot 144 Our Pages Lack Cohesion 145 Framing Content and the Big Picture 145 Where Skeuomorphism Worked 147 Some Elements Suffer from Responsive Wonkiness 148 Width-Specificity in Page Layers 150 Exit Strategy 150 9. Extracting Your Way Out of Photoshop 151 Asset Extraction Is Like Pulling Teeth 151 Crop and Save 151 Copy Merged 154 Save for Web 154 Adobe Generator 156 Auto-magic Generation 157 Pixel Precision 157 Speaking Fluent Generator 158 Layer Naming as a Practice 160 Extract Assets 161 Setup 162 Extract 164 Setup 164 Downloading Assets via Libraries 166 Extracting Values 166 Generating CSS 167 10. Extending Photoshop 171 Building the “You” Version of Photoshop 171 Artwork 172 Subtle Patterns 172 Random User Generator 174 Social Kit 175 Pictura 176 Transform Each 177 DevRocket 178 Bjango Actions 179 WebZap 180 Composer 181 Layout Wrapper 182 RotateMe 182 Color 183 0to255 183 Adobe Color (formerly Kuler) 184 Adobe Color CC for iOS 185 Coolorus 186 Assets 187 iOS Hat 187 OtherIcons 188 Glifo 189 FlatIcon 190 TinyPNG 190 ImageOptim 191 Prototyping 192 Framer, Composite, and Stand In 192 InVision 195 Organization 195 GuideGuide 196 Renamy 196 Ink 197 psdiff 198 Miscellaneous Photoshoppery 198 ShortcutFoo 199 Photoshop Secrets 199 11. Remembering Etiquette 201 The Problem with Inheriting PSDs 201 What Is Photoshop Etiquette? 202 Improves Efficiency 202 Keeps You Organized 203 Creates Conventions 203 Increased Importance in an RWD Workflow 203 Files 204 Name Files Appropriately 204 Store Assets Relative to PSD 204 File Accessibility 205 Layers 205 Name Layers and Be Accurate 205 Use Groups and Globalize Where Possible 207 Delete Unnecessary Layers 207 Images 208 Be Nondestructive 208 Use Blend Modes with Care 209 Be Aware of Resolution and Density 209 Type 209 Standardize Font Access 209 Don’t Stretch Type 210 Control Your Text Boxes and Separate Them 210 Effects 211 Use Overlays Appropriately 211 Nail Tileable Images 212 Be Deliberate 212 QA 213 Proofread 213 Account for All Assets 213 Be Familiar with Browser Compatibility 213 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 215 2 Cups Browser, 1 Cup Photoshop 215 Vetting Direction Efficiently Is Critical 215 Style Can Be Established Through Small Exercises 216 Page-Building Is Easier with Component-Based Systems 218 Page Layers Makes Going from HTML to Photoshop Simple 218 New Extraction Tools Get Us Back to the Browser Quicker 218 We Can Customize Photoshop for RWD with Useful Third-Party Extensions 218 A Little Etiquette Goes a Long Way 219 On Adoption 219 Strategies for Getting Buy-in Internally 220 Strategies for External Getting Buy-In 223 What Happens When Things Go Wrong 225 Adjusting Your Perspective on Tools 226 Repurposing Tools May Be Better Than Getting New Ones 226 Index 227 Annotation 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