UI Design Tips

How to Simulate Light, Color and Dimension with Gradients

by Dolores Joya, Graphic Artist DoloresJoya.com

As the technology world evolves the demand for scalable graphics will grow since the devices used to surf web content or the interfaces we use to interact with them vary in screen size from pocket to wall sized; the versatility and scalability of vector graphics can fill these screens beautifully. Also, the emergence of Flex, AIR, and Silverlight have spawned a renewed energy of application development and I imagine the need for knowledgeable vector graphics Designers will soon follow the rush to develop new and innovative hybrid web/desktop applications.

I love vector graphics. They are scalable, clean and animate-able. They can mimic the appearance of things as our eyes perceive them like light and shadow, deep or shallow, shiny or matte, hollow or solid. One principle, that is key to achieving a more convincing illusion of depth and reality, is called chiaroscuro (pr. kee-ahr’oh-scyoo”roh). In the art world, famous Renaissance painters employed the principle to bring flat 2 dimensional shapes to life on the canvas. I have been studying this traditional principle for years and like every art principle I study I always try to integrate them into my digital graphic creation process. It is a technique that all designers and artists should have in their repertoire and one of the techniques I will demonstrate today.

Other effects I will try to recreate using only the Flash vector drawing tool set are materials that have the following properties; shininess or glossiness, shadow & light, transparency, matte, metallic, and depth. I use these techniques when I create graphics for user interfaces in preparation to hand-off to developers using Flex or Flash.

Where do we start?

One of the hardest things to do is to find a beginning and when you sit down with the Flash interface in front of you there is nothing but emptiness. I think this is true for both Designers and Programmers who use Flash. A technique I use to get past this, I call “free form creativity” I just start to play. I don’t care about direction, I follow my eye. If I do something on accident and it looks cool, I go with it. If I do something on accident and it sucks, I delete it. If I can’t decide if I like something or not, I just turn it into a “Guide” layer and turn that layer off OR I simply move it off to the side of the canvas. That’s it, that’s how I get past the blank canvas stage and one reason why Digital Art is more forgiving than Traditional Art. Now let’s begin…

There are 2 types of gradient fills in Flash:

Linear Gradients – change color along a single axis (horizontal or vertical)
Radial Gradients – change color in an outward direction starting from a central focal point.

Taken from Flash 8 Help Documentation “About creating gradients”
http://download.macromedia.com/pub/documentation/en/flash/fl8/fl8_using_flash.pdf

We are going to work with both extensively to create a more complex appearance. First we need to understand the gradient tool. It looks very simple, and it IS easy to use. One thing that is not simple is understanding and visualizing what is going when you manipulate the handles of the Flash gradient tool and how it relates to the “Color Mixer” palette off to the side of the interface. Here are examples of each handle available in the Flash Gradient tool; Size, Rotation, Center Point, and Focal Point (Radial Gradient Only).

Scaling Linear Gradients in Flash

Dragging the size handle scales the gradient across your shape. The larger the size the less amount of gradient fills your shape.

Rotating Linear Gradients in Flash

Dragging the rotation handle rotates the gradient around an imaginary 360 degree circle. Flash does not show the output number, so we usually have to guess at the degree. Gradients can be drawn with code with the “beginGradientFill()method” in Actionscript 3 which can be seen in the AS3 Component Reference. Creating gradients with code is outside the scope of my knowledge but I hope that the information I am discussing here can help Programmers as well as Designers.

Here is how I think Gradient Fill Parameters relate to the Color Mixer and Object Fill in Flash (I am hoping the Flash Coders Community can correct any of my mistakes).

To the best of my knowledge the “ratios” parameter correlates to the location of each color chip on the gradient slider?

Update: I have just found a cool useful tool to help visual and write the code for generating Gradients in Flex:

Gradient Tween Editor
by Andreas Weber

It was written a couple years ago so I’m not sure how much as changed with code but it’s still a very good tool to help build better gradients.

Moving the Center Point of Linear Gradients in Flash

Dragging the center point of the gradient moves its position on your shape. This also determines how much of the gradient fills the shape.

Let’s Get Started

Here is the default Black and White Flash gradient. We’ve all seen it, it’s there, one of the 6 crappy preset gradients that have been coming with Flash forever.

In its default state this gradient already creates the illusion of light shining directly in front of or on top of my shape, depending on which perspective you want to draw your scene from.

Lighting – Our First Major Decision

In keeping with the principle of chiaroscuro we need to make a decision where our light source is coming from. If we imagine flying out above our scene and looking at it from the top view, where would we place the light to illuminate our object? Well the most obvious choice would be in front of the object, so that the side that faces us can be seen in more detail. The back side of our object will not be seen by our viewer and only exists in the 2D world as a guide to help us draw more correctly. We imagine its there so that we get our proportions correct but obviously we’re not going to draw it in. What we DO do is hint at it with gradient shading.

In this scene I think I’ll place the light to the upper left of my object “sphere”. Done. Once that VERY important decision is made, all of our objects in the scene can be lit accordingly, that is a major problem solved and ONE less thing we have to struggle with when making Design decisions.

OK So how do we ACTUALLY place our light since it doesn’t really exist in Flash? Easy…Think of the gradient AS your light and use it to illuminate your object. Imagine the lines representing the gradient handles are the origin and cone of your light.

