Color gives a life to design. It forms the core in transforming any layout. Have you ever looked at a web product and thought about the depth its narrative imparts? Well, that could possibly because of the wonderful color scheme that clicked with the design. Color plays a pivotal role in establishing a communication with the design as it creates an emotional connection by way of atmospheric impression. However, if the color palette goes poor in selection, it can actually weaken the look and create friction for the viewers. Mismatched colors can prove jarring and ruin the whole draft by putting a creative block in the outcome.

If you aim for successful experiences, then as a designer you must crack the color code with the combination that just fits in perfectly. You never know, your choice can not only delight, but even serve as inspiration for the audience. So, at any cost, never underestimate the impact of colors in a design. Illustrations even though same can have different effect through variations in the color grading and tonal quality. Color-in-web- design

Yes, even a tinge of variation in the hues can take the product to heights or falls. Be it straightforward shades or low scale palette, color can provide that visual kick to a great extent. You, as a designer, might be expert in your craft, but it is your choice in colors that can create a gap between success and failure. Want to experiment with new and exciting colors, but confused about the styles that can come handy? Okay, here I have a quick color guide for you that can help you fetch results. Now, this is not a magic mantra or something for your color issues, but will surely set the visual trigger for the users.

Creating a Perfect Palette

Let the first step be setting up palettes in Illustrator. Do not be worried about the perfection of the colors at this stage. This is the time when you should be more concerned in what the colors will be, example, if you plan to use red, white and blue, let them just be an old red, white and blue. You must be contended by the fact that you can manipulate the palette in the stage of post production. So, the point is, take up whatever color you desire and dream.

Do not restrict yourself in this initial stage. You can even take your pick from the Illustrator’s default color swatches. It is possible to create a wonderful scheme by way of altering these colors in the default Illustrator swatches. It is important to select the colors that stand appropriate to the context of the environment.material design color palette

If you are new to working with an illustration or handling many at a time, it is always a good method to set up a playground for these colors. Personally, I have benefitted a lot with this technique of color play. It is always good to see how colors interact with one another and emerge as a dynamic cohesive pattern. When you set a palette, build a scheme so that each color has at least one point where it merges or interacts with each of the other colors.

After the colors get selected and there comes a canvas or environment to play them in, it is the time to reform them in Photoshop so that the palette gets graded and turns out to be more interesting and visually appealing, or we can say more readable for the eyes.

Photoshop’s Adjustment Toolkit

Let us admit. Photoshop is every designer’s baby. The wonderful transformation that images witness is very much courtesy Photoshop. There are few tools with the help of which color grading is done. These are-

  1. Curves- Want to control the image tones? This adjustable graph manages the tonal range.
  2. Levels- An adjustable graph that modifies the tonal range and color distribution of an image by manipulating the intensity levels through image shadows, midtones and highlights factors.
  3. Selective Color- A set mixer that gets directly applied to the selected color.

Now, if you are thinking that these three are the only tools in Photoshop that are used for color grading, then you are highly mistaken. These do not comprise everything, but definitely compose a major chunk of what is applied or is usable in the app. For using these adjustment layers, you need to go to the Layer option, select adjustment layer, and then choose the type of adjustment layer you will be adding.

Curves to Control

Curves have various properties controller. Here, we are majorly focusing on the channel selector that is also known as RGB and the line graph that covers lower left quadrant to the upper right. Our work mainly incorporates RGB channels for this specific task.

Firstly, take red channel to add some variation and then start playing with the pretty line graph. In order to assess the line graph, the lower left area stands for the shadows corresponding to this channel in this piece, on the other hand, the upper right area is used for the highlights of that channel. Whenever you click a point on the line graph, there will be an anchor point that can be maneuvered by simply dragging it.Curves control in design

 

While you are working with curves, what I want to suggest is that try to play with these controls as much as possible. As far as I know, there is no restriction on the placement of the anchor points. Whenever you feel like clicking and placing, just do it. Also, if you are a safe player and do not want to go that far while clicking then place a single point in the middle of the graph and further proceed to placing the anchor points on either side so that you can adjust the highlights and shadows one by one without manipulating the whole piece.web design colors

Raising With The Levels

Levels work on parallel lines to curves. Here, once again, we will be changing the tonal range of the illustration. On the contrary of a line graph, we will be taking into consideration sliders to alter the tonal range of shadows, midtones and highlights. Moving ahead, we will again take RGB color channels in action so as to have an impact on our channels in isolation. Okay, there are some points you must keep in mind. The target with the levels is to alter the shadows and highlights of an image, that is, the areas where it is the blackest and the areas where it is the whitest.

The result will affect the trueness of the dark and light tones. This implies that the blacks will not be fully black anymore and also, whites will have a deviation from being pure white. For instance, if we choose blue channel and then select the Shadows slider that is black towards the right, by doing so we are adding a blue into the blacks and modifying with the black value to some extent. On the whole, the entire picture except the pure whites will be full of blue that will in turn enhance the dark value of the respective dark areas of the image.Levels-Dialog-Box

 

However, if you drag the Highlights Slider (gray) on the left side, it will add its counter to the whites and any color value with a white hue in it (all except true black). Experimenting with these tools will change the contrast level of the image, so you must play a little with the brightness and contrast settings to maintain an overall balance.dark and light color in web designDark-levels-effects

Unlock The Selective Color

This is the toughest tool as it deals with polishing the colors that you have been already working with. No doubt, Curves and Layers will do the magic for the palettes you set, but there will be times when no matter how hard you try varying and manipulating with the grading, one color might feel too dominant or dry for the piece. Look at the color pattern below. Don’t you think that red is way too strong and is somewhat pricking the eyes? Are you thinking of changing this red? Yes, only red.

Well, then here is your wish granted. Selective Color is what you need right now. It is the apt tool to select a single color and change it in isolation with the whole image.

From the Colors dropdown option, you can choose the exact color you want to alter and then you can manipulate with the CMYK percentage to add or omit the specified color value from the typical color. When you move on to the Selective Color option, by all means, you must begin trusting your instincts and eyeballs to stand by your choice for cohesion. This final finesse will surely bind and blend your palette together on a more consistent and precise platform. It should be use with care.color-selection

The Final Point

Designing is all about diving into colors. There are vast amount of tones that just create a perfect blend by way of palettes that bring forth the best features. Photoshop can deliver great colors through amazing styles that ranges between tones. Adjustment layers will help you dig deeper in your images and achieve the best outcome through Curves, Levels and Selective Color.

It is through these tools that you can very well master the properties of a palette. These palette generators offer great functionality and come very handy for the web projects. So, folks, that was all about the color card. Hope you got your cues for the hues.  What are you waiting? Pick your palette and let the collection take over.
Can animation create awesome user experience? Read my next article and figure out the secret of animated transitions in your interface.

The following two tabs change content below.

Prince Pal

UX/UI Strategist & Usability Tester at Think360 Studio
For 12+ years I have designed, developed and marketed websites / apps startups in New York, California, Florida and in India. Always focused on great User Interface is key.

Pin It on Pinterest

Shares
Share This

KEEP ME POSTED WHENEVER YOU PUBLISH NEW UX SH*T!

No spam, ever. Emails are never shared.