Create Custom Buttons in 3ds max having Custom icons and MaxScript

Hi, in this tutorial I am going to show you how to create your own custom buttons having custom icon group and MaxScript.
In 3ds max, we have number of buttons on the Main Toolbar. Many 3ds max users asked me if they can make a custom button having a custom image icon with custom MaxScript code working behind that button. Yes, we can.

This tutorial will show you how to create icon groups for your buttons in Adobe Photoshop, writing a short and simple script to put our button to work and lastly how to create a separate toolbar for your button with few tips about buttons and toolbars. So, let’s get started.

Introduction

If you right click on one of the buttons, you will get a pop-up menu having some options like:

Edit Button Appearance…

This option allows you to change the tooltip and the icon of your buttons. You can either use Image Buttons (buttons having image icons) or Text Buttons (buttons having text label).

Delete Button

This option allows you to delete buttons from the Main Toolbar.

Edit Macro Script.

This option lets you edit the max script working behind the button. I highly recommend not to modify the max script of the default buttons.

Customize…

This option will open the Customize User Interface dialog.

3DS Max button views

3ds max uses Large Toolbar Buttons when “Use Large Toolbar Buttons” option under Preferences is turned on and we turn off that option, it starts using small toolbar buttons, so we have to create two versions of our icon; one for the Large Toolbar Buttons view and one for Small Toolbar Buttons view.

Recommended dimensions for large toolbar button’s icon is 24×24 pixels.

Recommended dimensions for small toolbar button’s icon is 16×15 pixels.

Each icon should be used with it’s respective alpha or mask image (Why to use mask images?)

Step1

You can either create a single icon or an icon group for your button. Creating a single icon is common and quite easy so I am creating an icon group having letters M A K E I T C G.

So, let’s first create buttons for Large Toolbar Button view. As we know that in Large Toolbar Button view, an icon should have the dimensions of 24×24 pixels. We have 8 letters in MAKEITCG and each letter will work as an icon, so the height of our icon group will be 24 pixels but the height of icon group will be 24 * 8 (as we have eight letters in our icon group) = 192 pixels.

Now, start with the document having dimensions 24×192 pixels and arrange the letters in the document. Make sure that the area covered by each letter is not more than 24×24 pixels. You can create guides for this.

Step2

Now let’s create mask or alpha image for our icon group. Select the outer portion of the icon with the help of Magic Wand Tool (Y) then make a new layer, name it Mask and fill it with black color then Inverse the selection by pressing Ctrl + Shift + I on your keyboard and fill it with white color. Now save you icon group as a Bitmap image (*.BMP).

Name your icon like this:

[Icon’s Name] + _24i.bmp
[Icon’s Alpha Name] + _24a.bmp

So, my icon group name would be:

Makeitcg_24i.bmp

And the icon’s alpha image name would be:

Makeitcg_24a.bmp

Step 3

Now, it’s time to create icons for small toolbar buttons view so, go ahead and change the document dimensions to 16*8 x 15 = 128 x 15 pixels.

Name your icon like this:

[Icon’s Name] + _16i.bmp
[Icon’s Alpha Name] + _16a.bmp

So, my icon group name would be:

Makeitcg_16i.bmp

And the icon’s alpha image name would be:
Makeitcg_16a.bmp

Now, save all the images in directory …3ds maxuiIcons

Note: Do not use any other file format except bitmap (*.BMP)

Step 4: Preparing MaxScript for the button

Now, let’s write some simple script to put our button in action, so open up the MaxScript editor and write the script given below. It’s a short script to center pivot the selected object.

macroscript Centerpivot
category: "MakeitCG_CP_Script"
tooltip: "center pivot"
icon: #("Makeitcg",1)
(
	rollout script "CenterPivot"
		(
			button b_1 "Center Pivot"
			on b_1 pressed do
			(
				If $ == undefined then
				(
					Messagebox "Nothing is selected !!"
				)
				else
					centerpivot $
			)
		)
	createdialog script
)

Evaluate the script once by pressing Ctrl + E on your keyboard and save you script in directory 3dsmaxuimacroscripts.

Step 5

Let’s create a separate toolbar for our new button. It’s just to show how to create a new toolbar for buttons. It’s optional to create a new toolbar and you can also use main toolbar to place your custom buttons.

To create a new toolbar, go to Customize > Customize User Interface… it will bring up the Customize User Interface dialog. Under Toolbar tab, click on New…, this will pop up a New Toolbar dialog asking for the name, give it a name and click OK. Now, a brand new toolbar for your custom buttons is ready.

Step 6

Now, It’s time to place our button to our newly made toolbar, so, go to Customize > Customize User Interface… again to bring up the Customize User Interface dialog. Under Customize User Interface dialog, go to Toolbars tab and under Category dropdown, search for the category MakeitCG_CP_Script and drag the button over new toolbar. Now you have your custom button ready to use.

Why to use Alpha or Mask images?

Alpha or Mask image is used to get rid of the background of the icon. We have to save our icon only in bitmap (*.bmp) format and bitmap format doesn’t support transparent backgrounds; it takes white instead so in order get rid of white background we use alpha or mask image with the icon. Notice that our mask image only has black and white color information and if we use an icon with it’s respective alpha/mask image then the pixels under black become transparent and the pixels under white remain opaque and that’s how we can avoid white background in our toolbar buttons.

Buttons and Toolbar: TIPS

To create a copy of a button press, ctrl and drag the button that you want to copy. It will create a copy of the button. You can also copy buttons from one toolbar to another using the same trick. It will work only if option Lock UI Layout (ALT + 0) under Customize menu is turned off.
To delete a button, press ALT and drag the button you want to delete. It will work only if option Lock UI Layout (ALT + 0) under Customize menu is turned off.
To dock your toolbar, just right click on it then Dock and choose the desire dock type (Top, Bottom, Left or Right).
If you want to delete your toolbar, just go to Customize > Customize User Interface… Now under Toolbars tab, just select the toolbar that you want to delete and click on Delete… button.

I hope you find this tutorial helpful. Using the same method, you can also place other categories from Customize User Interface dialog directly on to your toolbar. Thanks.

Detailed tutorial to create custom buttons in 3ds max having custom icons and MaxScript.