The use of transparent effect in web design

Using the transparent effect is one of the important methods to improve the web design standard. As with other methods, designers have a number of ways to apply the transparency effect to the Web page, today this article to share with you about the "transparent" practical tips yo:

Using transparent effects in web design is a beautiful and risky thing to do. The transparency effect is used to "thin" the color block, text or image, or to reduce the saturation so that the color becomes lighter and transparent so that the contents of the next layer can be penetrated and displayed. This method, if used well, will be particularly awesome--highlighting text or focusing on specific areas of the image. But designers should be careful when using transparent effects, because doing so may affect the readability of the page. If the transparency of the box and text is not correct, it is more likely to affect the overall design.

The following are some caveats and successful cases that subtly apply transparency effects.

Make comparisons with transparent effects

The most obvious advantage of using transparency is that it can be contrasted. The designer can create a color block or text focus on the image, adding the color dimension of the screen. The transparency effect also makes the text jump off the background. The contrast should be considered especially in the application of transparent effects. Transparency is successful only if both the image and the text are visible. So when using transparency, don't forget to ask yourself: Will this make text/images easier to understand?

Don't cover up the key parts of the picture

A transparent effect cannot obscure a background or picture that conveys information. When you decide to adopt a transparent effect as a frame, think about what is missing.

The transparent effect should be applied in a clear and layered manner

The transparency effect setting does not have the perfect parameter. In some cases, 80% is ideal, and some 15% is best. This should be detailed analysis of the specific situation.

Do not think transparent effects enhance text readability

Do not assume that you use a transparent box, the text will naturally read. To think about the contrast-whether the transparent box is to the text or the background picture to the transparent frame, be sure to take full account of the readability of the text. Whether you're dealing with transparent pictures, color blocks, or text, remember that if the visuals make the fonts hard to read, the information you want to express will not be communicated.

Small-scale use transparency effects

Transparent effects are not required for a wide range of use. Small range of use can also achieve good results, such as the use of transparent effects to do Web navigation or button hover effect. Don't think about how to use a variety of transparent effects in a complex way. Select an element and transparent style and run through it throughout the web design.

Do not use transparent effects on the image to create a strong conflict

Given the readability of the text, it is best to avoid using a transparent effect on a picture that already has a strong visual conflict-the brain complements the various complementary colors on the black, white, and color wheels. If the use of fusion after the design has a reduced effect, try not to use transparent effect. Because it's very difficult to make each part of the background to achieve the desired effect. Then you can think about how to match the color better.

To make the effect of transparency artistic

Transparent effect is not a secondary effect. To use the transparent effect to design a dominant image. Large-area transparency is a powerful design for contrast, emphasis and visual excitement.

Don't take the transparency effect as a decoration

You can't just add a transparent effect later in the evening because you feel the design is boring. If only the transparent effect as decoration to use the words will appear chicken, should plan ahead how to apply. The transparency effect is not as simple as the font bold. If used poorly, it will appear hasty, unprofessional.

Use transparency in the background

Transparent effects can be used not only in conspicuous design elements, but also in background images. Some of the great transparency effects are subtle, while other transparent designs are reflected in the layers. Tony Chester's Web site, for example, uses transparent layer technology to make the design look more dimensional.

Do not use too many transparent effects at the same time

It is a good idea to limit the number of transparent effects. Because the transparent effect can create contrast, emphasize and visual excitement. If used too much, it will distract the user's visual attention.

Apply the transparency effect to static and/or dynamic pictures

Transparency is not limited to a single page or static design, it can be used in a variety of pictures and backgrounds, or both. The use of transparency in dynamic diagrams is very flattering and can make people more memorable. Carefully screen multiple picture backgrounds, try to choose the same color, content and conflict, so you can change the background of the picture to use the same transparency. Carefully observe how the transparency effect works for each picture, thus ensuring the complete consistency of the picture transparency, so that the picture, background, text become readable, forming a visual unity.

Conclusion

Learning to use transparency is an absolute shortcut to increasing your design experience. As with other effects, make full use of this technique and test it in different contexts to achieve the desired effect. To master it, the biggest challenge is to make sure that the text is readable in an illustrated context, and that the transparent part does not obscure the underlying layer. Try some of the different degrees and forms of transparency--when you create a background and when you're creating a hover effect--while the image is being processed. Then take a seat and choose the best solution.

Translation group: SDC tomato id:@ congee 8711