I'm trying to find a tutorial on how to do this, but I guess I'm not using the correct search phrases. Perhaps someone here can assist.. I'm wanting to create an image to wrap around 2 corners of a search box. Think of an "L". I want a gradient so that the ends of each line fade into the current background color. The background is black, the border (L) should be white with an opacity so that it sort of looks like a grey. The length of each line is different which is causing me problems. I don't mind the interior color having a glow, but it needs to fade as well. Thoughts? Suggestions? Link to tutorial? Thanks for your help.
make an image in phtoshop like this in photoshop and then set it as the input's background. Let's say that this is your form: <form method="get" action="search.php"> <input type="text" name="search" id="searchbox" /> </form> Code (markup): then on the <head></head> of the document you would place this: <style type="text/css"> input#searchbox { background: url(bg.gif) right repeat-y #fff; } </style> Code (markup):
Thanks for the response. However, its a bit more complicated then that. The image also needs to include the corner and the other line. As mentioned in my previous post, it needs to form an 'L' shape, with both ends of the L fading. The corner needs to be rounded as well.
For only $25 you can watch tons of tutorials at http://www.lynda.com/. You would probably find the answer in their Photoshop CS2 tutorial. I think they have about 30-40 hours on Photoshop alone.
I'll bookmark that site. If I get desperate enough, I might watch 30-40 hours. The effect is similar to what blogger's start page has: http://www.blogger.com/start Look at the login portion in the upper right hand corner. The main differences are: I want black and white, and I need an L shape, not a U shape.
Like this ^ however I need the image to fade into black a bit more on the line going left and the line going down. It needs to be completely black by the time it hits the edge. the image below this one will be pure black, so I need a smooth transition. Forgive my terminology, but this is basically a black background layer, and a rectangle layer with just a gradient overlay.
I wouldn't mind a little more empaphasis on the actual line. Maybe 1-2 pixels wide. Would that be an outer glow effect?
This is the best I have come up with. This is a gradient overlay w/ Normal Blend, 61 degree angle and 150% scale, and a Stroke w/ size 2, Outside position, 55% opacity, Gradient fill type, 80 degree angle and 1505 scale. This would be fine and dandy, but i need the left line to fade completely to black. Also, it doesn't seem like the down line is fading completely either...
I'm getting closer. But still no cigar. Want a complete fade without showing the corners. This uses a slight modification of the above mentioned effects.
Best I could do. Color Overlay Normal | #000000 | 50% Gradient Overlay Normal | 100% | From #000000 to #B0B0B0 | Linear 70degrees | Scale 100% Stroke 2px | Outside | Normal | 55% | Gradient | From #000000 to #FFFFFF | Linear 70degrees | Scale 100% The trick is to move (position) the gradients with your cursor while you are at the blending modes menu.
I've not thrown it into my website yet, but I think this is it. I never knew about the gradient positioning/blending modes menu. I knew that if I could control the gradient I could figure it out. Thanks so very much for your help. +rep for you!
i am sorry i can not post links. i have the perfect tutorial for you. i will come back in a few days and i will post the link here