SOMEBODY TOLD ME IT
WASN’T COOL TO USE
PHOTOSHOP IS THAT
TRUE Y/N? K THX.
Slide 3
Slide 3 text
Source: http:/
/1.bp.blogspot.com
You
Slide 4
Slide 4 text
Responsive Web Design
Slide 5
Slide 5 text
Photoshop
Slide 6
Slide 6 text
Source: http:/
/bossdungeon.com
MEGAMAN!
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Hi, I’m Dan and I
use Photoshop.
Slide 9
Slide 9 text
Hi Dan.
Slide 10
Slide 10 text
Source: http:/
/neoabolition.com
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Back when using
Photoshop was cool...
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Source: http:/
/onemoregadget.com
Slide 17
Slide 17 text
Source: http:/
/trendhunter.com
Slide 18
Slide 18 text
cmd+n
W I D T H : 960
OK!
P I X E L S
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
Source: http:/
/zachmorriscel l phone.com
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Source: http:/
/bradfrost.com
Slide 23
Slide 23 text
Source: http:/
/dallasnews.com
Slide 24
Slide 24 text
Source: http:/
/news.yahoo.com
Slide 25
Slide 25 text
Source: http:/
/japantimes.co.jp
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
There’s ∞ mobile
devices. That’s ∞
di erent screen sizes.
Source: http:/
/larablog.com
Slide 28
Slide 28 text
Houston, we have a
workflow problem.
Source: http:/
/larablog.com
Slide 29
Slide 29 text
Old School Workflow
WIREFRAME
PHOTOSHOP COMPS
FRONT-END DEVELOPMENT
Slide 30
Slide 30 text
New School Workflow
IN-BROWSER ITERATION
Slide 31
Slide 31 text
We’ve been unfairly
repurposing
Photoshop for the
web for years.
Source: http:/
/lunettesde.com
Slide 32
Slide 32 text
All along,
we’ve just been
making pictures
of websites
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
E F F I C I E N C Y
D E L I V E R A B L E S
Slide 35
Slide 35 text
Anything* you can do
in Photoshop, you can
do in CSS.
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
“I’ve tried, goodness
knows I’ve tried, but
my designs end up
su ering, looking
boxy, bland and
uninspiring.”
S A R A H P A R M E N T E R
Slide 45
Slide 45 text
“I feel like responsive
design has sucked the
soul out of website
design. Everything is
boxes and grids.
Where has the
creativity gone?”
N O A H S T O K E S
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
“Design with the
browser, but not in
the browser.”
P A U L L L O Y D
Slide 49
Slide 49 text
Source: http:/
/bossdungeon.com
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
Source: http:/
/bossdungeon.com
T H E M E G A M A N P R I N C I P L E
Use the right tool,
at the right time,
for the right purpose
Slide 60
Slide 60 text
“When you find
yourself fighting
against your tools,
you’re not being
expressive.”
D A N M A L L
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
Just because you
didn’t start designing
in an image editor
doesn’t mean you
can’t use one later.
Slide 64
Slide 64 text
Solve Photoshop
problems in
Photoshop.
Solve browser
problems in the
browser.
Slide 65
Slide 65 text
Solve Photoshop
problems in
Photoshop.
Solve browser
problems in the
browser.
Slide 66
Slide 66 text
Solve browser
problems in the
browser.
Typography
Slide 67
Slide 67 text
Solve Photoshop
problems in
Photoshop.
Colors
Slide 68
Slide 68 text
Solve browser
problems in the
browser.
Interactivity
Slide 69
Slide 69 text
Layout?
Establish
Tweak
Slide 70
Slide 70 text
Totes Not ‘Shopped
Slide 71
Slide 71 text
Source: http://danielmall.com
Slide 72
Slide 72 text
Use Photoshop in the
middle of a project,
opposed to the
beginning.
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
Screenshots on
Steroids
P A G E L A Y E R S
Addressing the
in-between
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
Interactive Wireframe/Lo-Fi Prototype w/ Foundation
Slide 77
Slide 77 text
Headline Iteration 1 : about 2 minutes
Slide 78
Slide 78 text
Headline Iteration 2 : about 5 minutes
Slide 79
Slide 79 text
Headline Iteration 1
Headline Iteration 3 : under 1 minute
Slide 80
Slide 80 text
Headline Iteration 1
Headline Iteration 4 : about 4 minutes
Slide 81
Slide 81 text
Final-ish
Slide 82
Slide 82 text
Because it was Elliot, there was no need for
Reagan and I to present pixel-perfect PSDs. He
trusted us so once we got past rough concepts and
layout explorations we took things to the browser.
While Dave and I were coding we'd regularly spot
awkward points in the design across widths/
breakpoints. We'd kick things back and forth
iterating in the browser and Photoshop —
whatever tool worked best at the time. There’s
no clear path or method to the madness, but I like
it that way. You just sorta fidget and nudge and
squish until the kinks are out.
T R E N T W A L T O N
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
No content
Slide 85
Slide 85 text
No content
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
MAGIC
Slide 94
Slide 94 text
“y u no Photoshop?”
N O C L I E N T , E V E R
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
No content
Slide 97
Slide 97 text
“I could switch code editors,
computers, wireframing
tools, browser plugins, and
more, but I’d be pretty sunk
if I had to do a project
without Photoshop.”
D A N M A L L