Make a beautiful graphical user interface in 15 lines or less

I hope you can agree with me when I say:

A beautiful graphical user interface (GUI)

Can be hard to make:

Getting it to look really look beautiful is even HARDER.

Or is it?

Well, it turns out.

You can dramatically increase the look of your GUI’s by using one simple method…

…a method that has helped me make GUI’s that look amazing

with only a few extra lines of Ahk code.

In today’s post (and video)

I am going to show you what that method is…

and exactly how you can easily use it.

 

Degree of difficulty:     3 / 10

 

This post contains example code for the free open-source scripting language AutoHotkey.

 

All you need:

• AutoHotkey ( Download | Website)
• A text editor like Notepad or something like SciTE4AutoHotkey
• Some images

And 15 line of code ( plain text ) from this tutorial.

 

As always there are free download links at the end of this post, for both the finished working Autohotkey script with all the shown lines and also a compiled exe with the same for those who’d only like to try and see this graphical user interface live.

 

Example video: (0:36)

 

It’s so simple:

The method to make beautiful graphical user interfaces every time, is that you simply use images.

It’s up to you how you get, make or find the images, when you have them, all you do is use them as GUI controls.

This is made easy with AutoHotkey as the picture control is built-in to the gui commands of AutoHotkey.

 

 

1. Choose the right images for your beautiful graphical user interface.

So for this guide you will need some images, to get the look of the GUI above you’ll only need the 5 images shown below, but you can also

• Create them on your own
  • Images can be something you make yourself like me, this will make your GUI truly unique and it can be done with free programs like Gimp or a paid one like Photoshop, both have lots of tutorials online you can use, or you can edit free images, like I did with some of the images used in this tutorial.
• Find images to use
  • You can easily find image sets online with a query like “free Photoshop ui kits” on google, which will give you lots of idea’s or even ready images you can use as you see fit for your beautiful custom user interface.

 

Here’s the 5 images you need to get the look of the GUI above, we will get to the 15 lines of plain text (code) in a moment, I’ll show you step by step how to make it, but first let’s start with the images I used:

 

titlebar2.png

button off 1.png

Close Circle Buttons.png

button on 1.png

bg.png

Images (.zip)

Free – Get Checkout Added to cart

 

The AutoHotkey help file section about GUI’s is a great place to look if you need to know more about any of the Gui commands in AutoHotkey

 

2. How to start making your graphical user interface.

Start with a new text file and in the first line you can and will set one or more Options for the overall graphical user interface, so start with “Gui, ” and then you Specify with a plus sign [+] to add an option or a minus sign [-] to remove an option,

For this Gui we only need to remove the windows Caption because we will use one of the images as our own custom title bar so remove the Caption with “-Caption” like this:

Gui, -Caption

 

Now on the next line let’s set the overall size of text in the Gui, for this we will use the Font command and the (s) for size option followed by a number (points) we like the size of our Gui text to be, for the example Gui in this guide you will use a font size of 22:

Gui, font, s22

 

 

3. How to get you images to look like a graphical user interface.

Next line! You’ll add the first Picture to the user interface, the custom title bar (an image with a width of 500 pixels and a height of 40 pixels), to do this you will need to use the “Gui, Add, Picture,” command, you also need to set where in the Gui you like the pic to show up, to do that you will set some coordinates aka X,Y options, and last you need to tell where the image is stored by inputting the path to the image file, if the image is in the same folder as the script file you only need to input the file name:

Gui, Add, Picture, x0 y0 gUImove, titlebar2.png

 

After that it’s time to set the close button image, so again you will use “Gui, Add, Picture,” and input the X,Y options but this time you also use the (g) option for g-label (goto label) this will make the script perform the subroutine under the label with the name you set, and as it is a close button let’s call the label “close”. Now to make sure any transparency in the image is used we will turn Background transparency on with “+BackgroundTrans” so the line will look like this:

Gui, Add, Picture, x458 y4 gclose +BackgroundTrans, Close Circle Buttons.png

 

