hpr-knowledge-base/hpr_transcripts/hpr3270.txt

Episode: 3270
Title: HPR3270: An Example of Using Layers
Source: https://hub.hackerpublicradio.org/ccdn.php?filename=/eps/hpr3270/hpr3270.mp3
Transcribed: 2025-10-24 19:57:32

---

This is Haka Public Radio episode 3,274 Friday, 12th of February 2021, today's show is
entitled An Example of New England and is part of the series Gimp, it is the 210th show
of Ahuka, and is about 15 minutes long, and carries a clean flag.
The summer is, creating a new head image for my WordPress site, New England and Gimp.
This episode of HPR is brought to you by archive.org.
Support universal access to all knowledge by heading over to archive.org
forward slash donate.
Hello, this is Ahuka, welcoming you to Hacker Public Radio and another exciting episode
in our Gimp series, and today the practicum arrives, we've been talking about various tools
and techniques, and at some point you know the rubber needs to hit the road, so I thought this
would be a really good time to put some of these things into practice, and having introduced
layers, this is going to be really kind of the focus of this, but along with layers we're going
to be using a number of other tools and techniques that we have talked about previously.
Now I needed to have something to work on, you know, what's my starting point going to be here?
So I decided to do something that had been on my mind for a while as a
eventual project, and as developing a header image for my website, Ahuka Communications.
Now I built this site using a WordPress theme that I like on the whole, but one thing I've
always thought I would like to do is replace the built-in image, which does not reflect what the
site is about in any way. The Ahuka Communications is a place where I have placed various tutorials
mostly related to using software. I first developed some of these materials when I was the faculty
development officer at Concordia University in Ann Arbor, Michigan. Some others I developed when I was
assisting in courses at Smart Planet, which sadly is not anything at all like what it was then.
The name was bought by someone and they turned it into something completely different.
Then I developed my Libra Office series to use the techniques that I first developed for
Microsoft Office and applied them to open source. And of course I'm now in the middle of a series on
Gimp. So how can I create something that is going to reflect all of that? That's the challenge that
I set myself. Now I'm going to first note that I am not really a programmer, and that means there
are certain limits to what I can attempt. One limit that applies here is that I have an existing
WordPress theme that I want to keep. So that means replacing the generic image it has with something new.
And to do that most easily, I need to create a replacement with the same dimensions.
If I go into the WordPress dashboard to appearance header, header image, I can see what I need.
In this theme, and the theme that I have right now, if you're interested, is called Coraline.
If you think that suggests I'm a fan of Neil Gaiman, you'd probably be correct.
But it tells me there that the image is 990 by 180. So it's a wide but not terribly tall image.
Well, it's a header image for a web page, so that kind of makes sense.
And when I take a look here, WordPress says, hey, you know, change this if you want, but if I were you,
I'd keep the same dimensions. And that does simplify everything. So that's what I'll do.
Now, before opening up Gimp, the first thing I did was collect my assets.
So I went to the Wikipedia Public Domain Image Resources page that I mentioned in the previous
tutorial. I saw a listing there for a site. I'm going to think it's called Clicker, CLKER,
which said it was a place for free in public domain images that can be used in open office.
Okay, that sounded promising. I entered office computer as a search term found a few likely
images. And you can see the individual images on my website, if you wish.
And I've also linked to them. So you can download them yourself, if you wish.
Then the next site I went to was one called Clip Arts by, and I did a similar search.
But remember, I'm careful about licensing. So, you know, I want to know what the license is and
that it's one that I'm comfortable with before I download and use anything.
And with Clip Arts by, I saw some things I didn't like.
Things that were say, well, it's okay for personal use. Well, is my website
for stuff I'm doing on Hacker Public Radio is that personal use? I don't know.
And then I saw like licenses I've never heard of before. And it sounds like, hey, we decided
to write our own license. And as I said last time, and that's always something that I give a
sideways eye to. So I left Clip Arts by without using anything. And then another site I found was
called NeedPix.com. And that's seen more promising. It said all the images were public domain.
Now, public domain technically or public domain in practice can be two different things.
We talked about this last time. So if it's a Creative Commons Zero license, that is equivalent to
public domain. And it's basically someone declaratively stating that, you know, I'm relinquishing all
rights you can do what you want. So I went there and I found a few more images. And again,
you can see the images or links to them on my web page. And all of these links are in the show
notes. So you shouldn't have any trouble following up. So I found six images I liked.
I did not worry about the size, but if I had the option of large versus small, I took the
smaller size because I know what I'm, you know, I'm going to fit all of these into that header image.
So they're not going to be very big. And I can trim and resize as necessary and gimp after all.
That's the whole point of this exercise. I also went to Font Library, again, link in the show notes.
We talked about this last time to grab an open font license font called Cooper Hewitt.
I downloaded that. And with all my assets in hand, I was ready to begin.
So in gimp, I started by opening up a new image with the 990 by 180 dimension.
And then filled it with the blue green gradient for a pleasant but not too busy background.
Now to do this, I went to Tools, Paint Tools, Gradient. I clicked on the top left corner to start
and dragged it down to the bottom right corner. Then I needed to start using my assets.
I had six downloaded images in a variety of sizes, some of which needed to be resized,
and one of them cropped. Fortunately, the images all had transparent backgrounds,
so I didn't need to strip out a solid background. Not that it is hard to do, okay? We talked before
about color select. If you just click on the background, select that color. You can select everything
that color and then click Delete. Now that occasionally is going to bite you in the butt if
some of that color also shows up in the image that you want to keep. But you know, it's one way of
doing these things. So I started by opening the images as six new layers. That way I could work
with each image individually and move them around and resize them without any problems.
Now to do this, I went to File, then Open as Layers. I selected all six of the images and each one
is on its own individual layer. So you see Gimp really makes it easy to do this.
And all of the layers have a transparent background, which is exactly what we want.
Now we can use the i icon to turn off all but one of these layers and focus on just one. To make
it easier, I did change a few file names to make them more understandable. Because some of these
images I downloaded had, you know, file names that were like 12 digits long, which is pretty abstract.
So I tried to give them names that reflected what it was. And the Gimp, when you open an image
as a layer, will give the file name as the name of that layer. So if you first change your
file names when you open as layers, it will be really easy to work with.
So first layer had an LCD screen. It's not bad as it was, but it was in the exact center.
So I used the move tool to grab it and move it to the right.
Second image was too big, but it only had one section I wanted to use. So step number one, crop.
Now I first opened the image separately to crop it, then opened the cropped image as a layer
and deleted the previous one. What happens is that, you know, I tried cropping it
in the layer and what it did is it cropped the entire image file I was working with, the whole Gimp
file. And that's not what I wanted. I only wanted to crop that one particular image.
So I just did it separately. Now in Gimp, you can have several things open at once,
and it creates tabs on the top that let you switch back and forth between them, but there you
can work with them separately. So I cropped the image and then copied it into the layer.
So I continued with each image, resizing them to fit within my overall image border and made all
of them visible at once when I was done. This way I could do any fine tuning necessary with further
resizing and moving. And this is all so much easier when you have each thing on its own layer.
And it was on to the font. Now I liked Cooper Hewitt, and as I said, it is licensed under the
open font license, so I downloaded the zip file, extracted it, and then copied the font files folder
to my tilde slash dot fonts folder. Now this is what I'm seeing in my Kabuntu machine.
Last time I talked about installing fonts in different systems, et cetera. So
if you're going to do this in Windows or Macintosh, you can figure that one out.
But this is kind of a standard gimp way of doing things as you put it into the fonts folder.
So I put it there and I opened a tab in the bottom dialog box, the one that already had patterns,
gradients, and so on. By clicking the right hand to configure this tab button,
then add tab, and then fonts. I then clicked refresh on the bottom,
and my Cooper Hewitt fonts all appeared in my list. Now you may remember this as being similar to
how we added patterns in a previous tutorial. Gimp is reasonably consistent in how it does things.
Now to put it to use, I created two new layers for two phrases. One was a B-more productive,
and the other was use software intelligently. Now I did not need to create a layer first,
because when you use the text tool, Gimp automatically creates it on a text layer.
In fact, if you created a layer first, you would just wind up with two layers,
and only one, the one gimp created for you would actually have the text. Gimp is doing by default,
in other words, what you should do anyway. So work with it, and not against it.
I first selected my font from the list. I chose the Cooper Hewitt weight equals 712 italic.
I put the text on the layers in 20 point size, and that in turn meant a little rearrangement
of the images and resizing one of them. And I finally had a result that I was happy with.
So I exported it, because that's the next thing. Right now, what I have is an XCF file,
which is a Gimp Native file, and if I want to use it anywhere, I needed to export it,
and I chose to do it as a PNG file. It's typically what I do.
So now I have my image. I had to put it into my WordPress theme.
So I went back to my WordPress dashboard, and went to appearance, header, and selected header image.
Now, I'd already uploaded the new image to my media library. So all I had to do was
click add new image, and then select it in my media library. Although I could have uploaded it
at this point as well. It just happens that I already uploaded it.
And when I did that, it replaced the previous image. Now, the one last step, you actually have to
click the publish button. I did that, and now it graces every page on this site.
Now, the individual images I used are all linked. There's links in the show notes. There's links
on the page on my site. And also, if you go there, you can download the Gimp Native file,
the XCF file, that has all of the layers, and see what that looks like.
So, you know, this would be a good one to maybe follow along with, and see what we're talking about.
Now, there is still more to learn about layers, so we shall continue. But for now, I think this
is enough for a nice little tutorial. So, this is a hookup for Hacker Public Radio,
signing off and reminding you to support free software. Bye-bye!
You've been listening to Hacker Public Radio at Hacker Public Radio.
We are a community podcast network that releases shows every weekday, Monday through Friday.
Today's show, like all our shows, was contributed by an HPR listener like yourself.
If you ever thought of recording a podcast, and click on our contributing,
to find out how easy it really is. Hacker Public Radio was founded by the Digital Dog
Pound and the Infonomicon Computer Club, and it's part of the binary revolution at binrev.com.
If you have comments on today's show, please email the host directly, leave a comment on the website
or record a follow-up episode yourself. Unless otherwise status, today's show is released on
Creative Commons, Attribution, ShareLive, 3.0 license.