A Designer’s Guide To Drop Shadows



A Look at Drop Shadows

One of the most common design challenges across many mediums is creating depth when three dimensions are not available. Flat designs can be boring and monotonous. To combat this, it is our job to create designs that jump off the page. For years, designers have been creating the illusion of depth by using a common technique called drop shadows. Drop shadows place a pseudo-shadow behind a design element such as an object or type. This false shadow is controlled via certain parameters to create varying degrees of intensity and softness to simulate realistic shadows. Using this technique makes design elements appear to hover over the page, jumping out and garnering extra attention.

Guide to drop shadows

This adds a lot of depth and dimension to your work instead of having flat, 2-dimensional imagery. Adding depth creates more visual intrigue. It also calls more attention to any element where you’ve applied a drop shadow. Some designers may use a slight drop shadow to darken an area around type in order to make it easier to read. Drop shadows can be created in applications such as Photoshop, and they’re also rendered on the web using CSS styles. We will take a look at both, and how you can use the different parameters and techniques to create many different kinds of drop shadows.

Drop Shadows in Photoshop

Drop shadows can be created in Photoshop using layer styles. Open Photoshop and create a new document. I will use a bold sans serif font, “Franchise,” created with a medium grey. Type a word or a message for this tutorial. In the “Layers” panel, double-click the text layer. The layer styles menu will pop up. Select “Drop Shadow,” and we will experiment with different settings to create different looks. Changing or rearranging any combination of the settings that make up your drop shadow can result in vast differences in how they look.

Continue…





No Comments

Your opinion is important to me. Be heard!

Dreamweaver Fireworks Flash Illustrator Indesign Lightroom Painter Photoshop Quark Typography
Screen Shot 2014-12-20 at 2.29.26 PM
Photoshop Time Saving Tips

<iframe style=”border: none” src=”//html5-player.libsyn.com/embed/episode/id/3252477/height/360/width/640/theme/legacy/direction/no/autoplay/no/autonext/no/thumbnail/yes/preload/no/no_addthis/no/” height=”360″ width=”640″ scrolling=”no”  allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen...

Seamless winter patterns
Free Vector Winter Patterns

Winter Patterns In case you haven’t stepped outside recently, Winter is...

Picture 30
Molding Images to a Surface in Photoshop

Molding Images If you want to create some cool effects with...

Premium
Clinix - Free Bootstrap Templates
5 Free Bootstrap Templates Via ThemifyCloud

Bootstrap Templates Normally, I share one free HTML 5 or bootstrap-based...

joomla-main
An Introduction to Joomla

What is Joomla and it’s Advantages? Joomla is an open-source CMS,...

Failure as a graphic designer
Why You’re Failing As A Graphic Designer

Failing As A Graphic Designer If you’ve ever tried starting your...

LittleSoul
75 Clean WordPress Blog Themes

Pick the Right WordPress Blog Theme for You WordPress has come...

photography-wordpress-themes-feat
10 Best Photography WordPress Themes

10 Best Photography WordPress Themes That Make Your Heart Beat Faster...

free-wp-feat
Top 20 Free and Premium WordPress Themes to Refresh Your Website

Free and Premium WordPress Themes Wait a minute, you say. Have...

refreshing-WordPress-themes
20 Refreshing WordPress Themes for Autumn

20 Refreshing WordPress Themes Seasons come one after another, and, fortunately,...