TutsArena

Quick and Easy Aqua-Themed Blog Header

by TutsArena - Tutorials

In this tutorial we will show you how to create a stunning aqua-styled blog header in Photoshop using a few simple techniques and a good eye. It’s very a very simple technique but with a really cool end result. It’s also very easy to resize horizontally to fit the width of your blog.

Here’s what we’ll be making today:

I’ve always been a fan of simplistic, clean and crisp designs. In this tutorial, we’ll show you how to create the faint water like background and show you the effects we used on the text. As always, the PSD will be available for you to download at the end of this tutorial so be sure to grab that and play around with it!

Step One: Creating the main background

Create a new document, sized 1000×250 px.

Now create a new Layer (Layer > New > Layer or [Shift] + [Ctrl] + [N]) and name it “Main BG“.

Select the Gradient Tool (G) and set your foreground color to #002c59 and your background color to #2d9ed3.  Be sure to set the gradient to a Radial Gradient.

Now, from the center of your document, click and drag your gradient to either border and release.  You now have something that looks like this:

Step Two: The aqua effect

This part is easy, really.  Create a new layer and name it whatever you want, for the sake of this tutorial we named ours “Clouds”.  Hit the [D] key on your keypad and this will reset your color swatch back to the default #FFFFFF and #000000 (black and white).  With your new layer selected, go to Filter > Render > Clouds.  This will give you some nice clouds to work with, but it’s not much by itself.  Once we’ve got the clouds we’re going to go to Filter > Blur > Radial Blur and use the default settings.  Set this layer’s Blending Mode to Soft Light.

Sweet so now we need to give it a watery feeling.  This part is really, really easy.  With your “Clouds” layer selected, go to Filter > Distort > Glass and use the default settings.  It’s nothing super-realistic, but you get the idea and it’s a pretty neat effect.

Step Three: Adding the text

This step mainly focuses on the Layer Styles of the text layers, so just pick a font you’d like to use (bigger, thicker fonts work best) and type out the name of your blog.

For this tutorial, we used the font “Nevis” which can be downloaded from our 15+ Excellent Free Fonts post.

Now for the Layer Styles:
Drop Shadow

Inner Shadow

Inner Glow

Bevel

Satin

Stroke

Now your blog header should be similar to ours:

Step Four: Fading the edges

If you’re going to use this on a blog with no sidebars, you’ll want to fade the edges so you can make the background image tileable.  To do this, simply add a Layer Mask, then take your Gradient Tool (G), set it back to a Linear Gradient and drag it from the edges of your document toward the inside, try to blend just enough to create a tileable background.

That’s it!

You’re done!  If it’s not sparkly enough for you, just add a few brushes or some other effects of your choice in there.  We hope you enjoyed reading this tutorial and that you were able to follow along.  Don’t forget to download the PSD file to see our final result.

Thanks for reading!

Check out these other tutorials we’ve written:

• Create A Clean and Effective Product Layout
• Create A Stylish Portfolio Layout
• Create A Clean And Modern Portfolio Layout
• Easily Create An Apple-Inspired Navigation
• Create A Trendy Letterpress Header