posted by Les James on Oct 14, 2010.
You’ve seen it before. I’ve done it and you probably have too. Photoshop effects abuse is the third leading cause of poor website design (okay I just made that up). Seriously though, before you apply your next drop shadow there are some things I want you to keep in mind, so read on.
We love effects don’t we? Admit it, the first time you ever fired up Photoshop all you did was play with effects and filters. I’ll admit right now that’s all I did the first time I played with it. I spent hours seeing what would happen to an image as I applied filter after filter. Seriously, there was nothing cooler than throwing some text on the screen and then applying every single effect possible to it. I think my personal favorite was Pillow Emboss… ah, good old Pillow Emboss.
I didn’t realize it at the time, but there was a big problem brewing. I was given these great abilities to style without any background or understanding on why or how I should use them properly. Before Photoshop came along, what probably took a graphic artist hours to create was taking me seconds. It means that at that moment I had zero respect for the power I was wielding because all it took was a pirated copy of Photoshop and a pulse.
I think that we can all agree I wasn’t the only person to go crazy with my new found powers. The Internet is littered with sites that overuse shadows, bevels and gradients. We didn’t mean to make the net look like crap, we honestly believed that we were making it cool. It’s what separated us from the guy who had Microsoft FrontPage and a pulse. The result was an unfortunate side effect of what happens when powerful tools become cheap and require no training to use.
We are making progress though. Sites like Dribbble are showing aspiring designers every day that beauty comes from subtle, proper use of these effects. It doesn’t require extensive training or art school to wield them either, just a solid understanding of the principles behind them and attention to detail.
Adding Effects with Purpose
When you get ready to add some effects to your design take the following steps in your head. First ask yourself if it’s even necessary. Will shadows and gradients help the site perform better or is it just eye candy. Deep in the back of your head you should know that adding these won’t make a bit of difference to the analytics needle. But that’s not going to land your work on the next great list post so let’s at least use them responsibly.
What do textures, shadows, highlights and gradients all have in common?
Figure it out yet? They all have to do with lighting. When you see a web design that looks like all of these effects were just puked onto the page it’s because the designer didn’t think about their light source. Without a light source, you don’t see the subtle peaks and valleys in a texture. Shadows don’t get cast and highlights don’t shine on that letterpress text without lighting.
Imagine that you are building this design out of real materials on an easel in front of you. Now take a lightbulb and shine it over your design. Where should you position the light? Should it go above the design, overhead or below? Is it focused like a spotlight or diffused? Is there more than one light source? What about the ambient light in the room?
It’s a lot to think about right? How often do you think designers think about this when slapping these effects into a design? I’ll leave it to you to answer that one.
It gets more complex though. Now picture the actual pieces of your design. Ask yourself what kind of highlights and shadows your light source creates on your composition. Is your design seamlessly flat or is it layered? If it’s layered, how should your light source cast shadows? What kind of materials are you using to build your site? Are they reflective or matte? Are there edges for your light source to reflect off and create highlights?
Think for a second about that awesome texture you found the other day on that textures roundup post. It’s really going to jazz up your background right? But does that texture match your light source? It shouldn’t. Why you ask? Because whoever made that texture didn’t position the light bulb in the exact same spot as you.
Every time you add one of these effects ask yourself if it’s true to life? Does that button really cast that hard of a shadow? Are the lighting angles and altitudes consistent throughout your design? Don’t just add a gradient because you think they are cool, but because the object and lighting demand a gradient to make it look natural.
Calculating all of this takes experience so if there is one thing to remember from this post it should be this: being subtle and discreet is the best policy when adding effects. Sometimes the nicest effects are the ones that are just barely noticeable. We don’t view websites under a 5pm summer sun so lighten up on those textures, highlights and shadows. If you are designing in Photoshop and you don’t move your effect’s opacity slider down to the teens then it’s most likely too much. Squint your eyes… did the effect disappear? Then it’s just right.
Before we finish, let’s talk for a second about everyone’s new favorite design trend—noise. Noise isn’t really a texture. If you reached out and touched noise it wouldn’t feel rough. Noise should be thought of as the internal composition of an object. It’s kind of like a granite countertop. Think of it this way, if you were to move your light source around noise wouldn’t look any different but the surface of a texture would. Just food for thought and probably some opposing comments.
Using all of the effects we have available to us demand more critical thinking then we as an industry have given them. It’s truly what separates the pros from an amateur. Every single time you add a shadow or gradient think about where your lightbulb is. Think about the object you are adding it to. Think about the surface your object is resting on. Now think about how much visual noise this is adding to your design. Is it necessary? The pixel left alone can make your content shine more than the pixel designed.Post A Comment
Also from Echo Enduring Media: