Creating a Knob in Photoshop [Video]


By Chris Karling | 27 min | © Guifx
A Photoshop tutorial explaining how to build a brushed aluminum knob for a graphical user interface (GUI).

Download:  Download Photoshop File| 315 KB
27
Comments
  1. Very nice tutorial and outcome Chris. I will have to actually go through the tutorial again and do it xD

  2. Great tutorial guys. Thanks for sharing the info. Keep up the great work!

  3. This is great! but what about making 0-255 states for this Knob? Here is showed only single state which is useless in real world GUI.

  4. this is one of the better vid tuts i have seen in a long time, mega thx for the info on how u work.

    will do this once i get home.

    thx once more for a good tut Chris

  5. Thank you guys for the very kind words. You are what drives us to do what we do, so thank you all for taking the time to give us your feedback :)

    Frisbie, I’m sorry if you’re not 100% happy with this tut. The truth of it is though that making 0-255 states would have taken a lot of time. and really, once you know how to mask out the colored part of the gauge it’s rather straight forward. Just takes a bit of tinkering. I’ll keep your comment in mind for later tut’s though. Thanks :)

  6. This tutorial was great I like the extra detailed tweaks at the end that really make a good icon a great icon. I do slightly agree with Frisbee in that I would like to see more detail on good ways to exporting these images out of Photoshop and having them ready for real working GUI programs. Otherwise the design was great and the extra detail on why you liked or used a certain effect helps me understand Photoshop designing a more. Thanks Chris keep up the good work and look forward to more tuts in the future!

  7. I can not seem to get this to launch no matter what I try.
    any sugestions? or can you send me a wmv file or something.

    Thanks.

  8. Hey Tim. We just added a ‘QuickTime Movie’ option in the download area just below the video. If you don’t already have QuickTime installed (you’ll need it to playback the video) you can get it here. Enjoy. :)

  9. Hey Dice927. Thank you for the kind words. I’ll see what I can do about post production of GUI elements in later tutorials. I will say this though, that the very next few tutorials are in the post production stages, so patience is a virtue as far as your and Frisbie’s request goes. But rest assured your voices have been heard!

  10. Great tutorial. I’m a fireworks user but i was able to follow a long because of how well you explained things. I have played around with trying to make ‘metal’ effects for years and your tutorial explained it in 5 seconds by showing me how many nodes and the tip about keeping the ends the same. Thanks!

  11. That’s really nice! I hope you have plans to publish more tutorials like this one.
    Thanks!

  12. ohh~ good job Chris~! thanks for sharing~

  13. Fantastic, more please …. Great tutorial ….!!!!

  14. the tutorial is great….but i hate when peole do not prepare themselves for recording a tutorial….hmmmming all the time….it’s annoying….

  15. Very nice tutorial. I was going back and forth between the different 3D software packages to achieve the same look, but with no luck. Glad I found it. And it would be nice if you could extend it and make a same tutorial but also explaining design for 0-255 states.

  16. That’s pretty cool, and also quite cool and yet some more cool and I think it’s a tad cool also which is pretty cool if you think about it. Haha sorry, it’s a quality tut, I didn’t care much for the color curves editing (to make it blue, nor the photo filter), it looked much better without it in my opinion. And one other thing, I think this would suit better in illustrator without any raster graphics effects.

  17. aait for the tut but the voice is so gay..

  18. thanks for this great tutorial!

  19. Great tutorial, thanks for taking the time to put this together, much appreciated, I’ve learned much, now, putting it into practice is another matter :)

    Cheers

  20. Hi,
    really nice tutorial. I am a bit new at this all designing thing but I have been doing a lot of learning so I can tell that screen cast is the best way to learn. But they do have some floes too.
    Dude what is the matter with you? What is up with all of those eeeeehhhhh and cool every sentence or so? You know it is really hard to listen to.

  21. hello!
    sorry if i am writing at a wrong place, but could uz help me? how can i do a button for touch screen? has to be gif? or is any bmp or jpg file ok, just when gonna be presssed gonna load the pressed version?
    please help!
    thank u!

  22. great tutorial.

    but you sounded so tired! and swedish as well

  23. Nice Tutorial. Can’t wait to try this knob.

  24. i have a question, now that you have already designed it now how will this work, I mean what type of program is java script or some thing else – please also show that tutorial in which this knob is working

    thank you – greetings – xeon lee

  25. very good. but so fast.

  26. thank you so much , i have create a copy which is exactly like , i m v.happy

  27. Thanks, Very useful for me.

Leave a Comment

You must be logged in to post a comment.