A Toolbar You Can Call Your Own

Anthony Sanfilippo
By Anthony Sanfilippo | May 9, 2012
Application Engineer

Using custom images in toolbar buttons is a great way to make ProFicient feel more personalized and intuitive. The graphics included with the software are relatively universal so you may end up using one of the generic colored circles simply because you could not find an included image that accurately portrayed the button's action. Luckily, it is very simple to create and use your own graphics.

Formatting Graphics

Microsoft Paint can be used to make toolbar graphics, but they may come out slightly skewed because the aspect ratio of the picture should be exactly square. More specifically, the images need to be 128 pixels wide and 128 pixels high, 64 x 64 pixels, 32 x 32 pixels, or 16 x 16 pixels. The easiest way to format the picture is to crop the original image to a square shape and then resize it. Cropping can be difficult in Microsoft Paint so I've found that Adobe Photoshop (if you have the skills and software) or some free-to-use photo-editing websites, such as www.pixenate.com, are both great ways to crop a perfectly square image. After the image has been cropped to a square, resize it to 128 x 128 pixels and save the image as a copy. It is a good idea to save the image with the pixel size in the file name, such as "soda128.jpg" for 128 pixels because you need to resize the image again to 64, 32, and 16 pixel sizes, Saving each image with the pixels in the name avoids confusion later on. In the event that you decide to increase or decrease the button size, you will have an image for every size available. Your new images are now ready to be used on the toolbar buttons. Keep in mind, custom graphics must be placed in the shared network drive, in the TOOLBAR folder.

Placement of Buttons

It's easier for users if common buttons are located in the same position on the toolbar in every project. Typically, in a project out on the floor, the "Add" or "Begin" button is always in the first position. The "Exit" or "Back" button is usually the last one in the row of buttons; however, if you only use two or three buttons in one project and six or seven in another, your "Back" button may be jumping to different slots from project to project.  

An example of how your common buttons may move around

Also, it is good practice to find the longest toolbar out of your site's projects and put your "Back" button at the rightmost spot. Don't forget to accommodate for any Workstation-specific toolbar buttons! 

Although the toolbar buttons are a fixed size, the toolbar itself is dynamic in size. It will try to fit everything on one row, but on some smaller computer screens, you may see two rows of buttons if you have many options.

Setting up toolbar buttons properly will help develop a standardized layout across all projects at your site. It can greatly help with efficiency, training new users, and adding a familiar connection from ProFicient to your actual process.

InfinityQS Fact Checking Standards

InfinityQS is committed to delivering content that adheres to the highest editorial standards for objective analysis, accuracy, and sourcing.

  • We have a zero-tolerance policy regarding any level of plagiarism or malicious intent from our writers and contributors.
  • All referenced articles, research, and studies must be from reputable publications, relevant organizations, or government agencies.
  • Where possible, studies, quotes, and statistics used in a blog article contain a reference to the original source. The article must also clearly indicate why any statistics presented are relevant.
  • We confirm the accuracy of all original insights, whether our opinion, a source’s comment, or a third-party source so as not to perpetuate myth or false statements.



Never miss a post. Sign up to receive a weekly roundup of the latest Quality Check blogs.