SitePoint Sponsor

User Tag List

View Poll Results: How is the tutorial?

Voters
82. You may not vote on this poll
  • Good

    64 78.05%
  • Could be improved

    13 15.85%
  • Bad

    5 6.10%
Page 1 of 4 1234 LastLast
Results 1 to 25 of 90

Thread: Glass Effect Tutorial

  1. #1
    SitePoint Zealot sumanpaul's Avatar
    Join Date
    Jan 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Glass Effect Tutorial

    Hi,

    Somewhere in the forum I found that someone asked for how the glass buttons in Windows Vista website are done. It has been answered. But I thought to write my first ever tutorial on it. No more words. Let’s get started.
    I will use a part of the “new bliss” wallpaper.



    1. I used Rounded Rectangle (Shift + U) to draw a Vertical Rectangle. Name the layer as “shape”



    2. Apply Layer Style to get the following effect. The settings of Layer Style are
    Drop Shadow: Size = 13
    Inner Glow: Blend Mode = Color Dodge
    Opacity = 30%
    Color = White
    Size = 45 px
    Stroke: Size = 1px and color=black



    3. Make the Fill Value to 20%.



    4. Use Elliptical Marquee tool to select an elliptical area .

    Fill it with white color and Nudge or Move it to the left end. Name the layer “left highlight”



    5. Select “left highlight” layer. Control + Left Click the “shape” layer, Press Control + Shift + I, Press Delete. You will be able to see some thing like this.



    6. Add Vector Mask to the “left highlight” layer. Select Gradient Tool. Press D to Reset Foreground Color to Black and Background Color to White. Select the layer mask. Press Shift and Click and Drag you mouse to apply the gradient mask.

    7.You will get something like this. I have used another highlight at the right. You can be creative in applying highlights.



    8. Create a new Layer over “base” layer. Name it “Lens Glow”. Fill the layer with Black. Select Filter>Render>Lens Flare. Select Movie Prime as Lens Type. Click Ok.
    Press and Hold Alt Key and Left Click between the two layers “base” and “Lens glow” You will get something like this image.




    11. Select Layer Bending Option of the “Lens Glow” layer to “screen”.



    Now some simple text stuff here. And it’s ready.




    SO that’s it. Please let me know how it is. Please consider telling the both good things as well as bad things you found about the tutorial. I would like to avoid the loopholes in my next tutorial and try to improve the good points.
    Last edited by sumanpaul; Jan 28, 2006 at 15:28.

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Lancaster, PA
    Posts
    3,019
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hey there,

    I haven't actually tried this out (yet), but from the looks of it you've done a great job!

    Thanks!

    Steve
    Web Designer or Small Business Owner?
    Need More Leads and More Clients?
    Get Free Marketing Tips, Tricks and Ideas Here!

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Nice tutorial

  4. #4
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Awesome. Thanks for posting. I too saw that question posted earlier and couldn't find anything on Google. You da man!

  5. #5
    SitePoint Zealot sumanpaul's Avatar
    Join Date
    Jan 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thx guys. But three replys,. No one found any downside of the tutorial
    If you find any please let me know I am preparing few more tutorials. Lets see how I can manage. Hope I will improve by time
    thx again.
    ~~~~~~~~~~~~~~~~~~~
    Believe in yourself...you can win.
    My Blog - Usability, Web tech
    My Album

  6. #6
    SitePoint Addict WillisTi's Avatar
    Join Date
    Sep 2005
    Location
    Bristol, ENG
    Posts
    338
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks great! When i have the time i'll try that out. Just bookmarked your website so keep adding tutorials .

  7. #7
    SitePoint Enthusiast mp.Designs's Avatar
    Join Date
    Jun 2005
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IT SUCKS! lol, just kidding, just kidding. I'd take away the lens flair, or at least fade it. but that's just me

  8. #8
    SitePoint Guru ckita's Avatar
    Join Date
    Nov 2004
    Location
    Truly Asia
    Posts
    733
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    cooool tut

  9. #9
    The MacGyver of Design bronze trophy Johan Dahlström's Avatar
    Join Date
    Oct 2004
    Location
    Uppsala, Sweden
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a very good tutorial. Great job !
    http://www.johandahlstrom.se
    Not rebootin' on November 1st! (but shortly after)
    flickr



  10. #10
    SitePoint Addict iwonder's Avatar
    Join Date
    Feb 2005
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very Nice indeed. Super cool !

    GFXedit DesignsFree/Custom CSS Designs & Wordpress themes
    Web 2.0 & Me | Personal Blog | IndianWebDevs | AutoPundit |

  11. #11
    SitePoint Enthusiast louis11's Avatar
    Join Date
    Jul 2004
    Location
    United States of America
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like it very much, excellent job

  12. #12
    Life is strife TriGeminal's Avatar
    Join Date
    Apr 2005
    Location
    Trigeminal Ganglion
    Posts
    633
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's on of the best tutorials I've ever seen
    Good work!
    "The only thing necessary for the triumph of evil ..
    .. is for good men to do nothing"
    Edmund Burke.

  13. #13
    SitePoint Evangelist LemoNade's Avatar
    Join Date
    Aug 2005
    Location
    Southampton, UK
    Posts
    500
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome tutorial - Pretty simple I guess but ever so effective. Thanks!!
    My portfolio: lemonadeX.net
    XHTML/CSS/PHP coder for hire

  14. #14
    SitePoint Zealot sumanpaul's Avatar
    Join Date
    Jan 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    omg .. i am speechless. I never expected such good response. thanks guys. you guys have given me enough confidence to write tutorials. But honestly i will tell that I also need to work on writing skills. in writing this tutorial i found that its far more tougher to write a tutorial than just doing it. Hope I can improve my explaining ability in the nnext tutorial.

    thx again guys
    ~~~~~~~~~~~~~~~~~~~
    Believe in yourself...you can win.
    My Blog - Usability, Web tech
    My Album

  15. #15
    SitePoint Zealot sumanpaul's Avatar
    Join Date
    Jan 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mp.Designs ...i just tried what u suggested. actually did some more stuffs also. I faded the lens flare, added a seperate layer and applied distort>Lens Correction filter, and then gaussian blur filter. it looked better.

    thx mp.Design.
    and one more thing. I want to add tis update. How should I add the upadate, write a version two of the tutorial or just edit it.
    ~~~~~~~~~~~~~~~~~~~
    Believe in yourself...you can win.
    My Blog - Usability, Web tech
    My Album

  16. #16
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Don't edit the original tutorial - it's great as it is. Add the new features after it, indicating the points they refer to. Just my thought.
    Great work
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing

  17. #17
    SitePoint Zealot sumanpaul's Avatar
    Join Date
    Jan 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok I will do it .
    thans Varelse
    ~~~~~~~~~~~~~~~~~~~
    Believe in yourself...you can win.
    My Blog - Usability, Web tech
    My Album

  18. #18
    Strictly Professional. ralxz's Avatar
    Join Date
    Jun 2005
    Location
    USA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not bad at all keep up the good work
    Open for design work. PM or through email.

  19. #19
    SitePoint Zealot Shaun B's Avatar
    Join Date
    Dec 2005
    Location
    London, England
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice

    I just tried it and am getting jagged edges on the rounded rectangle and ellipse shapes. You might want to add a bit about pressing shift with that to get good smooth edges

  20. #20
    Night Elf silver trophybronze trophy Varelse's Avatar
    Join Date
    Mar 2005
    Location
    eu
    Posts
    5,967
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Shaun B - turn on the Anti-aliasing when drawing the rounded shapes
    Also turning the "Snap to pixels" option is a good idea.
    FreelanceDaddy - freelancer's personal advisor
    █ Guide and advice for freelancers starting their career
    █ Over 1000 projects posted on freelance markets every day
    █ One-stop resource for online freelancing

  21. #21
    SitePoint Guru hisham777's Avatar
    Join Date
    Dec 2005
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WOW cool man
    thanks for it

  22. #22
    SitePoint Zealot sumanpaul's Avatar
    Join Date
    Jan 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes thanks. Varelse.
    btw Shaun B. Pressing Shift while dragging will help you to make a square.But we need a vertical rectangle
    ~~~~~~~~~~~~~~~~~~~
    Believe in yourself...you can win.
    My Blog - Usability, Web tech
    My Album

  23. #23
    SitePoint Zealot Shaun B's Avatar
    Join Date
    Dec 2005
    Location
    London, England
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Varelse
    Shaun B - turn on the Anti-aliasing when drawing the rounded shapes
    Also turning the "Snap to pixels" option is a good idea.
    Ah, thanks (and to Sumanpaul too). I think I need to brush up on my PS knowledge

  24. #24
    SitePoint Enthusiast Munky's Avatar
    Join Date
    Jun 2002
    Location
    Indianapolis, IN
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome tutorial! I'll definately have to try this out later.
    "Humor is reason gone mad." - Groucho Marx
    kyleajohnson.com :: @kylejohnson1985

  25. #25
    SitePoint Member
    Join Date
    Feb 2005
    Location
    Los Angeles
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very nice. Is there a way to remove the two lines on the left of the lens flare so you just get the "sun" effect?
    GameSiteScript - Get your own arcade website.
    MediaSiteScript - Get your own video/flash/picture website.
    ImageSquash - Compress, convert, and resize images - all online.

Bookmarks

Posting Permissions

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