Using Gimp to create a simple media player skin
Making the Buttons
The last step in this Gimp mini-project is to create the control buttons on the button panel. Press Shift+Ctrl+A to lose the current selection. Now create a new transparent layer called <button-base> at the top of the layer stack. Click on the Tools menu and choose Selection Tools | Ellipse Select. Use the Ellipse Select tool to create a circle of 72x72 pixels. Fill the circle with the B&W gradient, as shown in Figure 8C.
Create another transparent layer called <button-3d> and do Select |Shrink (3); then fill the button with a B&W gradient, as shown in Figure 9A. Set the layer mode to Pin-light with 75 as layer opacity.

The buttons are almost finished, but each still needs an icon describing the button's purpose. I'll create these simple icons by using the pixel brush to draw them on a transparent layer. Working with pixel-level graphics requires the use of a grid for a visual aid.
Create a new transparent layer called <prev-icon> above the <button-3d> layer, as shown in Figure 9B. To get the grid ready, choose View |Show Grid then View |Snap to Grid. Now go to Image |Configure grid to bring up the grid setting dialog box. Configure the grid spacing at 4x4 pixels and press OK. At 100 percent zoom, your image should appear, as in Figure 10A.

Zoom to 300 percent by choosing View |Zoom | 300%. Press the middle mouse button and drag to pan the image and bring the first button in the zoomed up view. Press N for the Pencil tool. Select Circle brush (4x4) from the Brushes tab, as shown in Figure 10B, and change the current color to 7e7e7e.
Now place the cursor over the first button, click, and drag (keep the Ctrl key pressed) for a straight line, using the bar as a reference (see Figure 10C). The height of the icon is 32 pixels and the diagonal axis for a reverse play icon is about 22 pixels. Fill the middle part with the pencil. Also, draw the line at the left as 32 pixels in height. Now put the <prev-icon> layer mode to Overlay to make it look like the icon is embedded in the button, as shown in Figure 10C.
Duplication in Gimp is easy: Just run Layers | Crop to Content in each of the three buttons layers (<button-base>, <button-3d>, and <prev-icon>). Then choose Layer | New Layer Group and move these layers inside. Press Shift+Ctrl+D to duplicate this button group and move it to the right by about 80 pixels. Repeat it four times, as shown in Figure 11B.

Delete the old icon layer and create a new icon layer in each button group; then draw new icons for the other buttons, as shown in Figure 12A.

The media player skin looks almost complete, but the LCD panel appears empty. If this were a real multimedia player skin, the LCD panel would receive a value from the program and display the title of the song that is currently playing. For this simple example, I'll finish by inserting some song text in an LCD-style font. Use Overlay for the LCD item details at about 75 to 50 percent opacity of the layers (Figure 12B).
Conclusion
This workshop introduced you to some of the tools graphic artists use to create visual elements for desktop software. Of course, creating the image is only the beginning. In a real-world desktop tool, the graphic elements then must be incorporated into the application or installed as a skin or theme through the user interface. Several media players provide the option of changing the skin to give the player a different look – and even offer tools for inventive users to create their own custom skins. For instance, the VLC media player provides a skin editor tool [3] that allows the user to import graphic files and save them in the .vlt
file format used for the skins in the VLC skin gallery.
Gimp is a powerful tool. Experiment and be creative. I hope exploring the techniques described in this workshop will give you some ideas that you can use in your own Gimp graphic creations.
Infos
- Gimp: https://www.gimp.org/
- Gimp download: https://www.gimp.org/downloads/
- Creating a skin in VLC: https://www.videolan.org/vlc/skinedhlp/basics.html
« Previous 1 2
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
-
2024 Open Source Professionals Job Survey Now Open
Share your expectations regarding open source jobs.
-
Arch Linux 2023.12.01 Released with a Much-Improved Installer
If you've ever wanted to install Arch Linux, now is your time. With the latest release, the archinstall script vastly simplifies the process.
-
Zorin OS 17 Beta Available for Testing
The upcoming version of Zorin OS includes plenty of improvements to take your PC to a whole new level of user-friendliness.
-
Red Hat Migrates RHEL from Xorg to Wayland
If you've been wondering when Xorg will finally be a thing of the past, wonder no more, as Red Hat has made it clear.
-
PipeWire 1.0 Officially Released
PipeWire was created to take the place of the oft-troubled PulseAudio and has finally reached the 1.0 status as a major update with plenty of improvements and the usual bug fixes.
-
Rocky Linux 9.3 Available for Download
The latest version of the RHEL alternative is now available and brings back cloud and container images for ppc64le along with plenty of new features and fixes.
-
Ubuntu Budgie Shifts How to Tackle Wayland
Ubuntu Budgie has yet to make the switch to Wayland but with a change in approaches, they're finally on track to making it happen.
-
TUXEDO's New Ultraportable Linux Workstation Released
The TUXEDO Pulse 14 blends portability with power, thanks to the AMD Ryzen 7 7840HS CPU.
-
AlmaLinux Will No Longer Be "Just Another RHEL Clone"
With the release of AlmaLinux 9.3, the distribution will be built entirely from upstream sources.
-
elementary OS 8 Has a Big Surprise in Store
When elementary OS 8 finally arrives, it will not only be based on Ubuntu 24.04 but it will also default to Wayland for better performance and security.