Making a banner in free Gimp for a new Ghost blog.. or any blog

As a recent Ghost convert, I'm going through the process of making some simple iconography to bring a bit of bling to my new blog with the default Casper theme.

In the past I used to do a lot more online media work, and had an Adobe Creative Cloud subscription. In days gone by, I would have thrown up some logos and icons using Photoshop in a flash. Today I'd like to try the free route.

It's been an age since I last looked at Gimp. As it fits into the open source model we all love, I'll have to give it a go. Firing up a download from https://www.gimp.org/downloads/ , I install into Windows. It wants 340MB. Out of curiosity I chose the custom install and note there is an association for Photoshop files, interesting as I have a lot of historic .psd files which I may be able to import.

An icon for a Ghost favicon & general use icon with Gimp

Firing up GIMP 2.10.8, I am confronted with the main screen. It's looking a little dated and the icons are tiny on a high res screen, but my initial test to open a .AI Illustrator file has a successful import. I had an old logo / image of a database which I managed to make use of the "Foreground select tool" to isolate the foreground and cut away the whitespace in the background leaving it transparent. I then exported as a 60x60 png, to load into Ghost as a "Publication Icon". So far so good.

I'll replace this old icon of a database at a later time with something that is closer to the Tech Roads concept.

Making a Publication logo for Ghost blog with Gimp

For this I will try and make something from scratch. In Gimp first it's a File -> New. In the dialogue box, I'll set it to their recommended 600x72px, and in the custom fields switch the background fill to transparent. This is fairly important because the logo does get superimposed on a homepage photo, in the Casper theme at least.

Main Gimp tools

While tinkering I found a couple of key Gimp tool selections. The first one is the Move tool. The second is the Unified transform tool. I feel that if these tools were somehow highlighted, and made to be default, the UX of Gimp would increase massively. Having "top left" selection tools is confusing for the new user.

The "Publication Logo" Gimp canvas, getting started

With my newfound Gimp superpowers (something I never thought I'd say), I quickly paste the interim icon from my previous experiment and move and transform the size of it to fit into the left of my logo canvas.

Adding publication logo text

I am just going to go with something basic for now, the blog name as a URL, "TechRoads.org". It could just as easily be in "Tech Roads" title format. Playing with fonts is always fun, and Gimp gives you access to all those loaded on your system. It's worth spending a bit of time finding nice fonts, for example Font Squirrel is a nice place to start, but always check the copyright. If you are planning on publishing in special character languages it's also a good place to browse, as the languages are itemised for each and you can filter searches.

Here I have used an old favourite known as Roboto Slab - bold, and added some kerning to get it to spread the text to fit the width. You can find out more about this font here: https://www.fontsquirrel.com/fonts/roboto-slab

I save it in the Gimp XCF format and also export as a PNG to install in my website. It looks good, but it's about this time that I remember that it's a photo background.

It is a little hard to read! One technique I have used many times it to have either a light edge with dark fill, or dark fill with a light edge. So let's see what Gimp can do.

Creating a different coloured outline border around text in Gimp

As you should expect given the nature of this site, I have gone off along this tech road and researched a number of sites, blog scraps and endured various pop-up adverts and videos so you don't have to. There is little in the Gimp documents, and this is a bit fiddly, but at least it does introduce Layers in Gimp.

• First, with the text tool selected and the cursor in the text in question, right click and select "Path from text". This is a bit weird because it seems like nothing has happened.
• Then in the Layers box create a new Layer with transparency fill. I have named mine White-outline.

• When you create it, it'll be at the top of the layer list.
• With the new layer selected, from the menu choose Select -> From path. This will grab the text outline.
• Then choose Select -> Grow. This will allow you to choose the pixel width of the outline. I have chosen width 2 for my logo.
• Find the Bucket-fill icon (or Shift-B) and fill the newly created buffer with white or whatever colour you want for the outline. For this I had to zoom in to 400%. At this stage, the whole text might fill with solid white. Don't panic! We just have to drag the white layer underneath the text layer, as in the above example.

You might need to fiddle with the layer selection, I didn't spend a lot of time on it but you'll likely want to do a Select -> All before saving / exporting to a graphics file. My finished logo, once loaded, looks like this.

I am really happy with this, at the end of the tech road. While the Gimp UX is not as good as something like Photoshop, it's damn fine considering it's open source.

I'll be making use of it a lot more in future. I hope this has been useful!

Main photo courtesy of João Silas on Unsplash

Retrospective blog post to use BlueSky for comments: techroads.org/making-basic... #Gimp

[image or embed]

— TechRoads blog (@techroads.org) Feb 22, 2024 at 11:23 am