Now: Tutorial for Web and Software Design > Photoshop > Web Layout > Photoshop Content
> Gel Button [Bookmark it]
Gel Button

It seems that as time goes by, the gel effect is becoming more popular on everything, now we will create a round button

1. Make a new image, we find about 100 x 100 px is fine, with a white background

2. Fill the background with a soft blue [ we used #CCDDEE ]

3. Click Layer > New layer, and name it circle

4. Grab the Eliptical marquee tool, and give it a fixed size of 75x75 px - click your screen and drag it about with your mouse the center it

5. Grab the gradient tool, and give it these values..

image 1

6. Drag your pointer from the bottom right, to the top left [ still keepign inside your ant lines ]

7. Hold CTRL and press D to deselect

8. Click Layer > Layer style > blending options - and give it these settings

image 2

9. Create a new layer, and name it highlight

10. CTRL Click the thumbnail of "circle" layer on the layers palate

11. Click select > modify > contract - and contract it by 2 px

12. Press D to reset your colours, and press X to swap them [ white is now infront ]

13. Hold ALT and press backspace to fill the layer white

14. Click select > feather - and feather it by about 15 pixels

15. Grab any marquee tool, and click DOWN on your keyboard about 15-16 times, and hit delete twice

Gel Button Tutorial: Final Result

Thats it! if you would like to add text to your button, add it between the colour, and highlight layer, to keep the highlight on the text


[Bookmark][Print] [Close][To Top]
  • Prev Article-Photoshop:

  • Next Article-Photoshop:
  • Related Materias
    Complete Layout
    Turning A Sliced Image Int
    Some Pixel Art? Why Not!
    Gel Button
    Professional Banner
    Pixel Button
    Beveled Button
    Making An Effective Lookin
    Eliminate Noise with the C
    Change Eye Color
    Topics
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Graphic Design Tutorial
     

    Coreldraw Tutorial

      Illustrator Tutorial
      3D Graphics Articles
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial&Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial&Articles
     

    XML Style Tutorial

      AJAX Tutorial
      XML Mobile
    Flash Tutorial&Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial&Articles
     

    Linux Tutorial

      Symbian Tutorial
      MacOS Tutorial