Creating GIF/PNG with Transparent Background

Issue: Creating button with transparent background for use in websites (figure no. 1)

figure no.1

To create buttons simply follow these steps:

1. Create a new 150 x 150 image with transparent color (Use File -> New menu or Ctrl+n).
2. Click the default gradient box (found on the right-hand bottom of the screen, figure no. 1A) and open the gradients window. Select the gradient named ButtonStyleBrown.grd (for the brown button) or ButtonStyleBlue.grd (for the blue button) from the list. Click OK.

   

   figure no. 1A

3. From the Tools toolbar choose the Shapes tool -
4. Press F2 or and the Shape Properties window will open. Follow these steps:
   Select the right-most button from the Shape Automatic Styles toolbar (figure no. 2).
   Select the Shape Tab (figure no. 2).
   Select Geometric Shapes from the Shape Library dropdown list (figure no. 2).
   Select the Rounded Rectangle shape on the preview window (figure no. 2).

   

   figure no. 2

5. Select the Colors & Style Tab.
6. Set the Outline Thickness control value to 10.
7. Left click near the upper left corner of the image. Hold down the left mouse button. Drag the mouse pointer near the bottom right corner of the image. This will draw the button surface (figure no.3). Release the button.

   

   figure no. 3

8. Use Crop Selection (Ctrl + U) in order to remove the margins.
9. Click Enter. The button will be placed (figure no. 4).

   

   figure no. 4

10. Adding The Button Icon (Arrow on this sample) - Click the Shapes tool - and follow these steps (use F2 or if the Shape Properties window is hidden):
    Select the Shape TAB (figure no. 5).
    Select the Arrows option from the Shape Library dropdown list (figure no. 5).
    Select the first arrow (figure no. 5).

    

    figure no. 5

11. Select the Colors & Style Tab.
12. Set the Outline Thickness control value to 1.
13. Use the mouse to draw an arrow on the center of the button surface (figure no. 6)

    

    figure no. 6

14. Click on the Effects -> Light -> Inner Shadow menu.
15. The Inner Shadow Effect dialog box will open. On this dialog box also leave the default values with out any changes. Just click ok to confirm.
16. Drag the arrow you've created to the center of the button. Click Enter and the arrow will be fixed.
    The button is now ready (Figure no. 7). If you need a smaller button use the resize function (Image -> Resize… menu/Ctrl+w) and resize the button to the desired size (Figure no. 8).

    

    figure no. 7

    

    figure no. 8

For use in website we advise saving the button as a PNG or as a GIF file (because these formats supports transparency).