Freebie for designing forms in Photoshop

I design forms in Photoshop for all sorts of reasons, but drag & drop is number one. Avoiding code until I’m ready is number two. The harder something is to change, the less likely you are to change it. So when I’m still in the design process, I keep it fast & loose. (That’s part of why my forms are so awesome!)

Designing forms in PSD can be a bitch, though, so I created a handy reference PSD with all sorts of snippy elements I can reuse whenever I need to mock up a form. It saves me oodles of time.

Try it yourself. Download my Form Mockup UI Elements PSD and save yourself time & frustration.

Enjoy!

Belorussian provided by Fatcow

4 Comments

  1. Thanks Amy, this will come in handy.

    This reminded me, I once had a client insist that all the forms look like they do in my mockup, even on Windows. I had to skin the form with the OS X look for Windows. Ever since I always check which OS the client is on and use screenshots of forms from that OS. :)

  2. Thanks a lot, Amy! Just when I needed it :-)

  3. Martin says:

    @Brad: I’ve been there too. One client felt we had cheated her when the buttons didn’t look as “soft and round” when viewed on her Windows machine :P

    I find this tool really useful when mocking up forms in PS: http://minimaldesign.net/demos/html-form-elemts-for-photoshop/index.html, just adjust the background color and field properties and take a screenshot of the field you want. It’s actually a lot quicker than adjusting sizes and texts in PS.

  4. By the way, mocking up your forms with XCode’s InterfaceBuilder is also worth mentioning since resizing/disabling of form elements is faster.

Leave a Reply

Hey, why not get a shiny
Freckle Time Tracking
account?