Support Forums
Part 1 Sexy GUI making - Mouseover buttons and Form Background VB.NET [PICS][DETAILED - Printable Version

+- Support Forums (https://www.supportforums.net)
+-- Forum: Categories (https://www.supportforums.net/forumdisplay.php?fid=87)
+--- Forum: Life Support (https://www.supportforums.net/forumdisplay.php?fid=12)
+---- Forum: Graphic Design and Tutorials (https://www.supportforums.net/forumdisplay.php?fid=23)
+---- Thread: Part 1 Sexy GUI making - Mouseover buttons and Form Background VB.NET [PICS][DETAILED (/showthread.php?tid=6022)

Pages: 1 2

Part 1 Sexy GUI making - Mouseover buttons and Form Background VB.NET [PICS][DETAILED - Talish - 04-11-2010

EDIT: Just realized i have posted in wrong section, if a mod wants to move it you can. But i would prefer it to be here actually as it will probably get more views.

Ok, this is my first tutorial so I'm gunna make it good.

So, lets get straight into this!
First we are going to make a background. Imagine your program size and put it into some photo editing software. I'm making a GUI for a useless program so i can show you.

Here's a screen of me making the size. I am using GIMP but any decent software will do!
Spoiler (Click to View)

Ok now we have our size, lets make a background. You can do anything for this but I'm just going to do a basic gradient and some scanlines.
I made a nice gradient, added some scanlines and added a 1px border.
I didn't add any effects or watermark to the image so you can use it if you wish.
Spoiler (Click to View)

Now we have our background we should make a banner. Im just going the make a quick glowing text effect with Filter>Alpha to selection>Alien Glow (GiMP) I also made it 5px thinner than my background and a lot smaller then i made the background colour a dark Grey made a new layer added a pattern and then brushed it with a few different default brushes to give it a grunge effect..
These are my layers:
Spoiler (Click to View)
Here is my banner:
Spoiler (Click to View)

Ok, now we have a banner and background we can make our buttons!
If you wanna be organized create a new folder for the buttons.
I'm only going to be making 1 button, but there will be two images. One for mouse enter and one for mouse leave (One normal and one hover)
So im going to make a new image with a decent button size.
This is the size i will be using:
Spoiler (Click to View)

Now all I'm going to do is put a background layer, make it a black to dark grey gradient, select half of it with the square select tool and fill it with 20% opacity white. Then i will add some scanlines and a border.
Now when you have your button design, add a text layer put your text in.
Make sure you save this .psd (Photoshop) or .xcf (GiMP) so you can easily edit the text!
These are my layers:
Spoiler (Click to View)
This is my button:
Spoiler (Click to View)

Ok so now we have our normal button, we need to make a mouse over image for this button! All this is is when you put your mouse over one of the buttons it highlights it or gives some idea to the user that they have selected that button or hovered over it.
So all i am going to do is make it glow yellow.
My buttons:
Spoiler (Click to View)
Click here to see the mouse over

So now we have our Background, banner and two images for our button its time to begin coding it all!

So open up visual basic.
Make a new project and click on your form, go over to form settings in the bottom right corner and find "Background Image" this is what it will look like:
Spoiler (Click to View)

Then click the ... and you will get a box like this:
Spoiler (Click to View)
Select the top radio button then click the "Import" button then a browser will come up, find your background image and click ok.
Re size your form to make it fit, under the "Background Image" part in the form settings there is a drop down menu asking what you would like the Background image to do. e.g. Nothing, Tile, Stretch or center. I'm going to click "Nothing" and re size the form to fit my background image.

So this is what we should have so far:
Settings:
Spoiler (Click to View)
Form:
Spoiler (Click to View)

Now you can rename your form and do anything else you would like to it.


Ok now we are doing the buttons!
Go into your tool box and get two picture boxes. Drag two of them into your form. Then on Picturebox2 click it once and go to the settings, scroll the the bottom and find "Visible" it will be default as true, set it to False. You will see why soon! Oh also set both Picture boxes background colour to transparent. To do this scroll up and find "Background Color" then click the arrow then select the "Web" tab and go to the top, then click "Transparent" Voila.
Your settings should look like this:
Picturebox1
Spoiler (Click to View)
Picturebox2
Spoiler (Click to View)

Now you have that, select your picturebox1 and set the image as your normal button. (The same way as setting the background image for the form)
Then do the same for picturebox2 but set the image as your mouseover button.

Now you have the two images make sure that both picture boxes are the same size.

Now double click Picturebox1 and paste this code to it:
Code:
Picturebox1.Visible = False
Picturebox2.Visible = True
That code is pretty straight forward. but that will only work if you click it.
So when you read it it will look like this:
Code:
Private Sub PictureBox1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles PictureBox1.Click
        PictureBox1.Visible = False
        PictureBox2.Visible = True
    End Sub
So what you want to do is replace the words "Click" with "MouseEnter" so it will then look like this:
Code:
Private Sub PictureBox1_MouseEnter(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles PictureBox1.MouseEnter
        PictureBox1.Visible = False
        PictureBox2.Visible = True
    End Sub

So basically in English it is saying "If the mouse enters picturebox1 then picturebox1 will hide and picturbox2 will show"
Giving the effect of a mouse over, but now when the mouse leaves the image will not go back to the normal Button, so we will code the rest now.

So go back to your form design and double click picturebox2. Then paste or type this code in:
Code:
PictureBox1.Visible = True
        PictureBox2.Visible = False
And it will look like this
Code:
Private Sub PictureBox2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles PictureBox2.Click
        PictureBox1.Visible = False
        PictureBox2.Visible = True
    End Sub

So now what will happen is when your mouse enters the picture box it will show he mouse over image but it will not leave until you click the button. So change the two "Click"'s to "MouseLeave"

So now your all code should look like this:
Code:
Public Class Form1

    Private Sub PictureBox1_MouseEnter(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles PictureBox1.MouseEnter
        PictureBox1.Visible = False
        PictureBox2.Visible = True
    End Sub

    Private Sub PictureBox2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles PictureBox2.Click
        PictureBox1.Visible = False
        PictureBox2.Visible = True
    End Sub
End Class

I could have just give you that code to paste in but you would have learned nothing!

Now all you need to do is go back to your form design and it should look something close to this:
Spoiler (Click to View)

Now all you need to do is drag one of the picture boxes over the other!
Debug it and test it, and you should have a sexy background and Button!

Tutorial 100% written by Talish, if you use anywhere please give me credit!
Keep a look out for Part 2, tuning the rest of your form! It will include borderless forms with movement, Icons without changer, Top bar modding and more!
Very very big tut here!
Took me a while to make xD

If you need any help with this add my msn Talish@live.com
I'll try and get part two out when I'm not busy.

RE: Part 1 Sexy GUI making - Mouseover buttons and Form Background VB.NET [PICS][DETAILED - Sparky - 04-11-2010

Nice tut man. Pictures really help.

RE: Part 1 Sexy GUI making - Mouseover buttons and Form Background VB.NET [PICS][DETAILED - Christopher - 04-11-2010

I might use this on a Crypter Im making.

RE: Part 1 Sexy GUI making - Mouseover buttons and Form Background VB.NET [PICS][DETAILED - //Pretext™ - 05-18-2010

Yeah this looks great dude.
Long ass tutorial.

RE: Part 1 Sexy GUI making - Mouseover buttons and Form Background VB.NET [PICS][DETAILED - Fragma - 05-18-2010

Needs to be posted in the .NET Section.

Nice anyway.

RE: Part 1 Sexy GUI making - Mouseover buttons and Form Background VB.NET [PICS][DETAILED - Michaelmhmhmh - 07-11-2010

Hehe only if i new how to make vb.net programs i learning though so this could come in handy

RE: Part 1 Sexy GUI making - Mouseover buttons and Form Background VB.NET [PICS][DETAILED - Lemons Kushy - 10-23-2010

thanks for this dude.
Thumbsup

RE: Part 1 Sexy GUI making - Mouseover buttons and Form Background VB.NET [PICS][DETAILED - -BoodyE- - 10-23-2010

Thanks a lot for this mate. I will surely implement it in my future releases.
Thanks again.

RE: Part 1 Sexy GUI making - Mouseover buttons and Form Background VB.NET [PICS][DETAILED - Step Up 3™ - 10-23-2010

Very helpful tutorial!

RE: Part 1 Sexy GUI making - Mouseover buttons and Form Background VB.NET [PICS][DETAILED - T3RRi8Le™ - 01-06-2011

Nice tutorial, this will come in handy.