Step 1: Size New Document

The masthead required by this site is 758px by 80px. Start a new document of that dimension.

Step 2: Setting the Color

How do we come up with a masthead design for the site? Besides the dimensions, right now we only know two other pieces of information: the site's primary color and its name. Since the site's primary color is blue #e6eef7, we will make the masthead of that same color to begin with.

In a new layer which we named base ...

Set the foreground color to #E6EEF7...

and click OK. Then fill the base layer with this color by pressing Alt-Backspace.

Step 3: Type Name of Site

Let's use our second piece of information, the site's name LearnWebDesignOnline.com. This is quite a long name with four words. To make the name more readable, we should uppercase the first letter of each word and apply a different color to some of the words. We will use two colors. Using more will make it too multi-colored. But which two colors? How about using a monochromatic color scheme such that the colors are based on different shades of a color (for example blue). We will use a blue that is darker than the base color and a blue that is lighter than the base color.

Since we are using only two colors for the four words, two of the words must have the same color. The two words "Web" and "Design" when put together gives a concrete concept of its own -- "web design". Surely these two words should be linked by using the same color. They are also the two most important words. Hence we use the darker blue color to give it prominence.

Use the Text tool set to 36pt Arial and to an initial color of #E6EEF7 (the same color as the background base color).

Obviously, we don't want the text color to be the same as the background color. So click on the color sample in the Text toolbar to bring up the color dialog and pick in the near vicinity of the initial color but in the direction of a darker shade. We picked #22648E.

Now we can start typing the text.

The words "Learn" and "Online.com" will be using the lighter blue. We picked #E1E9EF. Using the text tool we highlight the word "Learn" and set its color to #E1E9EF. Do the same for "Online.com".

The color #E1E9EF is so close to the background base color, that we can hardly see the text. But we will fix that in the next lesson by applying a gradient behind the text.

Go to Next Lesson.