Beginner Help – Gradient Line

N
Posted By
no
Dec 10, 2007
Views
533
Replies
4
Status
Closed
I really like the way the site http://www.geeksaresexy.net/ uses diagonal lines with a gradient, which at around 600 pixels, blends very nicely into the background color.

I’ve been trying to create the same effect and am able to create the gradient as well as the diagonal lines, but I really don’t know how to blend it properly with the background color at about 600 pixels down. I’ve tried blur effects, with no luck.

You can see my attempt at http://gradientline.freehostia.com/testing.htm and if you scroll down to 600 pixels, you’ll note it’s not blended properly.

Would anyone be able to assist me to complete this effect.

Thank you

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

R
ronviers
Dec 10, 2007
-carmen wrote:
I really like the way the site http://www.geeksaresexy.net/ uses diagonal lines with a gradient, which at around 600 pixels, blends very nicely into the background color.

I’ve been trying to create the same effect and am able to create the gradient as well as the diagonal lines, but I really don’t know how to blend it properly with the background color at about 600 pixels down. I’ve tried blur effects, with no luck.

You can see my attempt at http://gradientline.freehostia.com/testing.htm and if you scroll down to 600 pixels, you’ll note it’s not blended properly.
Would anyone be able to assist me to complete this effect.
Thank you

You could add a levels clipping layer to the gradient. The blackpoint/ contrast can be used to match the values but since I do not know anything about web graphics so this is probably not the kind of answer you’re looking for.
Btw, nice job reproducing the diagonal lines.
Good luck,
Ron
K
KatWoman
Dec 10, 2007
"-carmen" wrote in message
I really like the way the site http://www.geeksaresexy.net/ uses diagonal lines with a gradient, which at around 600 pixels, blends very nicely into the background color.

I’ve been trying to create the same effect and am able to create the gradient as well as the diagonal lines, but I really don’t know how to blend it properly with the background color at about 600 pixels down. I’ve tried blur effects, with no luck.

You can see my attempt at http://gradientline.freehostia.com/testing.htm and if you scroll down to 600 pixels, you’ll note it’s not blended properly.

Would anyone be able to assist me to complete this effect.
Thank you

view source

<link rel="stylesheet"
href=" http://www.geeksaresexy.net/wp-content/themes/geek/style.css" type="text/css" media="screen" />

<!–[if IE 6]> <link rel="stylesheet" href="http://www.geeksaresexy.net/wp-content/themes/geek/ie6.css" type="text/css" media="screen" /> <![endif]–> <!–[if IE 7]> <link rel="stylesheet" href="http://www.geeksaresexy.net/wp-content/themes/geek/ie7.css" type="text/css" media="screen" /> <![endif]–>

follow link
opened in dreamweaver
..abox {
float: left;
margin: 0 0 0 70px;
display: inline;
width: 240px;
padding: 5px 0 0 55px;
font: bold 15px/22px "Trebuchet MS", helvetica, sans-serif; color: #2f2f2f;
background: url(images/geek_18.jpg) no-repeat left top;
white-space: nowrap;
overflow: hidden;
}
..bbox p { font-size: 11px; font-weight: normal; line-height: 1.2; } ..ab2 {
margin: 0 0 0 25px;
}
..abox li { line-height: 18px; list-style-image: none; list-style-position: inside;background: url(images/list.gif) no-repeat 0 2px; color: #ffffff; font-size: 12px; margin: 0 0 5px; padding: 0 0 0 20px; } * html .abox li {
list-style: disc outside;
padding: 0 0 0 16px;
}
..abox li.abf,
..abox li.abl {
list-style: none outside;
padding: 0;
}
..abox li a { color: #2f2f2f; font-size: 11px; font-family: "Trebuchet MS", helvetica, sans-serif; font-weight: normal; font-style: normal; font-variant: normal; }
object { text-align: center; margin: 0 20px 0 auto; }
..abox li a:hover { text-decoration: underline; }
..abox li.abf { font: 21px/22px arial, helvetica, sans-serif; float: left; margin-bottom: 10px; }
..abf { margin-bottom: 5px; }
..abf a { color: #b1161a; }
..apost ul { margin-bottom: 10px; margin-left: 15px; }
..apost ul li { margin-left: 15px; padding-left: 5px; }
..abox li.abl a { margin: 5px 0 0; background: url(images/geek_23.jpg) no-repeat left top; display: block; padding: 0 0 0 8px; height: 24px; color: #fff; font-size: 12px; font-family: arial, helvetica, sans-serif; font-weight: bold; font-style: normal; font-variant: normal; width: 120px; } ..abox li.abl a:hover {
color: #EEE;
}

..lead { clear: both; overflow: hidden; font-size: 12px; color: #fff; background-image: url(images/lead.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: left top; height: 34px; width: 877px; margin: 0 auto; text-align: left; position: relative; left: 1px; }
#footer { clear: both; height: 80px; width: 875px; margin: 0 auto; overflow: hidden; color: #fff; background-image: url(images/lead2.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: left top; position: relative; left: 0; } ..apost img { margin: 5px 15pxs 5px 3px 15px 5px 15pxs 5px 3px 5px 15pxs 5px 3px; }
..apost ol { margin-bottom: 10px; margin-left: 35px; padding-left: 0; } ..apost ol li { margin-left: 0; padding-left: 0; }
TN
Tom Nelson
Dec 11, 2007
Here’s my attempt:
http://tnphoto.com/gradient-line.jpg

I put the diagonals on a top layer in Darker Color mode. The gradient is below it. I adjusted the opacity of the diagonals layer to 50% opacity to match the example.

Tom Nelson
Tom Nelson Photography

In article <rW57j.12071$>, -carmen wrote:

I really like the way the site http://www.geeksaresexy.net/ uses diagonal lines with a gradient, which at around 600 pixels, blends very nicely into the background color.

I’ve been trying to create the same effect and am able to create the gradient as well as the diagonal lines, but I really don’t know how to blend it properly with the background color at about 600 pixels down. I’ve tried blur effects, with no luck.

You can see my attempt at http://gradientline.freehostia.com/testing.htm and if you scroll down to 600 pixels, you’ll note it’s not blended properly.
Would anyone be able to assist me to complete this effect.
Thank you

K
kiltakblog
Dec 27, 2007
On Dec 10, 2:30 am, "-carmen" wrote:
I really like the way the sitehttp://www.geeksaresexy.net/uses diagonal lines with a gradient, which at around 600 pixels, blends very nicely into the background color.

I’ve been trying to create the same effect and am able to create the gradient as well as the diagonal lines, but I really don’t know how to blend it properly with the background color at about 600 pixels down.  I’ve tried blur effects, with no luck.

You can see my attempt athttp://gradientline.freehostia.com/testing.htmand if you scroll down to 600 pixels, you’ll note it’s not blended properly.
Would anyone be able to assist me to complete this effect.
Thank you

Hi Carmen, Kiltak here, from the [GAS] Blog 😉

Thanks for the nice comment… the background used to be a simple gradient, but a friend proposed what you are trying to accomplish, and it does look great 🙂

Just right click the background, and select "save background as".. the file name is bg.jpg

Cheers 🙂

Kiltak [GAS]
http://www.geeksaresexy.net

How to Improve Photoshop Performance

Learn how to optimize Photoshop for maximum speed, troubleshoot common issues, and keep your projects organized so that you can work faster than ever before!

Related Discussion Topics

Nice and short text about related topics in discussion sections