Preview:

Sleek Header Design.

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.

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.

Result:

Step 3:

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

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.

Result:

Step 5:

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

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.

Step 7:

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

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.

Result:

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.

Results:

Sleek Header Design.

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

More Tutorial Resources:

• Tutorial: Create a realistic chalkboard using photoshop
• Futuristic Button Design tutorial using photoshop
• ‘Broken Pieces’ photo effect tutorial using Photoshop
• Sky theme header design using photoshop
• Futuristic Web Logo Design tutorial using photoshop

Preview:

Chalkboard Design.

Step 1:

Let’s start out by creating a new file. I used a 600×400 pixels canvas set at 72dpi, and I filled my background with black color. Now make a new layer then draw a lighter brown rectangle with #451008 color shade and 346 x 179 px dimensions.

Step 2:

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Inner Glow, Satin and Pattern Overlay blending options to your lighter brown rectangle layer as below.

Result:
Now you will have something like this.

Step 3:

In a new layer draw a large dark rectangle with #0A0607 color shade and 328 x 163 px dimensions.

Step 4:

Under Layer Style(Layer > Layer Style) add an Outer Glow, Inner Glow and Gradient Overlay blending options to your dark rectangle layer from step three.

Result:
Now you have glass effect to your board

Step 5:

Now create a new layer then draw a smaller black rectangle with 289 x 123 px dimensions on the center of the chalkboard design.

Step 6:

Under Layer Style(Layer > Layer Style) add an Inner Glow and Pattern Overlay blending options to your smaller black rectangle layer. Then set the layer’s blending mode to Lighten at 93% opacity level.

Result:

Step 7:

Create a new layer, with your rounded rectangle tool draw a small white rounded rectangle with 16 x 3 px dimensions just below the chalkboard design – this will be the chalk.

Step 8:

Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your small white rounded rectangle layer.

Result:

Step 9:

Now if you want to add more chalk with different look just duplicate the first chalk design then use the eraser tool to make it unique.

Step 10:

In a new text layer type your name or whatever text you want to add on the chalkboard.

Step 11:

Under Layer Style(Layer > Layer Style) add an Inner Glow blending option to your text layer.

Result:

Results:

Here is the final result of Chalkboard Design.

Preview:

Futuristic Button Design.

Step 1:

Let’s start out by creating a new file. I used a 450×350 pixels canvas set at 72dpi, and I filled my background with black color. Now make a new layer set and name it ‘Button’. Then in a new layer draw a large circle with #003637 color shade and 194 x 194 px dimensions.

Step 2:

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Inner Glow and Gradient Overlay blending options to your dark green circle layer.

Result:

Step 3:

In a new layer draw a large white circle with 147 x 147 px dimensions on the center of the current button design.

Step 4:

Under Layer Style(Layer > Layer Style) add an Inner Glow, Gradient Overlay and Stroke blending options to your large white circle layer. Then set the layer’s blending mode to Darken.

Result:

Step 5:

Duplicate your ‘Button’ layer set then go to Layer > Merge Layer Set, this should turn the duplicated layer set into a regular layer. Now re size the circle design layer by 70% through Edit > Transform > Scale and position it on the center of the logo design.

Step 6:

Now duplicate the circle design layer from the last step and re size it again, position it on the center of your design.

Step 7:

Place both circle design layers from step five and six inside the original ‘Button’ layer set. Then highlight that layer set on the Layers palette and go to Layer > Merge Layer Set. You should now have one layer with a unique circle design.

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Inner Glow and Gradient Overlay blending options to your unique circle design layer.

Results:

So here is the final result of Futuristic Button Design using photoshop

You can download the Sky theme header design tutorial original photoshop(PSD) file below:

The use of this Original PSD file is limited and not for commercial use.

Hopefully this button tutorial helped you make the tweaks on your website to make it even better. And if you don’t have a website, then find some good hosting and get started!

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

Preview:

Sky Theme Header Design.

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.

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.

Result:

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.

Step 4:

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

Result:

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.

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.

Result:

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.

Result:

Step 8:

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

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.

Step 10:

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

Result:

Step 11:

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

Step 12:

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

Result:

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

Results:

Sky Theme Header Design.

You can download the Sky theme header design tutorial original photoshop(PSD) file below:

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…