Girly Web 2.0 Header Tutorial

Create a clean, trendy and stylish header

In this tutorial, we’ll create a trendy header design that’s very clean, trendy and sleek with no gimmicky tricks.

We’ll be creating stylized clouds, add some texture, apply layer styles, create sparkle effects, design drip patterns and even a city backdrop and how to use fonts.

This tutorial will take a while to complete as it is a bit long and detailed. It is also meant for Photoshop users who are already fairly knowledgeable with the interface, loading patterns, and using marquees. If you know the basics, you should do just fine. If you have any questions, just leave a comment and I’ll do my best to clear it up as much as I can.

There’s a storm brewing

We’ll start by creating a 800×500 pixel canvas and fill the background in black. Create a new layer and rename it to Clouds. As the name suggests, we’ll be creating abstract clouds on this layer.

Creating trendy abstract clouds couldn’t get any easier than this. We’ll start by creating three “master” circles using the Elliptical Marquee tool, approximately 200×200 pixels in size. Place them in three arbitrary places in your canvas as seen above. We’ll be working with these three circles to form our clouds.

Simply keep adding smaller circles around the ones you’ve placed down earlier until it resembles something shown here. Then, place some more off to the sides to create a clean splatter effect. There you have it, clean, trendy clouds. There’s no real magic to it. If you’re dissatisfied with what you have, then start over. It shouldn’t take you more than five minutes to get something that’s acceptable.

We’re not done yet. We still need to add some color and texture on these bad boys. Head into your cloud layer’s styles palette by right-click the layer and selecting Blending Options. This would be a good time for you to download and install the magnificent Web 2.0 Pattern Collection by ademmm.

Back in the layer styles palette, click on the Pattern Overlay option and load up the patterns you’ve downloaded. Scroll down until you select the pattern I’ve highlighted here. Sorry, the patterns weren’t assigned names so you’ll need to browse through thumbnails. It’s near the bottom. You should end up with a patterned, grayscale cloud as seen here. Now let’s add some color.

Click on the Color Overlay option, select the Darken blending mode and choose a light pink color; I selected #EAB3B3. Apply your changes and we’re done with our clouds.

Sparkle sparkle

Let’s add some sparkles around those clouds. Everyone like sparkles, right? …right? Anyway, create a new layer and move it under your Clouds layer. Rename that layer it to Sparkles. Select the Brush tool and choose the 14 pixel star brush from the default set.

Let’s make this easier on ourselves and create a customized brush. From the top menu, head into Windows and select Brushes to open the Brush options and select the options below.

You can play around with the brush to get an idea of what this does. We’ve essentially set the brush to paint at random intervals and sizes. This creates a nice glitter effect. Go around and paint an outline of the clouds in sparkles, then head into the layer’s styles. In the layer styles, we’ll click on Outer Glow and set the color to white. Set the Blend Mode to Normal and hit OK.

You should now have something similar to the image shown here; soft sparkles surrounding your badass clouds.

The bubbly stuff

Let’s add some of those trendy bubbles in there for good measure. Create a new layer and leave it on top of the others. Rename it to Bubbles and select the Circular Marquee tool. Set your foreground color to #CCE4FF and create several circles of various sizes. Fill them in with the light blue you’ve selected.

Now we repeat the same process except this time, we make smaller circles inside the light blue ones and fill them in #3DACFF, a darker shade of blue. Once you’re done, repeat with color #F67CFF and finally, another round of #CCE4FF.

If you get confused during the process, you can refer to my circles here to give you an idea of what they should look like. You can use preset marquee sizes to make things easier for yourself. Simply go down in size by 20 to 40 pixels at every pass.

