#7: Change The Logo & Main Menu

You'll probably want to create a new logo for yourself. Rather than having to buy a graphic program such as Photoshop, you can probably do it online and I'll show you how. Afterwards, I'll show you how to change out the images in the main menu. I'm recommending PicNik.com because it's online, easy to use, and you won't have to install anything. But if you need to do some serious graphic editing, I suggest that you download the free program GIMP (unless you can get your hand on Photoshop!)

Changing Your Logo

A logo was included within the template you purchased. You can change it to match you. I'll show you how to use PicNik.com, an online graphic tool, to change the logo that came with the template.

1. If you look in the 'screenshots' folder that came with the template, you'll see different screenshots of what their designers envisioned for the template. You'll use what they did for inspiration but create it yourself. For my template, I used the image below to create my own similar one.
   
2. Find your template logo. Your pages will have a logo already in them but should be missing the text. You'll be updating the logo with your own name. Open up one of your pages in preview mode and right-click on the logo.
   
3. Click on Properties and take note of what the file name is. You'll need to replace this file with your new one later on.
   
4. Go to PicNik.com.
5. Click on 'Get Started Now'.
   
6. Click on 'Upload a Photo'.
   
7. Select the file from Step #3 and open it.
   
8. You'll now see your image on the main stage, ready to edit within Picnik! The next couple of steps will walk you through adding text to go along with the graphic provided from Template Monster. Click on the 'Create' tab.
9. Click on 'Text'.
   
10. Enter the text you wish to have in the textbox and click on 'Add'.
    
11. Use the resize handlers to resize your text to approximately the right size. You don't need it perfect yet since you still need to change the font.
    
12. Select a font that you like from the left-hand list.
    
13. Change the font color to your liking. You may want to play around with the fade and blend modes as well.
    
14. Make any last adjustments. For mine, I ended up creating 2 different texts so that I could have 'Solutions' as white.
    
15. Click on the 'Save & Share' tab.
16. Change the file format to be the same as the original one that you uploaded. For example, if you uploaded 'logo.gif', you'll want to choose 'gif' as the file format to save out as.
    
17. Click on 'Save Photo' and save it in the same location as the original one.
    
18. Now if you did everything right, the next time that you preview your pages in HTML-Kit, you'll see your new logo at the top. Note: sometimes the gif quality won't be as good. If that's the case, go back and save your logo as jpg format. Just remember that if you change the file format from the original one, you'll have to change the reference in the html code.

Creating Images For Your Main Menu

1. Creating images for your main menu will be very similar to the process that you just did for adding text to your logo. Except for the main menu, we have a lot more images to update! If there's a rollover effect, you'll need to update the images for the regular state and the mouse rollover state.
2. Starting with the first menu item, figure out what the file name by right-clicking no the preview. Or, you can browse the images folder for your template. The naming convention is usually something like "m1.gif" for the regular state, and either "m1_act.gif" or "m1_over.gif" for the mouse rollover state.
3. Go into PicNik.com and open up the image. See steps 4-7 above for reference.
4. Add the menu text to the image. Make sure to create the appropriate menu name from the starter pages that you've already created. For example, my first menu item is 'Home Page' so I added that text to the image. See steps 9-17 from above.
   
5. Repeat for each menu image and each menu rollover image. Make sure that as you save these out, you save them over the original files--that way you'll have a complete main menu instead of the blank one that was included in this template.

Other Images

For any other images for your website, you can use PicNik.com as well. If you need to do some serious graphic editing, I suggest that you download the free program GIMP (unless you can get your hand on Photoshop!)