Gimp Tutorial: Creating a Brushed-Metal Button

The following tutorial shows you how to create a push button with brushed-metal effect that can be used in both web-page and application interface design.

The button.


1) Start the Gimp and open a new document with 377 x 233 pixels dimensions. Fill the background with medium gray.

2) Add a new layer and click the rectangle selection tool; in the tool options menu tick the Rounded corners check-box and set the Radius about 20; then create a selection and fill with white. Look at the image for reference. (If you work with an older version of the Gimp look at my previous tutorial about creating rounded rectangles)


3) Because you need this selection for later use, it is a good idea to save the selection into a channel. To do this go to Select>Save to Channel. Name it Base.

4) Back to the layer palette, duplicate the base layer and load its selection; then go to Select>Shrink; shrink the selection about 5 pixels. Invert the selection and clear; invert again and fill it with white; now, you should have a selection like the one in the following image.


5) Save the selection in a channel as you did with the base selection and name it Top; then Select>None. Now, your channel palette should look like the one in the image below.


6) Make the top layer active and go to Filter>Blur>Gaussian Blur, blur the top layer about 5 pixels. Then go to Filters>Distorts>Emboss and emboss the top of the button using the following settings.


7) Now, click on the channel icon and load the top selection (right-click on the top channel and select the Channel to Selection option from the list), invert and clear. This trims the embossed button.

8) Make the base layer active and repeat steps 6 and 7, except use the following settings when embossing.


9) Now, you should have an image like the one below.


10) Create a new layer, load the top selection and fill the selection with noise.


While still selected go to Filter>Blur>Motion Blur, in the Blur Parameters option set the Length to 5 and the Angle to 0, then click OK. Deselect and from the Layers Mode menu choose Overlay.

11) Finally, create a new layer and add some white text, blur it slightly (1-2 pixels) and emboss it just like you did with the base and the top button components.


The final image.

Gimp Tutorial: Creating a Push Button

Push buttons are widely used both web and interface designers. You can see all kinds of push buttons on the web varying in design and shape. In the following tutorial we are going to create one particular kind of push button that is attractive and easy to make even in the Gimp.

This is what you are going to create:

1) Start the Gimp and create a new document with white background. Add a new layer and make a circle by using the ellipse tool. Fill the circle with a light Gray linear gradient. For reference look at the image below.


2) Duplicate the current layer, load its selection and go to Select>Shrink, in the dialogue box enter 10. The actual value depends on the size of the button you are creating. Just remember, maintain good proportions when you are designing your button. Invert the selection and clear. Invert again and now, you should have a selection like the one in the following image. Fill the selection with blue (or any color you like). Then select none.


3) Duplicate the current layer and fill it with white. Go to Filters>Blur>Gaussian Blur and set the Blur Radius somewhere between 10 and 20 depending on the size of your design. Now, activate the blue layer and go to Filters>Map>Bump Map and in the Bump Map drop down list select the white layer you blurred in the previous step. Then play around with the dialogue settings and try to create an effect similar to the one below. When you are done hit OK. If you are satisfied with the result you can delete the white layer.


4) Duplicate the Mapped layer, load its selection and go to Select>Shrink and in the dialogue box enter about 5. Invert selection and clear. Invert again and fill the selection with blue linear gradient, look at the image below for reference.


5) Then blur the gradient somewhere between 3 to 5 pixels. This blends nicely the middle part of the button with the shiny edges.


6) Create a new layer underneath the blue one, load the blue layer selection and go to Select>Grow, in the dialogue box enter 2. Fill the selection with the same light Gray gradient like the base, except inverse the direction of the gradient. Look at the image. This will create a thin edge around the button.


7) And finally, create a new layer just beneath the base layer, load the selection of the base and go to Select>Grow, enter 2 in the dialogue box. Fill the selection with light Gray. For reference look at the image. This will create an edge around the base of the button. Then add text and drop shadow like I did.


The final image.

Gimp Tutorial: Creating a Tab Element

