I'm new to "crafting UIs", but I've been doing User Experience / Interaction design for a while. Being unable to design my own graphics has been a serious handicap for my work as I'm dependent on other designer(s) to make those elements.

I sketch UI layouts, patterns, icons, etc on my own and I'm decent at illustrating (on paper).

I want to be able to make reusable UI elements/components digitally such as,

  • Icons,
  • Buttons,
  • Textures and other required/related graphics.

Please advice me on how to go about doing that? And please mention the preferred tools for such tasks. Eg: Photoshop / Fireworks, etc.

And please do recommended resources & guides which would help me achieve this.



I make most of my UI elements with Photoshop. Take advantage of Layer Styles to create subtle gradients, consistent highlights and shadows. You can then save your Layer Styles within Photoshop and apply them to any shape in the future, giving you the ability to create buttons and other UI elements in seconds. With CSS3 you can also recreate your mocked up UI elements directly in the style sheet. This is powerful because you no longer have to slice up images and now have the ability to redesign UI elements globally on your site by changing a few lines of code.

Great Article on creating buttons in Photoshop: http://galp.in/blog/2011/08/02/the-ui-guide-part-1-buttons/

Collection of articles on how to create buttons with css3: http://speckyboy.com/2010/02/15/20-css3-tutorials-and-techiques-for-creating-buttons/

Patterns & Textures

I also make my patterns in Photoshop. You can convert any design or graphic element into a pattern in PS by going to EDIT > DEFINE PATTERN. Just like the Layer Styles mentioned above you can save patterns and reuse them on UI elements with the click of a button. In the Layer Styles there is an option for PATTERN OVERLAY where you have the option of choosing from pattern that are shipped with PS and patterns you download or create yourself. The key to using patterns is not to over do it. Use them subtly and build up layers low opacity layers of them.

Great Article on Patterns: http://galp.in/blog/2011/10/04/the-ui-guide-part-2-bg-forms-texture/

Fantastic Resource for repeating Patterns: http://subtlepatterns.com/


Icons are in a world of their own. Time consuming and tough to create, great icons are usually done by talented illustrators. Unless they are pretty minimal and straight forward, I get my icons from the wealth of free resources that are out there. If you are going to create you're own icons though, like others have mentioned, you are probably best suited to do so in Illustrator as vectors are resizable without loss of quality. You can create them in Photoshop though and still have them scalable. Similar to defining pattens, once you make your shape or icon, you would want to go to EDIT > DEFINE CUSTOM SHAPE. Your shape will now be saved into a library that you can access under the Custom Shape Tool. (It's an option under the Rectangle Tool). You can now quickly drag your custom shapes or icons onto your canvas and easily change the shape, size, color in seconds.

Nice Roundup of some free icons: http://www.smashingmagazine.com/2010/11/09/50-free-high-quality-icons-sets/

A great site for a quick one-off icon, just search any keyword and see multiple icons matching your search: http://www.iconfinder.com/

I've only scratched the surface on these three subjects but these should get you headed in the right direction. With the methods mentioned above you will be able to start creating your own library of reusable resources from within Photoshop which should really speed up your prototyping stage.

  • Wow. Awesome. Thanks for the awesome guidance. Btw, can you suggest some resources (websites/blogs) which I can follow to grow my expertise in such matters? (if you follow any) Thanks a ton. And If I could upvote, I certainly would've! – Ameen Oct 28 '11 at 3:10
  • 1
    Sure thing. If you haven't done so already, check out www.smashingmagazine.com they are certainly one of the most respected sites within the design community. They also have a NETWORK tab in their navigation which is comprised of loads of other design resource sites. Whenever you find work that you like, you should follow that designer on Twitter and be mindful of what they are into. Twitter is like a stream of resources if you follow the right people. dribbble.com is a fantastic place for inspiration and a great way to learn about top designers and illustrators in the community. – Jonathan Smith Oct 28 '11 at 13:22

I would suggest a mixture of photoshop and illustrator.

Illustrator is great for objects that may need to be scaled, as it's vector based.

Photoshop can do the job and is the tool I generally use (and also was the only graphical program I used when I was a web designer). Although I don't often create final graphics.

  • 1
    Using Adobe products may also allow you to take advantage of Flash Catalyst, which allows graphics and mockups to be used directly in coded user interfaces. – Evan Oct 25 '11 at 15:46
  • @Evan Could you also share your process of creating reusable graphics? Thanks in anticipation :) – Ameen Oct 25 '11 at 18:46
  • 1
    I asked Jonathan Smith, an actual designer at my company, to post his thoughts. He's now posted an answer. – Evan Oct 27 '11 at 15:03
  • @Evan Thanks a lot. Appreciate it :) I can't thank you enough for you taking your time out for doing this. You're awesome. (Jonathan is too :D) – Ameen Oct 28 '11 at 3:12

I'm doing UI/UX stuff for a few years now and doing all my mockups/comps in Fireworks. The biggest pro for Fireworks is that you can make 9-slice scaling symbols (that stay vectors!) which you can easily reuse and resize (without quality loss). As far as I know this is not possible with Photoshop or Illustrator.

  • Awesome, could you share a few resources you used to get upto speed with Fireworks? I'm relatively new to it. Thanks :) – Ameen Oct 25 '11 at 23:10
  • I just learned it on myself. It's pretty easy, especially if you're used to vector editing programs like Illustrator. – bart Oct 27 '11 at 18:13

Definitely Adobe Photoshop/Illustrator!
The best HowTo ressources i know are at the bottom.

I use the premium content too, often very usable.

  • Thanks a lot! (Can't vote up since I'm a new user). Also, would you like to share how approach designing your own elements. I'm a newbie and would appreciate all the insight I can get. :D Cheers! – Ameen Oct 27 '11 at 5:44
  • Its all about knowing your tools and experience. Try to copy other designs/elements to get familiar with PS/AI. I use sites like pttrns.com, dribbble.com or behance.net to get inspired ... – ueberkim Oct 27 '11 at 10:56

Not the answer you're looking for? Browse other questions tagged or ask your own question.