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.
We now have the simplest separating line. But we will do more. Apply the Blending Mode to both layers with Soft Light lines.
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.
SHARE THIS POST
ABOUT THE AUTHOR
Dustin Kein is an editor at Web Design Library. He's in charge of selecting materials for the PhotoShop and HTML sections of this site. From time to time Dustin contributes some of his tutorials to WDL in order to cover the most actual topics for WDL visitors. Besides this, he's an active forum member whose posts are always helpful, concise and timely.