Tabs are button objects and are used both in web and interface design. The steps creating a tab is not unlike creating any other button. I wrote this tutorial because most instructions available on the web has been written for Photoshop users and expected to be familiar with the layer effects tools; but the Gimp lacks these tools. In the following tutorial we will create a tab button in the Gimp way that takes only four simple steps.
The result:


1) Create a new document with a white background. Add a new layer to the stack and create a basic tab shape as shown in the next two images.

a) In the Gimp Preferences dialogue set the Default Grid Width and Height to 10 pixels; turn on the Show grid and Snap to grid options in the View menu and construct a tab shape like shown in the images. Fill the shape with a color of your preference, mine is blue.




2) Now, duplicate the basic shape layer and fill it with a lighter tone; go to Filters>Blur>Gaussian Blur and blur the duplicate layer about 5 pixels. Next, load the selection of the basic tab shape, activate the blurred layer, inverse the selection and clear it. This will trim the overlapping pixels spreading outside the tab shape. Notice the slightly darker edge around the tab.



3) Next, create a new layer and load the selection of the basic tab shape, shrink the selection about 2 pixels and activate the new layer. Make the foreground color white and in the gradient selector choose the foreground to transparent option. Create a gradient like the one in the image, then choose the overlay mode option.



4) Finally, add white text and drop-shadow to the graphic. As a last step add a new layer beneath the text layer and create an elliptical selection that has the same width as the text, for reference look at the image below. Fill with white, blur it about 10 pixels and from the layer mode option choose overlay.



The final image.

Gimp Tutorial: Creating a Navigation Button

Navigation buttons are essential features of both web pages and application interfaces. In the following tutorial, we create an attractive navigation button in a few simple steps that can be followed even with limited Gimp knowledge.

The button you are going to create looks like this:


1) First, let's create a basic button shape with rounded corners. The Gimp sucks when it comes to creating rounded rectangles. The following two examples explain one way of creating them.

a) Open the Gimp and go to Preferences>Default Grid and set the Grid Spacing Width and Height to 10 pixels. Restart the Gimp.

b) Create a new document with a white background. Add a new layer. Go to View and check the Show Grid and Snap to Grid options.

c) Using the Ellipse selection tool create four small circles like in the image below. Then with the Rectangle Select tool create a selection; look at the image. Fill the selections with medium gray.


d) And finally create another selection like the one below and fill it with the same gray. And here you have the rounded rectangle.


2) Now, that we have the basic button shape we duplicate the button shape layer two more times; name the layers as in the following image.


3) Fill the white layer with white, load its selection, go to Select>Shrink and shrink the selection about 2 pixels; inverse the selection and delete it. Do the same with the grad layer but here shrink the selection about 3 pixels. Then create a gradient similar to the subsequent image.


4) Next, we create an arrow, which for the sake of simplicity, will be a triangle; but if you want to create a more sophisticated shape go ahead and do it; here the arrow signifies action. Add a new layer to the stack and if they are not on, turn on the Show Grid and the Snap to Grid options; activate the pen tool by clicking on its icon in the toolbox and click on the grid points to create a triangle shape similar to the one on the image below. When you do the last click hold down the Ctrl key to close the path. When it is done, go to the Path dialog and at the bottom of the dialog box click on the Path to Selection button, this will make a selection out of the path. Fill the selection, this time with some color, mine is orange. If the triangle is too large scale it to fit over the button. After that, you can turn off the Grid and delete the path object.


5) Next, we create two vertical lines that sort of separating off the arrow from the rest of the button content. Add a new layer and with the Rectangle selection tool make a selection about 2 pixels wide. Fill the selection with medium gray; duplicate the layer and fill the duplicate with white; offset the white line about 2 pixels along the x-axis. Now you should have an image like the one below.


6) Finally, add white text to the button like I did; to enhance both the text and the arrow shape add drop shadow to them. That is all there is to it.

The final artwork.

Gimp Tutorial: Creating Glassy Buttons

