Design a music player app interface in GIMP
This tutorial will show you how to create a professional-looking music player app interface, from scratch, in GIMP. We'll start by making a dark, abstract background for the interface to sit in front of, then add a bright, shiny CD icon and a basic selection of music player controls. By the time you're finished you should be well-versed in using different layer blend modes, gradients and brushes, layer groups and the text tool. So a lot of stuff, basically. Here's what we'll be creating in this guide.
Skills you'll be developing in this tutorial
- Using layer groups to organise and structure your work in GIMP
- Applying a range of layer blend modes to create different light and shadow effects
- Using external plugins to refine image elements quickly and easily
- Compositing the elements of a realistic-looking app interface design
Download and install the briliant Layer styles plugin Layer Effects plugin for GIMP for GIMP. Follow the instructions on the page to install the package and add it to GIMP's menus.
Step 1 - Create the app's background image
Open up GIMP and create a new document with Ctrl and N or File --> New. In the options boxes, set the width and height of this new document to be 1080 and 1920 pixels respectively. Choose Foreground colour for the fill which, if you've just opened GIMP, will give you a black background.
Locate your Layers panel, or bring it up with Ctrl and L, and add a new layer above the black background with the New Layer icon or Ctrl, Shift and N. Give this layer a transparent fill. We'll be using lots of transparent layers throughout the rest of this tutorial.
Activate your paintbrush tool with the P key and head for the Tool Options area of the toolbox. Select a soft-edged brush (GIMP's built-in 25% Hardness brush is an ideal starting point) and adjust the brush's size to something huge, like 2,000 pixels or so. Set your foreground colour to a bright yellow (#f2ff14), and click once or twice on the new layer to paint a large spot on it.
Switch your foreground colour to a bright red, then a bright purple, and repeat this process to add two more blotches onto this layer. Use a different brush size each time to mix things up a bit. 1,700 pixels and 1,400, say.
Back over on the layers panel, reduce this layer's opacity to about 10% using the slider or by entering the value manually in the box.
It might seem slightly pointless to have gone to the trouble of painting those areas only to make them nearly invisible, but all will (literally) become clear shortly.
Add another transparent layer at the top of your stack, then press D to reset GIMP's foreground and background colours to black and white. Fill this layer with black using Ctrl and , or Edit --> Fill with FG Color, and change its blend mode to Dodge in the dropdown box.
The trick happens when we paint some white onto this layer, so let's do that now. Either set your foreground colour to white manually, or press X to switch them around quickly so that white's on top. With the Paintbrush Tool, head to the options panel again, set the brush size to 100 pixels and use a brush of Hardness 50%. Tick the Jitter option box and set the value to about 10. I'll summarise these settings in the image below.
With that done, paint one or two patches over the canvas using a simple click-and-drag motion. You'll very quickly fill the canvas up here so make each stroke brief otherwise you'll have too many bright spots cluttering it up. Here's the layer at Normal blend mode, so you can see what's going on.
And here's what it looks like at Dodge blend mode. The Dodge blend mode boosts the brightness of the layer below it, relying on black-to-white contrast on the Dodge layer to work out how much to do it by.
This is going to be part of our background, so lower its opacity a long way - right down to about 25% - so it's not too intrusive. Then add another layer above this one and repeat the last step with a larger brush size (I've used 150 pixels here), lowering this layer's opacity to 15% afterwards. It will just boost that starfield effect slightly without overpowering the rest of the UI tools we'll be adding later.
Marvellous, that's our background complete, time to move onto the central CD icon.
Step 2 - Create the app's featured icon
Create a new transparent layer at the top of your stack and call it Disc base or something appropriate. Now, I want to get a reliable and precise result here, so using a grid will help us. Make the grid visible by ticking View --> Show Grid, and tell GIMP that we want our drawing objects to snap to that grid using View --> Snap to Grid. Finally, we need to see the grid clearly over our dark background, so which menu do you think that setting lies under? That's right, it's in Image --> Configure Grid. Hmmmm, not the most intuitive sequence of menu options, but there you go. Set your grid up like the image below; all I've changed is the gridline colour to a light grey so it's visible, and set a 20 pixel gap between each gridline, which should be ideal.
Activate the Ellipse tool with the E key and use it to draw a circle in the centre of your canvas. The edges of the circle will snap to the gridlines to make life easier. You can see its dimensions in the bottom toolbar in the window. Drag it around until you get a selection area that is 860 pixels in diameter, then release the mouse button. Make sure it's positioned it in the centre of your canvas, which you can easily do by dragging the selection after it's made.
It's helpful to switch the grid off for the next part, otherwise we won't be able to see what we're doing, so click View --> Show grid again to hide it. Bear in mind though that we've still got grid snapping enabled, so all your drawing and clicking will pull up to the grid perfectly as before.
Set your foreground colour to #a4a4a4 and the background one to #d2d2d2; two different shades of grey. Activate the Blend tool with the L key and use its options panel to set it to be a Bi-linear fill - this will produce a two-way blend that has the foreground colour in the centre, fading to the background colour in each direction. Click and drag a gradient guide over the circle area and release the mouse button.
Keeping this selection active, go to Select --> Shrink in the menu and enter a value of 80 pixels. Press Delete to clear this region of the CD area.
Still keeping this selection active, create a new layer called CD inner at the top of your layer stack, and fill the selection with your foreground colour of #a4a4a4, using your preferred method to do so.
Shrink the selection by another 45 pixels, clear it with the Delete key, then de-activate the selection with Ctrl, Shift and A or Select --> Deselect in the menus. Finally, reduce the opacity of this layer to 30% in the Layers panel and take a look at our progress so far.
Step 3 - Add refinements to the CD icon
While that looks pretty nice, we're designing a cool app interface here and the central icon is a main feature, so we'll spend a good amount of time making it look outstanding. We'll add some extra detail, as well as the colourful light reflections you get from the shiny underside of a CD.
Look at the Layers panel. Hold the Alt key and click on the thumbnail image of the Disc base layer to create a selection from the filled-in parts of this layer only.
With the Disc base layer selected, add another new layer to the stack - this will insert it above Disc base but below **Disc inner*.
Fill the selection with pure black (#000000). Then click Layer --> Autocrop Layer to crop it to the limits of the circle. You'll see the black and yellow dashed outline surrounding the ring shape when it's done. There's a specific reason for doing this, as we'll discover later.
Add a good amount of white speckles to this black ring layer using Filters --> Noise --> HSV Noise, setting the Saturation to 85, and the Value to 175. You can leave the Holdness and Hue as they are at 2 and 3 respectively.
Back in the Filters menu, select Filters --> Blur --> Motion Blur, and select the Radial radio button from the options that appear. Clever trick time: because we've cropped the layer to the limits of the ring's perimeter, this radial blur will take place around the centre of the layer (co-ordinates of X = 120, Y = 120), which also happens to be the centre of our ring.
Change the blend mode of this layer to Addition, and lower the opacity to about 70%. This gives us a great effect that looks like grooves in the CD running around its surface.
Excellent, that's starting to look really good. Now let's go for some real polish. Holding down the Alt key again, click on the thumbnail image of the original disc shape layer to Alpha-select that region (if it's not already). Add another new layer called Red and activate the Blend Tool once again. Set your foreground colour to #d50808 and select FG to Transparent from the Gradient box. Then draw some short, Bi-linear gradient regions within the selected area.
Tip: try to make each gradient run through, or nearly through, the centre of the CD, for the most effective result. Change the blend mode of this layer to Overlay, to see the effect of this.
Repeat this process of creating a new layer and drawing colourful gradient bars across it, this time using a foreground fill colour of #00cafd - bright blue. Lower the opacity of this layer if the impact of adding a blue overlay to the image is too strong.
Do this one more time, with a gradient foreground colour of #25d93e - green.
Finally, let's make use of our Layer Styles plugin which we downloaded and installed at the beginning of this tutorial to add one last refinement. Make the Disc base layer the active one from your stack, and choose Script-Fu --> Layer Effects --> Stroke from the menu. Set the Colour to white, Opacity to 30%, Blending Mode to Normal, Size to 10 and Position to 100 (outside the shape). Make sure "Merge with layer" is unticked, and click OK to run the script on the disc layer.
This should give you a translucent outline to your main disc shape, created on a new layer below it.
How useful is that? The Layer Effects plugin has given us a nice glossy outline to our disc without having to do all the work to create complicated selections ourselves. Select the Disc inner layer and run the Stroke plugin again, but this time set the Opacity to 30%, Size to 2 and Position to 0 (inside), to give an inside stroke to the CD's central area.
Lastly for this section, activate the Disc base layer once more, and click on Filters --> Light and Shadow --> Drop Shadow. Set the X and Y offsets to 0. Enter a Blur Radius of 80, and select a fill colour of white. Set an opacity for the drop shadow layer of 70%. Untick Allow resizing if it is ticked before you start, and click OK.
For maximum glow, locate the Drop Shadow layer in your stack and change its blend mode to Value.
Step 4 - Add UI elements to the app design
So now we've got our background and featured icon in place, let's turn our attention to designing our app's controls. Don't worry, you'll see that once we've created one or two, we can re-use these elements and adapt them for a different purpose.
Click on the topmost layer in your GIMP project to activate it (probably Disc inner-stroke). Make a new Layer Group by clicking the folder icon at the bottom of the Layers panel. You'll see a folder thumbnail appear at the top of the layer stack.
Now, you can't draw anything on a layer group - it's just a bucket to hold other layers in. So with the layer group selected create a new layer, which will appear as a sub-layer of the group. This is what we'll be adding pixels to shortly.
Let's draw the Play button first. We'll make a button border to define its boundaries, then add the symbol to it afterwards. As you'll see, this is a pretty efficient way of working when it comes to making a full set of controls.
Starting with the Rectangle Tool (keyboard button R), click and drag a rectangular selection area which is 152 pixels wide by 110 pixels tall.
For that slick, smartphone app touch, let's give our button rounded edges. Go to Select --> Rounded Rectangle and enter a Radius of 40%. Keep Concave unticked and click OK.
Now, there are various ways of performing the next step, but the one that I think gives the cleanest result is to Fill the selection with white, then click Select --> Shrink, entering a value of 3 pixels, before pressing the Delete key to clear the interior area. Press Ctrl, Shift and A to unselect everything (the menu option is Select --> None).
Go back to the Layers panel and add another new layer, which we'll draw the button's symbol on. Select the Layer Group first, then add a new layer which will automatically go inside the group, above the first.
Grab the Free Select Tool (F) and, using the Snap to Grid function as help, click on the three corners of a forward-pointing triangle for the Play symbol. With snapping switched on, you'll find it much easier to control the size and straightness of the edges. Again, don't be too concerned about positioning, we can always move the layer around later so everything is pixel-perfect.
Fill the triangle with white as before, and unselect the region so we can inspect the result properly.
Now is the time to make any adjustments to the positioning of both the button's frame, and the symbol, to get everything aligned as you need. Activate the Move tool (M on the keyboard), then check the Move the active layer radio button. Select the layer that needs moving in the Layers panel and simply drag each one around until you've got it aligned how you want.
Next, click on the Play button's layer group. Select Layer --> Autocrop layer. This will crop both of the child layers to just the areas where there are filled-in pixels, allowing us to move the pair of shapes around easily with the Move tool.
Duplicate this layer group and rename the resulting layer group, ready to add the Stop button detail next. This also means we can guarantee all our buttons' frames are the same size. Move this new layer group into position alongside the Play button. Hold down the Ctrl key while dragging it, to confine the movement to one axis at a time, which will keep everything aligned nicely.
Find and rename the layer with the button's symbol on it. Clear it first with the Delete key, then draw a 60 x 60 pixel square within the layer's outer border and fill it with white. Again, use the Move tool to reposition after drawing if you're struggling to get it in place correctly. Remember that with Move activated, you can use the keyboard arrows to nudge the layer around one pixel at a time.
Let's make this Stop button an example of an unpressed button in our app mockup. Simply re-activate its layer group parent and lower the opacity to about 20%.
Repeat the process of Duplicating layer groups and editing their symbol layers to create a full set of player interface buttons. You'll find that you can re-use existing shapes by copying their layers, then dragging the copies into new layer groups to save time. Use a tool to create other symbols where you need to.
All of which work should give you something that looks like this. All that's left is to drop in the currently-playing track's info and time stamp, and we'll be there.
Step 5 - Add track information to the design
It's important to keep all our work organised, so like before let's create the new collection of image elements in a Layer Group. Now, in contrast to creating new layers in GIMP, if the topmost element is itself a Layer Group, then when we add another it will be inserted within the current one. That's not what we want here, so click on a Layer outside the group first, then drag the new Layer Group up to the top where we want it to be.
Add a new, transparent layer to go into this group, on which we'll draw a song progress bar.
Activate your Rectangle tool again, and draw a shape which is 800 pixels wide by 40 pixels tall on the Bar layer. Make it a Rounded Rectangle with 40% rounding as before, and fill it with white once again. Use the corner and side handles to resize and tweak the shape until it fits above the controls, below the CD and roughly centred horizontally.
Shrink the selection by 3 pixels and Delete the central area of the bar.
Shrink the selection by another 5 pixels and fill the inner area with white to create a filled progress bar.
Keeping the selection active, click once on it while the Rectangle tool is active. this will re-introduce the sizing handles to the corners and, importantly, the middle of each edge of the selection. Hover the mouse over the left-hand side's middle handle, then click and drag it to the right. When you get to a point about two-thirds of the away across, hit the Delete key and unselect everything so we can see what our progress bar looks like when a track is playing. Move the bar around a little to position it correctly if it's still a little way off-centre.
Great stuff. Now to add the time markers. These are going to be really simple numbers indicating how much time the current track has been playing (which we'll place on the left), and how much time is still left to run (on the right). Pick up the Text tool with the T key, then click somewhere over the left-hand side of the progress bar to enter your text for the mockup. This will go onto a new layer in the current layer group. Pick a decent font which you feel is in-keeping with the style of the music player app, and remember to make sure it's white in colour, using the fill box in the on-canvas editing tool or in the main Toolbox if you prefer.
Repeat on the right-hand side to add the 'track time remaining' text, using the same font, size and colour.
Finally, add track and album information at the top of the app design. Click and drag out a decent-sized text area for this one so you've got plenty of room to work, then click the centre text button on the Tool Options panel to centre both lines of text. Move them into position just as before.
Wonderful, good work! At this point you may want to consider using your new-found knowledge of managing layers and layer groups to tidy things up a bit, but that's all the hard work finished!
By dragging the colourful blotches and Dodge layers into a group, then hiding it, for example, we can easily switch the background to another design and try out some other backgrounds and colour schemes.
I hope you've enjoyed this tutorial as much as I've enjoyed creating it. As of the time of publishing, it's far and away the longest and most in-depth tutorial I've written, but I hope that's because it's genuinely useful and teaches some great techniques for you to use in your designs.
Are you getting down with this article? Does it make you want to jump up and start grooving, or just do a polite head-bob at your desk? Let me know in the comments section below.
comments powered by Disqus