Tutorial: Girly Web 2.0 Header

With this tutorial, we’ll go through the process of creating a very trendy header design that is all the rage in Web 2.0 styled websites.

We’ll cover creating trendy clouds, texturing, layer styles, glowing sparkles, trendy drips and even how to create a city and using funky fonts.

This tutorial will take a while to complete as it is fairly 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.

Step 1. Setting Up

Ready? Let’s begin. 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.

Step 2. Storm’s a’comin’

Creating trendy abstract clouds couldn’t get easier. 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 here. We’ll be building off these three circles to form our clouds.

To build on these 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.

We’re not done yet. We still need to add some color and texture to 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 to 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. 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. We’re done with our clouds.

Step 3. Sparkle Sparkle!

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

Now, 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 clouds.

Step 4. Bubbles

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. Select color #CCE4FF as your foreground color 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.

Now, once you have some funky-looking circles, we’ll 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.

Now, we have some blocky, square dips. 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!

Step 5. The Big 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.

If you’re feeling lazy, you can download and use my Cityscape brush.

Let’s start 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 we have to do now is carve it out, and it’s easier than you think. 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.

Let’s drag out city layer over to our header canvas and set it on top. 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, on the bottom right side. 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 as well.

Speaking of masking, we’ll need to remove some of the buildings that seem to 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.

Step 6. 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 ahead 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). Reduce your brush size to 800px rather than the 1600+ default and set your foreground color to white. Click towards the bottom of the canvas so that the bottom rays don’t clip outside the area, but leaves you enough space on top. See the image here to check what I did.

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

Step 7. Mad typo skillz, yo

Let’s add some typography. Start by download the free OzHandicraft font and installing it. You may need to restart Photoshop in order to get the font list updated. 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.

Let’s create another line of text. 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!