Table of Contents for

Responsive Web Design with Adobe Photoshop

Index

Numbers

0to255 tool, for color variation, 179–180

320px width comps, for smartphones, 18–19

768px width comps, for tablets, 18–20

960px width comps, for desktops, 18–20

A

abstraction, balanced with detail, 91

accessibility of files, 202

accordions, 122

accuracy, of in-browser design, 42–43

active states, in Photoshop comps, 22

Adobe Color, 180

Adobe Color CC, 181–182

Adobe Creative Cloud. see CC (Creative Cloud)

Adobe Edge Reflow, for in-browser design, 33–34

Adobe Generator

asset extraction overview, 152–153, 219. see also asset extraction

background asset generation, 153

exporting to folders/subfolders, 156–157

file formats produced by, 154–155

layer naming for, 157

Photoshop CC addition, 30

pixel precision with, 153–154

sizing images/group folders with, 156

UI layer, Extract Assets, 157–160

Adobe Photoshop. see Photoshop

Adobe Typekit, 24, 162, 207–208

adopting new workflow

client indecision on direction, 226

designer-developer discord, 227

external acceptance, 224–226

internal acceptance, 220–224

promotion difficulties, 219–220

unsuccessful element collage, 226–227

Aizlewood, Jon, 96

alerts, in component libraries, 123

Allsopp, John, 15

Aptana Studio, 40

archiving files, 201

art direction, for Photoshop-browser harmony, 61

artwork plug-ins/tools

Bjango Actions, 175–176

Composer, 177

DevRocket, 174–175

LayoutWrapper, 177–178

Pictura, 172–173

Random User Generator, 171

RotateMe, 178

Social Kit, 172

Subtle Patterns, 169

Transform Each, 173–174

WebZap, 176–177

asset compression, with ImageMagick, 154

asset extraction

Adobe Generator for, 152–157, 219

Copy Merged for, 150–151

crop and save for, 148–150

Extract Assets for, 157–160, 219

Extract online service, 160–165

Save for Web in, 151–152

asset plug-ins/tools

FlatIcon, 186

Glifo, 185

ImageOptim, 187

iOS Hat, 183–184

OtherIcons, 184

TinyPNG, 186–187

Asset Resolution presets, 159

assets

accounting for, 212

storing relative to PSD, 202

Assets tab, 162

Atomic Design (Frost), 222

B

backgrounds

fixed positioning of, 23

gradient, 35

Bearded design shop, 100

the big inclusion, 67

the big reveal, 25–26, 67

bird’s-eye view, for cohesive style, 142

Bjango Actions, 175–176

blend modes

careful use of, 207

with CSS, 35

bloat, 128

Bootstrap framework sites, 56–58

Bowles, Cennyd, 145

Brackets, 40

breadcrumb navigation, in component libraries, 121

breakpoint(s)

difficulty of three, 18–22

focus on single, 4

browser(s)

compatibility, awareness of, 212–213

design variations in, 44

Photoshop as complement to, 135–136

resizing, 37–38

style guide created in, 114

style prototypes for, 84–87

web design in. see in-browser design

buttons

calls-to-action, 119

for CC Libraries, 125

in style guides, 111

Buxton, Bill, 65

C

Callahan, Ben, 222

calls-to-action buttons, 119

canvas size, for element collages, 91–92

Cascading Style Sheets. see CSS (Cascading Style Sheets)

CC (Creative Cloud)

accessing character styles in, 88

Adobe Color CC, 181–182

benefits of, 9

for Extract online service, 160–165

reducing costs with, 30

CC Libraries

creating buttons for, 125

features/functions of, 124–126

CC Market, as art resource, 170

CCM (Christian Care Ministry), 92–93, 95

Chapman, Shaun, 180

character styles, in Photoshop, 88

Chrometaphore’s Ink plug-in, 192–193

Clandestine Photoshop (Rose), 222

Clarke, Andy, 150

Clearleft, 96, 97–98

client presentations

the big reveal, 25–26

design process involvement, 66–67

educating on design, 45–46

element collages in, 101–102

on in-browser design, 43

offering contrasting options, 64–66, 74

