Don’t Click On Me

This tutorial starts where the other one left off and covers chopping up and saving of the image we created. It’s relatively straight forward and easy to follow.

You should open the XCF file you have from last time, or you can download one from here. So that you have the following on your screen:

Now choose the rectangle select tool and roughly select the header of the images. You should notice that in the toolbox, the options about position and size. You have the ability to edit the selection. You should change both of the position values to 0. the width should be 950 assuming you are using the standard template, and the height should be 150 or the height of your header. This selects the entire header, and the grey bits to go with it. We do this because it makes the image fit the columns that blueprint gives us and because we need to select the shadow. There are other ways of doing it like making the background transparrent, that that raises compatibility issues.

Now click the Edit Menu and choose “Copy Visible” (important, not one of the others). Then, straight after choose Edit >> Paste as >> New Image. A new box will pop up, looking like this:

Next you need to save this image into your “img” folder created in the first part of the tutorial, type the name “header.png” as this will automatically save the image as a PNG image (and PNG images don’t distort). Or you can choose the png format from the list, the save box is different in different versions of the GIMP. When you click save a bunch of options about saving to PNG will come up, stick to the defaults unless you know what you are doing.

Once done you can close this new window and return to the main template window. Make another selection anywhere below the header and above the bottom of the white content area. Make this selection one pixel high and make sure it takes up the full width (use the same tool as before).

Save this new image as “content.png” or something similar, use the same edit, copy visible technique.

Now select the footer, you do not need to select right to the bottom of the page but you must make sure you inclue the entire drop shadow. My selection is at position 0, 790. Width 950, height 30. Same technique again to save it.

Once you have these three images you have completed, the rather easy, part 2. This same technique can be used in place of photoshop’s slice tool.

Part 3…