Andrew Kelsall | Graphic Designer

I love gradients. I don’t like them when they’re used incorrectly, though. The very common “corporate fade” (or strongly-saturated colour fading into white background) on many business advertisements in recent years have given gradients a bad name. However, when used correctly, gradients can give a sense of added depth and 3D-appeal to both print and web works alike.

On that note, here is a list of articles, tutorials, tools, code and downloads to satisfy any gradient-induced craving you may have. Enjoy!

Articles:

Creative Curio → Taking Design from Good to Great with Gradients
Design Meltdown → Gradient Madness
Iit.Bloomu → Lesson in Gradients
Wipeout 44 → Gradient Mapping effect in Adobe Photoshop
Claudiamccue → Gradient Bug in Illustrator CS4
1stwebdesigner → 30 Logo Designs Using Gradient 3D Effects (3)
Shape Shed → Photoshop 101 – The Gradient Tool

Tools:

All Crunchy → The Amazing Gradient Generator
Patorjk → Gradient Image Generator
Gradcolor → Gradcolor Color Tool
Make Use Of → Online Gradient Image Maker
Gradient Maker→ Gradient Maker Tool

Tutorials:

Layers Magazine → Gradient Overlay
Graphic Tutorials → Adobe Illustrator CS4 Gradient Tools
PC and Web → How To Create A Cool Glossy Shiny Web 2.0 Heart in Photoshop
Vectips → Quick Tutorial: Adding Gradients to Text
A List Apart → Super-Easy Blendy Backgrounds
Vectorials → Quick Tutorial: Gradient Strokes
Digital Media Net → Transparent Gradients in Adobe Illustrator
Khulsey → Creating gradations with Adobe Illustrator’s Gradients & Blends
Vvector Diary → 13 Amazing Gradient Mesh Tutorials
Graphic Design Employment → Illustrator Gradient Mesh Tool – Creating Realistic Vector Art
Photoshop Digest → Gradient Navigation Bar
Veerle’s Blog → Elegant gradient ribbon in Illustrator

Coding/Web:

Planetozh → PHP and GD : Emulate Gradient Fill
Web Source → Create a Gradient Background Effect
Secret Geek → A Color Gradient Webservice
Design Detector → CSS Gradients Demo
Slayeroffice → Cross-browser gradient backgrounds without images
Herethere → Color gradient table generator
VRXnet → Color Gradient Generator
Ajaxian → CSS Gradients for All!

Downloads:

Free 4 Photoshop → Free Photoshop Gradients
Nanson’s Place → Nanson’s PSP 7 Gradients
Euphorish → Photoshop Tutorials: Free Web 2.0 Gradients (v1.0)
Lady Oak → Free Photoshop Gradients 2
Free Photoshop → Free Gradient Downloads
Tympanus → 5 free background gradients
Brushess → Gradient Shape Brushes
Brushes Download → Free photoshop gradients
Graphic Host → 1000 Free Gradients – Web 2.0 Gradients

If you don’t think this article deserves the title of been the Ultimate List of Gradient Resources, then let me know of any more great links below, and I’ll add them

Earlier this month, I wrote an article about simultaneous contrast entitled Amazing color effect that all designers should see. This new “illusion” is based on the principle of successive contrast, whereby the absence of a particular color produces a visual perception of its opposite.

As a demonstration of this, please follow these instructions before triggering the “color-illusion” that the image below can produce when looked at properly.

Stare at the white-cross in the center of the Green & Yellow Union Jack Flag for a whole minute. Then, stare into the black-cross of the white image and blink a few times. All-going-well, you should see the Union Jack appear before your eyes—in the correct blue, white and red colors.

Did you see it? I’m not trying to indoctrinate every nation into Britishness here, it’s just that this is a great example of this “illusion” As a designer, such color-displays and illusions really inspire me—and I love to experience both the limitations and wonders of our sight.

Knowing these things can aid every designer at some point. Please tell me if there’s any other illustrations of successive contrast you know of…

Displayed below is an amazing color effect that all designers should see. If you take a look at the X’s, they both look as though they are different colors. However, they’re not. The colors are exactly the same tone:

Look at where both the X’s intersect at the middle-base of the image. You can see there that the ‘true color’ is in fact a greyish-yellow tone (a mixture of the two colors used in the rectangles). This effect is based on a painting by Josef Albers.

