PSDRockstar.com

FITC 2010 Toronto
Cheap Digital Cameras and Lenses - Slr-Lens.co.uk
Add to Technorati Favorites  Delicious

Write a Photoshop Tutorial, Earn $50

Posted by Joe on Tuesday, August 4th, 2009

Are you a photoshop guru? Writing tutorials can be quite a challenge, and PSDRockstar.com is always on the lookout for talented photoshoppers

continue reading



 

Sky theme header design using photoshop

Posted by Narendra.s.v on Saturday, November 15th, 2008

 

In this Tutorial you will learn how to make a Sky Theme Header Design using photoshop. Below is the Preview

Preview:

Sky Theme Header Design.

Sky theme header design using photoshop

Step 1:

Let’s start out by creating a new file. I used a 1000×126 pixels canvas set at 72dpi, and I filled my background with white color. Now make a new layer then draw a light blue rectangle with #C2EBFF color shade and 1000 x 121 px dimensions.

Sky theme header design using photoshop

Step 2:

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Gradient Overlay and Pattern Overlay blending options to your light blue rectangle layer.

Sky theme header design using photoshop

Sky theme header design using photoshop

Sky theme header design using photoshop

Result:

Sky theme header design using photoshop

Step 3:

Now select the Horizontal Type Tool then set the font family to Arial, bold, 28 pt, strong and white color shade. In a new text layer type your website name on the left side of the header design.

Sky theme header design using photoshop

Step 4:

Under Layer Style(Layer > Layer Style) add a Stroke blending option to your website name text layer.

Sky theme header design using photoshop

Result:

Sky theme header design using photoshop

Step 5:

Now set the font family to Font Wingdings, 48 pt, crisp and #3EC1FF color shade. In a new text layer type ‘S’ on your header which should be a water drop shape.

Sky theme header design using photoshop

Step 6:

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Inner Glow and Gradient Overlay blending options to your water drop shape text layer.

Sky theme header design using photoshop

Sky theme header design using photoshop

Sky theme header design using photoshop

Result:

Sky theme header design using photoshop

Step 7:

In a new text layer add a smaller water drop shape by the first. Then under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to the smaller water drop text layer. Now set the text layer’s blending mode to Soft Light.

Sky theme header design using photoshop

Sky theme header design using photoshop

Result:

Sky theme header design using photoshop

Step 8:

Here we added more water drops on the name for eye candy.

Sky theme header design using photoshop

Step 9:

Now add the navigation interface on the right side of the header close to the name. In a new layer draw a long rectangle with #F4F4F4 color shade and 463 x 36 px dimensions.

Sky theme header design using photoshop

Step 10:

Under Layer Style(Layer > Layer Style) add a Drop Shadow and Stroke blending options to your gray rectangle layer.

Sky theme header design using photoshop

Sky theme header design using photoshop

Result:

Sky theme header design using photoshop

Step 11:

In a new layer draw a gray rectangle with #DADADA color shade and 61 x 36 px dimensions.

Sky theme header design using photoshop

Step 12:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Stroke blending options to your gray rectangle layer.

Sky theme header design using photoshop

Sky theme header design using photoshop

Sky theme header design using photoshop

Result:

Sky theme header design using photoshop

Step 13:

Select the Horizontal Type Tool then set the font family to Arial, regular, 13 pt, none and #00ACFF color shade. In a new text layer type out your navigation links

Sky theme header design using photoshop

Results:

Sky Theme Header Design.

Sky theme header design using photoshop

You can download the Sky theme header design tutorial original photoshop(PSD) file below:
Download Sky theme header design photoshop tutorial - Original PSD file
The use of this Original PSD file is limited and not for commercial use.

Enjoyed this photoshop tutorial then consider subscribing to our RSS feeds for more…

 
  • RSS
  • Digg
  • StumbleUpon
  • Windows
  • Delicious
  • Reddit
  • Technorati
  • Twitter
 

Posted in: Interface Design.

Tags: , , ,

4 Responses to “Sky theme header design using photoshop”

  1. Joe Cheray Says:

    Hey I tried this for paint shop pro instead of photoshop you can see my results over at http://flickr.com/photos/wildheart4vr/3038686543/

    I didn’t put in the navigation buttons yet tho. Tell me what you think I am interested in hearing your thoughts.

  2. Narendra.s.v Says:

    @Joe Cheray that is not bad, nice blend :)

  3. Dave Says:

    Thanks.

    Joe- Just awful.

  4. » Tutorial: Sleek Blog Header Design using photoshop Says:

    [...] Sky theme header design using photoshop [...]

Leave a Reply