Home | Work & Business | Websites & Web Pages | Make Web Pages | How to Make Your Own Button Link for a Web Page

How to Make Your Own Button Link for a Web Page

by Catherine Johnson

  • Overview

    With the wide availability of powerful graphics programs like Adobe Photoshop and versatile HTML editors like Adobe Dreamweaver, almost anyone can easily create her own unique web page. Although web design can seem intimidating at first, you can easily start to create your own custom designs and gradually adapt to all of the tools and options available in these programs. One task you can perform is making your own button link for a web page.
    How to Make Your Own Button Link for a Web Page
    How to Make Your Own Button Link for a Web Page
 

  • Step 1

    Open Adobe Photoshop. Go to "File" in the main navigational menu and click "New.". In the options box that pops up, enter a title for your file, then enter a width of 200 pixels, a height of 80 pixels and a resolution of 75 pixels per inch (standard for web images). Select "Transparent" in the "Background Contents" drop-down menu. Click "OK."

  • Step 2

    Go to the Tools palette. Select the "Shape" tool and choose "Rounded Rectangle Tool." Go to the "Tool" options menu bar at the top of Photoshop. Click the "Colors" box and select the color of your button.

  • Step 3

    Click and drag your mouse across the document to create your rounded rectangle. If you need to adjust the size of your rectangle after you let go of your mouse, click Ctrl+T (or Cmd+T on Macs) to freely transform your rectangle size. Once you have adjusted the size, click "Enter" to exit free transform mode. Select the "Move" tool in the tool palette to move your rectangle so it is centered on the document.

  • Step 4

    Go to the "Layers" panel. Make sure your rounded rectangle shape layer (Shape 1) is selected. Go to the "FX" button at the bottom of the "Layers" panel and choose "Blending Options." Click "Drop Shadow" and "Bevel and Emboss." Click "OK."

  • Step 5

    Go to "Layer" in the top navigational menu. Choose "New," then select "Layer". Go to the "Tools" palette and select the "Text" tool. Click and drag your mouse over the area on the rectangle where you want to place your button text.

  • Step 6

    Go to the "Text" options menu bar at the top of Photoshop. Select the font style, size and color you want to use for your text. Enter your text into the text box you created. Select the "Move" tool in the "Tools" palette to move your text around on the button.

  • Step 7

    Go to "File" and select "Save for web." Photoshop will optimize your image for the web. Select the format in which you want to save your button (jpeg, png or gif). Click "Save" to save the exported image file to a location on your computer.

  • Step 8

    Open your web page in Adobe Dreamweaver. Go to "Insert" and select "Image." Locate your exported button-image file on your computer and click "OK." While the image is selected, go to the "Properties" panel and in the "Link" field, enter the URL you want to link to your button.
  • 2
  • Adobe Photoshop Adobe Dreamweaver
  • Adobe Photoshop
  • Adobe Dreamweaver
  • Make sure your button text is readable. Choose a font color that highly contrasts with the color you used for your button.
  • Make sure your button text is readable. Choose a font color that highly contrasts with the color you used for your button.

References & Resources

     
     
 
 

Popular Topics