Most Photoshop techniques make heavy use of "layer effects" when it comes to creating glassy buttons. I modified one of those techniques so that it could be applied to the Gimp environment that lacks this feature. The following tutorial shows you how to create a glassy button in 5 easy steps.
The result:



1) First, open a new document in the Gimp and create a basic button shape on a new layer. One way of creating a button shape is shown in the following image. When it is done fill it with medium gray.


2) Duplicate the button shape layer 2 times. Name the layers as shown below.


3) Create a selection similar to the one in the following picture; while still selected make the top layer as your active layer and clear the selection (Edit>Clear).


4) Next, fill the top and the bottom layers with gradient to look similar to the image below. If you want you can blur the top layer a bit (1 or 2 pixels) to make the gloss line smoother.


5) And lastly, load the selection of the base shape, go to Select>Shrink and shrink the selection about 2 pixels; invert the selection, activate the bottom and the top layers in subsequent steps and clear the selection. This creates an edge around the button.


And this basically completes the tutorial. If you want you can add text to the button as I did but this is not absolutely necessary.

Optimizing Xubuntu's user interface

Xubuntu targets slower older hardware with limited resources like my IBM Thinkpad with 1 Gig Intel processor 250 Mb memory, 30 Gig hard drive and 14 inch display size. Running Xubuntu on older hardware is a challenge in itself but in this article I focus exclusively on usability issues that might enhance older hardware functionality making xubuntu experience more enjoyable.

When we interact with a computer we essentially use the interface as our primary aid to carry out certain tasks; therefore, it is essential to have a user-friendly desktop that speeds up rather than slows down our work process.

The default look of Xubuntu is pretty good but it still leaves room for improvements. For me the two panels default set up wastes too much valuable screen estate. The two panels don't add more functionality to the work environment than the one panel setup, in fact, I found the second panel redundant from the usability point of view. Take a look at the screeshot below. This is the default look of Xubuntu (click to enlarge).



After much thinking and experimenting, I worked out a different conceptual model of the interface that I describe below. In this set up, I have only one panel on the left side of the screen. I set this up by deleting the bottom panel from the default setup and reposition the top one to the left side of the screen. But before, I disabled the Application label in the top panel. The label prevents the panel to re-size properly when it is positioned vertically.

However, from the usability point of view the default Application icon is a weak visual sign, it doesn't provide enough feedback by itself because it was designed to function, in accord with the menu label. To fix this I've created a new Application button that can be seen in the following image.


In the next step, I changed the default color of the panel. Unfortunately, Xfce panel doesn't allow color customization by default. To be able to change the color of the panel, users have to create a .gtkrc-2.0 file in their Home directories with the following code.

style "panel"
{
bg[NORMAL] = "#909599"
xthickness = 0
ythickness = 0
}

widget_class "*Panel*" style "panel"
widget "*Panel*" style "panel"
class "*Panel*" style "panel"

I set the panel color Gray because the neutral tone provides an ideal background for the icons.

The code also lets the icons to scale properly. Xfce panel has a bug making the icons scale disproportionally when the panel size is changed.

Finally, I added an Icon Box applet to the panel. The Icon Box applet is a neat little program that shows the icons of all running applications. Again, icons as visual signals provide more complete feedback than the labels evident in the default taskbar setup. To add an Icon Box, simply right click on the panel and from the menu options select the Add New Item, then choose the Icon Box.

The next step, I replaced the default Tango icons for a visually more fitting icon theme called Nimbus. I like Nimbus because it is attractive and its visual properties are superior to Tango. Nimbus perceptual cues provide superb navigational feedback for users enhancing speed and sense of mastery over the task. Nimbus comes in binary debian packages and its installation is a matter of double-clicking on the file name.

There was one more thing that I had to fix regarding the icons--taking out the icon label backgrounds. Unfortunately, Xfce places non-transparent backgrounds behind icon labels that are visual nuisances. To take the background out you have to insert the code seen below into the .gtkrc-2.0 file.
The code:

