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.

Graphical user interface



Graphical user interface

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.

Graphical user interface



Graphical user interface

Final steps make a selection like this.

Graphical user interface

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

Graphical user interface

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

Graphical user interface

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

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

Graphical user interface

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).

Graphical user interface

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

Graphical user interface



Graphical user interface

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).

Graphical user interface

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

Graphical user interface



Graphical user interface

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

Graphical user interface

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.

Graphical user interface

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

Graphical user interface



Graphical user interface



Graphical user interface

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.

Graphical user interface

Apply these layer styles. Watch the images carefully.

Graphical user interface



Graphical user interface



Graphical user interface

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

Graphical user interface

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.



GUI - Graphical user interface

See you next time.

View full size, click here
   


Pages: « Back  1 2  Next » 

Popular Tutorials

Girl Photo Manipulation illustration in Adobe Photoshop CSThe Making of an Iconwallpaper with logo in Adobe Photoshop CSSummer Party WallpaperSunny Day Effectsdesigning wallpaper with glass dragonmake a wallpaperSony Ericsson LogoFantastic Sunset Wallpapers

Latest Tutorials

Chaos ToolsChaos ToolsCreate very shiny summer wallpaperHow to  create wallpaper based on making of the logomake a wallpapermake a wallpaperDigital art wallpapersSpace designnine and venue

5 Responses to "Graphical user interface"

 
xavier Rating: ratingfullratingfullratingfullratingfullratingfull Unrated
said this on 05 Jan 2009 3:28:09 PM MDT
wow!!!! so fast 'n' so well detailed!!!

 
evden eve nakliyat Rating: ratingfullratingfullratingfullratingfullratingfull Unrated
said this on 15 Jan 2009 8:08:25 AM MDT
wow good hard tuts pls video

 
ghenntle Rating: ratingfullratingfullratingemptyratingemptyratingempty Unrated
said this on 27 Jan 2009 9:57:07 AM MDT
nice but not original

 
Business Cards Rating: ratingfullratingfullratingfullratingfullratingempty Unrated
said this on 03 Apr 2009 11:43:13 PM MDT
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!

 
evden eve nakliyat Rating: ratingfullratingfullratingfullratingemptyratingempty Unrated
said this on 25 Jul 2009 3:47:54 AM MDT
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




Rate this article and leave a reply:
Rating: * Poor Excellent
Your Name *: Email (private) *: Website:
Please copy the characters from the image below into the text field below. Doing this helps us prevent automated submissions.
Security Code: img






Partner Links

advertise here ...
CSS Gallery