Reflections, gradients, and shapes transform two-dimensional images into eye-popping icons.
May new websites uses these techniques to create a very polished, even futuristic, look for web graphics. In this tutorial, I will demonstrate how to design a stylish vector orb that can be used in many aspects of site design, including as a radio button, bullet, or other site element.
First, I will show you how to create a circle shape and apply the necessary gradients to it. I will also show you how to export a color group based on the gradient used in the circle's fill color. With the basis of the orb established, I will show you how to add an inner glow effect that will yield the same result with any color gradient applied to the orb.
Next, I will show you how to add a highlight area to the orb, giving it more of a three-dimensional look that is typical in so-called Web 3.0 sites. I will explain how to use different values of gray along with the screen blend mode to make the new ellipse shape act as a highlight.
With the orb completed, I will show you a few additional tricks to make the orb really pop off the screen.
By the end of this tutorial you should know some of the techniques that can be used to create a vector orb that can be useful in developing a number of things, such as site themes or icons.
