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



}

Tutorial: Sleek Blog Header Design using photoshop

Posted by Joe on Wednesday, December 31st, 2008

 

In this Tutorial you will learn how to make a Sleek Blog Header Design using photoshop. Checkout the preview below:

Preview:

Sleek Header Design.

Tutorial: Sleek Header Design using photoshop

Step 1:

Let’s start out by creating a new file. I used a 1000×200 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.

Tutorial: Sleek Blog Header Design using photoshop

Step 2:

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

Tutorial: Sleek Blog Header Design using photoshop
Tutorial: Sleek Blog Header Design using photoshop
Tutorial: Sleek Blog Header Design using photoshop

Result:

Tutorial: Sleek Blog Header Design using photoshop

Step 3:

Create a new layer. Then draw a 1 px line with #5B5B5B color shade across the edge of the top gray rectangle.

Tutorial: Sleek Blog Header Design using photoshop

Step 4:

In a new layer draw a long dark red rectangle with #930000 color shade and 540 x 23 px dimensions right at the bottom of your header design. Then under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options.

Tutorial: Sleek Blog Header Design using photoshop
Tutorial: Sleek Blog Header Design using photoshop
Tutorial: Sleek Blog Header Design using photoshop

Result:

Tutorial: Sleek Blog Header Design using photoshop

Step 5:

Create another layer then draw a 1px line with #9F1C1C color shade on the top edge of your dark red rectangle design.

Tutorial: Sleek Blog Header Design using photoshop

Step 6:

Select the Horizontal Type Tool then set the font family to Arial, bold, 13 pt, none and white color shade. In a new text layer type out your navigation links on the dark red rectangle design. Make sure you leave spaces between each link and add a vertical bar with #272727 color shade.
Tutorial: Sleek Blog Header Design using photoshop

Step 7:

Create a new layer and draw a long black rectangle with 463 x 21 px dimensions.

Tutorial: Sleek Blog Header Design using photoshop

Step 8:

Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your long black rectangle layer. Then set the layer’s blending mode to Lighten at 58% opacity.

Tutorial: Sleek Blog Header Design using photoshop
Tutorial: Sleek Blog Header Design using photoshop

Result:
Tutorial: Sleek Blog Header Design using photoshop

Step 9:

Select the Horizontal Type Tool then set the font family to Arial, bold, 32 pt, strong and white color shade. In a new text layer type your website name on the empty header space then use a smaller font for your slogan.

Tutorial: Sleek Blog Header Design using photoshop

Results:

Sleek Header Design.

Tutorial: Sleek Blog Header Design using photoshop

Download Sleek Blog Header Design photoshop tutorial - Original PSD file

If you enjoyed this photoshop tutorial then please consider subscribing to our RSS feeds for more…

More Tutorial Resources:

Posted in: Interface Design.

Tags: , , , , ,

5 Responses to “Tutorial: Sleek Blog Header Design using photoshop”

  1. » Tutorial: Convert a real photograph into comic book photograph Says:

    […] Tutorial: Sleek Blog Header Design using photoshop […]

  2. Mohammad Meghyassi Says:

    hi,
    its great . Your turorial is very usefull .I confused with the first header you provided here in step one :Let’s start out by creating a new file. I used a 1000×200 pixels canvas set at 72dpi, and I filled my background with white color.
    but the background is gray .
    step 7- Create a new layer and draw a long black rectangle with 463 x 21 px dimensions.
    thanks a great .
    with regards
    m.meghyassi
    official english-farsi translator

  3. shd Says:

    thank u for ur help to create fine banner

    by………
    Shad ahmad

  4. Tutorial: Convert a real photograph into comic book photograph | X Design Blog Says:

    […] Tutorial: Sleek Blog Header Design using photoshop […]

  5. homeappliace Says:

    info is very helpful, happy to be visiting here and continue working:)

Leave a Reply