News for hackers. Stuff that matters.
Re:How to use Photoshop to design interfaces by chestnut-tree on Friday January 03, 2014 @01:47PM (#7007220)
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.

Re:How to use Photoshop to design interfaces by thisisdallas on Friday January 03, 2014 @04:54PM (#7008496)
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.
Re:How to use Photoshop to design interfaces by harwoodleon on Friday January 03, 2014 @06:19PM (#7008944)
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.
Re:How to use Photoshop to design interfaces by abengoam on Friday January 03, 2014 @02:54PM (#7007699)
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.
Re:How to use Photoshop to design interfaces by virgil_disgr4ce on Friday January 03, 2014 @01:49PM (#7007228)
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).
Re:How to use Photoshop to design interfaces by wil421 on Friday January 03, 2014 @04:53PM (#7008492)
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?

Re:How to use Photoshop to design interfaces by johncoltrane on Friday January 03, 2014 @05:50PM (#7008805)
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.

Re:How to use Photoshop to design interfaces by wil421 on Friday January 03, 2014 @08:41PM (#7009506)
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.
Re:How to use Photoshop to design interfaces by harwoodleon on Friday January 03, 2014 @06:21PM (#7008953)
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

Re:How to use Photoshop to design interfaces by actionscripted on Friday January 03, 2014 @02:08PM (#7007364)
Let me just re-size this button with rounded corners in Photoshop...
Re:How to use Photoshop to design interfaces by nathanbarry on Friday January 03, 2014 @03:42PM (#7007971)
Cmd + T, then resize it. Simple. Works as expected (they just released this feature in Photoshop CC).
Re:How to use Photoshop to design interfaces by harwoodleon on Friday January 03, 2014 @06:23PM (#7008961)
Let me just pay for that feature every month, yeah