Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Easy Jell Buttons

Easy Jell Buttons


Step 1

First create the shape of the button that you want to make the jell button from, whether it be a circular or like my shape I have below. This tutorial is not recommended if your button is much wider than it is high.

Fill the area with a color=F7C718 . I used the color red just so you can see the edges clearly in this screenshot but the real color is yellow.

image 1

Step 2

Next add a soft inner shadow.

Inner shadow: color=black

image 2

When your done you should have something like this, I added black to the background so you can see the edges clearly:

image 3

Step 3

Next right-click on the thumbnail of your jell layer and click "Select Layer Transparency". Set your foreground color to white in your toolbar. Then set your tool to gradient by right-clicking on the paint bucket image 4 and choosing the gradient tool image 5 . By default Photoshop would create a gradient called "Foreground to Transparent"

image 6

Step 4

Create a new layer with your selection still intact and fill with the gradient tool from the top-left most corner of your jell to the the bottom-right corner. To end, deselect the selection.

You should have something like this:

image 7

Step 5

With the new layer you just created, click "Edit > Free Transform". Then click the "Maintain aspect ration" button and set the width of the layer to 70%. Automatically the height would adjust to the same value. Move the layer up by one pixel and left by one pixel.

When your done you should have something like this:

image 9

Step 6

What's the use of having a jell button if you don't make use of it so put and icon under your white layer and add put an inset behind the jell and you should have something like this.

Easy Jell Buttons Tutorial: Final Result



Author's URL: Dwight Robinson
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Easy Jell Buttons"

Only registered users can write comment

No comments yet...