pursuing efficiency in, 75–77

selling new workflow ideas, 224–226

with traditional Photoshop, 26–27

visual inventories for, 74

Cloud.typography, 24

Coda, 40

Code School, 5

Codeacademy, 5

coding skills, 4–6

cohesive page design

big picture perspective for, 140–142

bird’s-eye view in, 142

lack of, 140

skeuomorphism and, 142–143

collages, element. see element collages

collaging format, for moodboards, 68, 69

color plug-ins/tools

0to255 tool, 179–180

Adobe Color, 180

Adobe Color CC, 181–182

Coolorus, 182

color(s)

cohesive design and, 142–143

comparisons, in element collages, 99–100

extraction of, 162–163

manipulating with SVG mages, 155

in style guide, 109–110

comments, in component libraries, 123

communication

client, 17–18, 225. see also client presentations

designer-developer, 47–48, 227

internal, 17, 221–222, 223

multiple channels of, 70–71

comp approach, to design options, 64–65. see also full-page comps

component inventories, 87–89

component libraries

best environment choice for, 124–126

breadcrumbs/pagination in, 121

calls-to-action/sign-up modules in, 119

comments/alerts/latest news/recent feeds in, 123

easier page-building and, 218

expanding panels in, 122

forms/input types in, 116

hero blocks in, 117–118

image grids/media blocks in, 117

image with caption in, 118

navigation in, 119–120

overview of, 114–115

for Photoshop-browser harmony, 61

sidebar callouts in, 120–121

tabbed panels in, 121–122

Composer plug-in, 177

Composite app, for interactive prototypes, 188–189

comps

fixed-width, static, 18–22

full-page. see full-page comps

conferences, design, 223–224

contrast

defining, 74

in design options, 64–66

conventions, creating, 200

conversations, in design process, 77

Coolorus plug-in, 182

Copy All option, 163–164

Copy CSS function, 164–165

Copy Merged, for asset extraction, 150–151

Creative Cloud. see CC (Creative Cloud)

creativity, in Photoshop, 52

cropping

Adobe Generator precision in, 154–155

in asset extraction, 148–150

CSS (Cascading Style Sheets)

building a style guide in. see style guides

coding skills with, 4–5

component libraries and, 124

controlling hover state, 155

correct mode in, 52

Extract generating, 163–164

Photoshop effects with, 35

Photoshop generating, 164–165

setting up colors in, 110

D

A Dao of Web Design (Allsopp), 15

deliverables

conversations vs., 77

style guides as, 114

design conferences, 223–224

design gallery sites, 71

design process. see also web design

including stakeholders in, 66–67

moodboards in, 67–72

offering contrasting options, 64–66, 74

pursuing efficiency in, 75–77

through conversations, 77

visual inventories for, 72–75

designer-developer communication, 47–48, 227

DevRocket plug-in, 174–175

documentation, Ink plug-in for, 192–193

downloading assets, 162

Dribble design gallery site, 71

drop shadows, with CSS, 35

Dziak, Jason, 67

E

Ebert, Ralf, 133

Edwards, Marc, 175

effects etiquette

deliberate layer effects, 210–211

Overlay use/tileable images, 210

efficiency, Photoshop etiquette and, 199

element collages

abstraction and detail in, 91

color comparisons in, 99–100

crafting, 91–93

description/function of, 90–91

dissimilar to websites, 96–99

full-page comps and, 104–105

iterative design with, 94–96

limiting scope of, 100–101

as point of reference, 103–104

style exploration with, 216–217

useful client feedback for, 101–102

visual metaphors in, 92–93

visualizing website from, 103

Ember cataloging tool, 71–72

Emmet tookit, 36

Enns, Blair, 77

Erondu, Jared, 51

establishing style. see style, establishing

etiquette, Photoshop

effects and, 209–211

files/folders and, 201–202

images and, 205–207

inheriting PSDs and, 197–198

layers and, 203–205

quality assurance, 211–213

reasons for, 199–200, 219

type and, 207–209

website, 198

Evernote cataloging tool, 71

Evolving the Digital Style Guide (Pratt), 222

expanding panels, in component libraries, 122

