Adding Your Logo to the Template

All my free website templates come with workable header backgrounds saved to three different file formats:

1. add-logo.psd ~ You can open this file in Photoshop to embed your website logo directly into the header background.
2. add-logo.pspimage ~ You can open this file in Paint Shop Pro (version 7 and up) to embed your website logo directly into the header background.
3. add-logo.gif OR add-logo.jpg ~ You can open this file in any graphics editor to embed your website logo directly into the header background. To ensure the best picture quality along with the smallest file size, your workable header background may be configured by default to use either GIF or JPG file format.

GIF

After editing the workable header background of your choice (see above), you can save it as a .gif file and then edit your template source code to display it. This can be accomplished by doing the following:

1. Save your edited header background as header-bg.gif (make sure you save it to the same directory as index.htm).
2. Open index.htm in any text editor (like Windows Notepad).
3. Use the Search function to find the word "Logo". (In Notepad, click on Edit » Find... [Windows XP] OR Search » Find... [Windows 98] ).
   
   This will take you to the following source code:
   
   
   
   <!-- ============ Logo ============== -->
<td style="background: url('temp-header-bg.gif') no-repeat;" width="100%" align="left"><div style="display: table; margin-left: 20px; margin-top: 20px;">&nbsp;</div>
</td>
   
   
   
   
4. Change temp-header-bg.gif to read just header-bg.gif

Your web page will now display your new header background with your embedded logo.


JPG

After editing the workable header background of your choice, you can save it as a .jpg file and then edit your template source code to display it. This can be accomplished by doing the following:

1. Save the header background as header-bg.jpg (make sure you save it to the same directory as index.htm).
2. Open index.htm in any text editor (like Windows Notepad).
3. Use the Search function to find the word "Logo". (In Notepad, click on Edit » Find... [Windows XP] OR Search » Find... [Windows 98] ).
   
   This will take you to the following source code:
   
   
   
   <!-- ============ Logo ============== -->
<td style="background: url('temp-header-bg.jpg') no-repeat;" width="100%" align="left"><div style="display: table; margin-left: 20px; margin-top: 20px;">&nbsp;</div>
</td>
   
   
   
   
4. Change temp-header-bg.jpg to read just header-bg.jpg

Your web page will now display your new header background with your embedded logo.

For more information, please refer to:

• Best Free Graphics Editors
• Graphics File Formats