page layout - design/ display user evaluation state's

Im looking to discuss ideas on how to represent the "evaluation of a user".

• You the evaluator


• Users to be evaluated


• Based on score border around user profile is different color

How could this be represented in 1 single image? Attached a Concept wich is not clear enough I need something thats more catchy.

Answer

What about a transparent png icon with a background color applied via CSS?

Images would all be the same size but you could alter colors based on transparent areas of the PNG.

This is a jpg representing the idea....

But the actual png would have the actual icon transparent:

img.evaluser0 { background: #fef200; }

img.evaluser1 { background: #f26422; }
img.evaluser2 { background: #ec145b; }
img.evaluser3 { background: #00a650; }