1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Photoshop question

Discussion in 'Photoshop' started by pher, Jul 13, 2006.

0
  1. #1
    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.
     
    pher, Jul 13, 2006 IP
  2. danielbruzual

    danielbruzual Active Member

    Messages:
    906
    Likes Received:
    57
    Best Answers:
    0
    Trophy Points:
    70
    #2
    make an image in phtoshop like this in photoshop [​IMG] 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):
     
    danielbruzual, Jul 13, 2006 IP
  3. pher

    pher Well-Known Member

    Messages:
    403
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    125
    #3
    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.
     
    pher, Jul 13, 2006 IP
  4. Daniel Malone

    Daniel Malone Peon

    Messages:
    75
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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.
     
    Daniel Malone, Jul 13, 2006 IP
  5. pher

    pher Well-Known Member

    Messages:
    403
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    125
    #5
    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.
     
    pher, Jul 13, 2006 IP
  6. danielbruzual

    danielbruzual Active Member

    Messages:
    906
    Likes Received:
    57
    Best Answers:
    0
    Trophy Points:
    70
    #6
    [​IMG]

    So basically what you want is the border on two of the sides to be darker than the other two?
     
    danielbruzual, Jul 13, 2006 IP
  7. pher

    pher Well-Known Member

    Messages:
    403
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    125
    #7
    [​IMG]

    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.
     
    pher, Jul 13, 2006 IP
  8. pher

    pher Well-Known Member

    Messages:
    403
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    125
    #8
    I wouldn't mind a little more empaphasis on the actual line. Maybe 1-2 pixels wide. Would that be an outer glow effect?
     
    pher, Jul 13, 2006 IP
  9. pher

    pher Well-Known Member

    Messages:
    403
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    125
    #9
    [​IMG]

    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...
     
    pher, Jul 13, 2006 IP
  10. danielbruzual

    danielbruzual Active Member

    Messages:
    906
    Likes Received:
    57
    Best Answers:
    0
    Trophy Points:
    70
    #10
    <<---editing post--->>>
     
    danielbruzual, Jul 13, 2006 IP
  11. pher

    pher Well-Known Member

    Messages:
    403
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    125
    #11
    [​IMG]

    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.
     
    pher, Jul 13, 2006 IP
  12. danielbruzual

    danielbruzual Active Member

    Messages:
    906
    Likes Received:
    57
    Best Answers:
    0
    Trophy Points:
    70
    #12
    [​IMG]

    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.
     
    danielbruzual, Jul 13, 2006 IP
    pher likes this.
  13. pher

    pher Well-Known Member

    Messages:
    403
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    125
    #13
    [​IMG]

    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!
     
    pher, Jul 13, 2006 IP
  14. danielbruzual

    danielbruzual Active Member

    Messages:
    906
    Likes Received:
    57
    Best Answers:
    0
    Trophy Points:
    70
    #14
    I'm glad it worked. Thanks for the rep,

    Daniel
     
    danielbruzual, Jul 13, 2006 IP
  15. decent-lord

    decent-lord Peon

    Messages:
    193
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #15
    well its confusioon.............
     
    decent-lord, Jul 16, 2006 IP
  16. hotcomputers

    hotcomputers Peon

    Messages:
    115
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #16
    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
     
    hotcomputers, Jul 19, 2006 IP
  17. Andy-V

    Andy-V Active Member

    Messages:
    409
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    90
    #17
    You can still post the URL, it just will not be clickable :D
     
    Andy-V, Jul 19, 2006 IP