• home
  • forum
  • my
  • kt
  • download
  • How To Create Gel Buttons

    Author: 2008-01-14 10:26:25 From:

    There are many ways to create Aqua like buttons. The tutorial below is a simple example that you can build on to create your own translucent objects.

    Adobe Photoshop tutorial

    Our sample document is 400x250 pixels. Start by choosing a bright color and create the oval shape on a new layer.

    Adobe Photoshop tutorial

    Next, make a selection of your shape by Apple-clicking on your new layer. Now reduce the selection in Select/Modify/Contract... by 10 pixels. Apply a feather (Apple-Alt-D) of 10 pixels. Invert the selection Apple-Shift-I and than click on the layer of the oval while holding Apple-Alt-Shift to intersect your actual selection and the selection of your oval. Now that you have a feathered selection of the edges of the oval you can apply an adjustment layer Brightness/Contrast and lower the brightness to -100. This gives a slight three dimensional effect to our oval.

    Adobe Photoshop tutorial

    Now, repeat the selection of the oval layer and contract the selection. Select the Oval selection tool and press Alt while drawing another oval selection over the existing one that will cut off most of the selection, but leave a slice. This will be our primary reflection. Fill up this selection with the white background color on a new layer (Apple-Alt-Shift-N & Apple-Backspace). Make this layer opacity 80% (Just press 8).

    Adobe Photoshop tutorial

    Now make a duplicate of your layer (Apple-J). Rotate your new layer by 180 degrees by selecting Edit/Transform/Rotate 180 and place it symmetrically on the bottom of the button.

    Adobe Photoshop tutorial

    Blur this new layer (Filter/Blur/Gaussian blur 5 pixels) to get a diffused look, which is supposed to be a reflection of a reflection on the top. Make it only 50% opacity (Press 5). Now Apple-click the oval layer to make a selection of it again and go inside the selection with your cursor to move the selection down. Apply a feather (Apple-Alt-D) of just 5 pixels.

    Adobe Photoshop tutorial

    Now create a layer between the background layer and the oval's layer and fill the selection with the foreground color (Alt-Backspace). Set this new shadow layer to 60% opacity (Press 6). The shadow is colored since our object is translucent and the light goes through it, so the shadow will also have a color cast.

    discuss this topic to forum

    relation tutorial

    No relevant information

    Category

      Abstracts (88)
      Effects (498)
      Animation (220)
      Photo Effects (823)
      Automation (20)
      Photo Retouch (316)
      Basics (411)
      Photography (302)
      Brushes (49)
      Scripting (5)
      Buttons (187)
      Text Effects (731)
      Color (77)
      Textures and Patterns (172)
      Digital Art (147)
      Web Graphics (692)
      Drawing (735)
      Web Layouts (175)

    New

    Hot