In this tutorial you will learn how to make a grate banner with navigation. This time, it will take a while longer (around 10 minutes) so I recommend that you get comfortable and read this first, then apply, because some of the steps done are a bit harder at the beginning. This is a medium level tutorial, because it requires a bit more knowledge about the layer pallet and about the vector tools, but don’t worry if you are a beginner because I will explain everything in detail.
The header has two parts: The title part, where the title and the logo should go, and the navigation part, where the navigation buttons go.

I divided the tutorial into two main parts:

In the first part of this tutorial we will create the main area (where the title goes).

In the second part of this tutorial we will create the navigation area (where the buttons go).

Let’s get started!

Part 1: The Banner Title Area

Step 1.

Create a new document with 800x170(175) pixels. Crate a new layer on top of the background and name it Header. This layer will contain the main part of the banner. Create a new group(CTRL/Command+G) with the Header layer selected. This is just for organizational proposes.


Step 2.

Grab the Rounded Rectangle Tool (Under the Pen Tool Menu) and go to the Tool Control Bar that is located under the application main menu (File, Edit, etc) and make sure that the “paths” option is selected.



Whit the header layer selected, draw a rectangle similar to this one.



Right-click it and chose fill. Fill it whit whatever you want. Just make sure it’s filled with something. I used black (000000).





Ctrl/Command + Click the Header layer, then pick up the Gradient tool and draw from top to bottom. The colors that I used are “447b30” (bottom - background) and “66bb29” (top - foreground).



My outcome:



Add the following effects on the Header Layer (Layer>Layer Style):





My outcome:



Step 3.

Create a new layer on top of the Header Layer, name it glass and Ctrl/Command + Click the Header Layer to select its content. Now with the Rectangular Marquee Tool (M) hold Alt and draw a selection over the bottom of the banner, similar to this:



Fill the selection with white, on the Glass Layer. Then set the layers opacity to 15-20% (Layer>Layer Style>Blending Options, and the Opacity slide, or Opacity Slide from Layer Pallet). Do note that the glass layer is in Group 1.



My outcome:



Step 4.

It’s time to add the title. Using the Type Tool, write the title of the website/blog/whatever. I’ve set the size of the font to 30 pt.



Add the following outer glow effects on the Font Layer (Layer>Layer Style>Outer Glow):



My outcome:



The first part is done. We have the title and the background of the banner and now it is time to work on the navigation bar. On the next part we’ll talk about that.
Go to PART 2.

Labels: Step-by-step, Tutorials, Webdesign