Good interface tutorial in photoshop?

vokic
06-02-2006, 03:27 PM
Does anybody know a good, photoshop based tutorial to make a realy good looking (maybe winamp like) interface for my new audio/video player built with VB.NET?I meen desktop application... I've searched the net but nothing came up...

vokic
06-03-2006, 02:30 PM
Sorry to administrators for missing the category... I was in the rush... Thanks for moving the thread where it belongs...

guest_5432
06-06-2006, 12:17 AM
Does anybody know a good, photoshop based tutorial to make a realy good looking (maybe winamp like) interface...
Most of the people are this forum are coders, not graphic artists.

There are tons of Photoshop tutorials out there.

However each tends to concentrate on a specific effect or interface element - like "glassy buttons" or "slivery recessed buttons" or "distressed metal panels", etc.

The reason you won't find many tutorials on designing a whole interface is because graphic designers know that putting the interface together involves a whole bunch of subjective design decisions and no graphic artist would want to (or perhaps could) make those type of decisions for another graphic artists--mainly because there are so many different types of forms/functions you could have in such an interface...things like:

1.) How many buttons?
2.) Where located?
3.) General perimeter shape of interface (outline)?
4.) Size (tiny, tight clustered or large heavy textured, wide spaced or something in between)?

Do you see all the thousands of possible permutations?

The other thing - WinAmp has been around for a long time and has "evolved" in terms of interfaces.

WinAmp2 had the "classic" interface
WinAmp3 had a more "freeform" (curvy/round-ish) nature
WinAmp4 skins tend to embrace the "modern" (shiny/silvery) theme
WinAmp5 skins go for the full blown exotic.

Here's some examples of WinAmp5 interfaces from the DeviantArt site:
http://www.deviantart.com/deviation/12815880/
http://www.deviantart.com/deviation/6744893/
http://www.deviantart.com/deviation/13591962/
http://www.deviantart.com/deviation/13506806/

A good starting point for "skin design" is the WinAmp site itself.
Here's a page with many links for those interested in designing skins:
http://forums.winamp.com/showthread.php?threadid=134422

Not having even the vaguest idea of what you mean (and what you picture in your head) when you say "really good looking (maybe winamp like) interface", I'll just pitch out this one simple 5 page Photoshop tutorial on the developing a "classic" style skin:
http://www.readandforget.com/how2/Winampclassic/


The final question I have (that may help others who decide to post in this thread..trying guide you) is what is your current graphics/Photoshop experience?
If it is "just beyond beginner" level?
Hopefully you already know the basics like:
1.) Working with layers, layer masks, opacity adjusting, and channels
2.) Apply bevels (inner/outer), making fuzzy drop shadows, doing lighting effects
3.) Knowledge of using filters and plug-ins
If so, then I would recommend this book to help go further along:
http://www.amazon.com/gp/product/1903450551/103-6743776-9607067?v=glance&n=283155
There is also a version 2 (http://www.friendsofed.com/book.html?isbn=159059262X) int the same Friends of Ed series.

vokic
06-06-2006, 06:56 AM
Thanks for the reply... My photoshop skills are very good and i am on last year (fifth) of my faculty which is Faculty of Technical Sciences, department for Graphical Engineering and Design... I was just wondering if there is just tutorial with guidelines for making the good interface because it is the first time that i have to do it for desktop application... Once again thanks for the reply and for good links...

BBauer42
06-06-2006, 08:48 AM
Here are some interface tuts...

http://www.absolutecross.com/tutorials/photoshop/interfaces/audio-interface/

http://www.photoshoptower.com/tutorials/hand-held/index.php?p=2

Val
06-06-2006, 11:51 PM
When designing a custom interface, I suggest starting with a paper/pencil in hand to sketch out design ideas, from larger to smaller. First think of the general shape of the window, then think of the possible shapes of controls that will work well with the main shape, and how the most important controls/elements will be placed - where is the title bar, where are the caption buttons if any, etc. You don't have to know how to draw well to do this, as you can always use arrows and captions to clarify the details of how the objects are supposed to look.

Further more, most interfaces distinguish the main elements with a larger size so they are seen by the user as soon as possible, which ensures that no hunting will be required to find the button you need to press to carry out a common action (like Play, Stop, etc.) Alternatively, these buttons could be located in intuitive places where one would expect to see them.

It may also help you to choose some specific real-world "theme" to the layout, so you don't have to worry about defining too many of your own shapes/their look (because that is sometimes a long process involving trial and error). For example, you can choose... A gas mask as the base for your layout. Then the Play/Stop buttons could be located in the eyes, and the trackbar could be located on the breathing pipe, the open button could be located on the filter. You could choose a dolphin, or a colt 1911, or anything else that may look original as an audio player theme.

Hope this helps.

vokic
06-07-2006, 08:53 AM
You've all been helpfull... Thank you all for giving me tips, guidelines and some nice tutorials on the net... When i finish it, it will be posted... Thanks again

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum