Create professional visual effects with color

I saw this article last week. The use of color is important both in the website and in the communication of all aspects of the work. Good color can make users more comfortable, more enjoyable, while creating a better atmosphere. But at the same time many problems need to be solved in the product design process, Otherwise, it will be left to the visual design and can not be solved. This article tells a lot of basic theory and specific methodology, especially like this kind of article, translated ...

PS: The article is very long, must have the heart to prepare ...

What makes a design look coordinated, methodical, professional? The answer is "color."

Not all projects have to use the shallow "company Blue" (corporate blue) to look professional. Color planning (calculates color) is a framework that describes what colors are available and how to use them.

Color is the most difficult design element. Good color is as difficult to grasp as personal taste and feeling, and there are technical constraints such as contrast, display calibration, and so on.

But for content, color is crucial. If you think a site is important and worth the time to refine it, users often think it's important and take the time to read it. Choose a good color to achieve this effect.

In this article, we review some of the techniques used to create a beautiful palette for your web design.

If you want the site to look disorganized (unplanned), the best way to do this is to randomly select the color.

Even when users first browse the homepage of the site, color will also affect their attitude towards the content. Is this site exciting? Is it believable? Bold (daring)? Is it a political inclination?

As with printing products, color can affect people's understanding of the information they see.

Finding the right color is not easy, but the whole process is still traceable.

A good design strategy will include a color scheme (for example, to convey information and create an atmosphere, an optional range of colors.) and the specific arrangements for this programme.

Let's assume you need to design a professional website. (Of course this is likely to turn into a drinking game (drinking game): Is it the customer's request that the website be "professional", "concise" or "modern", that is "I like this website, strip down."

The color scheme depends on the characteristics of the site. For example, the websites of banks and flower shops seem to be very professional.

But people may not like to buy flowers on a "corporate blue" or silver-gray web site. Or imagine that the website of Bank of America turns purple and yellow green.

A "professional" design gives users the impression that the site is a serious and formal display of its subject matter, even if the theme may be very relaxed. Regardless of hue (hue) or color value (value), "professional" means to be coordinated, methodical, and thoughtful.

using grayscale

The best way to work with color is to start with no color.

Removing the color from the design can expose the root cause of the problem, and these issues need to be resolved before starting to think about which yellow-green shades of color (shades) are better to look at. If the design doesn't feel good under black and white, then it needs to be changed.

Does each page have a clear goal? Does the design guide the reader through all the content? is the content compelling, inspiring or objective? is the title clear? Does the text chain contrast with other text? Colors can enhance these effects, but the layout, Problems in style and organization cannot be solved by color alone.

If you want to redesign, please remove the color first. This simple coloring behavior shows the site's foothold. (In fact, redesign should start with a reassessment of your goals and content, but this is another story.)

Sometimes, removing color is a solution.

I used to work with a web design company to redesign their website. For this project, they are very picky and want to be better. But if you think it's hard to design for yourself, try working with the group. Before the end of the project, three of us drank wine and watched the Nineth draft design.

I suddenly merged Photoshop layers and then clicked "Go Color" to turn the copper and blue designs black and white. To everyone's surprise, it worked.

Before the end of the week, we finished a "warm" grey design with a red reinforcement. We knew we were successful when previous customers began to appreciate the new design and received more customer calls.

Use Photoshop squint filters to test your color scheme.

Make screenshots with at least three pages of the site. Open each screenshot in Photoshop and make a copy of the background layer give the new layer a Gaussian blur using image-> to modify-> tone separation. Use 8 to 12, or use a filter to-> pixels-> Mosaic-use 15 to 30 pixel

This allows you to see the real primary hue. The color scheme, the more colors you use, the more weight you have in the user's image.

Once the site layout and organization used to have no color, now is the time to choose a palette. but which one?

Adjust your hue

Color has three attributes: hue, saturation, color value (sometimes called lightness): You can read this in depth: The basic theory of color.

