Creating a Banner/Header

A banner/header is found at the top of the site. It usually displays the company name and the logo. Usually it is the first thing people see when they open the web site. With a combination of colors and images, the banner/header should be attractive, informative, and comfortable to the eyes to convince the visitors to stay on the site.


The old Tai Chi Wellness Center web site had a very plain banner/header that needed to be redesign.

At his school, the client had a wooden sign above the front doors. It was only a few years old and in great shape. I talked to the client about taking a picture of the sign and making it into a banner. We also discussed what color palette to be used; it was very important for him to have gold and red. Then I started to make a draft of the banner.

Steps to create the banner/header in Photoshop

Creating a new Banner/Header

  1. Creating a layer for the sign to mask out the background and chop.
  2. Creating a layer for the new chop to be placed on the right side.
  3. Creating a layer for the client picture to mask out the background.
  4. Creating a layer for the background and match it with the color of the text in the sign.
  5. Adding texture to the background and creating a red beveled frame.
  6. Merging all layers.

There it was -- a new banner that the client was thrilled about, because it represents him and his center.

New Banner/Header

Click here to view the new header/banner on web site


Original Picture


Reworking Photo's

You can have a plain picture transformed into a wonder.

The picture to the right was taken indoors. After talking to the client, I found out in the Tai Chi world, bamboo is the most applicable symbol. So, using Photoshop, I masked his profile onto a picture of a bamboo field.

After Picture After

Click here to view after picture on web site

- Top of Page -