Great Photoshop tutorial, but this is not interface design. It's interface skinning. It's rendering. It's fashion.<p>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 agree with some of the othe posters here - using a vector drawing tool such as Illustrator for designing an interface is <i>much</i> 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.<p>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.<p>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<p>Inkscape (open source and capable of professional results) <a href="http://www.inkscape.org/en/" rel="nofollow">http://www.inkscape.org/en/</a><p>Sketch (Mac only, praised for its ease-of-use) <a href="http://www.bohemiancoding.com/sketch/" rel="nofollow">http://www.bohemiancoding.com/sketch/</a><p>Serif DrawPlus (Windows only, low-cost but very capable) <a href="http://www.serif.com/drawplus/" rel="nofollow">http://www.serif.com/drawplus/</a> (no trial version, but they are selling the previous version for £10 (approx $16 usd): <a href="http://www.serif.com/promo/" rel="nofollow">http://www.serif.com/promo/</a><p>Xara Photo and Graphic Designer (Windows only, again low-cost but very fast, capable and an excellent interface) <a href="http://www.xara.com/uk/photo-graphic-designer/" rel="nofollow">http://www.xara.com/uk/photo-graphic-designer/</a><p>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.
Don't use photoshop to design interfaces, use css, html, illustrator and photoshop to design interfaces.<p>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.<p>If you are going to just use photoshop, use a pencil, it's cheaper and easier.
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'?
This is a good start but leaves out some really useful features of Photoshop. One of my favorite newly discovered features is layer comps!<p>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!
This article could be titled "How to use Photoshop to draw interfaces".<p>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.<p>I use Illustrator from time to time, but only for <i>assets</i>: 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).<p>Why is Photoshop still considered the n°1 web design tool?<p>- 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.<p>- The community and online resources are huge, from simple forum signature tutorials to advanced realistic drawing techniques.<p>- Air-brushed billboard model? Funny image manipulation? Fake celebrity picture? Done with Photoshop. Everyone knows about it. It's even a verb.<p>- 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.<p>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.<p>You <i>can</i> 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.<p>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 <i>the</i> industry standard program for web/interface design, for now.<p>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.<p>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.<p>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:<p><a href="http://greig.cc/photoshop-webdesign/" rel="nofollow">http://greig.cc/photoshop-webdesign/</a>
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.<p>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.<p>Paper, pencil, and Scheme are high level tools I use to plan and lay out the interface.<p>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.<p>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.
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.<p>Text should superimposed by the system you are using in the end. Akin to using css backgrounds.<p>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.
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 :)
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.