First appeared on September 16, 2000
Last update on Friday, February 8, 2002
Since the early days of the web, there has been always a popular graphic design trend. First, drop shadows dominated the Internet, then inner bevels, and now scan lines.
Infamous Drop Shadows
It is probably the most overused graphic technique ever because it is not only easy to implement but also provides a vivid 3-D impression of depth especially when used correctly. The power of drop shadows lies in the very nature of human visual perception system. Although it is totally a 2-D effect it nevertheless almost always results in vivid 3-D perception. It's sometimes really difficult to distinguish the real drop shadows from the fake 2-D ones because our visual system is extra-sensitive to this visual cue among other 2-D cues such as perspective.
Probably the most frequent mistake designers make in using drop shadows is using different angles of light in the same image. Fortunately starting with the 5th version, Photoshop started to offer dynamic layer effects including drop shadows and also a feature called "global angle" to help designers not to forget to use the same angle of light.
The second most frequent mistake is the tendency to use gray shadows on non-white backgrounds. The shadows on a white background are gray because white looks gray when illumination is low. So, a shadow on a yellow background must look like brownish dark yellow, not gray.
Bevels Everywhere
Inner bevels and recently other kinds of bevels (thanks to Photoshop 5.0+) have been heavily used in the graphic design of a large number of web pages. Why are bevels so popular? The answer is very similar to the one I offered for drop shadows: Bevels are easy to implement if you have Photoshop 5.0 or above, and they also provide an impressive illusion of depth again if used correctly. The reason why we perceive a 2-D image containing beveled elements as 3-D is that brain assumes light comes above (since sun light never comes from below), that is highlights should be at the top and shadows at the bottom. So, proper shading of objects result in 3-D perception.
Scan Lines, the Most Recent Craze
Scan lines have been heavily used recently, and the use of the now infamous effect seems to increase in light speed. What makes scan lines so popular among designers? I don't have a scientific answer for this. But my idea is that putting scan lines is the easiest way to add detail over an existing design. If your design looks flat, first try drop-shadows. Does it look better? No, then try inner bevel. Does it look better? No. Ah then try scan lines. Maybe it looks better this time. Scan lines also renders small mistakes invisible by virtually increasing resolution -- so all those blocky curves will start to look better. The only problem of using scan lines is that they decrease the saturation of the colors. But if you don't overuse the effect they often add to the value of the design.
Bevels and Drop Shadows are some of the ugliest things around and i don't believe good designers should use them. If you're not good enough to make a fine design, than an ugly bevel/drop shadow effect won't fix this for you.
And how dumb is it to read this article and than look around this site a little more and discover that the same person writes who wrote this, also writes Bevel/Drop Shadow tutorials.
I'd rather spent my time reading about cliched effects which actually are used as "good" designs, f.e. Non-rectangular borders, Atari-icons, etc.
What about other design fads? Pixelated fonts are very big... and with 3D bevels being sooo last century, 2D/Flash-like graphics are pervading even television nowadays.
And what is a scan line? I thought it was something your graphics card did.
I agree too but it isn't our fault (as Graphic Designers) I think that is the client's fault because they never apreciate how we use the color, the types or a clean design... they want a "modern" or "sophisticated" design and what they understand for "modern" or "sophisticated" it's a "drop shadow", "inner bevels" or "scan lines"...
I think it's either incredibly ironic, or incredibly poor planning, that right next to the listing for this article are tutorials for 2 ways of creating beveled or 3d text, as well as some ways to make a drop shadow..or is 'elevated' text different?
You also forgot link sections, 3dmax images, weird organic shapes, and monochromatic hues....
Home 
Top 25 
Wow Lists 
Latest Reviews
Login
Search 
Suggest 
Print 
E-mail 
Feedback 
Rate 
It is probably the most overused graphic technique ever because it is not only easy to implement but also provides a vivid 3-D impression of depth especially when used correctly. The power of drop shadows lies in the very nature of human visual perception system. Although it is totally a 2-D effect it nevertheless almost always results in vivid 3-D perception. It's sometimes really difficult to distinguish the real drop shadows from the fake 2-D ones because our visual system is extra-sensitive to this visual cue among other 2-D cues such as perspective.
Inner bevels and recently other kinds of bevels (thanks to Photoshop 5.0+) have been heavily used in the graphic design of a large number of web pages. Why are bevels so popular? The answer is very similar to the one I offered for drop shadows: Bevels are easy to implement if you have Photoshop 5.0 or above, and they also provide an impressive illusion of depth again if used correctly. The reason why we perceive a 2-D image containing beveled elements as 3-D is that brain assumes light comes above (since sun light never comes from below), that is highlights should be at the top and shadows at the bottom. So, proper shading of objects result in 3-D perception.
Scan lines have been heavily used recently, and the use of the now infamous effect seems to increase in light speed. What makes scan lines so popular among designers? I don't have a scientific answer for this. But my idea is that putting scan lines is the easiest way to add detail over an existing design. If your design looks flat, first try drop-shadows. Does it look better? No, then try inner bevel. Does it look better? No. Ah then try scan lines. Maybe it looks better this time. Scan lines also renders small mistakes invisible by virtually increasing resolution -- so all those blocky curves will start to look better. The only problem of using scan lines is that they decrease the saturation of the colors. But if you don't overuse the effect they often add to the value of the design.
