Creating the Toolbar with GIMP

I guess I have been using GIMP for… wow, well over a decade now. I’m old. So, I comfortable with its interface and familiar with how to use many of its features and tools. And I could say the exact opposite Inkscape and other vector drawing programs. So even though I am sure it would be super optimal to make UI elements in vector format, so that scaling the images for different resolutions doesn’t cause distortion… meh, I’ma use GIMP!

My screen resolution is 1600×900 on my 20″ monitor, which I am happy with, but I understand that 1920×1080 is the defacto resolution for desktop computers and TVs these days. So with that in mind, I made my toolbar almost 1920 pixels wide so that it can be nicely scaled throughout many resolutions.

Next I made a rough concept for how I would like the element laid out. I don’t always do this, because most of the time I have an image in my mind of what I would like, but sometimes it’s just helpful to “write it down”.

Rough concept for toolbar

Rough concept for toolbar.

After that I proceeded to play with different full width gradients that would make up the frame. I was going for a metal dashboard look, with lights, but I wasn’t sure if I wanted to tint a colour. *sigh* I knew I didn’t want to make yet another blue UI – so many games, so many blue interfaces! After playing around with it, I determined that I liked silver with pewter-ish highlights.

Moving on to the lights, I want lights for health, numbers keys, glide, and turbo. I also wanted to make two nice buttons for the left/right mouse abilities and I wanted them to look like they’d fit in great on a 1980s “hifi” radio.

I just finished breaking all the parts out into their individual files, all 48 of them, so that I can build the actual toolbar in Blender. The toolbar will be vary dynamic and will comprise the whole of the user interface when moving around. There are only two other UI elements, one being the inventory window ([TAB] any time) and the other being the travel and character customization window ([F] while at the center fountain on a map). Lots of programming of and arranging of parts to do! Until I have that all worked out, I made this place holder example you can look at,

Example of the Toolbar.

Example of the completed Toolbar.

Note that some of the elements aren’t lined up very well in the example, but they’re all worked out properly for the actual UI. I’m actually not quite ready to make the UI yet, but I wanted to hammer out the file structure of the game and creating the toolbar just sort of “happened” in the process. I’ve haven’t worked on the mouse button abilities yet, so I didn’t make the icons that will overlay their buttons on the toolbar, even for the above example.

If you’d like to checkout how I worked on the file with GIMP, you can download toolbar.xcf from my One Drive here.


Some handy notes about creation:

The glass effect was made by…
1. Filters > Render > Clouds > Plasma
2. Filters > Blur > Gaussian Blur 5
3. Select the top half
4. Colors > Brightness-Contrast: Increase brightness
5. Select the bottom half
6. Colors > Brightness-Contrast: Increase contrast, decrease brightness
7. Set layer alpha to nice see through level

Glow effects, the easy way…
1. Make something
2. Duplicate it into another layer and place it over top
3. Colors > Brightness-Contrast: Increase contrast, decrease brightness and make the duplicate black
4. Colors > Colorize > Pick a color/saturation that compliments the original object and a fairly high brightness
5. Filters > Blur > Gaussian Blur about 15 to 18
6. Set layer alpha to nice see through level

To make a nifty shadow/glow behind the original object, you can do the same thing as above, but put the layer behind the original. Sometimes it is good to scale the shadow up just a tad. Finally, you can use the same technique as the glow to add general lighting effects to the original object, by setting the alpha of the eraser to 20% or so and erasing parts of the black that you would like to be brighter. Then set the alpha for that layer to a nice spot and voila, you have an object that really “pops”!

The white shapes were made using the Shapes Path addon.