Picturesque

Many users call on the Gimp image editor [1] to crop and touch up their digital photos, but the powerful Gimp has many other uses. For instance, developers and graphic artists use Gimp to create graphic elements for desktop applications. The details of how to tie graphics features into a working application are numerous and depend on the programming language, the desktop system, and the nature of the application. However, the steps for creating basic GUI elements in Gimp are often quite simple and serve as a useful scenario for showcasing Gimp's impressive toolbox of graphic design tools.

This workshop introduces you to some of the tools that graphic artists use to build images in Gimp. In this scenario, I'll build the skin for a sample media player application. Of course, the media player on your Linux system is a software tool that processes the contents of a stream or sound file. A media player doesn't really look like anything, but the metaphor of the computer desktop environment means that humans need something to look at. In this case, I'll make the media player look like an old-school CD player, with the usual buttons (Play, Stop, Previous, and Next) and a little window to show what song is playing. A more complete GUI interface would include an enlarged window for displaying playlists, as well as other elements, but for the purposes of this workshop, I'll keep it simple.

The popular Gimp comes preinstalled on many Linux systems, and if you can't find it now in the Start menu (typically with the Graphics applications), you can surely install it from your distro's package manager. The Gimp website also provides source code and packages for several operating systems [2]. This tutorial is based on Gimp version 2.10.14; if you are using a different version of Gimp, the details might differ slightly, but the concepts are similar.

Building the Base

The first step is to create a new image. In the Gimp main window, choose the File menu and select New. In the Create a New Image dialog, select an image size of 1024x512 pixels.

Next, click Layer | New Layer to create a new transparent layer. Rename the layer <skin-base>.

Now in the Toolbox, choose the Rectangle Select option and select the box labeled Rounded Corners. Input 80 as a radius for the rounded corners, and then draw a rounded rectangle of 644x178 pixels, as shown in Figure 1C.

Figure 1: Creating a media player skin base using the selection and gradient tools.

The next step is to color in the rectangle. The gradient tool will give the image a polished, industrial look. Select the gradient tool in the toolbox, or if you don't see it, choose the Tools menu and select Paint Tools | Gradient. Select the preset Deep Sea gradient from the gradient options. Ensure the <skin-base> layer is selected in the Layers tab, and then draw the gradient as shown in Figure 1B and press the Enter key.

Keeping the selection active, now go to Select | Shrink. Input 3 as a value then press the OK button to confirm. Create a new transparent layer, renamed <skin-shine>, and use the selection to fill with a B&W gradient, where black is at the top, as shown in Figure 2. Press Shift+Ctrl+A to lose the selection.

Figure 2: Refining the tone and border identification of the media player skin.

Change the layer mode of the <skin-shine> layer to Overlay and the opacity to 50. Using the Overlay layer mode with the gray gradient layer adds a bit of shine to the lower layer that resonates with a metallic tint. Also, the three-pixel reduced size now acts as a responsive border for the <skin-base> layer. If you look carefully, you can see the difference between Figure 1B and Figure 2C.

Make the LCD panel

The next step is to create the simple LCD panel for the media player. Create a new transparent layer called <lcd-base> at the top of the layer stack. Then draw a rectangular selection of 400x64 pixels with a rounded radius of 16, as shown in Figures 3A and 3B. Position the rectangle in the vertical center of the <skin-base> layer, slightly upwards to the mid-top part. Now fill the selection with color 808f80, as shown in Figure 3A.

Figure 3: Creating the LCD panel.

To add a gradient to the LCD panel, create a new transparent layer and name it <lcd-shine>, and then click on Select | Shrink menu with 3 as the value to shrink the selection. Draw a linear B&W gradient, where black is towards the top, as shown in Figures 3C and 3D.

Change the layer mode of <lcd-shine> to Overlay and its opacity to 56 (see Figure 4B). Now you have created a nice glass-screen effect over the LCD panel. You can edit the shine to enhance it. Select the <lcd-shine> layer, and then go to Layers | Colors | Levels and change Input levels to (56|0.44|232), as shown in Figure 4A.

Figure 4: Refining the LCD panel and creating a button panel.

Make the Button Panel

The control buttons for the media player will appear on a button panel below the base. The first step is to create the panel; then I'll add the buttons.

Press Shift+Ctrl+A to lose the current selection. Now create a new transparent layer called <bp-base> on top of the layer stack. Again use the rectangular selection tool with a 420x100 pixels size and rounded corners at 30. Ensure it is aligned with the LCD panel, and keep its top half inside the <skin-base> layer, as shown in Figure 4C.

Keep the selection active and use the gradient fill preset Shadows 2, as shown in Figure 5A, and then press the Enter key to finalize the <bp-base> layer. Using this golden gradient distinguishes the buttons panel from the background skin.

Figure 5: Refining the button panel.

On the last active selection, do a layer shrink of 3 and create a new transparent layer named <bp-shine>. Again select and use the B&W gradient, as shown in Figure 5C, and then change the layer mode to Overlay with 30 as the layer opacity. This step refines the 3D-ness, and the gradient shine enhances the look of the button panel, as shown in Figure 6D.

Figure 6: Using selection tools for the media player separator.

The basic position of the button panel in Figure 5 looks fine, but something is missing. For aesthetics reasons, I would like to see more separation of the button panel from the rest of the media player unit, so I'll create a gray border around the button panel that separates the panel from the blue cylinder of the media player base.

To proceed, I'll need another transparent layer above the <skin-shine> layer called <skin-modi>. Right-click on the <skin-base> layer in the Layers window and select Alpha to Selection, as shown in Figure 6A.

Now I will cut some part from this selection by keeping the Ctrl key pressed and drawing the new selection, as shown in Figure 6B.

To the selection from the previous step, I will make an addition. Keep pressing the Shift key, and draw the rounded rectangular selection, as shown in Figure 6C and 6D. Then press the Enter key to get the added selection, as shown in Figure 7A.

Figure 7: Giving the media player separator a refined look.

The next step is to fill this selection with the white color on the <skin-Modi> layer just to keep it safe for further use. Now hide this <skin-modi> layer and add another transparent layer above it called <skin-modi-gradient>.

Select Alpha to Selection from the <skin-modi> layer, as shown in Figure 7C. Then select the gradient preset Shadows 2 and draw it, as shown in Figure 8A. This makes the <skin-modi-gradient> layer darker and serves as a good separator over the blue skin, acting as a visual cue for the buttons panel.

Figure 8: Finishing the panel separator's look and creating a button for the Button panel.