Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Perhaps one of the most common questions that I am asked by faculty when I began working with them to build their courses in Moodle is, how do I make my page look better? In this movie, I am going to show you how I created these header graphics that I use as separators that I've shown how to display as labels inside of the Moodle course. I obviously can't show you every single technique in every single application that's out there in order to build graphics. There are a lot of titles here in the lynda.com Training Library that can help you become much better at producing effective web graphics.
But in this movie, I am going to show you how to use Fireworks in order to create these basic headers. So I am going to go ahead and minimize my browser, and I am going to go ahead and I am going to use Adobe Fireworks CS5 in order to show you the technique that I use to create those graphics. If you've got any version of Fireworks, the process is basically the same. In most any other image editing program, you can do a similar kind of technique. Let's begin by creating a new Fireworks document, or a new PNG file. You can also use JPEGs or GIF images as well.
The important part is the size of the image. Now, I'd like to use images that are about 500 pixels wide and about 30 pixels tall when I am making my graphics that I am going to use as labels within my course. The resolution should generally be about 72 pixels per inch, and I like to set the canvas to be transparent in my background color. I could also use white because the particular theme that I am using has a white background. If the background of your Moodle page that your particular institution uses is a particular color, you can choose that color right here to use that as your background, and you can make your graphics stand out just a little bit more.
Go ahead and select OK, and now we have our basic image here. Let's go ahead and add some text by clicking on the Text tool over in the Tool palette on the left-hand side and then simply clicking inside of this area. Don't worry about the size right now; we'll fix that in just a second. I'd like to go ahead and put my heading in all caps. That helps them stand out just a little bit. So I am going to go ahead and press my Caps Lock key on my keyboard and just call this LECTURE MATERIALS. Now you'll notice that my text is larger than the image.
That's not a problem. Next, I am going to go ahead, I am going to select that text, and I am going to come down here to the bottom, and I am going to set just a couple of quick parameters. First of all, I am going to set the font size. Right now it's set to 29, or some other level. I am going to go ahead and change that to 18 and hit Enter on my keyboard. You can see that my text has changed in size. The next thing I am going to set is I am going to go ahead and set the font. Now for my font I like to choose something that's going to be fairly universal and something that I am going to be able to match within my browser.
You'll notice as we've clicked into some of the font menus in the HTML movies that there are not a whole lot of fonts available on the web that are common across all platforms. I am going to go ahead and I am going to use Helvetica, because I'd like the way that it looks. It's very easy to read and it's a nice clean font. Now I am going to make two other changes. The next change is down here. That's my kerning, or tracking, and the default has the kerning or tracking, which is the width, which is the space that's in between the letters here, set down to 0. I am going to go ahead and set this to the same value that I set my font size at.
So I set my font size at 18, so I'll set my kerning, or tracking, also at 18. Type that in and I'll hit Return. What happens on screen is you can see the text is just spread out just a little bit to make this text a little bit more readable. The final thing that I am going to do to my text is I am going to change the color. Now I try and come up with maybe one or two colors that I am going to use consistently throughout my page. Now, I am obviously not a graphic artist, so my color choices may not always be the best ones out there, and you may want to contact the art department at your school and try and get a couple of choice of colors that you could use that would go well with your school's theme.
In this case, I am going to go ahead and I am going to hit the little color palette here, and I am going to choose this upper-left red color. You can also see the number value for it is #990000. It's that nice red color that we've been using. Okay, I've got my text in here. I am going to click the Pointer tool up here in the upper left to deselect my text, and now I drag it around to right where I want it. Now what I want to do is I usually try and get the text fairly close over to the left-hand edge, and I can use my arrow keys on my keyboard now to kind of nudge the text over.
But what I don't want to do is I don't the text to go all the way off to the edge. And then come in maybe two clicks off of the right-hand edge. I want the text to be generally pretty well centered within that space. All right! I am going to deselect, and now I have my nice clean LECTURE MATERIALS text. The last thing I want to do is I want to go ahead and create a single horizontal line to provide a little baseline to this text. So over here in the Vector section there's the Line tool. I'll go ahead and click on that one time, and I am going to come down just underneath of the L, and I am going to click and hold down, and I am going to start dragging.
Now notice my line is kind of all over the place. What I want to do is I want to get most of the way over and keep holding my mouse down. I am going to hold down the Shift key, and the line is going to snap into a perfectly horizontal line. Fireworks is really helping me out here quite a lot, and I am going to go ahead now and just release my mouse click, and now I have a perfectly straight line. The line is currently black, we can see down here in our color. So I'll go ahead and click the Color tool here and select that same red that we had before, and our line is now only 1 pixel wide.
So it's going to be a nice thin line underneath of there. I'll go ahead and use my Arrow tool again and deselect, so I can get a good visual as to where this line actually is. So I'll select it one more time and use my arrow keys to kind of nudge it over a little bit. I am trying to just make sure that the left-hand edge comes pretty close to lining up with the L there. It should be just about half way between the text and the bottom of the image. So there we go. It's not really fancy, but it provides a nice separation for us.
Now that I have this file once, I could duplicate it, and type over top of the text and change for all of my different image headings. Okay, the last step is just simply saving this file. Because we created the file as a PNG, we don't really have to worry too much about the image compression. Fireworks is going to go ahead and handle that for us. I am just going to go up here to File, and we are going to choose Save, and we can go ahead and point this file out to our desktop, and I am going to call this lectureMaterials. Now notice I didn't put a space in here.
I try really hard, especially when I am creating images for my Moodle pages, to not put spaces in my file names because that just helps Moodle as it's storing the file in being able to call them up for the web, so we know extra characters get put in there. So there we go, lectureMaterials onto the desktop. I'll go ahead and hit Save. Go ahead and close this Fireworks document. Here we are. Here's our lectureMaterials.png. I'll go ahead and spacebar on my Mac, and I can see that I've got my nice clean text here with my line, and now I can go ahead and upload this file as we've seen in earlier movies and add it in as a label to separate the text in our documents.
If we go ahead and go back to Fireworks, this is what it looks like when it's put in place. So now you know how to create some basic headers. If we scroll down a little bit, you can see the other ones that we've been using throughout this title that have been Required Readings and Assignment. So I encourage you to explore, play around, try some different font choices, try some different colors, and some different headings. Again, the image sizes that I use to create these is 500 pixels wide by 30 pixels tall.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 69532 Viewers
80 Video lessons · 127089 Viewers
52 Video lessons · 62215 Viewers
84 Video lessons · 28776 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.