expectations

in adopting new workflow, 221–222

resetting, with clients, 224–225

extending Photoshop

artwork tools for. see artwork plug-ins/tools

assets for, 183–187

CC Market for, 170

color tools for, 179–182

organizational tools for, 191–194

overview of, 167–168, 219

Photoshop proficiency tools, 194–196

prototyping tools for, 188–190

website, 168

Extract Assets

image etiquette and, 207

overview of, 157–158, 219

setup for, 158–160

Extract online service

asset extraction with, 162

extracting values with, 162–163

generating CSS with, 163–165

overview of, 160

setup for, 161

extracting assets. see asset extraction

extracting values, 162–163

F

faults, Photoshop. see Photoshop faults

featured articles, in component libraries, 123

fidelity, Page Layers and, 135

Fight phase, of ShortcutFoo app, 195

file share, for accessibility, 202

file size

importance of, 149–150

reducing, 187

filename clarity, 201

filters, nondestructive technique for, 206

fixed positioning, of background, 23

fixed-width comps

multiple, 20–22

three-breakpoint trap and, 18–20

FlatIcon, free icons with, 186

flexibility, of Illustrator, 173–174

flexible grids, 8

Flickr integration, with Pictura, 172–173

fluid images, 8

focus states, in Photoshop comps, 22

the fold, 46–47

folders

Adobe Generator exporting to, 156–157

asset storage in, 202

fonts

with CSS, 35

extraction of, 162–163

in Photoshop comps, 23–24

rendering difficulties of, 24–25

standardizing access to, 207–208

true rendering of, 39–40

Foral, Jason, 177

forms, in component libraries, 116

Framer app, for interactive prototypes, 188

Fried, Jason, 26, 41

Frost, Brad, 9, 222

full-page comps

assessment limitations, 28–29

code aversion/waterfall method and, 16–17

definition of, 15–16

element collages and, 104–105

as exercises in proofreading, 43–44

faulty communication and, 17–18

inaccurate representation, 26

inefficiency of, 25–26

noninteractivity of, 22–23, 215–216

past function/goals of, 16

presentation difficulties, 26–27

replacements for, 80–87

static fixed-width, 18–22

web fonts and, 23–24

Future of Web Design conference, 219

G

Gaussian Blur filter, 206

Generate function, in iOS Hat, 184

Generator. see Adobe Generator

Get Your Visual Style On (Perez-Cruz, Callahan & Mall), 222

GIF images, Generator exporting, 154

Gimp, 30

GitHub

file accessibility with, 202

psdiff tool previewing in, 193–194

Glifo, packaging icons with, 185

global changes, in-browser design and, 39

gradient backgrounds, with CSS, 35

gray-box mock-ups

creating, 126–128

exporting to Photoshop, 135

grids, flexible, 8, 117

group folders, Generator exporting, 156

GuideGuide plug-in, 191

H

Hay, Stephen, 22

hero blocks, in component libraries, 117–118

high-fidelity prototypes, 129–130

hover states

CSS controlling, 155

in Photoshop comps, 22

HTML (Hypertext Markup Language)

building a style guide in. see style guides

coding skills with, 4–5

component libraries done in, 124

correct mode in, 52

design choice of, 3

designing in browser with. see in-browser design

exporting components from, 133–134

I

icons

packaging with Glifo, 185

in style guides, 112–113

Illustrator flexibility, 173–174

image

with caption, 118

dimensions, 112

image assets

Generator exporting. see Adobe Generator

sizing, 156, 159

image blocks, in component libraries, 117

image borders, with CSS, 35

image etiquette

blend modes/resolution/density in, 206

use of nondestructive techniques, 205–207

image grids, in component libraries, 117

ImageMagick, 154

ImageOptim, reducing file size with, 187

in-browser design

accuracy of, 42–43

component library for. see component libraries

with CSS/HTML, 34–35

designer-developer communication, 47–48

editing on the fly, 45

educating clients and, 45–46

evaluating design behavior in, 43–44, 216

fluid width with, 37–38

the fold and, 46–47

global changes and, 39

in-progress viewing, 43

