Color Power with Gradient Fills: Production Graphics with Wendy Peck at webreference.com

		Gradient Fills: The Full Picture
Top sample saved as a JPG at medium quality. (.84kb) Lower sample is the same file, but saved as a high quality JPG (1.98kb). The compression helps to smooth banding in this case. Although banding is almost invisible in this sample of a medium quality JPG, artifacts are ruining the text.(1.82kb) Changing the JPG compression to high quality adds some subtle banding, but the text is clear. (2.89kb) The same sample as above, but light noise was added to the graduated fill layer. A low noise setting was applied four times and the banding is less pronounced. (2.98kb) GIF file of the same button. The file size is nearly double, and the quality is not quite as good as the JPG. GIF occasionally delivers excellent graduated full results though keep it in mind. (4.43kb)		There is nothing that will give your graphics more impact than correct use of graduated fills. All graphics programs offer these fills in one form or another, but few people actually take the time to investigate all the options for bringing graphics to life. Take a look at really great sites, though, and you will find that gradient fills are everywhere often subtle, and only evident when you really study the graphics. Study anything that seems to have wonderful depth or a feeling that it is beautifully crafted, and you will often find that gradient fills are providing the special qualities. In order to use the power of a gradient fill, you must spend the time to learn what features your software offers for these special fills. The learning is not so tough, since this is not a mysterious tool. However, you should devote some time to playing with the various settings so you understand the effects that each type of gradient delivers. We will start with a very simple explanation of the basic types of gradients fills and then move to software specific discussions. This is one topic that is very different depending on which software you use. General Tips on Gradients As much as I love the look of gradient fills, I find that they are often not well done. To make a great looking gradient fill for a large solid area at Web resolution, it takes every tip in the book, some luck, the right colors and ... well, I think you get the picture. However, there are some tricks to making graduated fills look great. Just don't start with a full page background for your first graduated fill project. I will probably get mail on this, but you have to work within the restrictions of the medium. At high resolution, as is used for printing, it is much easier to deliver a gradient without banding, or lines of color when we really want a smooth transition. Getting a smooth gradient fill at Web resolutions is not an exact science. For example, take a look at the samples at the left. This solid graduated fill is smoother in the first sample. Yet they are saved at 30 quality and 80 quality JPG files, with the top sample at 30. Increasing compression helped to smooth banding. The banding problem will not be as great for shaped images or text as it is for solid fills. Smaller areas like buttons, also take well to graduated fills on the Web. However, along with the benefits of broken areas come the challenges of artifacts around design features. See the sample of the buttons at the left. While the graduated fill in this button looks smoother at the lower quality (30) it is broken up around the letters. The lower button has a slightly more noticeable banding, but the letters are clear. Of course, this button is an exaggerated size, which makes any problems worse. The samples above point to the one rule of graduated fills for web use - there is no "right" way. I have done fills with two colors that I could not force to band. Others, I have had to resort to masking to achieve acceptable results. You can also add noise and/or blur the graduated fill to reduce banding as in the third sample button. Most samples are better when saved as JPG format, but I have had times when I achieve a better result saving as a GIF, even with less than 256 colors. Dithering the GIF file can help to reduce banding. Your file size will most times be considerably larger for a GIF, unless you are using a vertical graduated fill, but for small areas, the quality result may be worth the extra size. I have found text with a graduated fill is often best exported as a GIF.

Radial gradient fill. Noise added to reduce banding and exported as JPG. Before I added the noise, this sample was banding badly for every export setting. Diamond gradient fill. Maximum quality JPG offered a very smooth result at one third the file size of a poor quality GIF export. Mesh gradient (vector programs) fill used as a background. Exported as JPG.		Linear Gradients: This is the most common gradient you will find, and is usually the default setting for a program. The samples in the previous section are linear fills. You can set the angle the fill will be applied, but it always moves from one point to another Radial Gradients: Fills that blend from one color at a central point to another at the edge of the object. All programs with gradient fills offer a radial fill. Specialty Gradients: Many programs offer more than radial and linear fills. Square and conical are common offerings. Illustration programs often have very intricate blend and gradient fill capabilities, like the mesh gradient offered by Adobe Illustrator and CorelDraw. This fill allows you to specify many colors and fill positions along a grid pattern. Gradients can be used to add life to your work. Experiment with them for each project. When you are designing your project, test your fills very early. At times a slight color shift can give you much better results and far smaller files sizes. I have made the mistake of sketching my entire project out in a vector program without testing export quality. As always, Murphy's law kicked in, and a direct order from God would not have given me acceptable results for that particular gradient color combination to export to the Web. Test early, test often when you are working with gradients. But do it! Your work will take on a dimension that you cannot achieve in any other way. Carry on to learn about gradient fills in your software. Unless you are a gradient junkie, my bet is that your program can do much more than you know. This time we will look at Photoshop, PaintShop Pro and Fireworks. Come back next time to learn about gradient fills in Illustrator, Freehand and CorelDraw.



Wendy Peck is a working Web designer and writer living in NW Ontario, Canada. https://wpeck.com		Next page Color Power with Gradient Fills Tutorial Index Color Power with Gradient Fills Start Photoshop Gradient Fills Photoshop Gradient Transparency PaintShop Pro Gradient Fills PaintShop Pro Gradient Transparency Fireworks Gradient Fills Fireworks Save Fills and Transparency