Now for your Background image, you will again use “Gui, Add, Picture,” with the X option set to 0(zero) and the Y set to 40 aka the height of the title bar image, and the path to the image file or the name of the image file.

Gui, Add, Picture, x0 y40, bg.png

 

So now we have something like this: ( This won’t work YET as code letter in the tutorial is needed )

And that’s with only 5 lines of script and 3 images

 

 

4. How to make a row with text and a button.

Next I’ll start by telling you how to make the first row of text and button, this part will be almost the same for all 3 rows in this beautiful graphical user interface.

 

Ok now for the line of text we will use “Gui, Add, Text, ” and again set the coordinates of the text with the X,Y options, you’ll also need to use “+BackgroundTrans” to set the texts background to transparent and for the last parameter you’ll input the text to show in your graphical user interface, for this guides GUI, it will be “Internet”.

Gui, Add, Text, x20 y83 +BackgroundTrans, Internet

 

To make an on/off button like the ones in the GUI of this tutorial you need two pictures, one for the off state and one for the on state.

Now for the first state image you will again use “Gui, Add, Picture,” and set the X,Y coordinates and make the background transparent with “+BackgroundTrans”, but this time you will also need to use the (v) option this will enable you to give the image a variable name.

This it will be easy for you to manipulate it later, also remember to set a g-label for the sub-routine that will toggle the image of the button when you press it, and anything else you like to happen when the button is clicked.

For this guide we use a label called “click” for the first button, the last thing you need, is to put in the path or name of the “on button” image file.

Gui, Add, Picture, x310 y70 +BackgroundTrans vC1 gClick, button on 1.png

 

Next for the off state button you will do the same thing again, same options except for the (v) option and the name of the image.

But as you only need to show one image in the same spot at any given time you also add the hidden option so that when you show the GUI the off image will be hidden until you need it.

Gui, Add, Picture, x310 y70 +BackgroundTrans vC2 gClick hidden, button off 1.png

 

That’s only 8 lines and it looks like this: ( This won’t work YET as code letter in the tutorial is needed )

So if all you need is a graphical user interface to start or stop one thing like a script or routine then that’s about all you need to get a beautiful interface for that.

 

 

5. Making more text rows and buttons.

To make the beautiful graphical user interface in this guide you will need to do 2 more button code blocks, I will also end by briefly going over how-to make the buttons toggle, and remember that all of the script is downloadable at the end of this tutorial.

 

So for the next line of text you will use “Gui, Add, Text, ” and set the options like “x y +BackgroundTrans” also set the last parameter (the visible text), for this guide’s GUI it will be “Sound”.

Gui, Add, Text, x20 y176 +BackgroundTrans, Sound

 

Then you put in two lines of “Gui, Add, Picture, ” and both with the same options, coordinates, trans, variable (v#), g-label (click1) and for the last parameter you use the 2 images of the button again .

Gui, Add, Picture, x310 y160 +BackgroundTrans vx1 gClick1, button on 1.png

Gui, Add, Picture, x310 y160 +BackgroundTrans vx2 gClick1 hidden, button off 1.png

 

After 11 lines of code this is how it looks. ( This won’t work YET as code letter in the tutorial is needed )

 

Again for the last row you do like this

Gui, Add, Text, x20 y269 +BackgroundTrans, Microphone
Gui, Add, Picture, x310 y250 +BackgroundTrans vy1 gClick2, button on 1.png
Gui, Add, Picture, x310 y250 +BackgroundTrans vy2 gClick2 hidden, button off 1.png

 

 

6. How to make it all visible.

Now for the command that will show this beautiful graphical user interface on the screen.

For this you use “Gui, Show, ” and then you can set some options like the X,Y of the upper left corner of the GUI or the size of the window like in this guide the options (w) and (h) tells the script to show a GUI window that is 500 pixels in Width and 340 pixels in Height.

Gui, Show, w500 h340

 

 

Click to Tweet: There it is a beautiful graphical user interface in 15 lines DONE!

If you don’t need to do 3 things you can do it with less, you can also make a background image with your text and save 3 more lines.

 

7. Making Your interface interactive.

Ok I must admit that the GUI on its own with only 15 lines can’t do anything, but it looks really good.

So i will show you a little more, but only briefly, like how to write the routines that toggles the buttons in our now beautiful graphical user interface.

 

You will need to prepare some variables that will hold the status of the button, you can do this by making and setting the same number of variables as you have buttons to a value of 1, for this guide that’s 3 variables you put right under the “GUI, Show ” line and it looks like this.

ci := 1, xi := 1, yi := 1

 

Now in the next line put a “return” to tell the script to stop and wait for the user to interact with the GUI.

Return

 

So now if this script is run you will see a beautiful graphical user interface that looks like the one at the top of this page, let’s look at some of the code that will give your interface the functionality it needs.

 

7.1 Dragging by titlebar routine.

First thing, How-to make your GUI movable by dragging it by the titlebar.

For this you will make a routine under the g-label “UImove” it’s the one seen above in the options when you added the titlebar image.

A routine label looks simple as it is just the name of the label with a “:” after it, in this guide it looks like this

UImove:

 

Right under the label you will use “PostMessage” to post a windows message to the OS telling it to let you drag your GUI, it looks like this

PostMessage, 0xA1, 2,,, A

 

That’s it, now you end your routine with a “return” like this

Return

 

Now your GUI will be draggable, next you will have to write 3 routines one for each of the buttons, but in this guide I’ll only walk you through the first one, seeing as the part that’s used to toggle the button state images is the same for each button.

 

7.2 Toggle button state routine.

So start with the label from the first button like this

Click:

 

Next use the command “GuiControl ” with the “hide” option to make sure the image with the last state is hidden, for the last parameter, put in the variable that hold’s the state of this routines button, like this

GuiControl Hide, c%ci%

 

Then you need to set the value of the new state of the button, in the buttons state variable, this can be done in more ways than one, the one you will use for this guide looks like this

ci := 3 – ci

 

Now you will use the command “GuiControl ” again with the “show” option this time to show the image with the new state of the button, this line looks like this

GuiControl Show, c%ci%

 

Ones again ending the routine with a “return”.

Return

 

That’s the first buttons toggling routine the next two look almost the same.

Click1:
GuiControl Hide, x%xi%
xi := 3 - xi
GuiControl Show, x%xi%
Return

 

Click2:
    GuiControl Hide, y%yi%
    yi := 3 - yi
    GuiControl Show, y%yi%
Return

 

 

8. How to close it when done.

Last op is the closing routine for the GUI, for this tutorial it starts with the label from you close buttons (g) option

close:

 

Under that you can also (optionally) put a build in label that is called if any user presses ESC while the GUI is active.

GuiEscape:

 

And for the finishing line of your script you put

Exitapp

Conclusion

That is one of the ways you can make a beautiful graphical user interface, and I also showed you how-to make the GUI usable although not with as much detail, but that is only because there is just too much to cover in one guide.

Of course there are many other ways to do this and I’d be glad to cover them in later tutorials if you wish? Please tell me what other GUI questions you have or like me to answer.

 

Examples of some other great graphical user interface:

If you have any questions or ways that you use to help you remember how to use your programs, please feel free to use the comments or contact page and tell me all about it.

 

Try it:

To use your new script, continue as follows: 

• Write or Copy all the line above and then Save the file as .ahk and close the file. (remember you also need the images)
• Double-click the file to launch it. A new icon appears in the taskbar notification area.
• Some scripts may need you to press a Hotkey or Hotstring to see the script in action
• To exit or edit the script, right-click the green “H” icon in the taskbar notification area. (and click the exit option)

 

Notes:

AutoHotkey scripts can easily do lots of other things than I have shown you in this tutorial.

You can also have many scripts running simultaneously, each with its own icon in the taskbar notification area all doing their tasks automatically.

To have this script start automatically when you start your computer, create a shortcut to the script file in the Start Menu’s Startup folder.

 

Downloads:

Script (.ahk)

Free – Get Checkout Added to cart

 

Application (.exe)

Free – Get Checkout Added to cart

 

Images (.zip)

Free – Get Checkout Added to cart