Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    Struggling with glossy buttons/nav bar.

    Hi all,

    I am trying - so far in vein - to make a glossy navbar image. At my disposal, I have adobe ImnageReady, adobe photoshop, photo elements and photoImpact.

    As you might recall, the arty part of ym brain is very small but I can't seem to find a tutorial that I can follow.

    Not sure if I should be creating a background weith a gradient and then adding a rectangle in another layer.

    If anyone can give me some steps to follow I'll try to make progress.

    By glossy, I mean that it would have a dark bottom half then a shaded/gradiented top half (as if catching the light), with a distinct edge running horizontally along/across the middle.


    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    The penny seems to have dropped since I posted.

    here are my steps.

    1. create a new image background and set the background to your colour of choice.
    2. create new transparent layer
    3. select an area to be the height of your button and fill it with your colour of choice for the button.
    4. create another layer and select an area (likely the top half of the button) and use 'fill' to assign a colour - #ffffff; (white)
    5. still on this layer with the white selected area, right click on that selection and select 'blend properties' to see a new dialog.
    6. set the opacity to about 12% so that this top half is slightly lighter than the bottom half.

    Looks like that is pretty much it - that is the button done. You may need to set the first background layer's bg color to be darker than your button bottom colour - personal choice - so that your buttons blend with your page design better rather than the buttons looking out of place or unfinished.

    This is not a definitive tutorial but I hope it helps someone else who, like me, wasn't at the front of the queue when the artistic brains were being distributed.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    53
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Very informative and specific step for making glossy buttons effect. Thank you very much. I just made some wonderful buttons.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Adirondacks
    Posts
    516
    Thanks
    4
    Thanked 4 Times in 4 Posts

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    useful links FJBrian. Thanks

    Edit:
    using the first of those links I am pondering something. I want to use images like that one in the example but without the text. I want the text to be dynamic so - my li 'buttons' will need a background and the href will use the example button. the difficulty I am foggy about is how to ensure that the rounded corners will come from the background, where each button may be of different length.

    Is there much time involved in making the li background have a rounded end on both ends or is it better use of time to use an image replacement technique, where the text of my button is replaced with an image, determined by the text for the link?
    Last edited by bazz; 01-12-2011 at 12:57 PM.
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •