How to Make Simple Button Images
- 1). Download GIMP. GIMP, or GNU Image Manipulation Program, is free application that works on Macintosh, Linux and Windows platforms.
- 2). Create a blank page. Under "File," click "Create New Image." A dialog box opens. Specify 200 pixels wide and 100 high at 72 dots per inch. The color space should be RGB color for use on a computer monitor. Under "Fill With," select the drop-down for "Transparency."
- 3). Select the "Rectangle" tool and drag the cursor to form a rectangular box. It will cover most of the space you made in the previous step but leave space on each side.
- 4). Select the "Rounded Corners" tool and put in a value of 15. Change the value up or down until you get the image you like. You can also use the circle tool or make a square.
- 5). Fill the image with a color. Click on the color pallet and pick a bright color. Select the "Paint Bucket" tool and click on the box to fill it with the selected color.
- 6). Make another layer. Copy the image you just made by picking "Duplicate Layer." Keep the duplicate selected and select the "Gradient Fill" tool. Make black the foreground color in the dialog box and select the "Transparent to Foreground" gradient and drag the mouse from top to bottom until you like the results. Make the opacity 60 percent so the original background image shows through.
- 7). Draw another box. Select the "Rectangle" tool and drag to create a new box to cover the top two-thirds of the original box. Choose the "Gradient" tool and change the foreground color to white and drag the cursor. Change opacity to 35 percent.
- 8). Enhance the three dimensional (3D) look. To get a more pronounced 3D image, draw another gradient tool with black as the foreground color on top of the previous image and change the opacity until you like the look.
- 9). Add text. Select the "Text" tool and type the text you want. Use white, yellow, black or any color that will show up well against the button. Add a drop shadow to enhance the text further.
- 10
Save the file. Select "Graphics Interchange Format (GIF)" from the "Save As" dialog box. GIF files are small and optimized for use on websites. - 1). Open Vista Buttons. The program contains templates with pre-made buttons and dozens of themes to choose from for customizing. Unlike the other programs outlined, this program only needs text added to the buttons and they are ready to use on the Internet. It is compatible with Macintosh, Windows and Linux operating systems.
- 2). Click on the blank page icon on the far left of the toolbar to create a new project.
- 3). Select "+ Add Menu Items." Select the theme and colors desired from the right-hand menu.
- 4). Select the button created in the last step to modify it for your needs. Add the text you want on the button. Under text, click in the "Link" box and type in the Web page address where the button will be used.
- 5). Select "Save html (Hypertext Markup Language)" and name the file. The button is now loaded to the path identified in the last step.
- 1). Open Adobe Photoshop Elements. This program is a simplified version of Adobe Photoshop. It has all the same basic components but for a fraction of the price of the full version.
- 2). Select "File," "New," then "Blank File." Specify the dimensions 200 pixels by 100 pixels at 72 DPI and set the background as transparent. Click "OK."
Pick a bright color from the color pallet. - 3). Draw the button using the "Rectangle" or "Circle" tool from the toolbar. This object is placed on a new layer. Use the "Gradient" tool on the layer panel to give the button depth. Select "Blending Options" from the menu in the layers panel and then select "Gradient."
- 4). Use the handles on the Gradient Bar to pick a color by clicking on them. Changes are real-time, so you can see what the final button will look like.
- 5). Add text using the "Text" tool. A type pallet will open. Select the font, size and color. Type in the text box on top of the button. Save the file as a GIF.
