Making a header for a site in Photoshop

In this tutorial, I will show you the process that I used to develop this really cool, abstract header style for a site.

Personally, I see a tendency to increase attention to the headlines for the site / blog.

During the lesson, we will practice using the Pen Tool, various options for adjusting the image (adjustment), the free transformation tool, blending styles, and filters. I hope you enjoy the lesson!

Here is a preview of my final results:

So, let’s begin!

Step 1. Create a document of size 1200 x 600 pixels (Please note that you can specify any size that you think is suitable for the design of your site, this size can only be used for practical purposes). Fill the background color with black.

Create a new layer. Radial Gradient Fill and use Gradient (Gradient Tool) (G), select the option Radial fill (Radial Fill), and fill the newly created layer as shown below: (You can use any color you want).

Then create a new layer and name it Angular Gradient Fill above layer Radial Gradient Fill, set the blending mode overlap (overlay)

Use the tool Rectangular area (M) (Rectangular Marquee Tool) to select the center of the layer, use again Gradient ( Gradient Tool) (Set foreground color to white with transparent background), this time we select the option Angular gradient (Angle Gradient), fill the selection as shown below:

Step 2. Copy layer Radial Gradient Fill once and select the blending option of the duplicated layer Overlap (Overlay) go to Edit> Transform> Rotate (Edit> Transform> Flip Horizontal) horizontally and rotate the layer horizontally. Merge the two layers together. Set the blending option (blending option) Overlap (overlay) after merging.

Apply Layer Style – Shadow (Drop Shadow) to the merge layer, as shown below:

Then lower the opacity for the layer Radial Gradient Fill up to 60% and you will have the following effect:

Then create a new layer between the previous two layers, name it Center lighting. Choose a big soft round brush (600px in my case), select the foreground color to be white, and draw a single point in the center of the layer:

Set the blending mode Overlap (Overlay) and you get the following effect:

Step 3. I decided to add a bit of depth and a bit of 3D to this image. So select a layer Angle Fillgradient, press ctrl + t and use Free transformation (free transformation), select Perspective (perspective) and transform the layer as shown below: (reduce the width for the upper border of the frame)

Here is the result after the run layer:

Step 4. Create a new layer. Sparkling line, use the tool Pen (Pen Tool) to create a job, as shown below:

Then right-click and select Contour Stroke (Stroke Path) and select Brush (brush) (before that, choose a soft round brush of small diameter). Make sure you have the option enabled. Simulate pressure.

Here’s what it should look like now:

Step 5. Duplicate layer Sparkling line several times, use the function Free transformation (Free Transformation) to rotate, distort, resize the duplicated layer and mix the lines together:

Merge these duplicated layers together and duplicate the resulting layer several times, use again Free transformation (free transformation) to add a few more lines to the image:

Duplicate the merged layer, apply a filter to it Gaussian blur (Gaussian Blur) blur radius 4 pix.

Now your drawing should look like this:

Step 6. Create a new layer, name it Shining point, load selection for layer Sparkling line, then right click and select Form a work path (Make Work Path):

Select tolerance for the work path 0.5 pix. Now select a soft round brush with a radius of 3 pixels with the following dynamic brush settings:

Also make sure the box is checked Smoothing (Smoothing).
On the layer Shining point, stroke the outline with this brush and you will see the following effect:

Step 7. Now we can add some cloud / smoke at the base of these lines. To do this, we simply create a new layer and use the Tool. Lasso (Lasso Tool) with feathering 40 pixels to select the bottom of these bright lines, and use Filter> Rendering> Clouds, create a cloud (choose foreground color white, back – black)

You may notice that I also use the Blend filter (Filter> Render> Lens Flare) with the following settings to highlight part of the cloud center:

Select blend mode Overlap (overlay) and you get this effect:

Finally, we put the site name and navigation on the image:

Here we come to the end of the lesson! Of course, you can not stop there, adding some other effects, filters, change color, etc.

Here is my final image for this tutorial:

Alternative versions:

Hope you enjoyed the tutorial!

Author: psdvault

Like this post? Please share to your friends: