[Re]Encoded.com

Make Your Designs ‘POP’

Admit it, effects are cool. Drop shadows, gradients, glows, bevels and the like can be a lot of fun and are ridiculously easy to apply to your designs. However, once you discover the powerful effects waiting inside today’s graphics suites, it’s easy to get carried away. Take a look at the sample logo below:

It’s a pretty simple, text-based (font: Segoe IE) logo with only 2 colors. In some cases, this logo may be exactly what the client is looking for, but for most applications (especially the increasingly bold and bright internet) you need something that pops off the page a bit. The answer? Effects.

Using a few simple techniques, you can bring the text off the page and give it the depth it needs to get noticed.

Gradients

Gradients are a favorite among graphic designers and frankly, they’re one of the easiest to overuse. It is not at all uncommon to see a design use gradient after gradient without any regard for whether or not they should have. On the text, we’ve used a vertical, linear gradient for each word. For the word ‘Sample’, the gradient setup looks like this:

Note that the colors have been brought in a bit from the edges. This helps the word look more 3-dimensional since the bottom of the word appears to be receiving less light than the top is. The orange is slightly more complicated and looks like this:

Like the light grey of the previous word. The light orange starts further down the text so the top appears brighter than the rest of the word. Also, some of you may be asking why we’ve used another color between colors 1 and 3. We simply wanted a more rapid change in color toward the top of the text. To do this, we created another color precisely between our two existing colors (1 and 3) and gave it the color value that was already in that exact area. Just drag it a little to left to create a quicker transition between colors 1 and 2.

Inner Shadow

Inner shadows seem to be much less prominent than other effects. Their uses are more limited and the results are often less noticeable. In our sample logo, we’ve used a white inner shadow (offset: 2, opacity: 85%, softness: 0, angle: 315) to simulate a beveled edge. The benefits of using this technique over an actual ‘bevel’ effect are few, but make it worth learning. On a traditional bevel, Photoshop (and others) create a 3d-esque effect by adding a white highlight to the top edges of the object (like our ‘inner shadow’) as well as a black shadow on the bottom edges. By adding just our white shadow, we avoid darkening the bottom of our text. This allows the text to remain bold and full of vibrant color.

Drop Shadow

Easily one of the most impactful effects, the drop shadow is one of the easiest ways to bring depth to your image. By making your object cast a shadow on nearby objects and the background, the object appears to be standing further off the page than its surroundings. It’s really advantageous to experiment with all of the settings in the drop shadow effect. You can make everything from super-sharp, vivid shadows to faint, wispy hazes that hardly get noticed (but impact the design in a huge way). Our example uses a very soft, fairly dark shadow to lift the text. As a general rule, the softer the shadow, the more realistic the effect. Assess what style of shadow your design needs and tinker with it ’till it looks right… time spent here can pay off nicely in the long run.

The last effect for today is not actually an effect at all, but a place to use them.

Background

We’ve all forgotten about our designs’ backgrounds at one time or another, but it’s not too late to make up for it. Experiment with combinations of simple gradients and patterns to generate some nice subtle effects. In our example, we’ve used an ultra-simple, elliptical gradient that goes from dark grey to even darker grey and is about 150% the size of our canvas. When combined with our pretty, 3d-esque text, the background enhances all the effects by making the scene appear to have more light in the center than at the sides (compare first two images).

Using these simple effects can often carry more weight than more advanced techniques, but like most things, use them in moderation and only when your design asks for it. I think there’s a place for all effects, and they’re likely to make an impact on your design when you use them, but just make sure the impact is good.

• Tweet