Time for action—preparing a new header file
As it is, our design still very much looks like any Joomla! site—and that big Joomla! logo on every page isn't helping much! You'll replace this with your client's logo. The original Joomla! logo is just 298 pixels wide and 75 pixels high. We'll create a new image that takes up the full width and height of the header; this way, we can change the site's looks distinctively with just one graphic.
- Open up your image editing tool. In this example, we'll use Adobe Photoshop, but any image editor will do.
- The space where we want to place our image (the full width and height of the template header) has these dimensions: 920 x 108 pixels. To leave room for a little margin, we'll create a new header file of slightly smaller dimensions: 900 x 98 pixels. Click on New. In the Width and Height boxes, fill in 900 and 98 pixels. Choose Background Contents: Transparent.
- In Photoshop, the PNG file shows a grey and white "checkerboard" background. This indicates the background is transparent, which means the colors of the header background will shine through. This way, the logo image you create blends in nicely with the overall design.
- Now you can create any logo you like. Let's skip the details, as these depend on the specific needs of your site and the tool you are using. For this example, I've created a nice rounded Web 2.0 style logo using two free fonts: Airstrip Four from www.dafont.com (see www.dafont.com/faq.php for installation instructions) and the Calibri Windows system font, I have also applied some Photoshop shapes and effects.
- Save the image as a PNG file. In Photoshop, click on Save for Web and Devices,choose the PNG-24 file format, and save the image as
srupheader.png. Make sure to select the Transparency checkbox to preserve the transparent background.Click on Save.
- In the next screen, choose a location on your computer and click on Save again. Done!
Tip
A previous version of the Microsoft Internet Explorer browser (version 6) doesn't display PNG images correctly if they contain transparent areas. If you want to accommodate for visitors using this old browser, it's better to use an image without transparency. Another solution is to use a Joomla! extension that remedies this specific browser issue. In Chapter 10, you'll learn more on adding extensions to Joomla!. Do a Web search for "Ultimate PNG Fix Plugin" to read more about this specific PNG extension and its use.
What just happened?
The header image file to replace the default Joomla! logo is ready, but we're not done yet. To get Joomla! to display this new file, we'll upload the image file to the web server and change a few simple lines in the template code
Tip
Living without Photoshop—free alternatives
Photoshop may be a fine graphic editing tool, but it's not exactly cheap. The standard Windows graphics editor Paint can do the job—but it's capabilities are very, very basic. Fortunately, there are many excellent and free Photoshop alternatives. You can even have essential Photoshopping capabilities on your computer without installing a thing. Just browse to www.pixlr.com and start creating and editing!
If you're looking for free graphic editing software programs, do a Web search for Paint.NET or GIMP. Both are very capable programs; Paint.NET is beginner friendly and at the same time quite powerful. The GIMP, an acronym for GNU Image Manipulation Program, is arguably the most popular free Photoshop contender. It's an open-source program that features a truckload of photo retouching and image editing tools.