1

I am a beginner in illustrator. I would like to make a button like this one:

here

See where the white light on the top left gradually fades and there is some white shade on the inside of the button as well which fades towards the bottom right. This is my attempt:

enter image description here

I added a third gradient fill and added some offset to it. But now I couldn't think of anything else like how do I make the shadows fade and also how to add that inner white effect?

1
  • All that was missing was blurring the orange circle at the top. And perhaps some opacity adjustment.
    – Joonas
    Sep 14, 2020 at 6:43

3 Answers 3

4

What makes it look like it could be made of rubber? I tried blur like others have already done. But I happened to have some rubber membrane buttons available in front of me and they didn't look blurry. They were sharp but rounded. They also had some highlights, shadows and also a very fine texture which didn't totally disintegrate glosses at the edges.

If we forget the surface texture and glosses and accept fully matte result we get it easily with Illustrator's 3D effect "Revolve". Only draw the cross-section profile as a closed path and apply the effect.

enter image description here

In the left there's drawn my revolution profile. It has mid-grey fill and no stroke. In the right you see the effect dialog and the result.

NOTE: you can select other fill color and draw different profile; for example a quarter of circle for half sphere form.

Learn from Illustrator's documents how the effect is used. All shown settings are meaningful! The shading style is "diffuse" for matte result.

It's possible also insert perspective, but it's not used here.

The color depends on light settings. It's difficult to get it exactly as wanted. It's either too light or (more often) too dark.

To place the button on a background it's better to let the backgound have the same color that the 3D effect generated. To pick it duplicate the button and rasterize the duplicate (=Object > Rasterize).

In the next image the color of the background rectangle is picked from the midpoint of the rasterized button. The button in the image is still the vector version:

enter image description here

If you like you can copy and paste the image to a high resolution, but empty Photoshop image and adjust the color and shading with adjustment layers. Even metallic effects are possible.

For best results try to get it look right already in Illustrator. There's plenty of playground with color and 3D effect light settings.

In the next (random) example Curves layer affects contrast and Hue/Saturation layer in colorize mode sets the color.

enter image description here

You can paste it back to Illustrator, but it's no more an editable vector, it's a bitmap image. That doesn't spoil the sharpness if you have high enough resolution for the final usage.

3
  • Try another revolved profile, something which is more round with no fully vertical section at the outer edge. You can edit the profile with path editing tools after applying the revolve effect. It stays editable until you expand the appearance. You can reopen the dialog for light adjustments and rotating the position by clicking it in the Appearance panel. My button is an attempt to coarsely draw a button I happened to have.
    – user82991
    Sep 14, 2020 at 18:38
  • Thanks a lot that Worked. I also learned a lot from your tips. But i just want the button stuff only ie. the button and both the shades yellow and white as i want to use the button in an mobile app with different backgrounds. So is there any way that i can make it usable in apps? You already said it will become a bitmap image but still can i do something so that can work? Sep 14, 2020 at 19:02
  • To use Ai files in applications you should be able to render PDFs. For ex. Acrobat shows Illustrators 3D effects as expanded. If you save as SVG all Ai effects are rasterized except SVG effects. So, you can as well rasterize it. If you can use blending mode Hard Light in your application have your button as grey so that highlights are lighter than 128 and shadows are darker than 128 in all RGB channels. 128=no effect to the background in blending Hard Light. You can well prepare that mid-grey version in Photoshop.
    – user82991
    Sep 15, 2020 at 16:37
2

You could use three overlapping circles, one on top filled with same colour as the background, one filled with a lighter orange under that under that, and and one filled with a darker orange/brown under that.

Select all circles and apply a Gaussian Blur effect.

This method will also create a very slightly lighter edge all around the button enhancing the effect I think.

Example made in Illustrator.

enter image description here

1
  • I wonder if you could do that in white / no fill / grey with transparency settings to make it work as an overlay on any color without having to redo everything?
    – Alith7
    Sep 14, 2020 at 13:16
-1

Have you tried adding a Gaussian Blur? You might want to brush over the bottom right side to blend it with the rest of the background. I used Photoshop to do this. enter image description here

1
  • Gaussian blur was already mentioned in another answer.
    – Luciano
    Sep 14, 2020 at 14:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.