It doesn’t only have to be a spot light. Could be sunlight, firelight, LED light, etc.

So, we move our imaginary light by dragging the center point of our gradient or “The Hot Spot” of our light to the upper left of our shape.

By simply moving the gradient’s center point off to the upper left hand corner of the shape we’ve already created much more depth and interest in the subject.

Well we know if there’s light shining on our object and our object is sitting on the ground, there will be a shadow between the ground and our object on the opposite side. Also, since our object is sitting on a white surface light reflected from the surface will bounce back off of our object in the shadow area making it appear lighter.

To recreate this reflective light and shadow we do 2 things:

Add 2 new color chips to the gradient; one which intensifies the hightlight and the other which reproduces the reflected light of the ground. Even more depth is emerging.
Draw or copy the shape and fill it with a solid color and place it behind our object in the layer stacking order (as if it were sitting underneath the object in space).

It’s better, but what else can we do with this? Like we agreed in the beginning we are in the free form creative process now, we just go with and not worry about much else. Well Black & White is nice but materials in life have color. We also see in color. So let’s add color to make the shape pop off of the background.

Nice and matte. We know that light is reflecting off of this surface but the texture of it makes the light appear more diffuse. If we make the highlight smaller and brighter (or whiter) it appears to be more concentrated. This creates the illusion of our object having a glossy coating to it.

Layering Transparency in Gradients

OK. So far so good. We’ve learned key components to mixing scale, rotation, and center point positioning of the Flash gradient tool to add reality to the appearance of our shapes. How can we improve upon this? The answer is TRANSPARENCY. One thing Flash does wonderfully that Illustrator labors over is Transparency within gradients. The power to simulate material, light & dimension in Flash with just gradients is multiplied exponentially by the addition of transparency.

What if we add color to the light? As if we changed the bulb color, or were trying to simulate sunlight washing over our shape?

We change the hot spot color to a pale yellow and bring the “Alpha” down on the color chips in the color palette. Here I added this gradient to a second layer and placed it on top of the original red plastic ball gradient to begin to build up complexity.

Creating Brushed and Polished Metal with Flash Gradients

Let’s further this experiment by adding a background to our scene (also vector gradient). We know that light affects the objects in our environment, what role does the atmosphere or background play?

Well with reflective surfaces, background plays a big role. They reflect their surroundings. In 3D the trick is to create a reflection map for the object and place it into one of the material channels of the object. Well why not use that same trick in 2D? We can by using the same colors in the background as a sort of reflection map for a more complex material such as silver. Of course, Silver would reflect the cast shadow as well so we need to add an additional shape on top of our object.

By layering a semi-transparent highlight gradient (seen above) on top of a linear gradient containing the background colors of the scene (seen below) we can recreate the illusion of reflection with vector gradients. Here are the steps blown apart for simplicity. Download the Brushed Metal .FLA and .SWF zipped file Flash v8 to see how I created this effect.

Now we’re getting somewhere fun. This gradient tool has more potential than I thought.

Again by moving the gradient slider color for the highlight to the left we can intensify the highlight so it appears to be a polished metal. Download the polished metal .FLA and .SWF Flash v8 zipped file.

Creating Glass with Flash Gradients

What if we flip the gradient inside the shape and also add a gradient to the shadow? Now it appears as if the shape is transparent glass. I also added a hot spot vector shape at the base of the object to make it appear as if the light was reflecting back into the object from the ground.

Below are the steps blown apart for simplicity. Download this Glass file in .FLA and .SWF Flash v8 zipped format.

What if we wanted our shape to appear hollow as opposed to solid? Interesting smoked glass like effect. Here the light shines through the object reflecting from the outside and into the inside. Below are 2 different gradients layered on top of one another. The gradient shown to the right sits on top of the other.

OK OK we have a nice ball, but what about other shapes? How do we get dimension in those? Well this is a site dedicated to User Interface Design so let’s take some UI elements and apply these principles to them.

Creating Metallic UI Buttons in Flash

Here, I’ve also taken the outline and shaded the top and left lighter and the bottom and right darker to create the appearance of light hitting the edge of the beveled shape.

Creating Shiny Black Plastic Buttons in Flash

Now I’ve combined a Radial gradient with a square shape. This to me is a nice blend.

Creating Gray Plastic Buttons in Flash

Here is a colored light shining on a Gray surface. Looks kind of futuristic.

Creating Red Plastic Buttons in Flash

and we continue with color…

Convex/Concave

We can take advantage of the effect rotation has on gradients by rotating them in opposite direction from one another to create the looking of depth on a surface. Placing one gradient underneath another in a layered manner we have a more streamlined UI element that appears to be part of a molded plastic or gun metal like design often found in real world devices.

By alternating the rotation of the gradient we can make buttons appear as if they are beveled.

Applying these techniques to the Creation of User Interface Graphics in Flash
These techniques create interesting effects alone, but as you can see I have demonstrated the power of combining them together in a layered manner to build up a more interesting and dynamic shape.

Download Red MP3 Player UI Design zipped file containing FLA and SWF.

Other Gradient Color Sets for Flash
The gradients I have created and used in this demonstration and also some that are not are used in the demonstration are available here to download and use (but not sell or distribute for money!). These are for your creative exploration. Load them into your Flash Color Palette to jump start the creative process.

Download Flesh Tones zipped file containing FLA, SWF, and Flash Color Set .clr