Inspect Element option, 37

interactivity in, 38

less effort/more reality in, 40–42

limitations of, 216

minimizing time in Photoshop, 135–136

no additional cost in, 40

options for, 33–34

prototypes for. see prototypes

realistic expectations with, 44

style guide for. see style guides

text editor for, 35–36

true font rendering and, 39–40

InDesign character styles, 88

Ink plug-in, for documentation, 192–193

inner shadows, with CSS, 35

input types, in component libraries, 116

Inspect Element option, 37

inspiration

approach to moodboards, 68–70

finding/storing, 70–72

for Photoshop-browser harmony, 61

interactivity, lack of, 22–23

InVision app, for interactive prototypes, 190

iOS devices, DevRocket for, 174–175

iOS Hat, 183–184

iStock Photo watermark, 212

iterative design, 94–96

J

Jehl, Scott, 9

JPEG images, Generator exporting, 154, 155

K

Kardys, Dennis, 65

Khadeyev, Kamil, 174

Kippt cataloging tool, 71

L

latest news, in component libraries, 123

layer naming

accuracy in, 203–204

Adobe Generator improving, 157

as-you-go method, 204

Extract Assets and, 159

layers

converting to Smart Objects, 206

deleting unnecessary, 205

effects for, 210–211

groups/globalizing, 204–205

Layout Wrapper, framing work in Safari browser, 177–178

Learn phase, of ShortcutFoo app, 195

Libraries. see CC Libraries

link styles, in style guides, 111

Linked Smart Objects, leveraging of, 136–137

live previewing, 36

LiveShare plug-in, for interactive prototypes, 190

Loggins, Kenny, 136

Long, Josh, 59

low-fidelity prototypes

creating, 126–128

exporting to Photoshop, 135

frameworks for, 128

Loyd, Jeremy, 85

M

Macaw design app, 33–34, 180

Mall, Dan, 17, 72, 90, 92, 98, 222

Marcotte, Ethan, 8

McEfee, Cameron, 191

McGrane, Karen, 58

Measure function, in iOS Hat, 184

media blocks, in component libraries, 117

Media Queries design gallery site, 71

Megaman principle, 59–60

Messina, Jim, 136

Mo, Atle, 169

mock-ups

full-age comps for, 16–18

gray-box, 126–128, 135

replacements for, 80–87

Monteiro, Mike, 102

moodboards

finding/storing inspiration for, 70–72

organic inspiration approach to, 68–70

purpose of, 67–68

traditional collaging format, 68, 69

movement, in Photoshop comps, 23

multiple designers, Linked Smart Objects for, 136–137

multiple formats, Generator exporting, 156

N

naming layers. see layer naming

navigation, in component libraries, 119–120

New Guides, 139

news, in component libraries, 123

Niice design gallery site, 71

Notepad, 40

O

one-direction approach to design options, 65

organic inspiration approach to moodboards, 68–70

organization, Photoshop etiquette and, 199–200

organizational plug-ins

GuideGuide, 191

Ink, 192–193

psdiff, 193–194

Renamy, 192

OtherIcons plug-in, 184

P

Page Layers

benefits of working with, 138–140, 218

exporting components to Photoshop with, 133–134

improving cohesiveness with, 140–143

increasing fidelity with, 135

New Guides/Smart Guides for, 139

old screenshot methods vs., 137–138

width-specificity in, 145–146

pagination, in component libraries, 121

Parmenter, Sarah, 54

Pattern Tap design gallery site, 71

Perez-Cruz, Yesenia, 222

performance of RWDs, 9

Photoshop

basics/version disparities of, 9

character styles in, 88

as complement to browser, 135–136

component libraries done in, 124

Copy CSS function in, 164–165

direct manipulation with, 51, 216

effects, utilizing CSS, 35

etiquette. see etiquette, Photoshop

extracting assets from. see asset extraction

falling out of favor, 2–3, 11

getting from browser back into. see Page Layers

modifying screenshots in, 137–140

optimizing. see extending Photoshop

personal histories using, 14

as preferred web design tool, 9

process with, 6–7

role in RWD. see Photoshop-browser harmony

