Web graphics designers running GNU/Linux seem to use the Gimp, Inkscape or Photoshop in a virtual environment. I have found the feature rich Xara Xtreme to be a good alternative for web graphics creation and editing. It is open source and you can download it here. Following is a short tutorial on how to create web 2.0 buttons using Xara Xtreme.

1. Install the program

Download Xara Xtreme and follow the installations instruction. (Note: This tutorial was developed using Ubuntu Fiesty). I am currently living on the edge with the Latest unstable version.

2. Install ImageMagick

If you do not have this installed, use your package manager or download and install.

3. Create the Button

Click the rectangle tool and then draw a rectangle that will be the size of your button.

  

Click the curved corners buttons, then the Curvature attribute from the drop down menu. Use the text field next to the drop down menu to determine how rounded you would like the corners of your button to be. (Note: to see that sub-menu you need to have the rectangle tool selected)

Periodically save your progress by either selecting File->Save or Ctrl-s.

Select the rectangle and cut and paste it by Ctrl-c, then Ctrl-v.

Resize the second rectangle by first un-selecting the lock icon then setting the height to 46% and the width to 96%.

With the second rectangle selected, choose a light-grey from the color bar at the bottom. If you wanted to select a specific color, you would use the color selector tool all the way to the left of the color bar. Then, position as shown in the second image.

  

Select the smaller shape and then the fill tool. Move your pointer to the end of the arrow point and point it downwards. Do the same with the larger shape, except that you will grab the other end of the arrow and make the arrow longer to smooth out the gradient. (Note the settings at the top)

  

Select the smaller shape and apply transparency to taste, using the transparency tool.

Add your text using the text tool. You can right click the text and choose Convert to Editable Shapes if you want to apply some effects to the text.

To export the file for usage in your next cool Web 2.0 project:

1. Use the select tool to highlight your button
2. File->Export
3. Use the drop down menu to choose the format. Choose PNG or GIF if you want a transparent background.
4. Choose the options you wish, but on the Bitmap Size tab be sure to choose Area To Save->Selection (that will crop the image for you)

Enjoy your shiny new button! (you may consider getting it tattooed across your chest)

Here is the source: buttonxartar.gz (rename to have the ..tar.gz extension, Word Press does not like the .tar apparently)

Share This

This entry was posted on Thursday, August 2nd, 2007 at 7:20 pm and is filed under Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.