
How to use Photoshop to design interfaces - nathanbarry
http://nathanbarry.com/how-to-use-photoshop-to-design-interfaces
======
artursapek
Great Photoshop tutorial, but this is not interface design. It's interface
skinning. It's rendering. It's fashion.

The reason it's important to make that distinction is that otherwise you imply
that to design an interface, one starts in Photoshop. Too many people design
like this, and skip important steps that challenge the fundamentals of what
they're implementing because they get caught up in making their layer styles
look pretty.

~~~
jchendy
I'm in somewhat of the opposite situation. I feel like I've got a fairly good
grasp of user research, workflow definition, feature prioritization, et
cetera, et cetera, but I often struggle with translating that work into an
actual UI. Does anybody have suggestions for how to get better at this? I'm
sure that learning Photoshop will help, but what should I do for practice once
I'm comfortable with the tools?

~~~
sveron
I'd suggest books and classes in graphic design, if you can. There are a lot
of suggested books here:
[https://news.layervault.com/stories/11494-i-compiled-a-
list-...](https://news.layervault.com/stories/11494-i-compiled-a-list-of-
books-for-designers)

You'll really start to appreciate the difference between knowing design
principles and knowing how to use design tools. Tutorials that teach skills or
techniques in software will get you about as far as applying a specific
technique. Without knowing basic design principles your work is going to look
cluttered, samey, not-quite-where-you-want-it-but-you-don't-know-why. I'd also
say that jumping straight into UI design is premature for someone beginning a
design education. Learning the fundamentals of graphic design is essential,
even if at first it seems irrelevant and too print-oriented.

A good design background will help you solve design problems. Right now
there's a lot of 'designy' stuff--especially on the web--that's nothing more
than the mindless application of a solution to someone else's design problem.
There are a lot of missed opportunities to actually communicate, or to make a
better tool; all because of groupthink and notions of good taste. Learning
about design will help you get out of that rut.

------
chestnut-tree
I agree with some of the othe posters here - using a vector drawing tool such
as Illustrator for designing an interface is _much_ easier than using a bitmap
tool like Photoshop (although Photoshop has some vector drawing tools). The
main difference comes from the ease with which you can simply select, drag and
re-size elements on your screen compared to Photoshop. This will definitely
help you work faster if you are experimenting with layout.

You can use a vector drawing app for wireframes, for mapping out screen flows
and interaction behaviour, and finally for creating the finished visuals for
the app. Photoshop is only really suitable for the last of these tasks. There
are some visual effects that only Photoshop can achieve, so you may find you
have to use both. But I would always recommend starting with a vector drawing
app.

If you don't want to use Illustrator (which has a clunky UI in my view) there
are plenty of cheaper vector alternatives . Here are a few

