Hallo and welcome in my GUI design tutorial. So first I want to start from some explanation here.

What is GUI design? Graphical user interface (GUI) is a type of user interface which allows people to interact with electronic devices like computers, hand-held devices (MP3 Players, Portable Media Players, and Gaming devices), household appliances and office equipment. A GUI offers graphical icons, and visual indicators as opposed to text based interfaces, typed command labels or text navigation to fully represent the information and actions available to a user. The actions are usually performed through direct manipulations of the graphical elements.



SO I think you found out what the GUI design is. As a designer you got to know this technique too. All the GUIs are basically based on layer styling in Photoshop and of course the shapes, but basically it's all about drop or inner shadow and etc.

SO let's begin. We will be creating a music Player for PC users.

First you got to do is to create a document. Then start to create basic shapes.

Define the basic dimensions of the player.



Then try to figure out all buttons layout.











Define the position of the screen on which all the song information will be displayed.



AS it is a player for windows we have to make these hide, restore, close buttons.



Moreover: GUI design usually consists of many, many shapes and layers. You, as a designer have to know how to save your time by not messing with all these small shapes and layers. I'm not using automatic layer select for various reasons: it's not working properly if the layer is semitransparent or has another layer underneath. So, do it clean)







Now we have all shapes locked in separate groups.

So I will divide my design on categories. We have 5 major elements to which the layers styles will be applied.



Well start not from 1st but from number 3. This is the major shape - window.



















SO we now have our major window skinned up. It has volume and texture now. Next step the Buttons:















The Info Screen:















Now the windows minimize/restore/close buttons have the same layers styles like the buttons we've already styled. But the outer glow is turned off.



Now the big circle on the right witch I think will be volume controller.