A loose style block

Welcome to the exciting new Pixel Art Edition of this program!

Information for Button Crafting:

Note: Audio files can be dragged directly onto the buttons. Then the button will play it. This is the easiest way to do it, without needing to write any extra code.

Choosing the scale factor is important especially if you want to do Pixel Art. Scales of 1, 2, 3, and 4 are designed to be used for Pixel Art. They will be automatically UPSCALED later on.

If it seems too complicated, don't worry, I've got you covered. Just use the easy button templates in the side-menu from tab III. Those ones are ready for you to draw immediately. When you want to try a more advanced method, then try giving this a second look.

Use h* (at the left) to save a Full-Sized Blank Template at the chosen scale. That way you can have a good starting point, with the exact size of drawing that you will need.


To Trace A Custom Image:

(For a little more information, have a look down at the bottom, where I explain why this is a good way of working.)

  1. Drag the image file to the main screen while holding ALT.
  2. Select the scale: The visual scale now matches the upscaling exactly.
  3. Now Use HDUB MANUAL ENTRY: Enter the syntax to fit the image.
  4. Use *sheet to save the TRACED-TEMPLATE.
  5. Manually copy the original image into the TRACED-TEMPLATE.
  6. Drag that back onto the screen and then click 6btn 4btn or 2btn. (You are choosing the number of button states, 4btn and 2btn are preferred)
  7. THE SAVED IMAGE IS THEN READY FOR THE FINAL TOUCHES IN YOUR GRAPHICAL ART PROGRAM.
  8. The next time you drag it into the program, buttons appear. The template file is UNIVERSAL. It can be re-used or re-drawn.

More information: All buttons are different but, most of the time the process for making the buttons is very similar. That's why there is a special process given here. After drawing buttons a few times with the easy templates, you will probably realize that the process is the same almost every time.

The first job that you need to do is drawing one picture of the buttons. That picture gets used again for the other states of the button. The focus, hover, and active states of the button normally only need minor changes from the original image. So, that first image gets used again and again. We can move small things around, or change the colours. That's all we need to do to make good looking buttons.

That's why I would encourage you to try your best, and give it another try. That way you can draw your image first, and then trace it carefully to choose where the actual buttons will go. Who knows, you might even decide that it actually might have been the easiest way all along. It's as easy as just drawing the first picture.

Other Key Points

Once you have made up some of your own custom buttons, you can use them anywhere in your website. Setting them up to play sound effects or other audio is as easy as dragging the audio file on top of your button. You just drag the audio file directly from the file system on top of the button.

Also, keep in mind that you can move the buttons around and they can overlap. You can have a smaller button on top of a larger one. And, of course, you can have a background image with buttons on top of it. So, sometimes, what part of the graphics should be on the actual button is a lot less than you might think.

Return to the Menu