Responsive Web Design With Adobe Photoshop · 1st Edition by Rose, Dan -- Read -- Imperial Library of Trantor

Index

Title Page Copyright Page Acknowledgments 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

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

Index

← Prev
Back
Next →

← Prev
Back
Next →