How to use Photoshop to design interfaces | Hacker News Reader

How to use Photoshop to design interfaces

nathanbarry.com

84 pointsnathanbarry71 comments

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.

I've always referred to designing how things function as "user experience design." I agree that the terms aren't perfect. The skinning or rendering stage as you call it is still very important. Most of what we point to as good design (on the surface) is because it is well skinned.

I've written two books (http://nathanbarry.com/webapps and http://nathanbarry.com/app-design-handbook) on end to end process, so now I'm working on teaching the practical skills to create the end result all new designers are looking for.

I think we agree about the process though. I always start on paper before moving to Photoshop and code.

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?

Try observing other people's work and emulating it into your own compositions. Deconstruct what they did ant try to understand what they were thinking of when they did it. That's a good way to improve.

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-...

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.

This is absolutely not true at all. Wireframing is nice and can be important, but it's not design, it's architecture. It tells you the ballpark of what you might want to achieve and how a app/site might be structured.

You need to sit down and put real-world pixels to the screen to see if the thing you're making works and fits. Rendering is not fashion. It's every bit as much function as the code on which an app/site sits.

No wireframe tool I've ever seen will let you know how much text you can or should fit on a particular sized canvas.

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/

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

Serif DrawPlus (Windows only, low-cost but very capable) 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/

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/

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.

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).

Let me just re-size this button with rounded corners in Photoshop...

Cmd + T, then resize it. Simple. Works as expected (they just released this feature in Photoshop CC).

Let me just pay for that feature every month, yeah

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?

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.

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.

Nope, same process whichever you use.

The initial files will be rasterised - so you won't be able to get the vector benefits of svg unless you export paths to illustrator - which is a bit shit and tedious.

PSD to * is such a bad, bad approach

I have done a lot of interface design (ex-lead UX at my company) and I used Inkscape. It's great, easy to use and fulfills all the needs I had. Actually, using Inkscape was what put me in that role; my mockups were way better than everybody else's.

I am building out the front-end of a CRM and I have started using a lot of SVGs for smaller elements. I can't believe how amazing it is working with illustrator and SVGs. As far as actually designing a complete UI in illustrator, personally, I couldn't do this because of lack of knowledge but I can definitely see the positives.

Yes, icons and small motifs made in Illustrator and SVG using pixel preview is ace. Looks lovely on retina too. I do that and fall back to png for devices that can't handle svg.

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.

Yes, the world has changed and interactivity and animation are just as important as pretty pictures.

I agree many interactions should be designed directly in the browser, but even the designers I know that champion designing in the browser (Ryan Singer, etc) take a screenshot and move into Photoshop when they have something complicated to design.

Yes, that's why I said use it as part of a set of tools. It is useful of course, but over reliance on it as a tool for designing is a continuing issue for development teams all over the world, right now.

People waste a lot of time iterating over pretty pictures and then pass all the hard work to front end engineers to sort out the cruft.

Worse still is when you then get a PM that wants the whole pixel perfect thing to jump through HTML5 hoops. With very little consideration to the time element of design, you are left with a lot of pretty images that you may as well start again with.

In browser designing is not an optional path to take. If it is going to end up in the browser it will have to be designed at some point in the browser, so designers should dump pixel perfect tools like photoshop as their main iterating tool.

Photoshop is still a pixel tool and getting old, Illustrator is now better for interface improvement IMO as it has pixel preview and can output svg too :).

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.

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.

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.

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

You mean a web designer? or just a designer? If you are going to design for the web and you DON'T know HTML and CSS then you are pretty fucked.

A designer needs to know the medium he's working with and it's limitations to produce a good design.

Not.

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

+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. :)

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.

For the vast majority of professional designers Photoshop is critical to creating design elements. Not everyone creates a final, pixel-perfect mockup in Photoshop, but those who don't use Photoshop for smaller parts of the design.

It is very common to screenshot your rendered HTML/CSS, take that into Photoshop, design one portion of the interface, then take that back to code.

And why is this a good thing?

Why do you ask silly snide questions?

Tell me what is fundamentally wrong with screenshotting an interface, playing with it a bit, coming up with something you like then turning it into code?

It's a lot of unnecessary, time-consimung back-and-forth that could be easily done in a program like Sketch.

Every approach is unique to its designer, and it's situation. But I have yet to (personally) find Photoshop (or a hybrid approach) more effective and time-saving when you deal with a large project. Artboards are MUCH easier to keep track of and group, and with something like Mirror [1] you will save hours in exporting/slicing/sharing over the course of a project.

Photoshop was not made for UI design. It can do it, but it will rarely be the best tool because Adobe is not catering features for that niche.

[1] http://bohemiancoding.com/sketch/mirror/

> Artboards are MUCH easier to keep track of and group, and with something like Mirror [1] you will save hours in exporting/slicing/sharing over the course of a project.

Adobe actually has a tool for this. http://html.adobe.com/edge/inspect/

I'll go against the grain here and say that 80% of the UI design that I do is based in the browser.

Certainly getting a style and architecture down is helpful before hand but the design really doesn't come to life until I get into code. Some might say that this isn't sustainable on a large project but I'd argue that using HTML/CSS and github as a tool is just as, if not more, useful than photoshop/sketch/whatever.

Hmm is it worth learning Sketch? I'm a photoshop die hard but wow this program looks enticing.

Do you have any good resources to learn more about how to develop with Sketch?

Yes, actually the Sketch Manual [1] (but who reads the manual?) and (my favorite) community resources [2] that you can download, play with, and re-use over and over.

[1] http://bohemiancoding.com/sketch/help/ [2] http://bohemiancoding.com/sketch/community/

Personally I much rather fine tune every pixel of my design so I know exactly what to do when I'm coding, just need to reference my screens.

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'?

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!

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.

I've always thought that "good design" has nothing to do with software. As in you'll have to nail the art elsewhere, then bring those lessons to your software.

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!

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.

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 :-(

I think now that Fireworks is gone Adobe will add more of those features directly into Photoshop. I think their live shape tools for editing the radius on rounded rectangles are just the start.

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?

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.

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/

I thought Fireworks is still in the building? At least before adobe went to the cloud...

From the Adobe site "While we are not planning another full release of Fireworks and will not release any new Fireworks features, we will continue to sell Fireworks CS6 and make it available in the Creative Cloud."

So you can use it, but they won't be developing it further.

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.

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.

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/

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.

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.

I find illustrator to be better for designing interfaces.

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.

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.

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.

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 :)

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

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

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.

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.

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.

I guess the downvote means that you can't do these things?

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

Thanks ! Really needed this !

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

Reply on news.ycombinator.com