Advanced Effects & Layer Styles: Making Your Animations Come Alive
Have you ever admired an animation's aesthetics or effect? Have you ever thought about how the type of text becomes crisp with a sheen effect, or about how the button becomes perceptively 3D (making it look like it pops outside of the screen)? Well, the answer to these questions usually comes from the use of layer styles/effects.
Layer styles and effects can be an intimidating topic, however, once you learn about them, you'll want to incorporate many types of layer styles/effects in all of your designs. So let’s breakdown layer styles and effects in a step-by-step fashion.
What Are Layer Styles?
Layer Styles are like cosmetics for our design elements. The design element (shape or text) is already created; layer styles and effects, simply dress them up. In programs like Adobe Photoshop/After Effects, we can apply layer styles/effects to any layer to add shadows, glows, outlines or textures to that layer without making any permanent adjustments to the actual design element. This allows us the ability to keep everything editable.
Five Effects That You Need to Know About
Drop Shadow: Drop Shadow is one of your best friends when you want to give an object the appearance of floating above its background. Drop Shadow creates a soft shadow behind the object. When you hold a piece of paper above a white desktop (if you were to look underneath the piece of paper, you would see a shadow). Drop Shadow creates the same shadow on the computer.
Inner Shadow: Inner Shadow operates in the opposite manner to Drop Shadow. Instead of the shadow being created behind the object, it is created within it. This gives the object the appearance of being pushed into (pressed) or engraved onto the material.
Stroke: Stroke adds an outline/border to the current layer. If you want a bold outline/border around your text or shape, stroke creates this outline/border. Control the size, colour and placement (inside, outside, centred on-edge)
Bur & Emboss: They give elements a 3D 'raised' look by adding highlights on one side and a shadow on the other, which creates an illusion of depth. This works particularly well for things like buttons and badges.
Gradient Overlay: It allows you to add your element a gradient colour across its surface, rather than a flat colour. For example, you could turn an ordinary circle into a glowing orb by simply putting a gradient on it. It is one of the simplest ways to add depth to your designs.
Custom Styles & Presets: A little known industry secret is that professionals frequently save their favourite combinations of effects as a 'presets' or Custom Styles.
For example, you have created an awesome looking glowing button effect for a game project. Rather than recreating it manually for every subsequent project, you simply save it once and then apply it with one click to whatever new element you wish to use it on. This dramatically reduces time spent doing multiple versions of the same style and keeps your design consistent across real design projects.
Why Does This Matter To Your Career?
If you want to work in the animation, game design, user interface animation, or visual effects industries, mastering how to use layer styles can set you apart from others. The effects created with layer styles are used in a variety of applications, including app interfaces, title sequences, explainer videos, and much more. Start off slowly and experiment at will! Don't hesitate to move the slider bars around. The best way to learn about the effects is to just try out any effect. Every successful animator has gone through the same stage that you're in now!
Frequently Asked Questions
1. Do I have to have expensive software to practice layer styles/effects?
Not really but Adobe applications like Photoshop & After Effects are the industry standards for creating layer styles. If you want to get started out using free applications, such as GIMP and/or Canva would be an excellent start, as they both provide similar layer styles/effects. Once you have learned about the concept of layer styles/effects, it will not be as difficult to transition to a more professional application.
2. If I use too many layer styles or effects, will my design appear unprofessional?
Yes! This is probably the number one mistake that beginner designers make when they are just starting out. A good rule of thumb is to use effects for a purpose; each drop shadow, glow, etc., should serve a purpose. If you’re unsure about an effect, you should always go with less rather than more. Using clean, simple effects will almost always give a more professional appearance than using 5-10 different effects on one element.
3. Can I animate layer styles in After Effects?
Absolutely, and this is where the real fun begins! In After Effects you can animate nearly all of the properties associated with a layer style over time. You can animate the size and/or opacity of a glow; the distance and/or size of a shadow; create a smooth color transition of a gradient while the gradient is changing. Animating layer styles is something that huge numbers of designers use within motion graphics & user interface animations.
4. What’s the difference between drop shadow vs. inner shadow?
Using the drop shadow layer style creates a shadow underneath your element, which gives the illusion that your element is actually raised up from the surface. The use of the inner shadow layer style creates a shadow that appears to be inside the edge of your element creating the effect of pressing your element. Although they are both useful, the visual result created by each of the two effects will be the exact opposite of the other effect.
5. How do I save a custom style in Photoshop?
Once you have added all of your effects and you’re happy with the way everything looks, simply go to the styles panel and click on the ‘new style’ button. You will then be able to name the style and save it. After you have completed these steps, you will now be able to apply this entire combination of effects to any new layer with a single click. If you are going to be designing any larger projects, this will save you a ton of time.
6. Do professional animation studios use layer styles/effects?
Absolutely! Most professional animation studios that are creating game user interfaces, app animations, explainer videos, and broadcast graphics rely on the use of layer styles, effects, and presets. Layer styles and effects help maintain visual consistency throughout a project and speed up the overall production process in a professional environment.
7. How long will it take to become comfortable with using layer styles/effects?
Honestly, it won’t take very long at all. If you spend 30 minutes per day playing with and experimenting with different effects, you should begin to feel comfortable with using layer styles/effects and creating your own layer styles/effects within two to three weeks. The single most important part of becoming comfortable with the properties of layer styles/effects is hands-on experience. Although reading about or watching video tutorials about layer styles/effects can help, the best way to learn about layer styles and effects is to move the sliders and watch the changes happen in real-time.
