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

Learn to make A affilate Button.

Here is what the finished product will look like

Beveled Button Tutorial: Final Result

Step 1

Start of by creating a new document (ctrl+n) with a white background. It should be width-100px height-50px

Step 2

Alright, here we go. First you need a picture as a background for your button. I have preselected an image that you can use, or you can use your own. Next thing you need to do, is to use the rectangular marquee tool and make a selection on the image your selection has to be big. Go back to your button and go to edit >Paste Into and you will have a button.

image 2

Step 3

Next Thing we need to do is set an opactiy strip to make the image more attractive. To do this, once again grab the rectangular marquee tool. Make a strip about 15 pixels high 100 px wide. Once You have done that make a new layer and fill it with white (#ffffff) in case your didnt know. :) Next thing we need to do use your pencil tool press d to reset your colors and get a 1px brush size. Go along the top of your white stripe and the bottom of your white stripe like this.

image 3

Once you have done the pencil, take that layer and set opacticy to about 42%

image 4

Step 4

Alright, you got your button, so add some text in there and you will be finished with the basics. Now comes the hard part. Well not really, but alright lets get started. Jump to image ready. If you dont know how to do it then ill tell you. Go to File->Jump To->ImageReady or file-> Edit with image Ready. First thing we need to do is get the animation box open if it already isnt there. Once it is open you will need to click the arrow at the top right side of the window. You will see a Checkmark next to New Layers are visible next to frames and blah, blah, blah. Above it there will be something that says create a new layer for each frame check that.

Step 5

Almost done. Create a new frame in your animation window by clicking on the arrow and selecting new frame. once the new frame as been created press d and then (alt+backspace) That will make it completly black next thing you need to do is to go to motion tween which looks this. Now Click the button and use the settings.

image 5

image 6

The Final Step

Alright. To get your text to move click on your animation number 11. It should have no black on it all now. This might get confusing select your TEXT LAYER, and then on a new frame click your pointer tool at the top right of your image and press the right arrow on your on your keyboard to make it move. Create a new animation layer for each time you move it, and to make it slow down a bit click on the one of the text layers that you moved it on and duplicate they layer 2 or 3 times to add more frames to the tween.


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

  • Next Article-Photoshop:
  • Related Materias
    Photo Frames Never Easier!
    Turning A Sliced Image Int
    Rollover Buttons
    Making An Effective Lookin
    Making a Website with Phot
    Replacing a Defective Chan
    Photo Enhancement and Corr
    Duotone vs. Multichannel
    Production Intro and Graph
    Club Photography Preview
    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