Illustrated designs - http://www.illustrateddesigns.com
Web Header for Ragnarok Community
http://www.illustrateddesigns.com/articles/2592/1/Web-Header-for-Ragnarok-Community/Page1.html
By Art-D !
Published on 01/12/2007
 
Create Web Header for Ragnarok Community in Photoshop CS Web Header for Ragnarok Community
Here you'll see the basics of creating this nice web header.

Web Header for Ragnarok Community - part 1
Open a new file with 770x300px and 72 dpi. The color is 3B6EA5.

Create Web Header for Ragnarok Community in Photoshop CS

On the web-site dedicated to the Ragnarok you can find the next fragment, cut it and place it the way it is shown below.

Create Web Header for Ragnarok Community in Photoshop CS

Then we must apply this tool to create the lowest layer reserved for the menu’s site’s button.

Create Web Header for Ragnarok Community in Photoshop CS

Blending Options-Gradient Overlay

Create Web Header for Ragnarok Community in Photoshop CS

Gradient’s parameters:

Create Web Header for Ragnarok Community in Photoshop CS

Continue creating the button with the next instrument

Create Web Header for Ragnarok Community in Photoshop CS

Web Header for Ragnarok Community - part 2
Blending Options-Outer Glow

Create Web Header for Ragnarok Community in Photoshop CS

Blending Options-Gradient Overlay

Create Web Header for Ragnarok Community in Photoshop CS

Gradient’s parameters:

Create Web Header for Ragnarok Community in Photoshop CS

Blending Options-Stroke

Create Web Header for Ragnarok Community in Photoshop CS

Gradient’s parameters:

Create Web Header for Ragnarok Community in Photoshop CS

Copy the new made layer and make use of the Free Transform selection to minimize it a little and change its parameters.

Create Web Header for Ragnarok Community in Photoshop CS

Web Header for Ragnarok Community - part 3
Blending Options-Gradient Overlay

Create Web Header for Ragnarok Community in Photoshop CS

Gradient’s parameters:

Create Web Header for Ragnarok Community in Photoshop CS

Blending Options-Stroke

Create Web Header for Ragnarok Community in Photoshop CS

Using the next tool inside the new created one create one more, colored in DAF5FF.

Create Web Header for Ragnarok Community in Photoshop CS

Copy the new made layer and make use again of the Free Transform selection to minimize it a little and to apply the parameters from below.

Create Web Header for Ragnarok Community in Photoshop CS

Blending Options-Inner Glow

Create Web Header for Ragnarok Community in Photoshop CS

Web Header for Ragnarok Community - part 4
Blending Options-Gradient Overlay

Create Web Header for Ragnarok Community in Photoshop CS

Gradient’s parameters:

Create Web Header for Ragnarok Community in Photoshop CS

Blending Options-Stroke

Create Web Header for Ragnarok Community in Photoshop CS

Gradient’s parameters:

Create Web Header for Ragnarok Community in Photoshop CS

For making the work easier we have to combine now all the layers containing the button in a group. Copy this new made group 5 times and place them the way it is demonstrated next step.

Create Web Header for Ragnarok Community in Photoshop CS

Apply the following instrument to create a vertical dividing line.

Create Web Header for Ragnarok Community in Photoshop CS

Create Web Header for Ragnarok Community in Photoshop CS

Web Header for Ragnarok Community - part 5
Fill 40% on the layers.
Copy the layer with a vertical line 4 times the way it is indicated below.

Create Web Header for Ragnarok Community in Photoshop CS

Using the shown tool on the button’s top draw a horizontal line.

Create Web Header for Ragnarok Community in Photoshop CS

Blending Options-Gradient Overlay

Create Web Header for Ragnarok Community in Photoshop CS

Gradient’s parameters:

Create Web Header for Ragnarok Community in Photoshop CS

Make a copy of the new created layer and apply again the Free Transform selection to make it narrower on vertical. Place it the same way as you see below.

Create Web Header for Ragnarok Community in Photoshop CS

Select the next instrument to create the lowest layer for the site’s name

Create Web Header for Ragnarok Community in Photoshop CS

Web Header for Ragnarok Community - part 6
Blending Options-Gradient Overlay

Create Web Header for Ragnarok Community in Photoshop CS

Gradient’s parameters:

Create Web Header for Ragnarok Community in Photoshop CS

Blending Options-Stroke

Create Web Header for Ragnarok Community in Photoshop CS

Gradient’s parameters:

Create Web Header for Ragnarok Community in Photoshop CS

Make a copy of the new made layer. Make use of the Free Transform option to minimize it a little and to change its parameters. It will be colored in FF0000.

Create Web Header for Ragnarok Community in Photoshop CS

Blending Options-Inner Glow

Create Web Header for Ragnarok Community in Photoshop CS

Web Header for Ragnarok Community - part 7
Blending Options-Bevel and Emboss

Create Web Header for Ragnarok Community in Photoshop CS

Blending Options-Stroke

Create Web Header for Ragnarok Community in Photoshop CS

Introduce one word of the site’s name.

Create Web Header for Ragnarok Community in Photoshop CS

Create Web Header for Ragnarok Community in Photoshop CS

On the same Ragnarok web-site you may find an inscription like in the picture below. Place it upper than the already written word.

Create Web Header for Ragnarok Community in Photoshop CS

Take the next tool to create a flare on the site’s logotype.

Create Web Header for Ragnarok Community in Photoshop CS

Create Web Header for Ragnarok Community in Photoshop CS

Web Header for Ragnarok Community - part 8
Fill 0% on the layers.
Blending Options-Gradient Overlay

Create Web Header for Ragnarok Community in Photoshop CS

Gradient’s parameters:

Create Web Header for Ragnarok Community in Photoshop CS

Finally we must insert the names for the site’s menu’s buttons.

Create Web Header for Ragnarok Community in Photoshop CS

Blending Options-Drop Shadow

Create Web Header for Ragnarok Community in Photoshop CS

Create Web Header for Ragnarok Community in Photoshop CS

The final result!

View ful size here.