Saturation is the color of how strong: The color of the neon effect is very high saturation, and the color of crayons is less saturation.

The color value indicates how bright the color is (for example, how close to black or white)

Hue determines which part of the rainbow the color belongs to, such as red or green; This is where people make mistakes.

The uncoordinated hue can easily k off a color scheme. A design can be in a hue of hundreds of different shades of color, from crayons to neon lights, it still seems to be organized. But if the hue is mixed in the wrong way, the entire color scheme will be messed up.

One way to avoid the uncoordinated hue is to use a third color to separate it. A black, gray, or white buffer is the safest, because the gray system is neutral: You can mix black, white, and gray with any part of the rainbow and coordinate.

The second scenario is that different hues use different proportions. If the color scheme has purple and brown, then the design can contain a lot of dark brown, and add some bright purple to adorn.

Another option is to change the color value. Pure blue and bright cyan are very common combinations, but dark blue (sea blue) and indigo (Azure) can be compared to each other by enough contrast. Red and purple are big differences, but they don't clash, and they're close enough to be a lot less deliberate. Light Red (pink) and dark purple can provide contrast.

Unfortunately, avoiding the wrong color combination cannot be equated with choosing a good color. If you are satisfied, but your users feel uncomfortable, it is not a successful color scheme.

found excellent color scheme

Where did the excellent color matching come from? There are hundreds of colors and thousands of combinations, how to choose?

Small static web designers should take color from the content.

I recently made a website consisting of 8 pages, the top is run through a carefully crafted metal frame, in contrast to the dark blue sky. Using Photoshop's Eyedropper tool, set to 5*5 size, I chose the deepest and most shallow part of the sky and applied it to sidebar, links, headers, footers, The chroma is also adjusted.

