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


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

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
5 Responses to "Graphical user interface" 
|
said this on 05 Jan 2009 3:28:09 PM CDT
wow!!!! so fast 'n' so well detailed!!!
|
|
said this on 15 Jan 2009 8:08:25 AM CDT
wow good hard tuts pls video
|
|
said this on 27 Jan 2009 9:57:07 AM CDT
nice but not original
|
|
said this on 03 Apr 2009 11:43:13 PM CDT
Another commendable tutorial from you. Love the little background info on GUIs. This is one informative, helpful, creative post. Thanks so much for sharing this!
|
|
said this on 25 Jul 2009 3:47:54 AM CDT
You site and the topics you've posted about are very informative things..It is really hard to find sites like this on the internet..I wish you luck on the road you're headed..thanks..
evden eve nakliyat
|



Author)