• Home
  • About
  • Advertise
  • Contact Us
Blue Orange Green Pink Purple

Separator Line

Posted in Drawing. on Wednesday, April 29th, 2009 by Tutorial Park Tags: photoshop, separator line, tutorial
Apr 29

Separator LineThe 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.

Separator Line: selection

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

Separator Line: black white

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

Separator Line: soft light

Create a new layer , and make the selection with a 300×25px size above the line.

Separator Line: upper selection

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

Separator Line: gradient

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.

Separator Line: upper gradient

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 .

Separator Line: lower gradient

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

Separator Line: separator selection

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 Tutorial: Final Result

Note: Inspired by TimSliva’s video tutorial .

3 Comments

  1. Small web design element tutorials collection | Design-Notes on May 10th, 2009

    [...] Separator Line [...]

  2. sriganesh on May 20th, 2009

    nice one i will use it in webdesgn, i was serching how to do this effect in navigation bar,and under each post.

  3. pista on May 25th, 2009

    oh this is so fresh, very plastic, thank you!



Leave a Reply

Spam Protection by WP-SpamFree

Tutorial Park

  • templated business
    templated business
  • Search


  • Categories
    • Animation
    • Drawing
    • Freebies
    • Photo Effects
    • Text Effects
    • Tutorial Reviews
  • Recent Tutorials
    • 3D Valentine’s Day Typography
    • St. Valentine’s Photo Manipulation
    • Na’vi Avatar Photo Manipulation
    • Thanksgiving Wallpapers
    • Google Text
    • Jack-O-Lantern Drawing Tutorials
  • Featured Partners

      Web Design Library

      flash websites

      build a website

      flash intro
  • Tutorial Park Tags

      angel animals Animation ball batman business car Casino Royale cat catroon design digg earth frog glass half life 2 Harry Potter hearts icon icon set James Bond jewelry logo lollypop mafia monster navigation bar photo photoshop photoshop tutorial photoshpo plastic poster quake sunflower template transformers tutorial typography vector video vintage wall-e wallpaper watercolor

      WP Cumulus Flash tag cloud by Roy Tanck requires Flash Player 9 or better.





  • Home
  • About
  • Advertise
  • Contact Us

© 2004-2010 Copyright Tutorial Park. All rights reserved.
Designed by FTL Wordpress Themes. Website promoted by SEO Software.

Back to Top