What filter is that?

  • Beginner
  • Beginner
  • Posts: 57

Post 3+ Months Ago

Ok, i've seen this done on many templates and on many websites. But could someone tell me how it is done?

To understand what I am talking about, take a look at this site:


You'll notice that on the header graphic (the one with the castle) the bottom of the image contains some lines. What Filter is that (in Photoshop), or if it isn't found in photoshop, how do I do that?

Any help will be appericated.
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23469
  • Loc: Woodbridge VA

Post 3+ Months Ago

I don't think it's a filter at all. It looks to me like a transparent border around the content, hence the image shows underneath. I'm moving this to our digital art forum so the experts can confirm that or give you better advice.
  • Captain-Nick
  • Proficient
  • Proficient
  • User avatar
  • Posts: 333
  • Loc: North Lincolnshire, UK.

Post 3+ Months Ago

Indeed it is a border. Basically it's just scanlines at an angle.

I'll go through how to make it...(based on Photoshop CS2)

The border on the example you gave is curved, so clearly made as an image, not just set as a background for the table.

We'll start off with making the scanline pattern.

Create a new image, width 1px, height 2px, background transparent. Zoom in as far as possible. Press D, then X (this just sets the pallete to default and then inverts, so you'll have white as your foreground colour. If you want it a different colour, change it to what you want. It's a light grey on the site you linked to, probably cccccc or something). Select the Pencil tool, and set it's size to 1px. Make a while dot on the top half of the image. So it should be 1px white, and 1px transparent. Now click Edit>Define Pattern. Enter a name, White Scanline or something descriptive. Now close that image, don't need to save it.

Now to make the top of your table.

Decide what size you want it to be. If it's going to be biggest possible, and fit on 800x600, then it should be 756px in width. And I'd say about 100-200px in height (up to you, depends on how you want it to look). Once decided on the size, double the dimension, and create an image that size, transparent bg.

Fill the background layer with whatever colour you desire. Be it pink, green, or orange. Lets go for white, white is nice. Create a new layer. Fill it with your new patter, White Scanline. With this layer selected, click Edit>Transform>Rotate. Rotate it until it's at the angle you want. Press Enter.

Now click Image>Canvas Size, and change it to the original size you chose (which will be half the size it is currently). Anchor it centered. Ok it.

Use the selection tool to make the shape that your border wants to be. I use circles for the corners, and then join the with the rectangular selection tool. Make sure it's all the right size. Then click Select>Invert. Then hit delete. (Make sure you still have the scanline layer selected before hand). There you have your border.

Now you just need to put your image behind it, and get it all looking pretty.

Use the slice tool to cut it up into the right parts.

That's about it. Sorry my little guide is a bit rough, im in a bit of a rush, and have slept tonight.

Hope if helps.

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 11 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum

© 1998-2017. Ozzu® is a registered trademark of Unmelted, LLC.