When the customer asked how we designed the site so well, and so quickly, we responded by saying "That's what we should do". But the color is there, I just found it. (Translator Note: There is Lu You's "article this day, the hands of the" style ah ...)

The clothes they wear are an excellent indicator of the color of the target audience. Look at what your users are wearing, and you'll know what colors make them feel comfortable. If your site is about, describe sports leagues, think about the clothes they wear when they play, which is better than when they are working.

If you're lucky enough to get a picture of the target user, take a look. You need to get the middle color of this group (average). But if the photos are not available, go shopping.

Apparel designers in the business world have excellent color sense for each mood and lifestyle. Of course, it's not like the haute couture on Avenue five. Google searches for "camping stores," "Baby Clothes," "ski and swimwear" and " Casual living "will find a lot of good color combinations.

People will dress according to their tastes. If you use their favorite color, they will feel more comfortable on your site.

using Textures

Texture is made by slightly changing hue, saturation, and color values.

Monochrome textures (for example, a texture with only one hue) and patterns without conflict provide a subtle dimension to most sites.

Simple and special texture backgrounds are easy to build:

to the inner wall (interior wall) or something bare but rough. Open the copy background layer in Photoshop and rename it to "texture 1″ the background fill with colors in the color scheme" texture 1″ properties to "Soft light" and set the transparency to 30%. Try it on your website. If it doesn't look right, continue to adjust the transparency.

The name of the layer is considered. You may be trying more than one photo. But avoid naming layers like "wall texture" or "monitors texture." You need to focus more on the effect on your site than where it came from.

set up excellent color scheme

A good color scheme has certain characteristics. Think of it as a framework or a guide to ensure the consistency of the design. The color scheme should:

lists 2 to 5 hue descriptions that can be used together in a design where hue can change how many shades of each hue can be worked well when compared to black and white

Here's an example

Designers start by choosing warm tones that feel good. There is no logic, just a vague goal of "fall", and her feelings.

In Photoshop, two layers use different shades of black and white (overlay). The overlay mode for each layer is soft light. For the rightmost color black is a bit too dark, so the transparency of the layer is also adjusted.

To unify the colors, create a new layer filled with pure red. The overlay mode is "shaded" and the opacity is about 40% (note: The order of the layers is important. If the shading layer is below the black and white layer, the color changes)

It gives designers 15 colors to choose from. She chose 4 species with a certain range and hue. These colours are in contrast to white.

Change is important, so the designer keeps trying. What does it look like when these colors are contrasted with black? What if we get a little darker?

What happens if we change together? The tint layer uses image-> to modify-> hue/saturation to create a "no fall" sensation, but the colors are still very much in harmony. Perhaps this set of colours can be used for Easter.

The final result is a set of color scheme: a set of different hue, with a good color range. Download sample files

Use frame

Tomorrow's pictures, photos, icons and today's color scheme can be a good match it? What pictures will the website need after 6 days? But the content is part of your color scheme.

You should solve the problem by having the picture refer to the color scheme or let the color scheme refer to the picture.

Implement your color scheme, even photos, which is a good way to get all the pages consistent.

The easiest solution is to find a picture that matches your color scheme. Keep in mind that a color scheme will leave some room for the main color of the picture to fit, which will work well. Many photo storage sites allow you to search through colors (hue: red, green, blue).

If a picture doesn't match your color scheme, make some coloring adjustments

open a picture in Photoshop Create a new layer, select the overlay style as "shaded" using a color scheme to fill, preferably with the picture closest to the transparency of the color layer to adjust to 50% Continue to adjust the transparency until you find a good balance between the color of the image and the color of the website. This technique can be used on photos, pictures and icons-anything based on pixels (if you don't have a picture yourself, make sure you have the right to modify it.) You can improve the effect it shows on your site, But you're still disrespectful to other people's artistic achievements. Looks professional

No group of colors itself looks "professional". Even you would rather follow some steps to get a more coordinated, orderly feeling.

No matter what the site is about, the user will until it makes itself very serious.

Tips

When you think you have a good color scheme, try at least one weeks. The evaluation of color needs to feel, and this feeling takes a while to accumulate. Give yourself a little time to fully absorb the characteristics of this color. When you think you have a good color scheme, don't let it get boring. Your users feel the same way you do, Keep changing. After 4 months, review the colors and make a note. And then ask: Do they still apply? If not, what should be changed? What factors affect your changes? Use less bright colors. A small piece of bright colors will attract users, but if users can see everywhere, they will look aimlessly ... Some people think that color schemes should have a small hue range, leaving some leeway to make your design more in-depth. Avoid using pure primary colors such as red, green, blue, and yellow. Give them a real personality: red, but some purple. Blue, but a little green. Add some orange to make the yellow more "warm" to make sure your colors "fade" It still works. If you choose red, please remember that bright red means women, dark red looks like rust or blood. Yellow will turn into dark brown like fading sunlight. Dark blue is mysterious, and light blue is tranquil-if you increase saturation, it may be water blue. (Translator Note: Think this should be for print and other possible fading products) Mac user, please configure your monitor. Open System Preferences and click Universal Help. Change your display to grayscale. This is useful when you want to immerse yourself in a black movie. No matter how vivid you want your site to feel, use a neutral background. Black, White and gray can match almost any hue. If you want a small font (such as 14 or smaller) to match a large color, make the text darker than normal. This will compensate for the reflection inside the character. More chroma with a small amount of hue "looks beautiful" It's an intuition. But intuition is your sense of self, the user's critical and the Power of the boss (who provides project funds) the war between the use of a soft background to make content more prominent

Ben Gremillion authorized to Wdd. He is an independent web designer who believes that the uncertainty of project deadlines is inversely proportional to the number of finalized feature lists.

How do you create a successful color scheme? What works for you?

Source Address: http://pd4.me/blog/transl......k-with-color/

Original address: http://www.webdesignerdepot.com/2009/12/how-to-get-a-professional-look-with-color/