Graphical user interface

Now for more user friendly purpose I will create play rewind and etc buttons for my player. Now for this we need some standard PS shapes, actually only 1 single shape.







As you can see these are the same shapes except the pause and record or whatever it is. Well I think you have now problems in creating these 2.







Final steps make a selection like this.



And overlay it (create a new layer first) with white to transparency gradient.



I've also added some information in my preview screen as if the song is playing there.



And as the final step I'd like to add some artistic elements.

Make a selection of the whole player (now) window.



Create a new layer just next to the window layer and make just one tap on the mouse using this very brush you see ( will be available for download).



Create a mask to the Brush layer and use black to white gradient to hide the left part of effect.







Well I think we are ready here: we have nice and clean design made in about one hour. Of course we could have used some additional features like the equalizer or something like this but anyway the result looks good I think.

And another thing: even if you are a creative mind and good designer you still got to know how to sell or better to say, promote your design.

Presentation is everything for you and your client.

Create a reflection that I think you already know how to create (flip 180 degrees then flip horizontally).



Use mask to blend up the effect. Moreover the opacity has to be around 56%.







Create very low opacity oversized layer copy for the background and paste some text lines.



While making this GUI design I was thinking all the lime that the volume round volume controller doesn't, really look like one.

Now is the time to change it.

Make a round selection that has to be right on the imaginary middle point.



......Layer via copy and do some layer styling.











It looks better now. I want to make it even better.

Create another selection, this time a very small one, do the same thing by copying the layer to a new one.



Apply these layer styles. Watch the images carefully.











Now just pit an imaginary logo there. Just a "T" later.



And we have finished with my first ever GUI design. Hope you've enjoyed this one. I'm also giving PSD and texture Brush pack for you to download.





See you next time.

View full size, click here