Once you have some funky-looking circles, we can go ahead and create some drips. Grab the Rectangular Marquee tool and set a preset size of 10×120 pixels. Now move your selection around the light blue (#CCE4FF) outer ring and create some blocky drips. I created three of that size, two 6×90 and two 4×60. I repeated the same process for one pink and one dark blue ring.

We have some blocky, square dips so let’s round out those corners. This is done by using the Circular Marquee tool preset to the width of the drips. For example, 10×120 drips should be rounded out using a 10×10 marquee. Drag that marquee to the edge of the drip making sure that the edges align as shown here. Fill that selection with the drip’s color and you’re done. Once you’re done with all of them, move on to the next step!

In the city

We’re getting there, but our header needs more detail. Let’s throw in a city for good measure, since this is trendy, modern design. Building are much easier to design than you probably expect.

Create a new canvas; let’s say 700×500, filled with white. Using the rectangular marquee tool, create some black rectangles as seen here. These will be our building’s outlines.

We now have a rough outline of what our city looks like. All that’s left to do is to carve it out. Using the marquee tool set at an angle, lop the top off of a few buildings to create a slope. Use different angles on different buildings to avoid them looking too similar to each other. On that principle, add and remove edges and drop in 1 or 2 pixel-wide antennas. That’s all it takes. Once you get the hang of it, you’ll be able to create a whole city in minutes.

Drag or duplicate the city layer onto the header’s canvas and set it on top of the rest. If you haven’t renamed your layer, now’s the time to do it. I just called it City. Drag the City layer over your clouds and move it on the bottom right. Head into the layer’s styles palette and choose the Gradient Overlay. From here, create a new gradient that goes from black (#000000) to a dark, flesh-toned color (#A69191). Click on OK to apply the color. You’ll notice the bottom of the city now blends in to the already black background color. Keep in mind that we could have achieved the same effect by masking the bottom and using a black and white gradient as well.

Speaking of masking, we’ll need to remove some of the buildings that clip on the left side. If this doesn’t apply to your situation, simply move on to the next paragraph. In order to remove the unsightly offices, click on your layer to activate it and press the Add Layer Mask button. Grab the Rectangular Marquee tool and remove the buildings by filling your selection in black. Once you’re done, move on to the next step.

And that’s when the sun exploded

What do all good Web 2.0 websites have? That’s right, a light burst. I’ll use Ann Frost’s Vector Beams brush. Once you’ve downloaded and loaded the brush, you can go and create a new layer. Rename it to Light Burst and place it right above the background layer. Load up the second brush in the set (it points towards the top) and reduce your brush size to 800px rather than the 1600+ default. Set your foreground color to white and click around the bottom of the canvas, so that the bottom rays don’t clip outside the area, leaving you just enough space on top. See the image to check what I did.

We’ll need to remove some of that excess light. Click on the Add layer Mask button. Reset your brushes to the default set and select the Airbrush Soft Round 200px brush, choosing black as foreground color. Brush the outer edge of the beam to create a soft, smooth fade that doesn’t hit our canvas’ boundaries. Once that’s done, simply reduce the layer’s opacity to 30%. Compare you results to mine and tweak if necessary.

Mad typo skillz

Let’s add some typography. Start by downloading the free OzHandicraft font and installing it. You may need to restart Photoshop in order to get the font list updated, depending on the version you’re operating. Once you have it ready, select the Horizontal Type tool and let’s put Steelfrog’s in this entry at 124px size in white.

Head into the Window menu and select Character. Highlight your text and reduce the tracking to -20 to bring the characters closer together. Now, let’s curve our text a little bit. Click on the Create warped text button on top to enter the Warp Text panel. If it alredy isn’t selected, select the Arc warp from the pulldown menu and enter 20% in the Bend slider. Click on OK.

Now let’s style up our text. Head into your text layer’s styles and apply the layer styles shown below. The pattern texture can be found in the same texture pack we’ve downloaded in step 2. You can compare your result with the one shown here.

Create another line of text but this time, set the font size to 54px and the warp arc’s bend to -15% so that it arcs slightly upwards. Apply the layer styles seen below. Once you’re done, simply move the text under the title, to create a sub-title.

We’re done! You can move your elements around to fill in the gaps if you’d like and play with the colors. Enjoy and be sure to post a comment if you have any questions.