Turning Photos into Website "Buttons"

Ever wonder how some people create the buttons on their sites that have a photo or graphic in them?

Truth is, they're not buttons at all!  They are photos or graphics that have text overlayed on them or positioned below them, as well as a link that turns them into 'button'-like entities.

Want to make your own?  Here's how:

1. Choose a photo or graphic that you want to use.

For my example, I'll use a photo of some trees that I took last Fall.

2. Using the photo editor of your choice, create a border around the image to give it dimension and create the 'button' feel.

I've recently been introduced to GIMP, which is available as a free download online.  It is similar to Adobe Photoshop, which I love, but it does have a cost associated with it.

To create the border in GIMP, select the 'paintbrush' from the Toolbox.   

Now, click on the top left of the image while holding down the 'Shift' key.  Keep 'Shift' held down and click on the top right corner of the image, then the bottom right, then bottom left, then back to top left.  GIMP will create a border around the image.  Release the 'Shift' key.

3. If you photo has a lot of colour in it, as mine does, change the photo's intensity, so that the text will show up a little better.

Select "Brightness-Contrast" from the "Colors" menu along the top.  Now slide the "Brightness" marker to the right until you get the intensity you prefer.

4. Add text overlaying the image, or position text below the image, to create the 'link text'.

Select the big "A" from the Toolbox.  You can then choose your font, size, and colour of the text.  Then, click on your photo where you want the text to be placed.  Enter in the text you wish to add to your image.

Adjustments to font, colour, and size can be made by clicking on the text again once the text has been placed on your photo.  You will see a yellow and black striped box around your text when in edit mode.

Once you are happy with how the text looks, save the image onto your computer.
 

5. Add the image to your Point2 Agent website via a Custom Content module.

Access the Custom Content via 'Edit' mode while signed into your Online Office.  Opt for no title and no horizontal header line.  While in the content editor, insert the image that will be your 'button'.  Adjust the size of the image, which you can visually do in the 'Image Properties'.

 

6. Select the image and add a link to the page of your website that you want your new "button" to direct visitors.  

 7. View the 'button' on your website and revel in a job well done!

- Tanya Spilchak, Education Coordinator