How to do this gradient

Content
1

I need to know how to make gradient buttons with gradients like this:

2

Looks like a 3 part wave gradient out of Fireworks or Photoshop.

3

Oh Hey! Hi from Fredericksburg.

Anyhow, there are two parts/layers to that. First, the dark layer layer has a solid color, and then on top of the rounded rec is the white to clear gradient which has been cut out with the wave.

My process in photoshop is to:

draw the button shape,

create another layer,

select the outline of the shape and draw a white-> clear gradient over it in the new layer,

cut out the part of the gradient that I don’t want (in your example, the lower part),

scale back the opacity of the gradient until it is where I want it.

4

Try this in Photoshop:

  1. Draw a shape with the rounded rectangle. Set the radius (top of the screen in a menu bar) to about 3px to give you the rounded corners. Then go to ‘Layer > New Fill Layer’ in the menu bar and fill it with your desired colour.

  2. Ctrl + Click the new layer in the layers palette so the selection of the button shape shows up again.

  3. Fill that with white (Layer > New Fill Layer)

  4. Use the pen tool to cut out the part you want to remove from the white layer. You’ll need to right click the path, choose make selection and then hit backspace to delete it.

  5. Play with the opacity to get it how you want it.

Hope that helps!

5

Create it in Illustrator, more flexibility.

6

Yep! I agree! you can then adjust/ tweak with dodge/burn brushes in Photoshop for a final perfect result!

7

I dunno about your workflow, but myself, I don 't have all day to do this stuff. If you like illustrator, do it in that. I could do it in paint if it had to be done. I have about 10 that I use regularly in Ps, but that is just because I do most of my work there. Ai would work just as well.

Surely there are some awesome tweaks that could be done to the image by using both Ps and Ai, but damn if I know anyone with the time to output and then rework…