The author takes you two steps past the usual in this article. Making a Separator Line sounds simple, that’s because there are simple separating lines. However, this is by no means simple, but you can make it with Photoshop.
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 400×200 px size and the background color #5a5a5a.
Create a new layer and make a selection in the middle of the canvas, size 250×300px.
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 300×25px 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 300×62px 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 .
[...] Separator Line [...]
nice one i will use it in webdesgn, i was serching how to do this effect in navigation bar,and under each post.
oh this is so fresh, very plastic, thank you!
This is exactly what i was looking for. Almost got tired of searching for 3d lines in photoshop and ended up entering separator lines and landed on this page. Great tutorial. Thanks.
Great effect, simple but yet neat and classy
Nice tutorial Thanks for a awesome tutorial
great tutorial! will use it my postcard design.
Nice. It works well with black/white/grey colors… But it’s more difficult to get a great result using vivid, powerful colors.
Very nice! I will most certainly use this at some point. Thanks!!
You have done a great job thank you so much for posting
Thanks, that’s pretty good! I was looking for a way to make the line ends look stingy :)
However several of websites might consist of together with many junk e-mail facts, regarding you, it’s about time worthwhile so that you can usually appear throught within your web log that together with connotation.
Great post. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!
Very nice & impressive post. Thanks for sharing….