Inkscape (open source and capable of professional results)
[http://www.inkscape.org/en/](http://www.inkscape.org/en/)

Sketch (Mac only, praised for its ease-of-use)
[http://www.bohemiancoding.com/sketch/](http://www.bohemiancoding.com/sketch/)

Serif DrawPlus (Windows only, low-cost but very capable)
[http://www.serif.com/drawplus/](http://www.serif.com/drawplus/) (no trial
version, but they are selling the previous version for £10 (approx $16 usd):
[http://www.serif.com/promo/](http://www.serif.com/promo/)

Xara Photo and Graphic Designer (Windows only, again low-cost but very fast,
capable and an excellent interface) [http://www.xara.com/uk/photo-graphic-
designer/](http://www.xara.com/uk/photo-graphic-designer/)

Edit: just to add, the apps above do not have anywhere near the amount of
tutorials for learning as Illustrator (or the industry recognition), so factor
that in when choosing a vector app if that's important to you.

~~~
virgil_disgr4ce
THANK YOU. I cannot _stand_ using a raster tool to design UIs. It's insane to
me, and it absolutely boggles my mind that it's considered 'standard' practice
(other than just going to html/css directly).

~~~
wil421
Currently I am taking designs from a media company and have to turn their PSDs
into real code.

Is the process easier in Illustrator-- Design to HTML/CSS? Or does it to build
the UI elements easier?

~~~
johncoltrane
Not really.

Illustrator is better for the _drawing_ stage of your UI than Photoshop but
both are equal when it comes to checking spacing, color values, corner
radiuses and so on when it's time to actually _build_ that UI.

It's also a bit more straightforward to export an object drawn with Photoshop
than it is to do the same with Illustrator.

Also, decent-to-good "Photoshoppers" are a dime a dozen because both
businesses and schools have a weird love affair with Photoshop but decent-to-
good "Illustrators" are harder to find. You'll have a hard time convincing
your client to make its team of ADs and designers switch to Illustrator.

~~~
wil421
OK that's what I thought. I have a project right now where I'm translating
some PSDs into HTML its what I've done in the past but I haven't tried
illustrator.

------
harwoodleon
Don't use photoshop to design interfaces, use css, html, illustrator and
photoshop to design interfaces.

Interfaces are not two dimensional and static, they are three dimensional
(time) in the sense that hey have to be interactive. Flat graphics are not
interactive.

If you are going to just use photoshop, use a pencil, it's cheaper and easier.

~~~
raverbashing
And that's why a lot of people design using Flash

CSS and HTML? A Designer does not need to know that to produce a design.

~~~
seivan
That's one useless designer.. if the designer does can't produce their own
fucking design. That's where we get photoshop monkeys.

30 mb PSD vs someone who can code their design. Your pick.

~~~
nathanbarry
Agreed. That is one useless designer. When I hired designers I would only hire
people who could write front-end code as well as they designed.

~~~
raverbashing
I understand that there may be a need of that in small projects

I've did both: having a design than translation to HTML and people that could
do both

There's an advantage to someone that will focus only on the design and another
that will focus on only translating that to HTML/CSS/JS namely, that someone
that can do both very well is rare

But of course, if they can do the design and a basic html/css of it usually
can move the project faster. You will not have the greatest design or greatest
html/css but it will usually arrive at a good solution

------
mpweiher
Not.

See the NoPSD movement: [http://thoughtworks.github.io/p2/issue02/continuous-
design/](http://thoughtworks.github.io/p2/issue02/continuous-design/)

~~~
seivan
+1. I'm getting up to speed with Cocoa to the point where I might be faster
than a designer with Photoshop... as long as we don't venture into wooden
textures. :)

~~~
platz
I think there's a difference between using Photoshop for exploratory purposes,
and using Photoshop to produce a deliverable.

I know Chris Coyier is a fan of using photoshop to explore a little bit,
before you get into the mode of writing code, which he thinks can interfere
with your creative process.

------
rhgraysonii
This is useful if one has NEVER touched photoshop, but I already have a
reasonably solid grasp on even intermediate features of Photoshop. Does anyone
have some resources on best practices for getting a mockup done if you already
know these things but know little of 'good design' other than 'make it
responsive and minimalistic'?

~~~
nathanbarry
I'm working on putting out more tutorials on the topic. I just wanted to get
the absolute basics out there first. My course will cover these basics, but
also some pretty advanced techniques.

Stay tuned. More are coming!

~~~
rhgraysonii
Will do! Thanks. If you have an email list or something, feel free to send a
link to it to me. My email is in my profile.

------
jacobsimon
This is a good start but leaves out some really useful features of Photoshop.
One of my favorite newly discovered features is layer comps!

If you're addicted to photoshop but also want to display your designs somewhat
interactively and minimize layer clutter, open photoshop and go to Window >
Layer Comps. It lets you create multiple states within the same document,
including layer positioning and layer styles. Great for button states or for
preserving an entire flow through an interface in the same document. Have fun!

~~~
nathanbarry
Yep, Layer Comps are awesome. I'll cover them in more detail in the course.
That tutorial was starting to get longer than I originally planned.

------
daledavies
Oh how I will miss Fireworks, I always feel Photoshop for interface design and
mockups is very much a square peg in a round hole :-(

~~~
teleclimber
I don't know how I'll manage without FW. I use it for design exploration and
exporting image assets but it works so well for that.

What are the replacements on the horizon? Anybody found anything good?

~~~
daledavies
I tried using Inkscape after the news broke about Adobe not continuing with
Fireworks but couldn't get used to it. Maybe I need to try it again, or get a
Mac (I currently use Windows) as there seem to be more options for iOS.

~~~
teleclimber
I used to use Inkscape but switched to FW a few years ago because Inkscape was
buggy and slow. Maybe it's better now.

I'm hoping for a Win+Mac solution because I switch from one to the other
regularly.

I'll have to try Sketch sometime even though it's Mac only.
[http://www.bohemiancoding.com/sketch/](http://www.bohemiancoding.com/sketch/)

------
bbx
This article could be titled "How to use Photoshop to draw interfaces".

I've been looking for a true alternative to Photoshop. Sketch looks neat but
requires Mac OS 10.7 at least (my iMac is stuck at 10.6, my MBA isn't suited
for graphic design) and seems to suffer from numerous bugs. Macaw looks
promising but is too much focused on code. And Fireworks is discontinued.

I use Illustrator from time to time, but only for _assets_ : icon fonts,
logos, or print-quality jobs. It's not suited for layouts: there's no grid,
it's difficult to export background images, you need to calculate a lot even
for simple adjustments... Photoshop actually carries interesting vector
capbilities, which I use for example to design icons that are both infinitely
scalable and pixel-perfect (start small, expand appropriately).

Why is Photoshop still considered the n°1 web design tool?

\- Web designers are mostly graphic designers first: they focus on the UI, and
don't know or care about the UX. They want to create Dribbble shots, not
experiences.

\- The community and online resources are huge, from simple forum signature
tutorials to advanced realistic drawing techniques.

\- Air-brushed billboard model? Funny image manipulation? Fake celebrity
picture? Done with Photoshop. Everyone knows about it. It's even a verb.

\- Eye-candy sells. Clients don't care about how their website will perform.
They care about the "Wow!" effect. It's something they can have an opinion on.
And it's not in the web designer's interest to point out this fallacy.

I guess the article's purpose can be summarized by its last paragraph, where
it displays the drawing of an eye, made with only one Photoshop layer. What's
the purpose of this self-imposed constraint? The answer lies in the appended
link's destination: a Dribbble shot.

You _can_ design interfaces in Photoshop, but most people (including me
probably) only draw interfaces.

------
grey-area
Photoshop CC certainly isn't cheaper to rent than CS was to upgrade, if you're
using it for longer than a few months. Over a couple of years it's clearly
more expensive.

I'm not really convinced design should atart or end in Photoshop either -
design needs to start without preconceptions or limits imposed by the tools
(often pencil and paper is beat) and also to consider the medium (in this case
the API and GUI toolkits. Something is definitely lost when you split it into
separate domains of how things look versus how things work.

------
3stripe
Photoshop remains _the_ industry standard program for web/interface design,
for now.

Yes, there are alternatives approaching maturity, but if you are hired to
design a website by a client or third party, they will most likely expect the
design to be delivered as a PSD.

I've been freelancing at studios across London for the past year and was never
once asked if I could use Photoshop — it is assumed.

PS. I'm also working on my own guide to designing websites in Photoshop, which
concentrates more on ways to improve and speed up your workflow:

[http://greig.cc/photoshop-webdesign/](http://greig.cc/photoshop-webdesign/)

------
tomelders
I'm a fan of Sketch for UI design, primarily because it offers a more accurate
representation of what will actually come out in code. However, I've had
little luck in getting the designers i work with to adopt it. With Sketch
there is a strong correlation between how things are designed and how they're
built that designers find inhibiting and offensive. That said I strongly
encourage designers give Sketch a serous look.

As always however, the best tool for UI deign will always be pencil and paper.
Sketch is simply a good tool to flesh out those concepts.

------
pirateking
I prefer using my interface to design my interface, using a continuous
feedback loop.

Paper, pencil, and Scheme are high level tools I use to plan and lay out the
interface.

Objective-C/C, HTML/CSS/JavaScript, Illustrator/Photoshop/After Effects are
low level tools I use just to get the details that support the interface in
place.

At least that is how I like to imagine my workflow to ideally be laid out - it
is not always so clearly defined in practice sadly.

------
daemonk
I find illustrator to be better for designing interfaces.

~~~
oulipian
I've used Illustrator to draft website designs for years, and drawing in
vector is especially useful now that I often find myself needing larger
versions of graphics for hi-res screens.

------
hmottestad
Just don't actually add your text to the button in photoshop, and don't use
jpeg for the final image as you'll get jpeg artifacts especially around text.

Text should superimposed by the system you are using in the end. Akin to using
css backgrounds.

This way you will support the wave of hi-dpi displays, be able to easily
support other languages and will make correcting text or labels so much easier
in the future.

~~~
nathanbarry
Both the button and text should, if possible, be recreated in CSS without any
images at all. But if you have to use an image, you are right that the text
shouldn't be a part of it.

------
zyb09
As a programmer with very little design talent, but basic Photoshop skills,
this is exaclty what I do when I have to make something! Layer styles let you
come up with something quite good looking, even if you don't really know what
you are doing :)

------
dapatil
I prefer using Inkscape to do this. It's more accessible (ie. Free) and the
SVG generated easily translates to css.

------
ChikkaChiChi
Unless you have absolute control over the form factor in use, using rasterized
graphics is a terrible idea.

------
bane
You can also do some interesting design work in Powerpoint. Change the slide
size to something bigger and screen shaped, toss down a rough sketch of a page
on a slide. You can even hyperlink buttons and objects on the slide to go to
other slides to simulate partial flows through the interface. Use animations
for things sliding/fading in-out, etc. triggered by mouse events.

~~~
wil421
No.

I am tired of managers asking me to design mockups or create process flows in
Powerpoint because they dont want to take money out of their budget. Adobe CS6
and Visio do it much better and the level of detail you can obtain is much
greater.

~~~
bane
Yes.

Independent developers without the money to fork out for several hundred
dollars of software just to rough out some flows for their small site can get
more mileage out of something they probably already own.

------
gfodor
never again. you can take Sketch from my cold, dead hands.

------
ateevchopra
Thanks ! Really needed this !

------
harwoodleon
Every time you write the title "Finishing with an inner shadow" a front end
developer dies.