To see something a little weirder, take a look at the second image I have devised, taking the effect one step further:

As can be seen, the horizontal bar appears to show a gradient, starting with yellow on the left, to grey on the right. However, as with the first image, the color is a solid tone—not a gradient of two colors at all. If you don’t believe me, drag the images into PhotoShop® and whip out the color-picker tool

Why is this happening?

This effect is know as trichromacy, with the images above demonstrating simultaneous contrast. To cut a long story short, out eyes record color in RGB—but none of us can image a yellowish-blue. Our brains therefor plays tricks on us, resulting in the effect/illusion.

I think knowing this kind of information about color can be extremely beneficial to a designer. Color theory is embedded in all we do, so it’s great to understand great effects like this to aid in design work. Knowing what colors will or will not work together can be imperative—especially in logo design.

I have written an article about metamerism with another color-illusion there if this subject interests you. Do you know of any other great effect like this? Do you think knowlege of color theory will aid in your design work?

What are Color Gamuts? Simply put, a color gamut is a whole range of digital colors that are included in a color profile. Different gamuts contain varied subsets of different colors.

Now, this is a huge subject to cover, so instead of just trying to explain what they are, I will start by comparing two similar gamuts from two RGB profiles: Adobe RGB (1998) and sRGB IEC61966-2.1

Adobe RGB (1998)

Displayed below is a 2D image of the Adobe RGB (1998) color profile. This is the type of image you’re going to see a lot of throughout this set of articles. Ignore the LAB color letters (b+, a+, etc) and observe the color and shape. Notice how all the colors shown radiate from white, denoting the additive color model.

The next image (below) displays the same RGB gamut but in 3D. This is one of countless views that can be viewed with special software, such as PerfX Gamut Viewer or ColorThink Pro. As can be seen, the 3D view reveals more tones, hues and shades than the 2D version.

Each color gamut shown is complete with a colored-boundary, which indicates the extreme edge of the gamut in both 3D and 2D angles. This one, for example, shows this edge in Red.

Comparing Color Gamuts

Now we know what we’re looking at, I’ll start comparing the two color gamuts. The larger gamut is a representation of the Adobe RGB (1998) color profile, shown in RED. The smaller profile, sRGB IEC61966-2.1, is displayed in BLUE (just visible).

The next three images show varied angles of the two color gamuts…

Both gamuts displayed are visible at a medium opacity, so you can see both at once.

Notice that even though the Adobe RGB profile is generally larger, RGB 2.1 supercedes it in certain key areas of color…

These areas are primarily in the green/blue region of the gamut, shown above.

There you have it—the introduction to the series of articles about color gamuts. It would be very hard to cover many aspects of the subject matter in one post, so Part Two will continue the journey shortly. Why not subscribe to my RSS feed so you don’t miss it?

Image Copyright here

The question “What are Color Profiles?” is one asked by every designer in their early career or studies. The thing is, this is such a generic question, it really needs breaking down into three other questions. I will attempt to answer them below, but be aware that this is just a summary. Indeed, whole books are available on the subject of color profiles, so there’s an awful lot of information to condense into this post…

Every image or file that is created in programs like Adobe Photoshop®, Illustrator® and InDesign® needs a color profile assigned or embedded in order for the software to display and print the image accurately. If no profile is assigned, or a ‘generic profile’ is used, results can be very unpredictable.

To clarify, here is a brief overview of the questions that relate to the use of color profiles:

What are Device Profiles?

Basically, device profiles contain certain information pertaining to three variables regarding how a certain device (such as a digital camera) ‘represents’ color. These variables are Color Gamut (color & brightness), Dynamic Range (relates to the white point) and finally, the Tone Reproduction of colors.

For example, a device profile would be included in the software of a digital camera, scanner or desktop printer.

What are Profile Classes?

Profile Classes relate to the types of Device Profiles available:

★ INPUT PROFILES, which describe the ways in which Digital Cameras and Desktop Scanners capture color.

★ DISPLAY PROFILES, which describe the ways LCD displays display colors.

★ OUTPUT PROFILES, which describe color for printers and presses.

What are Document Profiles?

Document Profiles are ‘destination profiles’ that are assigned to a file after a conversion from a Device Profile (or source profile). For example, ProPhoto RGB Color Profile from Digital Camera (source) > Photoshop® File with Adobe RGB (1998) Profile (destination).

