Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Dec 2004
    Location
    Socal
    Posts
    3
    Member #
    8473
    Hi Everyone. I'm new here. I was hoping someone could help me with a frustrating issue... I'm trying to find an automated way to create background lines. A perfect example of what I'm trying to achieve is on the homepage of http://www.ebaumsworld.com. The very tight horizontal lines on the homepage with the gradient background. In Illustrator I have a sort of grid tool, but when I use it to generate horizontal lines (by adding horizontals and removing all verticals), they appear sort of moraid (sp??) and sloppy. When I build the lines by hand in PS or Illustrator, it's even worse.

    Just FYI, I'm NOT talking real background lines as a function of the HTML background (in which you can just make a single line which will be regenerated by the program to form tight background lines). I AM refering to an actual image that uses a gradient, and therefore must be created from top to bottom.

    How do people make those background lines? I'm certain that it's an automated task in PS or Illustrator. Please help! Thanks a zillion for your assistance!

  2.  

  3. #2
    Senior Member DanielOliver's Avatar
    Join Date
    Jun 2003
    Location
    Cornwall, England.
    Posts
    1,202
    Member #
    1879
    It's pretty easy to do.
    Open your graphics program and draw two different coloured lines at whatever width you need.
    Then...
    Code:
    body {
    background: url(../images/imagename.gif/jpg/png etc) repeat-y;
    }
    You can assign this rule to the body or any other id's and classes through out the site. It depends where you want the lines to appear.

    If this is too brief please shout and I will try and explain a bit better.

  4. #3
    Junior Member
    Join Date
    Dec 2004
    Location
    Socal
    Posts
    3
    Member #
    8473
    Quote Originally Posted by DanielOliver
    It's pretty easy to do.
    Open your graphics program and draw two different coloured lines at whatever width you need.
    Then...
    Code:
    body {
    background: url(../images/imagename.gif/jpg/png etc) repeat-y;
    }
    You can assign this rule to the body or any other id's and classes through out the site. It depends where you want the lines to appear.

    If this is too brief please shout and I will try and explain a bit better.

    Hi Daniel, thanks for your time! I was not referring to HTML repeating, but rather, a gradient strp with horizontal lines which needs to be built in either PS or Illustrator. The only way I can describe this is by asking you to visit http://www.ebaumsworld.com. That gradient section in the middle with the fine lines is exactly what I'm trying to achieve.

    When I try to generate those fine lines in my vector program, I start having trouble with moire effect type stuff, etc. For example, I'll create a vertically oriented strip, say 400 px high by 60 wide. I will eventually use this to be repeated in HTML as you suggested. Next I gradient fill it. Last, I apply the horizontal lines. Those lines just NEVER work out, and I get sloppy results. Only way I can really describe this is by showing you. I posted a sample at: http://www.bazili.com/Lines.html . Thanks for your help!

  5. #4
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    Your lines are not spaced the same. The ones you are trying to emulate are sequenced 1,2,1,2,1,2 etc. yours are 1,2,3,1,2,3,1,2,3 where the extra row looks to be an arbitrary approximation of the other colours. Have you got anti-aliasing turned on by any chance?

  6. #5
    Senior Member mossoi's Avatar
    Join Date
    Apr 2003
    Location
    Englandshire, United Kingdomsville y'all!
    Posts
    1,111
    Member #
    1206
    Liked
    1 times
    Ok, I've managed to recreate the effect here: http://www.smartsitecms.net/dump/groovy.php

    I'm no graphic designer so it's a bit rough and ready.

    Make a two line image with an average shade of the colours you want to use for the fade effect and use that as the background of a page (this is just so it's easier to grab the height you need without drawing all the lines or buggering about with grids)

    Take a screenshot of the page and dump it in the graphics app. (I pinched yours for my example)

    Copy and paste the area you want into a new image.

    Add a new layer on top of the existing image.

    Fill the new layer with a 50% vertical fade from white to the darkest colour you want (I used grey for the example so it looks a bit odd).

    Now reduce the top layer opacity until you get an effect you like.

    I used Paint Shop Pro so PS and Illustrator should be more than capable of doing this.

  7. #6
    Senior Member DanielOliver's Avatar
    Join Date
    Jun 2003
    Location
    Cornwall, England.
    Posts
    1,202
    Member #
    1879
    Ohh, looks like I managed to miss out half of your post stating
    Just FYI, I'm NOT talking real background lines as a function of the HTML background
    Sorry about that. Mossoi nailed it anyhow:-)

  8. #7
    Junior Member
    Join Date
    Dec 2004
    Location
    Socal
    Posts
    3
    Member #
    8473
    I can't believe I didn't think of that. Common sense. Thanks, Mossoi! Great brain work; by the by, I did have anti-aliasing on accidentally. Daniel, thanks for your responses.


    Quote Originally Posted by mossoi
    Ok, I've managed to recreate the effect here: http://www.smartsitecms.net/dump/groovy.php

    I'm no graphic designer so it's a bit rough and ready.

    Make a two line image with an average shade of the colours you want to use for the fade effect and use that as the background of a page (this is just so it's easier to grab the height you need without drawing all the lines or buggering about with grids)

    Take a screenshot of the page and dump it in the graphics app. (I pinched yours for my example)

    Copy and paste the area you want into a new image.

    Add a new layer on top of the existing image.

    Fill the new layer with a 50% vertical fade from white to the darkest colour you want (I used grey for the example so it looks a bit odd).

    Now reduce the top layer opacity until you get an effect you like.

    I used Paint Shop Pro so PS and Illustrator should be more than capable of doing this.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:49 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com