Header in web 2.0 style

The design of web 2.0 is not as complicated as it seems. In this photoshop tutorial we will learn how to create a very stylish, abstract header for a site that can be used on women’s sites.

This lesson will take a lot of time because it has many steps. It is also aimed at any experienced Photoshop users. But if you know the basics, then you have to cope. If something is not clear, leave comments, and I will try to answer them as clearly as I can.

Materials for the lesson:


The rays

Step 1 – Settings

Ready? Good. Go. Let’s start by creating a new document 800×500 pixels. Fill the canvas with black color and temporarily disable its visibility. Create a new layer and name it clouds. As the name implies, on this layer we will create an abstract cloud.

Step 2 – Cloud

Creating a trendy cloud is very easy. Choose a round brush with a size of 200×200 pixels with 100% stiffness. Draw three “main” black circles, as shown in the figure.

Next, simply reducing the size of the brush, draw our cloud. It should turn out like this:

Now it doesn’t hurt to add a bit of color and texture to the cloud.
Download a set of palettes you can take in the archive.

Go to the layer style settings (Blending Options). Choosing a style Texture overlay (Pattern Overlay) and add a palette as shown:

Next, select the option overlay color (Color Overlay), blending mode Darken (Replacing dark) color #EAB3B3.

Step 3 – Flicker

Let’s add a little twinkling around our cloud. Create a new layer, place it under the clouds. Select the brush tool star 14 pixels from the standard set, which you can see in the picture.

Now change this brush a bit. Press F5. Set for her the following options:

Now run this brush around the cloud. After that, go to the style settings of this layer and click on External glow (outer glow) and choose white color; blend mode is normal. Now you should have something like this. The gentle shimmer surrounding your cloud.

Step 4 – Glamor Bubbles

Now add more glamor.
Create a new layer. Choose a round selection tool , choose color #CCE4FF, and create several circles of different diameters.

Now inside these circles we draw circles a little smaller of such a color.3DACFF. Now we do the same with this colorF67CFF. And finally #CCE4FF.

Here we got funny bubbles. True, something is missing. Add smudges. You can do this with the Rectangular Marquee tool (rectangular selection). Just draw rectangles of size 10×120, 6×90, 4×60 pixels. Then using round selection size 10×10, 6×6 and 4×4 pixels round the smudges and fill with paint. Here’s what it looks like:

Here is what I got as a result:

Step 5 – Megapolis

Now let’s add the image of a megapolis to our header.
You can apply ready-made brushes with the silhouettes of cities. Look here and here.

You can draw skyscrapers yourself.
Let’s create a new document 700×500 pixels with a white background. Select the rectangular selection tool and draw black rectangles resembling tall buildings. A little patience and attention to detail, and you will have something like this, and maybe better:

Now move the layer with the city on the canvas with our glamorous cloud and place it above the other layers.

Go to the layer styles and select the gradient blending option from black (# 000000) to dark pink (# A69191).

We erase several buildings that close the main composition. You can do this either with the eraser tool. And you can add a layer mask (add layer mask).

Step 6 – When the sun exploded

For the next step, we need the Rays of the Sun brush. You can download it here.

Have you uploaded the brush? Create a new layer and place it under our cloud. Select the second brush from the downloaded set and change its size to 800 pixels. Select the white color of the brush. Set the brush transparency to thirty%. We do this:

Now we take a soft eraser with a size of 200 pixels and wipe the rays of the sun a little.

It turned out like this:

Step 7 – Header

Add an interesting caption. Find the right font.
If you like the font used in this tutorial, you can download it here.

You may need to restart Photoshop to see the new font in the list. When everything is ready, select the horizontal text tool (Horizontal Type) and write the title with a size of 124 pixels in white (#ffffff). Now a little distort our text. Install the following settings:

Click on the button to create distorted text on the settings panel. Create the following distortion parameters:

Here is what we have:

Go to the layer style settings (blending options), and set the following parameters:


External glow:

Color overlay:

Texture Overlay:

That’s what happened with me:

By the same principle we create a subtitle. Text size can be taken as 54 pixels. I used these settings for the subtitle:

A little improvisation and we get a great glam hat for the site.

You can change the position of the labels, as you like.

That’s all! I deliberately did not dwell on trifles, since at the beginning of the article it was stated that this lesson was for the trained Photoshop masters. I think I did the main thing – I submitted the idea, and the rest is your work! Improvise, and I’m sure you’ll get better! See you soon!

Author: steelfrog

Like this post? Please share to your friends: