PSDRockstar.com

Add to Technorati Favorites  Delicious

Write for PSDRockstar.com

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

Download 30 sets of free Social Bookmarking Icons

Posted by Joe on Monday, December 15th, 2008

This free icon sets collection contains all most all popular social media icons like del.icio.us, Digg, Mixx, DesignBump, StumbleUpon, Reddit, Developer Zone, DesignFloat, Technorati, Twitter and RSS feed. The icons which you see below are some real creative and most beautiful, ranging from web 2.0 to hand drawn designs. Although initially intended to be used […]

continue reading



}

Sky theme header design using photoshop

Posted by Joe 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…

Posted in: Interface Design.

Tags: , , ,

8 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 […]

  5. Rosenrod Says:

    Thank you – I’ll be sure to check back later for more of your posts.

  6. Uncut Videos Says:

    nice article. i admire your writing abilities. you write and do your research well. this is actually my first time to visit your site and i will be following your from now on. thanks!

  7. spiele book of ra Says:

    Es exisiteren zwei Novoline Online Versionen

  8. suman pokhriyal(sona) Says:

    thanks.

    its too good :)

Leave a Reply