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

To begin exercise, I've used the Rounded Rectangle Tool to create a simple rectangle with 'the Create New Workpath button depressed (the second selection in the options bar). Under the paths palette I converted my path to a selection and filled it with 50% gray. Then with the Circular Marquee I selected an area along the right edge of the image and deleted the gray.

image 1

Pretty cool, huh? Ok, maybe not so much. Better do some more tweaking!

Let's duplicate this layer, and reselect. You can do this by Command/Control Clicking the layer name in the layers palette. On the new layer, contract the selection. At 72 DPI I contracted 8px, but at a higher resolution (I normally design at 200 dpi) you may want to increase the contraction. Now Select inverse, delete, and select inverse again.

Let's play with the Layer Styles a bit. When you installed Photoshop 6, many Layer Style sets were installed with the program. We want to load the Glass Buttons Set. In the Styles Palette select the Load Styles from the menu. You will find the Glass Buttons Styleset in the Photoshop 6>Presets>Styles directory.

Once the Styleset is loaded, make sure the top layer is selected and click on the Orange Glass Style to apply it to this layer.

image 2

I want to dress this up a bit by giving the 'button' a little edge so I'm double clicking the 'effects' for this layer and opening the Layer Style options, and applying a black to white gradient stroke to the outside edge of the button.

image 3

Eventually I would like to place some text in this button, so in the Layer Styles I'm decreasing the size of the bevel to flatten the center out a bit.

image 4

Ok, I think I'm don messing with the foreground for a bit. Let's go back to the previous layer. Command/Control>Click Layer 1 in the layers palette to select it. Make sure layer 1 is highlighted in the palette, as we don't want to disturb our settings for the button layer!

Again, we need to load a Layer Style Set. Following the same procedure for doing so listed above, load the Text Effects Styleset into the palette. The style we are looking for is called, simply enough, 'Wood'. Apply that style to this layer.

image 5

A little drop shadow goes a long way, so open the styles for this layer and select the default drop shadow. Just place a check next to 'Drop Shadow' in the blending options menu when you open the styles window.

image 6

Now in a new layer I can enter my type and make transitions for rollovers simply by changing the layer style applied to the type!

image 7

image 8

OR...

You could apply the style change to the button itself, leaving the type alone:

image 9

This same method can of course be applied to type. For example:

image 10

When you create your menus in this manner, they are extremely versatile and stackable for use in expanding menus. Take a peek:

Power Effects Tutorial: Final Result


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

  • Next Article-Photoshop:
  • Related Materias
    Rainbow Image
    Realistic Spotlight Effect
    Professional Web Host Layo
    Turning A Sliced Image Int
    Create a Web Banner Ad
    Creating A Basic Web Layou
    Making An Effective Lookin
    Making a Website with Phot
    The Importance of Layer Ma
    Turbo Charge Your Workflow
    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