: Good source for learning about light/shadow/gradients in flat designs I came across this creation here on dribble. I have marked some areas with arrows, which are either 'lit up' because of

@Jessie844

First of all, flat design is a style that have some components.

1) It is a drawing, not a painting, not a photo manipulation. So it is an abstraction of the reality.

2) It is a cartoonish simplification, so things are very rounded, or squared, some organic but the curves are a simplification.

The same goes for the "volume", where you simply have 2 options, light-shadow.

But this light and shadow musht match the stile of the simplification mentioned above. Rounded, squared or organical.

This question is not exactly the same but can give you an idea to visualize light and shadow: Prototype Visualization: How can I learn to render glass convincingly?

Normally the reflections and shadows correspond to a plastic reflection, not a metalic one:
otake.com.mx/Foros/MiniTut/R&R-07.png

Vote Up Vote Down

@Kimberly620

This is a extremely broad but i will try to be succinct and brief.

Observe the universe and use references. You do not have, or in fact even want to use your observations directly, but looking at similar things will help you to figure out what you want in your pictures and what you want to simplify away.

For example in your second picture you see a small light band in the middle of your car. This is typical to many car models. What you see is the specular highlight (refection if you may) of the sky.



Image 1: Observe how the panel has highlight on the sides. Differently shaped panels have different highlight patterns. Steal pattern or make your own.

In practice it suffices to know that materials have seemingly two properties specular (which is responsible for reflections and highlights) and diffuse components and these together with texture and bumpiness can explain many of the materials you see.



Image 2: 3 components of a synthetic image. Actually secular and reflection is the same thing, and on a really detailed level they are all the same thing. But this thinking often helps.

Then you need to observe reality to see how light behaves to become better at this. I suggest reading:


LIGHT - a detailed tutorial for a super fast primer.

Vote Up Vote Down

@Lengel450

These are simply called vector graphics. The effect of light and dark is highlight/shadow (shading).

Here are 50 tutorials to create vector art, specifically in illustrator.

To learn lighting, check out this, this, and this tutorial.

Vote Up Vote Down