single breakpoint focus with, 4

superior creativity in, 52–56

toolbars evolution, 13

traditional, faults of. see Photoshop faults

Photoshop-browser harmony

creative mode/correct mode, 52

importance of, 216

Megaman principle for, 59–60

minimal use of Photoshop, 58–59

path of least resistance in, 52–56

Photoshop’s manipulation in, 51

preparation for, 61–62

Photoshop CC

Adobe Generator in, 152–157. see also Adobe Generator

Adobe Typekit in, 24

Character/Paragraph Styles in, 39

Linked Smart Objects in, 136–137

Photoshop Color Shift option, 29

Photoshop Etiquette Manifesto for Web Designers (website), 198

Photoshop faults

assessment limitations, 28–29

code aversion/waterfall method and, 16–17

cost factor, 30, 40

exporting difficulties, 29–30

faulty communication and, 17–18

inaccurate representation, 26

increased workload, 31

inefficiency of, 25–26

instability of, 29

noninteractive, 22–23

presentation difficulties, 26–27

static fixed-width, 18–22

web fonts and, 23–24

Photoshop proficiency tools

Photoshop Secrets, 195–196

ShortcutFoo app, 194–195

Pictura plug-in, 172–173

Pinterest tool, 68, 71

pixel density, image etiquette and, 207

pixel precision, of Adobe Generator, 154–155

Pixelmator, 30

plug-ins

artwork. see artwork plug-ins/tools

asset integration/generation, 183–187

color, 179–182

LiveShare for interactive prototyping, 45, 190

organizational, 191–194

PNG images, Generator exporting, 154, 155

The Post-PSD Era (Mall), 17

Pratt, Andy, 222

presentations

promoting new workflow ideas, 220–221

on style, 222

proofreading, 211–212

prototypes

high-fidelity, 129–130

low-fidelity, 126–128

Prototyping Style (Callahan), 222

prototyping tools

Framer/Composite/Stand In, 188–189

InVision, 190

PSD, asset storage relative to, 202

psdiff tool, for PSD previewing in GitHub, 193–194

R

Raindrop cataloging tool, 71

Random User Generator, 171

raster graphics, with Page Layers, 135

recent feeds, in component libraries, 123

RedPen tool, 27

Renamy plug-in, 192

repair work, 61–62

Responsible Responsive Design (Jehl), 9

responsive design sameness, 140

Responsive Design Workflow (Hay), 22

responsive patterns, 8–9

responsive web design. see RWD (responsive web design)

Responsive Web Design in the Browser Part 1: Kill Photoshop (Treehouse blog), 2

Responsive Web Design (Marcotte), 8

responsive wonkiness

fixing, 145–146

identifying, 143–145

reverse-engineering style tiles, 83

RotateMe script, 178

rounded rectangles, with CSS, 35

RWD (responsive web design)

in browser. see in-browser design

contrasting options for, 64–66, 74

core tenets of, 8

including stakeholders in, 66–67

lack of cohesive style, 140–143

Linked Smart Objects for, 136–137

new workflow for. see adopting new workflow

Page Layers for, 133–135

performance of, 9

with Photoshop, 7

Photoshop etiquette in, 200

Photoshop vs., 2–3

potential difficulties in, 132–133

repurposing tools for, 228

responsive patterns in, 8–9

responsive wonkiness and, 143–146

S

Sanchez, Edward, 195–196

Save for Web option, for asset extraction, 29–30, 151–152

Save function, in asset extraction, 149–150

Scalable Vector Graphic (SVG) images, 155

scope creep, 100–101

screen resolution, image etiquette and, 207

screenshots

New Guides/Smart Guides for, 139

old methods for modifying, 137–138

Page Layers for modifying, 138–140

search filters, 70

selling workflow ideas internally

attend conferences, 223–224

establish supporters first, 222–223

give presentations, 220–221, 222

set realistic expectations, 221–222, 223

selling workflow ideas to clients

affirm direction, 225–226

increase communication/involvement, 225

reset expectations, 224–225

Sheeran, Norm, 176

ShortcutFoo app, 194–195

sidebar callouts, 120–121

sign-up modules, 119

