To help you quickly fix the web color method (with color artifact)

Complete 0 Basics How do you do the web color? Today @ Heart disease 16 Night Cat This Good article, from the page base color, accent color, dark to apply the entire color scheme has a detailed process and teaching, each step almost without thinking, with the article to provide the color of the artifact can be done, you just decide the whole style on the line. Never miss a good thing, come on!

　　Directory

Determine the base color

Decide accent color

Decision Dark

Let's apply a color scheme

　　01. First determine the base color

First of all, to determine the base color of the site! Although you can use any of your favorite colors, but in order to let others understand your design intentions and ideas, try to pay attention to the following points.

Good at using the information at hand

The client's logo on the commonly used color is often successful.

Avoid using competitors ' colors

The difference of brand color is very important.

Get to know the colors your user layer likes

Regardless of what kind of user you are facing, you need to know what color they are suitable for.

Do not use the same color

The girl's design does not mean that it is pink, to show your creativity.

Decide on a key word

In order to show the brand and the atmosphere of the project, the color of the key words, in the face of difficulties in color matching is very convenient method.

For your work to design a good color scheme, reference to other people's excellent design is very necessary! By clicking on the "Color" button on the following website, you can choose a color based on your intuition.

Dribbble

Designspiration

Choose the color you like to click Update, and associated with it in the form of a design list. This time you will create a color version, and then choose the color I think should be more smooth.

In Designspiration, you can choose between five colors to combine and choose the right color for reference in a more consistent image. For example, choose light blue and pink here.

Click the Search button, and the associated work is displayed.

Select color in the palette as a reference, the upper section of the palette shows the work is the newest and most active design thinking. And the following, is more trustworthy, to the company's color as a reference work.

If you find a favorite piece of work, you can use the Chrome expansion program to pull out the color, you can also use Photoshop directly to select the color (in the Eyedropper tool state, first hold down the left mouse button, and then hold down the keyboard option key, you can " If it is windows, press the ALT key CS5 the above version to use "Drag the mouse to the outside of the screen to select a color." )

02. Next decision Accent color

Accent color is to make the audience special attention, but the opportunity to use is not much, play an emphasis on the effect of color. Paletton this site, using the basic principles of color, you can easily create a beautiful color scheme.

Paletton

The Base color has been decided before, the "Light Blue (#57CBEC)" input to the lower left corner of the primary RGB, the following design case for reference, let's click on the "addcomplementary (append the upper secondary color) button. In addition, by clicking on the icon in the upper left corner, there is a large number of color schemes that you can decide.

In this time, we highlight the color, choose a conspicuous red (#FF6F59) bar.

03. Then decide on the dark

In a Web project, you might want to use a different shade of the same color to make a color match. One is a dark gray text text, and the other is a lighter gray used as a background design to decorate different content.

You can create an initial gray by performing the following steps, choosing a color to reconcile.

Opens Photoshop, creates a new file, creates two rectangles, and fills the #424242 and #fafafa, respectively.

Then create a new layer that fills the base color (#57CBEC) above.

Right-click on the layer to select blending mode, set to "overlay", and opacity to adjust within "4-40%".

Then use the Eyedropper tool to select the color to complete.

This is what the basic color looks like before it fits. Regardless of the color can be used to correspond to this point.

Then this basic color is applied later. With just a little bit of blue, we created two colors, #404d51 and #fafbfb.

Finally add white (#ffffff) here, all 5 colors of color matching version of the smooth made.

　04. Let's use the matching color.

So let's make the color palette that has been made into your Web page. This time in the design case, we practice using color matching on this simple website wireframe, where you can take advantage of the free PSD file one pagewebsite wireframes:http:// Pan.baidu.com/s/1er3wmds

And that's what it's like to apply the color palette that we've configured before. This is a job that takes about five minutes to complete, and a web design with your personal style is complete.

Let's try to do some other palette, and then use the same template. This is a color combination of orange and blue.

You can use this color if you want to show a calmer atmosphere.

Even the color version of the same colors, the application of different design elements, give people the impression is different. If you want to highlight a point that is not highlighted, then go back to the paint step and think about it.

If you need more colorful color schemes, by repeating the steps above, you can extend your palette indefinitely.

Then, the full text here is over, the steps summed up or very simple, we may wish to try, together to feel the fun of design!