I realize that there is much information to cover on the subject, so this is just one of a series of articles about the subject of Color Profiles, Gamuts and Color Spaces. Why not Subscribe to my RSS Feed so you don’t miss the next article?

Next up is a more visually interesting post about  Color Gamuts. If you have any questions about this article, please feel free to leave your thoughts below…

I recently had a great discussion about the use an RGB color setup when designing for CMYK print. I received various responses within my article Top Ten CD Cover Design Tips, whereby the talented designer’s Alex Charchar, LaurenMarie and Rob Cubbon joined the conversation.

I generally support the notion of designing in an RGB color mode ― for print and web regarding imagery that is to be printed in CMYK. Some of you reading this may know what I’m talking about and agree wholehartedly, yet I suspect that some of you would ask yourself:

Why would I ever design in RGB for printed material that will be printed in CMYK ― or even CMYKOG (Hexachrome®)?

Moreover, some may have heard about initially designing in RGB for print before, tried it ― and never did it again ― offering a statement such as this:

I tried designing in RGB ― but all the colors just turned out muddy when I converted it. That’s the last time I’m trying that again…

A valid point. But to prove my case, I will start at the beginning and explain why, in the majority of cases, I design in RGB in the initial design stages of print work. Of coarse I send my files off to the printers in CMYK, but this article is about how the initial file setup in an RGB color profile can benefit designers.

You may ponder as to why anyone would design in RGB, when the final output is in CMYK. This is like saying:

Why should I mix the ingredients to make fresh cake, when I can go to the shops and buy one ready-made?

Well, the answer to this is quality. If you design in RGB, you have a larger color gamut to work with, as well as many additional benefits:

Benefits of Designing in RGB

★ RGB File Sizes are about 25% smaller than CMYK

★ Many filters and functions are only available to use in an RGB color mode in PhotoShop® and similar programs.

★ The RGB color gamut is larger than CMYK

★ Working in RGB means that your images are web-ready with no color conversion (as opposed to designing for print in CMYK and converting the color to RGB for web-use).

To place the above list in a workable context, here is a simulation of how using RGB to design your printed material would have been more beneficial than CMYK (based on one of my previous comments in the aforementioned CD article):

…I setup my files as CMYK with a FOGRA 27 color profile. After spending hours designing an 8-page CD Gatefold design, the client supplies me with some more photo files to be used. As they originated from a digital camera, they are in RGB. I place them in layers in Photoshop® and get to work. An hour later, I want to use certain filters on these layers — but I can’t, as many functions and filters are only available in RGB mode in PhotoShop®.

…After spending much work-around time editing these photos in separate RGB files and importing them back in, I transfer my PSD file onto my MacBook as I’m working on the move. As CMYK files are approximately 25% larger than RGB ones, my laptop starts to slow down, causing loss of productivity to myself.

…My client also informs me that this CD cover is to be used in an interactive digital booklet and used online in iTunes, etc. As the CMYK SWOP gamut is vastly smaller than the “additive” RGB gamut, some color info will be lost on conversion to the “subtractive” CMYK one.

…Further down the line, I may also want to include images from my own scanner — again, from source RGB.

In conclusion, it’s always easier to work in RGB. Some colors may be lost when converting to CMYK, but that is what the “Preview in CMYK” option is for in PhotoShop®, so you can keep track of desasterous results from any conversions.

Are you convinced of the reasoning behind these benefits?  Next, I’ll take a look at the CMYK color mode:

Benefits of Designing in CMYK

★ When designing in RGB, there will have to be a conversion to CMYK at a calculated time near the completion of an image. Sometimes, the color of the image can change appearance due to this conversion. If you work directly in CMYK, there will be no such conversion ― and therefor, no color loss.

★ er…

★ and….

Ok. That’s it. The only benefit (in most situations/generally) of working in CMYK is the color control ― but a league of restraints counteracts this benefit.

This is not the end of the subject

I realize that this post is becoming rather long, so soon I will be writing some more articles that will accompany this one. The subjects of color gamuts and color profiles are top of my list.

In the forthcoming article about color gamuts, I shall be addressing the issue of why colors can appear ‘muddy’ after an RGB-to-CMYK conversion.

Why not Subscribe to my RSS Feed so you don’t miss a thing?

If you have any questions about this article, please leave your comment below. I know some of the termanology I have used may be unknown to some, so just ask-away ― I’m always glad to help out…