Friday, September 22, 2006

How To Create Custom Buttons With Word

Since I am currently working on a new site and have been creating menu buttons I'd like share the method I'm using.

Originally I was going to include several screen shots to make it easier to understand but since all those picture would make this page take forever to load I decided not to. Instead, I am going to list the steps and tell you where you can download the free PDF file I've created that includes both the steps and the images.

Oh, I should also mention that while the instructions are written for MS Word they can be easily adapted to MS FrontPage.

For those that use another word processor or html editor, you may be able to adapt these steps to the 1 you're using. In case your word processor doesn't provide drawing tools or you don't have a word processor, you can get a free 1 called OpenOffice at:

http://www.openoffice.org/index.html. Open Office works slightly different but does provide drawing tools so you can use it to create the buttons.

To find the Drawing tools available in Word and OpenOffice you can go to the 'View' menu item. Highlight 'Toolbars' and select 'Drawing'.

Below are the 38 steps to creating custom buttons. Don't be intimidated by the number of steps because they're all easy and once you've done them a couple of times they become almost automatic. And like I said, there's a PDF file , CustomButtons, showing pictures of how to do these steps. The PDF file has these 38 steps grouped into a more manageable 13 steps and also includes a couple of hints I've learned as I've used this method.

38 Steps To Create Custom Buttons Using MS Word

1) Open a new document in Word

2) Select ‘Autoshapes’ located at the bottom

3) Select ‘Basic Shapes’ from the menu

4) Select the rounded brackets and click the left mouse button


5) Create a rounded bracket shape in the ‘Draw Box’

6) Select Fill Color located at the bottom.

7) Select ‘Fill Effects’ from the menu.

8) Select the Gradient Tab.

9) To get blended colors select ‘Two Colors’ or ‘Preset’.

10) Pick the colors you want and click ‘OK’.


11) Select ‘Line Color’ located at the bottom.

12) From the menu select ‘No Line’.

13) Open a ‘Text Box’.

14) Type the text you want i.e. Home, Main, etc.

15) Highlight the text and select the font size, color and bold you want.


16) Using the ‘Fill Color’ and ‘Fill Effects’ buttons at the bottom, select ‘No Fill’ and ‘No Line Color’ for the text box.


17) Drag the text box and place it over the rounded bracket image.

18) You may have to resize you image if it’s too large or too small for your text.


19) To keep the rounded corner effect of you picture you need to set the image on a background that is the same color as the background where the button will be placed on your web site.

20) Select ‘Format’ located at the top.

21) Select ‘Background’ from the menu.

22) Select your background color.


23) Select ‘Print Preview’. You can use either a button or the menu item found under ‘File’.


24) Open Irfanview.

25) Turn on ‘Screen Capture’.

26) Have the ‘Print Preview’ of your Word document on your monitor screen.

27) Do a screen capture (Cntrl + F11).

28) An Irfanview window will popup where you draw a box around your button image.

29) Select ‘Crop’ from the ‘Edit’ menu located at the top.


30) Select ‘Image’ from the top menu items.

31) Select ‘Resize/Resample to set the size of your button.


32) Select ‘File’ from the top menu items.

33) Select ‘Save as’.


34) Go to the folder you want to save the image.

35) Type in a file name.

36) Save as either a GIF or JPG file type. (I use GIF).


37) Open your html editor and ‘Insert’ the button image you created where you want it.

38) You can then give this image a hyperlink to the web page you want your visitors to be sent when they click it.

To Your Success,
Susan

PS The PFD file CustomButtons is free and you may share it with others if you want. It is contained in a zip file so you'll need an unzip utility plus a Acrobat Reader.

PSS Last week I told you where to get the free graphics editor Irfanview and if you didn't get it but want it, the link is inside the free PDF file.

Susan