Preserving Memories, One Frame at a Time

April 27th, 2007

Combining Techniques to Make a Website Header

Have you been wondering, “These are nice tricks, but what do I do with them?” Here is one example of combining the skills you have been learning.


I took this unremarkable photograph of an alligator and decided to make it the basis of a website header background. Now, I know headers are more involved than this, but they all begin with an image.

The first trick from our arsenal was the crop ratio. I wanted a header 80px. high and 800px. wide. I set the 10 to 1 ratio as we did with the “Path Not Taken” photograph. (Shown smaller here to fit the blog.)

I then changed it to a duotone. The picture is taking shape, but looks a little dark.


The next trick, of course, was to lighten the photograph. This could be done either by using curves or our trick for underexposed photos. The results using 45% opacity when blending the duplicate layer was almost identical to using the curves adjustment.


Finally, the healing brush was used to clean up debris in the water.

Webmasters will tell you the image still needs to be made scalable to adjust to different viewing widths, but that’s another trick for another day.

December 21st, 2006

Photoshop for the Web

This past week, instead of photographs, I worked on building a basic website for a group I’m in. They gave me a CD with the files of a previous HTML based website. From there, they moved to a website using flash and frames. My challenge was to convert it to a CSS based design.

I used Coffeecup Software for the basic 3 column layout. Then I took the logo I was given and opened it in Photoshop. By using the eyedropper tool and clicking on various areas of the logo, I came up with colors for the columns. (I later changed this when I decided to make the colors match the chosen blog theme.) It’s a great tool to make anything match the colors of a photograph or graphic.

Color Picker

First make sure the color box is open. (In this view, it is the small, colorful box on the right.) You can do this by going to the Window menu and checking color. When you use the eyedropper, the color in the square shows the color you clicked and the RGB code is shown on the right. Double clicking the new color in the small box brings up a new box called Color Picker. The bottom line shows the hexadecimal code used by web designers.

The other Photoshop tool I used was Image Size. The logo I was given was too large for the area. The code for the page allows you to type in the height and width, but figuring the correct dimensions by guesswork can be a nightmare. I opened the logo in Photoshop and from the image menu, chose image size. Make sure the box at the bottom marked “Constrain Proportions” is checked. Then at the top, change either the height or width. The other number automatically changes to keep the correct proportion. My logo stayed round instead of becoming oval. I could downsize it a little for the front page, or a lot for the header. Both sizes were easy to do without shape distortion thanks to Photoshop doing the math for me. To view the website, go to lanaflutes.com.