Graphical user interface

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.



GUI - Graphical user interface

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.


Graphical user interface


Then try to figure out all buttons layout.


Graphical user interface




Graphical user interface




Graphical user interface


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


Graphical user interface


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


Graphical user interface


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)


Graphical user interface




Graphical user interface


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.


Graphical user interface


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


Graphical user interface




Graphical user interface




Graphical user interface




Graphical user interface




Graphical user interface


SO we now have our major window skinned up. It has volume and texture now.

Next step the Buttons:


Graphical user interface




Graphical user interface




Graphical user interface




Graphical user interface

The Info Screen:


Graphical user interface




Graphical user interface




Graphical user interface




Graphical user interface


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.


Graphical user interface


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


Graphical user interface




Graphical user interface




Graphical user interface




Graphical user interface




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

Comments