style "xfdesktop-icon-view" {
XfdesktopIconView::label-alpha = 0

#Text colors you can delete these if you want you use gtk theme colors
fg[NORMAL] = "#ffffff"
fg[SELECTED] = "#00ff00"
fg[ACTIVE] = "#0000ff"

}
widget_class "*XfdesktopIconView*" style "xfdesktop-icon-view"

Notice that the code provides options for changing the font color (Normal, Selected and Active).

As a final touch, I replaced Xubuntu's clearlooks gtk theme for a faster and more fitting Murrina theme called MurrinaAquaIsh. Great Murrina themes can be found at the Gnome-look site; theming is more or less a matter of personal preference, but from the visual point of view the light gray of MurrinaAquaIsh is a better complement to the blue color of the background than the beige Clearlooks.

This is the redesigned interface of Xubuntu (click to enlarge).

Beautifying Debian Etch

Debian is one of my favorite distros; but in terms of look, I hate it. At each release, I am hoping for visual improvements but each time I get disappointed. Etch is no different, the artworks are unpolished, the icon set (Rodent on the Xfce desktop) is prehistoric and in general, the desktop has a poor aesthetic appearance. These issues prompted me to redesign the entire desktop and create a visual environment that is pleasant to work with. Take a look at the screen-shot below.

This is the default desktop:



In order to get the result I wanted, I decided on the following design steps.

1) Create a new wallpaper
2) Find a new icon set
3) Customize the icons, take out the ugly icon label backgrounds; also create a customized start button.
4) Customize the panel
5) Redesign the splash screen
6) Redesign the GDM screen

Creating a new wallpaper was a simple enough task. After a few hours of experimenting with the Gimp I came up with the following image (click to enlarge).




I tried many color schemes but I kept the blue because it made me feel relaxed.

In step two, I had to find new icons that could replace the horrible looking Rodent icon set that was the default on Etch. On the gnome-look site, after a short search I found the Nimbus icons that have become my instant favorite.
You can find Nimbus here.

Next, I got rid of the icon label backgrounds. Unfortunately, Xfce adds non-transparent label backgrounds to the icons making them look visually distracting, especially on darker backgrounds.

This is the code that makes the label backgrounds disappear.

style "xfdesktop-icon-view" {
XfdesktopIconView::label-alpha = 0

#Text colors you can delete these if you want you use gtk theme colors
fg[NORMAL] = "#ffffff"
fg[SELECTED] = "#00ff00"
fg[ACTIVE] = "#0000ff"

}
widget_class "*XfdesktopIconView*" style "xfdesktop-icon-view"

I pasted these lines in the .gtkrc-2.0 file in my Home directory. The code also lets you change the font colors.

Next, I created a new start button because I preferred a Debian specific artwork to the Xfce mouse icon.

This is the button.



I replaced the the Xfce icon with the new Debian one in the pixmap directory and it appeared in the panel instantly.

The next step is the panel. I personally don't like it on the top or the bottom of the screen. I prefer it on the side. Luckily, the new Xfce customize panel dialogue lets you place the panel in any position you want. So I put it to the left side of the screen. I also wanted to change the color of the panel. Because Xfce doesn't let you change the default panel color you have to insert additional lines of code in the .gtkrc-2.0 file to be able to accomplish this.

This is the code.

style "panel"
{
bg[NORMAL] = "#909599"
xthickness = 0
ythickness = 0
}

widget_class "*Panel*" style "panel"
widget "*Panel*" style "panel"
class "*Panel*" style "panel"

I changed the panel color to dark brown. The x and y coordinates in the code handle the proper icon scaling.

Now, the desktop started to look pretty good. Take a look at the screenshot below.

The redesigned desktop (click to enlarge).



I also redesigned the splash screen to go with the new artworks. This is the final product.




There was one more thing left to do, creating a new GDM theme. For the background, I re-used the wallpaper and created a new artwork for the user name and password entry box.

These are the artworks.






The place for these artworks is the /usr/share/gdm/themes/debian-moreblue directory.

And this is the final GDM look (click to enlarge).