Editing and Changing the Header Banner Image

Tuesday, 07 July 2009 16:32

One of the great features of the SuperBlog template is the excellent banner in the header of the template. We realize you may not want the same image to be on your website since every one has a website that's different. So we've included some source artwork that will help you create your very own custom banner. Follow this tutorial to find out how to change the banner to better suit your website's needs.

In order to follow this tutorial you will need Adobe Fireworks and the ninjaXplorer Joomla! component.

Step 1.

Open Adobe Fireworks and then open the header.png file included in the source artwork we've provided.

Step 2.

In the layers box of Adobe Fireworks you will notice that we have 5 layers. The bottom layer is the background image, and we've included 4 other layers with the foreground images. The figures below show you the different layer options.

Step 3.

For this tutorial we will change the graphic from the superhero to the group of sillouette business people. Select that layer and hide the superhero layer. Once you've done this from the Adobe Fireworks menu select File >> Image Preview.

Step 4.

From here you will make sure your file type is a "png 32". Click export.

Step 5.

In the next dialogue box you will choose your destination directory. Also, you will make sure the following options are selected as in the figure below. Make sure the Export dialogue is selected to "Images Only", the Slices dropdown is selected to "Export Slices", and the "Include Areas Without Slices" checkbox is not selected.

Step 6.

Click the "Save" button and click "Okay" when the dialogue prompts you to do so.

Step 7.

Now that we've created your new banner we need to get it on your site. From the Joomla! Admin Panel go to Components >> ninjaXplorer. Navigate to the images directory buy going to templates >> superblog_j1.5 >> images >> theme1 and then to the theme you are using. In our example we've chosen "theme1".