Upper Left Logo
The first thing we need to do is to get the logo into to the computer. If the logo is not in a digital format already make it happen. Scan it in, take a photo of it, hire a graphic designer, do whatever needs to be done to make it digital. The best size to make a logo is 125x125 pixels but no larger than 160x160 pixels. This way the logo is big enough to see, but not so big it becomes overwhelming to visitors. The logo is going to be on every page, so don't stress out over visitors seeing it to make the association with the website.
Open up Paint Shop Pro (or a paint program) and then open up the logo to edit. The background of the image needs to be transparent to make the logo flow with any website design. For this course let's say we are working on a site for baking and we want the logo to be a gingerbread man.
 |
On the right side of the screen are two large boxes. |
 |
The top box is the color of the paintbrush which is controlled by the left mouse button. |
 |
The lower box is the color of the background color which is controlled by the right mouse button. |
 |
Double click on the background color and change that color to one that is not at all close to any other color that is used in the logo. |
 |
Select the Magic Wand Tool from the toolbar on the left side of the work area. |
 |
Place the Magic Wand Tool over an area of the background of the logo and single left click. Notice how the Magic Wand will select all of the similar colors of the background on the image. |
 |
The number of similar colors the magic wand will select can be adjusted by using the "Tolerance" level control in the upper menu bar. |
 |
Once the background is selected hit the delete button on the keyboard and the background color is changed. |
 |
Now to set the palette transparency color. To do this, go to the top menu and select "Image". |
 |
Scroll down to "Palette" and over to "Set Palette Transparency". The computer may ask if it is ok to lower the resolution of the image. Say ok. The system will keep only the colors you are using in your image to keep the file size small. |
 |
When the new box opens up choose the "Set the transparency value to the current background color:" and then click on the "Ok" button. |
|
Let's see what parts of the logo are now transparent, go back up to the top of the screen and select "Image". |
 |
Then select "Palette" and over to "View Palette Transparency". |
 |
All of the transparent sections of the image will be shown as a checkerboard pattern. |
 |
Let's save the logo as a GIF file so that it can store the transparencies. Go up to "File" in the top menu. |
 |
Scroll down to the "Save As" Option. This will open up a Save As dialog box. |
 |
Navigate to the "images" folder which is in the "includes" folder of your website. |
 |
Select the "logo.gif" file so it can be replaced with the new logo. |
 |
It is important to make sure that the "Save type as:" box says "GIF Graphics Interchange Format (*.gif)". Use the drop down arrow if needed. |
 |
Click the "Save" button. The system will ask if you are sure you want to replace the logo file. Say yes, it's ok. |
