Separator Line (Exclusive Tutorial)

It is often necessary to add separating lines when creating a layout. They can be of different types but all of them have one function: to separate one block of information from another. In this tutorial I'm going to show you how to create an unusual separating Line.

Open Photoshop and create a new document with a 400x200 px size and the background color #5a5a5a.

Create a new layer and make a selection in the middle of the canvas, size 250x300px.

Fill in the selection black. Next, create a new layer and move the selection for 1 px down. Fill it with white and deselect.

We now have the simplest separating line. But we will do more. Apply the Blending Mode to both layers with Soft Light lines.

Create a new layer, and make the selection with a 300x25px size above the line.

Choose the Linear Gradient tool (Foreground to Transparent) with the following settings:

Make the Foreground color white, and run several gradients bottom-up, beginning to draw from below and beyond the bounds of the selection and finishing in various parts of the selection. After that, Deselect. Now the upper part of the separating line is ready.

Next create a new layer and make the selection similarly to the previous step, but this time do it under the line. Set the Foreground color as black and run several gradients top-down with the same settings as in previous step. Don't forget to deselect.

Now select all the layers with the lines and gradients and merge them into one. Select an area with 300x62px size (over the line's full length and gradients' width).

Invert the selection and apply the Feather with a parameter of 13px. Click Del several times and Deselect. That's it, enjoy this unique separating line.

Note: Inspired by TimSliva's video tutorial.