Graphics Tutorial for the GSTMenu and GSTAction Development Kits

Note: This tutorial applies to the GSTAction Development Kit and the GSTMenu Development Kit. If you are planning on using the GST Autoplay Easel you don't need to learn graphics.

With the GSTMenu and GSTAction Development Kits, your autorun application can be as creative and artistic as your imagination permits. By having the normal and highlight menu screen laid out in front of you, it is possible to visualize new ideas and experiment until you get just the effect you are looking for. Once you create a few graphics and highlight them in special ways, it can almost become addictive creating new effects.

Paint Shop Pro works well to build bitmaps. It is a shareware program available at www.jasc.com . In this tutorial I will be using Paint Shop Pro Version 3 exclusively. It is not the latest, but it is the one I bought. There are a number of other good graphic packages available also. If you are more familiar with one of them, most of these techniques will work in a similar fashion.

This first panel of this tutorial ends up looking rather gaudy because it has one of everything. The idea is to look at all the things you can do and pick one or two for your actual autorun panel.

Make sure you download the full Graphics Tutorial with example GSTMenu program. This is the only way you can see all of the effects created in this tutorial. The screen shots don't show everything.

For this tutorial we will start with a new 600 x 400 bitmap. This is an average size for an autorun image. Do a SaveAs to menu1.bmp and do a SaveAs to menu1h.bmp. We now have two blank canvasses to put our creation on.

Here is the general method of creating the autorun menu bitmaps. We have a normal menu bmp called menu1.bmp and a highlight bmp called menu1h.bmp. Now we locate a graphic object (like a button) that we want on the autorun menu and we open the file containing it, copy it to the clipboard and then paste it on the normal bitmap. Then we change its look or position slightly and place it on the highlight bitmap. When the GSTMenu program runs and the pointer goes over this area it changes the appearance because of this alteration on the highlight bitmap.

Graphic Editing Tips

1. Sometimes it is easier to paste an image on to another if you first enlarge the target image with the magnifying glass.
2. If you make a mistake, Paint Shop Pro and most other graphic editors allow you to back out the last change by hitting Ctrl-Z. So if it doesn't look right, hit Ctrl-Z and try again.
3. If you are going to use text highlighting, it is best to create all of the text on menu1.bmp first and then do a SaveAs to menu1h.bmp. This way all of your text coordinates will be the same and you can highlight over the top of the original text.
4. There is an abundant supply of graphics out on the net. If you search for "free graphics" you should find some. This is a good source for buttons, arrows, balls and other graphics objects. These are intended for use on Internet html pages but they work equally well with GSTMenu. Make sure to read the terms of use to avoid legal problems. In this example I will assume that you have some button, ball and arrow objects available that you have saved from the net to work with.

3D Text

Next we are going to create a 3D text item that changes from green going to purple to purple going to green. when the pointer passes over it. 3D text is available from many sources. There are some shareware programs dedicated to creating 3D text of various shapes. I used Corel Draw in this example because I happen to have it. The way you place the text on the GSTMenu bitmap should be the same no matter what the source is.

MENU1.BMP

Open up a green to purple 3D text file created in Corel Draw. It is not to hard to create 3D text in Corel Draw, to find out how click here

With the 3D text file selected, go to Edit and select Copy.

Close the 3D file.

Now select menu1.bmp and select Edit , Paste As New Selection. Now drag the selection rectangle to the bottom of menu1.bmp. On my computer the coordinates are 140, 270. Paste the image. Remember these coordinates.

MENU1H.BMP

Open up a purple to green 3D text file created in Corel Draw.

With the 3D text file selected, go to Edit and select Copy.

Close the 3D file.

Now select menu1h.bmp and select Edit , Paste As New Selection. Now drag the selection rectangle to the bottom of menu1.bmp to coordinates 140, 270. Paste the image. When the GSTMenu program runs this text will change color from green going to purple to purple going to green.

Now save both menu1.bmp and menu1h.bmp. That way you can always return to this version if you make a mistake later.

Animated Back Arrow

Next we will do an animated back arrow.

MENU1.BMP

Open the arrow file

With the arrow file selected, go to Edit and select Copy.

Close the arrow file.

Now select menu1.bmp and select Edit , Paste As New Selection. Now drag the selection rectangle to the bottom of menu1.bmp. On my computer the coordinates are 490, 315. Paste the image. Remember these coordinates.

MENU1H.BMP

Now select menu1h.bmp and select Edit , Paste As New Selection. Now drag the selection rectangle to the bottom of menu1.bmp to coordinates 487, 318. Paste the image. This will create an movement of 3 pixels to the left and down when the pointer goes over it. If you make a mistake and drop the object in the wrong spot, just close the menu bmp without saving and reopen it. It is important that you save after each step so back out is possible.

Now save both menu1.bmp and menu1h.bmp.

Button with Highlighting Text

Next we will do a button with highlighting text.

MENU1.BMP

Open the button file

Click on the foreground color and change it to the desired text color for the button. I am using black.

Select text in Paint Shop Pro and put the pointer over the button image and click. Now select your font, size and type in "Browse This CD-ROM".

Now position the text over the button and drop it.

Save the altered button file to a temp name.

With the button file selected, go to Edit and select Copy.

Now select menu1.bmp and select Edit , Paste As New Selection. Now drag the selection rectangle to the top of menu1.bmp. On my computer the coordinates are 380, 15. Paste the image. Remember these coordinates.

MENU1H.BMP

Click on the foreground color and change it to the desired highlight text color for the button. I am using red.

Select text in Paint Shop Pro and put the pointer over the button image and click. Now select your font, size and type in "Browse This CD-ROM".

Now position the text over the button and drop it.

With the button file selected, go to Edit and select Copy.

Now select menu1h.bmp and select Edit , Paste As New Selection. Now drag the selection rectangle to coordinates are 380, 15. Paste the image. This will cause the button to highlight to red.

Adding highlight to the back arrow

As an after thought I have decided I want the back arrow to display the word back when highlighted. This is quite easy.

MENU1H.BMP

Click on the foreground color and change it to the desired highlight text color for the arrow. I am using red.

Open menu1h.bmp

Select text in Paint Shop Pro and put the pointer over the arrow image and click. Now select your font, size and in "Back".

Now position the text over the arrow and drop it.

A General Pattern is Developing

I am sure you are seeing a pattern in how these various graphic objects are created. There are two images to be created. If we want the object to change without moving we paste both the normal and the highlight image on the same exact coordinates. If we want movement, we offset the coordinates on the highlight menu by 1 to 3 pixels.

Following are some more objects created on this sample using the above method.

1. Changing ball
2. Bullet
3. Various buttons

Text Highlighting.

Oval Text Highlight

MENU1.BMP

Select a dark brown color and drop the text "Oval Highlight" on the middle of menu1.bmp. On my computer the coordinates are 200, 100. Remember these coordinates.

MENU1H.BMP

Drop the text "Oval Highlight" on the middle of menu1h.bmp, 200, 100.

Next select the hollow oval, width of 1 and draw an oval around the words "Oval Highlight".

Now select a peach color and drop it inside the oval with the paint can. You may need to enlarge the image with the magnifying glass and drop the color inside of closed letters Like "O". This will give us a nice oval highlighting effect.

Cloud Text Highlight

MENU1.BMP

Select a dark blue color and drop the text "Cloud Highlight" on the middle of menu1.bmp. On my computer the coordinates are 200, 150. Remember these coordinates.

MENU1H.BMP

Drop the text "Cloud Highlight" on the middle of menu1h.bmp, 200, 150.

Next select the hollow rectangle, width of 1 and draw a rectangle around the words "Cloud Highlight".

Now select a light blue color and drop it inside the rectangle with the paint can.

This will give use a rectangle highlight in light blue. To make it look like a cloud, select white as the color, enlarge the image with the magnifying glass and use the spray painter to round and soften the sides and corners of the blue rectangle.

