How to make these web2.0 looking buttons?

Discussion in 'Photoshop' started by mudanoman, Jul 26, 2006.

  1. #1
    I came across this site: http://www.phplist.com/ and really like the three roll over buttons. Just curious if anyone can guide me in the right direction of how to make them. Thanks!
     
    mudanoman, Jul 26, 2006 IP
  2. crazyryan

    crazyryan Well-Known Member

    Messages:
    3,087
    Likes Received:
    165
    Best Answers:
    0
    Trophy Points:
    175
    #2
    lol, they have been around for ages before web 2.0
     
    crazyryan, Jul 26, 2006 IP
  3. jestep

    jestep Prominent Member

    Messages:
    3,659
    Likes Received:
    215
    Best Answers:
    19
    Trophy Points:
    330
    #3
    You could do it pretty easily with photoshop or another decent image editing program.

    I would draw a rounded corner box in photoshop. Usa a gradient fill. Then make an exact copy using a different color for the roll over effect. Upload both to your website, and use javascript or css to make a rollover effect when the mouse is moved over the image.
     
    jestep, Jul 26, 2006 IP
  4. cpr

    cpr Peon

    Messages:
    65
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    PHPlist isn't working for me, got any other examples?
     
    cpr, Jul 26, 2006 IP
  5. Stefan

    Stefan Well-Known Member

    Messages:
    787
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    110
    #5
    I'll make a tutorial for you right now. I'll edit the post when I'm done.
     
    Stefan, Jul 26, 2006 IP
  6. Stefan

    Stefan Well-Known Member

    Messages:
    787
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    110
    #6
    The first thing you want to do is open Photoshop. Then open a new document sized 500x500 pixels. This will easily be enough room. Then what you wanna do is take your "Rounded Rectangle" tool, and set the radius to about 20px. Make a new layer. Drag your tool across the canvas and make your shape. You'll have something like this: http://www.stefansobering.com/tut/1.jpg

    Then right click on the layer that you made the button on and click "Blending Options". Select the "Gradient Overlay" box and use the following colors: http://www.stefansobering.com/tut/2.jpg

    Then you go into the Blending Options and add a 1px "Stroke" of a medium dark grey. You'll then be left with this: http://www.stefansobering.com/tut/3.jpg

    Now simply use the font "Arial" in white, and add your text. You can also add the text using HTML. You'll then have the final product, this: http://www.stefansobering.com/tut/4.jpg

    Now to make the orange version, simply go into "Blending Options" again and change the color of your gradient and stroke to get this: http://www.stefansobering.com/tut/5.jpg

    Then using HTML you can make the rollovers. You can go a bit further and add some gloss by adding a white layer, set to overlay, above your current button, then moving your overlayed white layer up a bit. You will get this: http://www.stefansobering.com/tut/6.jpg

    NOTE: all my images are really basic, as I don't want to spend all evening making top-notch images for this tutorial.

    Rep is appreciated. Thanks!
     
    Stefan, Jul 26, 2006 IP
    iatbm and ramakrishna p like this.
  7. iatbm

    iatbm Prominent Member

    Messages:
    5,151
    Likes Received:
    352
    Best Answers:
    0
    Trophy Points:
    360
    #7
    great stuff ... thanks
     
    iatbm, Jul 26, 2006 IP
  8. ramakrishna p

    ramakrishna p Notable Member

    Messages:
    1,798
    Likes Received:
    361
    Best Answers:
    0
    Trophy Points:
    240
    #8
    Good tutorial Stefan! I hardly see any tutorials explained on this forums by members.
     
    ramakrishna p, Jul 30, 2006 IP
  9. hotcomputers

    hotcomputers Peon

    Messages:
    115
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Stefan you are the man. Good member. I will give you an A+++++++++
     
    hotcomputers, Aug 17, 2006 IP