Using Gimp to create a simple media player skin
Picturesque
Forget the photos – Gimp is also a great tool for graphic design. This workshop shows how to use Gimp to create a simple visual image for a multimedia player application.
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.
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.
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.
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.
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.
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.
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.
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.
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Support Our Work
Linux Magazine content is made possible with support from readers like you. Please consider contributing when you’ve found an article to be beneficial.
News
-
Plasma 6.3 Ready for Public Beta Testing
Plasma 6.3 will ship with KDE Gear 24.12.1 and KDE Frameworks 6.10, along with some new and exciting features.
-
Budgie 10.10 Scheduled for Q1 2025 with a Surprising Desktop Update
If Budgie is your desktop environment of choice, 2025 is going to be a great year for you.
-
Firefox 134 Offers Improvements for Linux Version
Fans of Linux and Firefox rejoice, as there's a new version available that includes some handy updates.
-
Serpent OS Arrives with a New Alpha Release
After months of silence, Ikey Doherty has released a new alpha for his Serpent OS.
-
HashiCorp Cofounder Unveils Ghostty, a Linux Terminal App
Ghostty is a new Linux terminal app that's fast, feature-rich, and offers a platform-native GUI while remaining cross-platform.
-
Fedora Asahi Remix 41 Available for Apple Silicon
If you have an Apple Silicon Mac and you're hoping to install Fedora, you're in luck because the latest release supports the M1 and M2 chips.
-
Systemd Fixes Bug While Facing New Challenger in GNU Shepherd
The systemd developers have fixed a really nasty bug amid the release of the new GNU Shepherd init system.
-
AlmaLinux 10.0 Beta Released
The AlmaLinux OS Foundation has announced the availability of AlmaLinux 10.0 Beta ("Purple Lion") for all supported devices with significant changes.
-
Gnome 47.2 Now Available
Gnome 47.2 is now available for general use but don't expect much in the way of newness, as this is all about improvements and bug fixes.
-
Latest Cinnamon Desktop Releases with a Bold New Look
Just in time for the holidays, the developer of the Cinnamon desktop has shipped a new release to help spice up your eggnog with new features and a new look.