Photo Pos Pro free photo editor online help - Tutorial no.8A - Creating a Button (using GIF / PNG with transparent background)

Photo Pos Pro free photo editor - Online Help

Custom Search

User's Guide

Step By Step Tutorials | How to... (Quick guide for common tasks) | Support & Info Page

Tutorial - Creating a Button (using 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:

Create a new 150 x 150 image with transparent color (Use File -> New menu or Ctrl+n).
From the Tools toolbar choose the Shapes tool -
Press F2 or and the Shape Properties window will open.
For Standard Button follow these steps:
1. Select the "Button" style button from the Shape Automatic Styles toolbar (figure no. 2-a).
2. Select the Shape Tab (figure no. 2-b).
3. Select Geometric Shapes from the Shape Library dropdown list (figure no. 2-c).
4. Select the Rounded Rectangle shape on the preview window (figure no. 2-d).
  
  figure no. 2
5. Select the Colors & Style Tab.
6. Set the Outline Thickness control value to 10.
7. Select the colors [Red: 213, Green: 235, Blue: 255] and [Red: 0, Green: 63, Blue: 199] for blue button (figure no. 2-A) or [Red: 241, Green: 238, Blue: 221] and [Red: 152, Green: 135, Blue: 65] for brown button.
  
  figure no. 2-A
For Advanced Button follow these steps:
1. Select the Shape Tab (figure no. 2-b, ignore 2-a for advanced button).
2. Select Geometric Shapes from the Shape Library dropdown list (figure no. 2-c).
3. Select the Rounded Rectangle shape on the preview window (figure no. 2-d).
4. Select the "Colors & Style" Tab.
5. In the "Select the Colors & Style" Tab fill in the data as shown in figure no.2-B
  
  figure no. 2-B
6. To set the outline style click on the Outline Style "Select..." button to open the Style Picker dialog box. Using the Style Picker dialog box you can create your own desire style or load the predefined style we used for this sample (To load the predefined style we used on this sample click on the "Load Style�" button and select the style named "ButtonBrown_Outline1.pstl" founds under "c:\program files\Photo Pos Pro photo editor\Styles\Tutorials" by Default).
7. To set the fill style click on the Fill Style "Select..." button and set the desired style.. To load the predefined style we used on this sample click on the "Load Style�" button and select the style named "ButtonBrown_Fill1.pstl" founds under "c:\program files\Photo Pos Pro photo editor\Styles\Tutorials" by Default.
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
Use Crop Selection (Ctrl + U) in order to remove the margins.
Click Enter. The button will be placed (figure no. 4).

figure no. 4
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):
1. Select the Shape TAB (figure no. 5).
2. Select the Arrows option from the Shape Library dropdown list (figure no. 5).
3. Select the first arrow (figure no. 5).
  
  figure no. 5
4. Select the Colors & Style Tab.
5. Set the Outline Thickness control value to 1.
Use the mouse to draw an arrow on the center of the button surface (figure no. 6)

figure no. 6
Click on the Effects -> Light -> Inner Shadow menu.
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.
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 a copy of the button (using File -> Save As... menu) as a PNG or as a GIF file (because these formats supports transparency).
The final button project sample can be found under "c:\program files\Photo Pos Pro photo editor\Templates\Tutorials\ButtonBrown1.fpos" by Default).