Site Inspire design gallery site, 71

sizing images

with Adobe Generator, 156

previewing size for, 159

Sketch tool, 3, 30

sketching, 80

Sketching User Experiences (Buxton), 65

Sketching User Experiences: The Workbook (Greenberg et al.), 80

skeuomorphism, cohesive design and, 142–143

slicing, 30

Smart Guides, 139

Smart Objects

converting layers to, 206

editing, 136

Social Kit plug-in, 172

Sparkbox, 84

spelling errors, proofreading for, 211–212

stakeholders, in design process, 66–67

Stand In app, for interactive prototypes, 188–189

state changes, in Photoshop comps, 22

style, establishing

component inventories for, 87–89

element collages for. see element collages

sketching, 80

style prototypes for, 84–87

style tiles for, 81–83

style guides

color in, 109–110

created in browser, 114

defining, 108–109

icons in, 112–113

link styles/buttons in, 111

for Photoshop-browser harmony, 61

tables/image dimensions in, 112

typography in, 110–111

style prototypes

advantages of, 216

design elements of, 85

flexibility of, 86–87

function of, 84

style tiles

description/advantages of, 82

exploration through, 216

as mock-up alternative, 81

reverse-engineering, 83

Styles tab, 163

Sublime Text, 40

Subtle Patterns plug-in, 169

SVG (Scalable Vector Graphic) images, 155

swatches, of design color options, 110

T

tabbed panels, in component libraries, 121–122

tables, in style guides, 112

Terrett, Ben, 4

Test phase, of ShortcutFoo app, 195

text blocks, in component libraries, 117

text boxes, controlling/separating, 209

text editor, for in-browser design, 35–36

TextEdit, 40

The Win Without Pitching Manifesto (Enns), 77

This Is Responsive (Frost), 9

three-breakpoint trap, 18–20

three-direction approach, to design options, 64–65

“throw it over the wall” workflow, 16, 17

thumbnails, use of Overlays and, 210

time savings, with Page Layers, 139–140

TinyPNG plug-in, for compressing PNGs, 186–187

toolbars, Photoshop, 13

tools

artwork. see artwork plug-ins/tools

asset integration/generation, 183–187

color, 179–182

for in-browser design, 33–34

merits of comparable, 9–10

organizational, 191–194

prototyping, 188–190

repurposing existing, 228

Transform Each script, 173–174

transparency

with CSS, 35

in design process, 66–67

Treehouse, 5

Twitter Bootstrap site, 128

type etiquette

control/separate text boxes, 209

no stretching, 208

proofreading, 211–212

standardize font access, 207–208

typography, in style guide, 110–111

U

UI Parade online catalog, 176

UI (user interface), Extract Assets as, 157–160

Unmatched Style design gallery site, 71

V

Verizon Wireless, 150

versatility, of style tiles, 82

vetting direction

importance of, 216

including stakeholders in, 66–67

moodboards in, 67–72

offering contrasting options, 64–66, 74

pursuing efficiency in, 75–77

through conversations, 77

visual inventories for, 72–75

video, in responsive web design, 8

vinyl records, 49–50

visual inventories

for design process, 72–75

efficiency of, 75–77

visual metaphors, in element collages, 92–93

W

Warby Parker “Home Try-On” program, 40–41

Warren, Samantha, 81

waterfall method, 17

web design. see also design process

coding skills for, 4–6

Photoshop as tool of preference for, 9

Photoshop history in, 14

responsive workflows for, 6–7

switching away from Photoshop, 2–3

weekly updates on new ideas, 70

web fonts

with CSS, 35

extraction of, 162–163

in Photoshop comps, 23–24

rendering difficulties of, 24–25

standardizing access to, 207–208

true rendering of, 39–40

Webflow app for in-browser design, 33–34

websites

element collage dissimilarity, 96–99

element collages leading to, 103

WebZap plug-in, 176–177

weekly updates, on design ideas, 70

wonkiness

fixing, 145–146

identifying, 143–145

Woodworth, Ken, 68

WordPress sites, 56–57

Z

Zeldman, Jeffrey, 36

Zurb Foundation site, 128