Learning Report 4

In this learning report, I will explain how to use an image as a banner.

First, you need an image. I created my own banner in Photoshop, but you can use any image you like. I would just recommend that it has a consistent color all the way around its border. A consistent color will let you pick a consistent background color to go behind it. If the color is not consisten, you will get a cutoff line where the image ends and the background begins.

After choosing a picture, you need to insert it into your heading module. If you link it properly, you should see it when you open your page. The code you will use to insert the image onto your page can be found here.

Now that you have successfully posted your image at the top of your page, the next step is to blend the background color to the image. There are many ways that you can find the css color code for the color at the edge of your picture. You can install programs that will give you an eyedropper-color picker in your web browser. With that all you need to do is click on the image on your web page and it will identify the color code for you. Another way, if you designed your image in photoshop, is to look at the color grid for your image inside photshop. In photoshop, go to the place where you pick your colors, and look at the numbers to the right of the gradient map. After you have those numbers, go to Quakcit Color Codes and find your color on the gradient. Quakit will give you the css code for your particular color in the box to the right of the gradient map.

The last step, once you have the color code, is to backround your heading with that color. This will make your image look like it's part of the page, and not something that was stuck in the middle of it. If you don't know how to set the background color, you may find the code you need here.

There you go. Now you have everything you need to know to give your site a slick banner--like mine!

What I learned

I learned how to make the background match an image. I also learned a few good techniques for designing a banner.

Sources used

My main source is Quackit. Links to individual pages on the Quakit site are named above.

Implementation

An explanation of how I implemented what I learned is in the tutorial-esque explanation towards the top of the page. Basically, I made a banner in photoshop, put that banner on my page, and then found the color code that would make it blend into my page. I think it looks good. The next implementation will be the quirky-looking links in the navigation menu at the top.