When you think of drop-shadows in web design maybe the first thing that pops up to your head is the hideous drop shadows from the 90’s. But we’re not going to talk about them. If you’ve been following closely the new trends in the design communities you’ve definitely seen the recent trend of mixing flat design with big, beautiful diffused drop shadows.
Let’s talk about how you can create or improve your drop shadows in Photoshop.
Create new artboard
Creating an artboard in photoshop is very easy.
- Select File > New
- From the Document Type pop-up menu, select Artboard.
If you want to learn more about artboards in Photoshop click here to read our blog post about artboards.
Set up a BG and a block layer
Create a new solid layer with a beautiful blue-ish color and rename that layer to be called BG.
The one we’re using in this tutorial is #d7dbe8.
Above this BG layer, create a new rectangular shape and give it a white (#ffffff) color and put it somewhere in the center of the image. Name this layer Block.
Create the drop shadow
To create a drop shadow, what you would normally do is go to blending options for the Block layer (Layer > Layer Style > Blending Options) and select the Drop Shadow Effects for your layer.
This is a one way to create a drop shadow, and with a little tweaking of the settings like Distance, Spread, and Size you can get pretty solid results.
But we are going to see a better way to create those beautiful drop shadows that will give you more control over the way it looks and feels.
First, duplicate your Block layer by going to Layer > Duplicate Layer and put the copy below the original Block layer and rename it Shadow.
Give this Shadow layer a darker color like #3f3f3f.
Now we can move this Shadow layer a little bit on the bottom side and make it just a little bit smaller than the original Block layer. This is important because if the lighting on this scenario is somewhere up above and is quite bigger than our Block layer than the drop shadow would show only on one side (below our Block layer) and be smaller than the layer itself.
We can now turn this Shadow layer into a smart object by going to Layer > Smart Objects > Convert to Smart Object. After we’ve than that we can now apply a Gaussian Blur effects on this Shadow layer by going to Filter > Blur > Gaussian Blur and tweak the settings to get the best results. In our case, a radius of 16.6 pixels looks about right.
Already starts to look way better. This shadow looks good, but we can improve it even more. It is a little bit too dark to represent a realistic drop shadow. In our case, the shadow should be softer and brighter. We can make our Shadow layer brighter by changing the color into some lighter gray and changing the opacity level into something less than a 100% making the shadow blend more with the background.
Because we made this Shadow layer a smart object before we applied the Gaussian Blur effects, we have the option to change its settings until we find the perfect look that we’re after.
To change the color of the shadow, just double click the Shadow layer in the layers panel and it will open up a new window or tab with the rectangle shape that we created before. You can change the color from there, save it and it will automatically update the color into our composition.
To achieve more realistic drop shadow effect, you can choose some gray color with a tint of that blue-ish color we used in our background. Real shadows always have some very soft tint from the color of the surface they are cast at. We are going to use #868b9a for our Shadow layer.
Also, we are going to drop the opacity of that layer to 60% for better blending with the background. This way our drop shadow looks great.
The best thing about this approach is that everything we did so far is nondestructive to our layers which means we can very easily tweak this and make more changes to better fit our needs.
For example, we can add a second layer of shadow by simply duplicating the Shadow layer, make it bigger and drop the opacity of that layer to 15% to get a really soft shadow effect from the sides of our Block. We can also change the radius for our Gaussian Blur effect into something like 24 pixels to better suit the soft look of this Soft Shadow layer.
You get the point. You can experiment with this kind of shadow layering for better and more realistic look of drop shadows in your designs that are very popular these days, especially in combination with flat design principles and color palettes that everybody loves so much.