SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Photoshop Web Layout Separator Line (Exclusive Tutorial)

Separator Line (Exclusive Tutorial)

Reiven Web Layout Oct 19, 2007

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.

image 1

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

image 2

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

image 3

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

image 4

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

image 5

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.

image 6

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.

image 7

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).

image 8

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.

Separator Line (Exclusive Tutorial)

ABOUT THE AUTHOR

Dustin Kein

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.

subscribe to newsletter