You can also play around with softening tool on the edges of the cloud or oval. This creates kind of a smudged look which can be very effective in highlighting and is an effect that is used frequently.

Underline Text Highlight

This is simple, just paste the same text in the same place on both menu1.bmp and menu1h.bmp and then draw a line under the text on menu1h.bmp in your choice of color.

Color the background

Now that we are all done we will now use the paint can to color the entire panel a light yellow. I used a light color because some of the buttons I used were designed for a white background. They still look good with a light color but they wouldn't look good with a dark color.

Creating Menu 2

Now that we have learned the techniques, we will create a second panel that has a finished look to it.

First we will build menu2.bmp and put all common objects on it so we can do a SaveAs to menu2h.bmp

This is what menu2 will look like when we are finished.

MENU2.BMP

We start with a new 600 x 400 bitmap. It is important that all the bitmaps are the same size for a coordinated look. Do a SaveAs of the blank panel to menu2.bmp.

Now we will open a photo.bmp and do an Edit, Copy and then paste it on to menu2.bmp using Edit , Paste As New Selection. Put it over to the left and up a bit.

Now using the same technique learned earlier, open a button file, copy it and paste the same button in 5 places.

Next we are going to put the following text on the buttons. Select a dark blue color and use the text tool. Just type it in and position it and drop it on the menu2.bmp.

Now use the paint can technique learned above to color the background.

Now we will do a SaveAs to menu2h.bmp and start our work on highlighting.

MENU2.BMP

We are going to do a subtle highlighting technique that you will see on the big name autorun programs.

First enlarge menu2h.bmp by clicking the magnifying glass right over the first button. Keep on clicking until the button fills the screen

Now select a light blue color and then select the hollow rectangle. Now draw a rectangle spaced exactly 3 pixels inside the outer edge of the button. This may take a little practice. If you make a mistake just close menu2h.bmp without saving.

Now repeat this with all the buttons.

We now have a finished two panel set of bitmaps ready to be integrated into the GSTMenu program. We will now copy these bitmaps to the sub-directory that will become the autorun sub-directory on the CD-ROM. Click on the GSTTutor.htm that comes with the GSTMenu Kit and it will explain how to mark the areas to be highlighted when the GSTMenu program runs.

You will find out how to mark up the selection areas in GSTTutor.htm but in general it works like this. Open the first bitmap by selecting Open Menu1h.bmp and mark your first area. An area is marked by clicking the left upper corner of the rectangle you want to mark with the left mouse button, then dragging the rectangle to cover the area and releasing the left mouse button. The Configure Highlight Actions dialog appears. You can either type in an executable name, a file with an extension that the system knows how to handle or select a menu number to go to when this area is clicked in the GSTMenu program. By marking a selection area you are telling the GSTMenu program to show that area of the highlight bitmap when the mouse pointer goes over that area and to invoke an action if the left mouse button is pressed.

Congratulations you are a graphics specialist now.

To get access to the full GSTMenu Development Kit if you don't already have it go to the download page at the bottom of this page.

To look at the tutorial of how to use this Markup Wizard to configure the GSTMenu Development Kit click here

To find out about new and related products, go to the GS Technologies Home page click here

To go to the GS Technologies Download page click here

Send mail to support@autorun-autoplay-tools.com with questions about autorun or any products on this web site - - but first check the (FAQ)Frequently Asked Questions page. Your question might be answered there.

GSTMenu Development kit, GSTAction Development Kit, GST Autoplay Easel, GST AutoFlash, GST AutoFlash Builder, GST AcroPDF Launch, GST Power Launch, GST DigiCardCD Builder,  GST Autoplay Pilot, GST MacEasel Menu, GST Mac Autoplay Pilot, GST Mac Power Launch and GST Mac AcroPDF Launch  Copyright © 2002 GS Technology Works LLC dba GS Technologies
Last modified: August 27, 2008