Shading has been a vital part of art and design since ever, because it’s the way for people to actually be capable of emulating light and 3D environments within a 2D workspace, whether if it is on traditional techniques (painting, airbrushing, etc.) or digital work. Many times the designers stick to a single way of doing things and so they tend to forget or even to leave unexplored further methods that might be even more effective that the ones they defend, this statement made us think about the many different ways you can create shadows in graphic / web design.

We have taken the 3 most popular graphic programs utilized by graphic designers to do all their digital work, specially web interfaces: Adobe Photoshop, Adobe Illustrator and Adobe Fireworks. We have executed a series of tests to find out the different types of shadows that you can make in these programs and then we compared and figured out which technique works better on each program, so now we like to offer you the results of our research.

For the execution of the following experiments, we utilized Adobe Photoshop CS5, Adobe Illustrator CS5 and Adobe Fireworks CS5. As for the equipment, the computer that we used has the following characteristics:

Operating System: Windows Vista Home Premium, Service Pack 2.

Model: Hewlett Packard TouchSmart.

Processor: Intel Core 2 Duo CPU, T6400 @ 2.00 GHz.

RAM Memory: 4.00 GB.

System Type: 64-bit Operating System.

Screen Resolution: 1680 x 1050.

Refresh Rate: 60 Hertz.

Colors: 32 bits.

Drop Shadow

This is probably the most common way of adding shadows on the 3 programs because of its simplicity and high end results. Although we know that Drop Shadow can be utilize in a similar way in the three software, we wondered which program delivers the best result, so we decided to create the same element within an identical canvas and then we applied Drop Shadow to assess the difference between the results both in graphic level and when exporting using the same file format. Now pay attention to these 3 next pictures, could you tell us what program was used for making each one of them?:

Well the truth is that the first TutorialShock was made in Photoshop, the second one in Illustrator and the one at the bottom in Fireworks.

1. Drop shadow in Photoshop

So apparently the results in all the programs look a lot alike, but they’re certainly some little differences both in the final result, the exporting and the making process itself. Let’s start by analyzing the procedure in Photoshop, this is the program that offers the largest amount of options to customize your Drop Shadow. Once you have determined the object that you want to apply the effect to, look for the effect at the layers panel.

Now let us explain all the different options that you can personalize in the Drop Shadow panel.

Blend Mode

This option defines precisely the blending mode that your shadow will have, usually the default option is Multiply and unless you want to do something special, this blending mode works fine. You should experiment for a while with the different blending modes to see what can you achieve using all of them.

Opacity

The name says it all, this is the option that defines the transparency or more exactly, the strong that your shadow will have, the standard value in this option is always 75 % but as we say, don’t be afraid to experiment with different values.

Angle

Let’s pretend that there’s an imaginary light source pointing to your object and that you can define the light’s position. Angle lets you determine the direction where the light is located and therefore the location that your shadow will have.

If you check the Global Light position, all the shadows in your PS file will have the same position to add a more realistic touch, so unless you’re not planning on making something realistic, always leave this option checked.

Distance

Distance determines how far is the shadow going to be from the actual object, leaving the value in 0 places it right beneath the object, while a higher value will take it far from the object, increasing the deepness in a certain way.

Spread

With this option you can define how hard the shadow will be, which means that if you leave the value in 0 it will look really smooth and soft whilst a higher value will make it look sharper, usually the default value of 0 works fine.

Size

Actually, this option does not increase or reduce the size of the shadow itself but of its blur. Usually low values work really well because they help to give a more realistic look, while higher values will increase the blur’s size excessively and the shadow will almost disappear.

Contour

Contour is an advanced option that you usually won’t be touching unless you’re looking for something in specific. This option defines the shadow’s shape (something like a brush type) allowing you to create different effects and more complex shadings.

Noise

Like the filter that carries the same name, Noise adds grain to your shadow for those situations when you want a more grunge appearance, it’s important to use this option wisely because otherwise the results might leave an unprofessional appearance.

Layer Knocks Out Drop Shadow

At first you probably won’t realize the functionality of this option, Layer Knocks Out Drop Shadow defines if your shadow can either be seen or unseen when you reduce the fill value of your objects, if the option is checked, the only thing that will change is the intensity of the object’s color but the shadow will remain the same.

2. Drop Shadow in Illustrator

Well the truth is that Photoshop offers the most complete Drop Shadow effect, but Illustrator has a pretty decent Drop Shadow itself. The main problem that you will facing when adding this kind of effects on Illustrator is that the program is designed to work with vectors, and shadows (with a few exceptions) are bitmaps, so this is like putting sugar into a yummy tomato soup, they taste great separately but together is not for everyone’s taste. To insert a Drop Shadow, you can browse in Effect>Stylize>Drop Shadow or directly on the Appearance panel.

Let’s see the available options inside the Drop Shadow panel.

At simple view you can realize that there are less options available in Illustrator but you still have plenty of freedom to customize your shadow, the Darkness option is really nice as it gets the actual colors of the object instead of a punctual tone.

Tip: If you go to Effect>Document Raster Effects Settings you can increase to 300 the resolution value to achieve better shadows.

3. Drop Shadow in Fireworks

And finally there is Fireworks, a program hated by some and idolized by others. Fireworks gathers many of the good things from Photoshop as well as Illustrator and joins them into a single interface, this makes it a powerful program for web design though it still has many flaws. To insert a Drop Shadow effect, look into the filters section.

If you thought that Illustrator offered very few options you should know that Fireworks offer even less.

Fireworks is basically design taken to the basics, a clear example is that with only 5 options we were able to make practically the same Drop Shadow effect that we did on the other two programs.

So, which one works better?

Having studied the different Drop Shadow effects, let’s make a deeper analysis to try to find out the best Drop Shadow effect. What we can infer is that based on customization, Photoshop wins the race followed by Illustrator, in terms of simplicity and accessibility Fireworks takes the lead with Photoshop following its steps, but regarding quality, the decision is more complicated, so let’s zoom up to 400 % and then compare a similar shadow made in each one of the programs to see if we can notice anything in particular.

At 400 %, you can notice the shadow’s pixels in Photoshop, though they remain quite subtle. You can rescale as many times you want your object and the effect will always adjust to it.

Illustrator also maintains the Drop Shadow quality intact when you modify the object’s properties, the problem relies on the fact that Illustrator was not designed to work with bitmaps.

Fireworks displays a nice Drop Shadow effect when zooming up to 400 % and as Photoshop and Illustrator do, it conserves its properties while you’re rescaling the object.

Differences when exporting.

Our initial quality test has finished in a tie because the three programs show a very similar quality when zooming in and the shadow is not affected when rescaling. Now let’s compare the three programs when they have to face an exporting process, we will import each file as a high quality JPEG and a PNG 24, then we will zoom in and will compare the quality and the file size of the three files.

JPEG let us realize the difference between the 3 programs with a certain facility. Photoshop delivers a decent Drop Shadow that maintains a good aspect even after zooming in. Fireworks delivers a better shadow with more definition and also is the program that delivers the most lightweight file. As for Illustrator, the shadow gets pixelated when zooming in but while you remain in 100 % the look is good.

Exporting in PNG24 makes the competition way more equal than when using JPEG, because the three programs delivered a good quality Drop Shadow and probably the only determining factor is that Fireworks wins again the size battle.

And the winner is… FIREWORKS

So after making this experiment, we can conclude that Photoshop is the one that offers the most editable options, making it an excellent choice for advanced designers. Illustrator definitely has a series of problems with this effect and that’s why we suggest you that instead of using its Drop Shadow, move your artwork to one of the other programs. Finally the program that delivers the best quality in its Drop Shadow via a basic but perfectly functional options panel and that also delivers the most lightweight file is fireworks.

Inner Shadow

If well it’s true that Drop Shadow is the most popular shading effect, its complement can not be forgotten. Inner Shadow helps to consider the light influence on an object itself, adding to it a richer and more realistic texture. Usually graphic designers utilize Inner Shadow along with Drop Shadow to create astounding artworks and compositions because the two of team work great together; one trick that probably some people don’t know is that through Inner Shadow is that you can create the famous “pressed” effect that you can see everywhere, now let’s compare this effect in the 3 graphic programs.

1. Inner shadow in Photoshop

Once again, Photoshop is the one that offers the biggest amount of options, including adjusting the blending mode, establishing a global light, changing the contour and even add noise. Because we’ve already explained all the options in the Drop Shadow case, we’re now going to focus on the comparisons.

You have to use similar values to the ones displayed on the previous screenshot to achieve the famous “pressed” effect.

2. Inner shadow in Illustrator

One of the biggest complains from the guild of graphic and web design is that Illustrator still doesn’t have an Inner Shadow effect. Although it’s possible to emulate this effect following a series of steps, the truth is that this is one of the biggest holes that Illustrator has always had.

3. Inner Shadow in Fireworks

And finally we have Fireworks that one more time is facing head to head the power of Photoshop. Its Inner Shadow effect is simple but with the necessary tools to recreate a really nice effect. With Illustrator eliminated on this stage, the battles is going to be between PS and FW.

So, which one works better?

Having studied the Inner Shadow from Photoshop and Illustrator, we can establish that Photoshop wins the race in terms of editability, but what about quality and file size?, now we’re going to explore these two effects and see if we can figure out the winner’s name.

While being in Photoshop, if you zoom in up to 400 %, you can notice the pixels and a decent appearance of this Inner Shadow effect.

Then we zoom in on Fireworks, the shadow looks more subtle and elegant, though both elements look pixelated, which is something that does not happen in Illustrator when there are no effects present.

Differences when exporting

Previewing the shadow directly on the software gives a little edge to Fireworks, but that’s not enough for us to make a decision, that’s why we’re going to make the exporting test again as we did on the Drop Shadow case. We’re going to compare both results in a JPEG and then a PNG24 to see which one behaves better.

On this case Photoshop looks better than Fireworks, the shadow gets less pixelated when zooming in and also has a smoother aspect. Fireworks looks also good but the shadow loses quality on zoom in.

In PNG format they lot a lot alike, probably the only difference is that Fireworks deliver a smaller file than Photoshop, this match is still really tight, so let’s try to take it from a different approach.

And the winner is…PHOTOSHOP

OK now we can set a verdict. If you want a better optimization with good results then Fireworks is your choice, but if you prefer customization and a better quality when zooming in, then you know that the best option and the winner on this stage is Photoshop.

Gradients

Drop Shadow and Inner Shadow can do an excellent job most of the time, but if you want to make even more realistic and/or artistic shadows and highlights, then you can appeal to gradients. This theme is much more complex than the previous, because there are many ways of inserting gradients on these programs, so we’re going to be extremely careful with the analysis to give you an accurate deduction.

Gradient fill in Photoshop

There are many types of gradients in Photoshop, though we’re not including Gradient Map as it is designed to fulfill more artistic ideas than for shading. We are now considering the Gradient fill itself and then the Gradient Overlay applied separately and then joined together.

Gradient fill is the basic gradient method in Photoshop, it inserts a gradient as fill into the entire canvas or a specific section if you have established a mask. You can customize the type of gradient you want by changing its color, its style, the angle, define the scale and more.

Gradient fill in Illustrator

Illustrator offers less options when it comes to adding a Gradient Fill and in terms of quality, the result is very similar to Photoshop, which means that at this point, we have a tie between these two.

Gradient fill in Fireworks

And then comes Fireworks, remember that we’re using simple gradients with no further adjustments so the comparison can be made easily and in the most fair terms possible. Fireworks displays more evident bandings on its basic gradient presentation.

Until this point we can say that the winner is Photoshop followed closely by Illustrator and Fireworks being left behind. But the competition is just starting, now let’s see what happens when you add something called dither to your gradients.

Gradient fill with dither in Photoshop

As you can see on the first screenshot of Photoshop, the dither option was checked, though it doesn’t change the appearance if you uncheck it, the truth is that when zooming in, the difference is noticeable at simple view. Dither inserts the gradient as a texture instead of using bandings, which gives a more subtle appearance, let’s see a couple of examples.

At first sight they both look the same, but when you look closer you will see that the bandings are more evident without the dither and when it does have the dither, the gradient becomes more subtle.

Gradient fill with dither in Illustrator

Unfortunately Illustrator does not have the dither option available, you can try to add a texture and play with blur to achieve a similar result but the truth is that on this phase of the stage, Illustrator has lost the battle.

Gradient fill with dither in Fireworks

See the difference?, when you don’t check the dither option in Fireworks, the gradients are made out of bandings, whilst the dither takes these same bandings and gives them a smoother look, giving to your gradients a more professional appearance.

It seems that the winner on this phase is Fireworks, its dither effect delivers more subtle results than Photoshop though we have to admit that the match is still really tight.

Mixing gradients in Photoshop

Finally we want to take to the edge the gradients’ capacity in the three programs and after that we will proceed with the exporting so we can define once and for all the winner of this stage. There are many ways of combining two or more gradients and in Photoshop’s case, you can always appeal to Gradient Overlay, which is a nice layer style with several options to work with and that delivers good results.

Mixing gradients in Illustrator

Illustrator does not have the Gradient Overlay effect, instead of that it offers the splendid Appearance panel where you can insert as many gradients as you want and play with blending modes and opacity values, as you can see on the next picture.

Mixing gradients in Fireworks

Fireworks has some limitations when trying to combine two or more gradients, it doesn’t have a Gradient Overlay effect or an Appearance panel, but you can still achieve practically the same results using many sub layers.

Differences when exporting

So we have seen a big part of the possibilities that Illustrator has to offer, the 3 programs have great things to work with as well as some flaws, but the truth can only be determined by testing their behavior after exporting them as JPEG and PNG, so let’s see the test results right now.

This is probably the first time that neither of the programs have delivered a satisfactory result. Photoshop showed a poor gradient level with an evident banding effect, while Illustrator and Fireworks produced lovely gradients but an ugly black stroke appeared on the borders of the element, this is something that happens once in a while when working in Fireworks and Illustrator, so this is not an isolated case.

We tried to export in PNG to see if the problem was relying in quality but surprisingly the result was practically the same, one program delivered a poor gradient and the other 2 an unpleasant dark border.

So what’s the solution?

After finishing this part of the experiment we refused to accept these results and we decided to make more tests obtaining similar results. Finally the solution came to our heads and therefore the name of the winner of this category.

What you need to do is take the gradient object from Illustrator and copy it, then paste it in Photoshop as a Smart Object and export, this will maintain the great gradient quality of Illustrator and will also clean the ugly border. This trick doesn’t work with Fireworks (believe us, we tried) because the dark border remains in Photoshop. It’s also important to state that the resultant PNG file weighs only more than the Illustrator’s PNG, so that’s another point in favor.

And so, the winners of this category are…Photoshop & Illustrator

Outer Glow

OK, we have seen the major effects that you can utilize to add shading in your artworks, but there are a couple more that are often used for highlights but with the proper settings can become great shading tools. Outer Glow has the advantage that it spreads outside the object from a non specific angle but from the center, this means that you can create a drop shadow effect that emulates a light right above the element in question.

Outer glow in Photoshop

The Outer Glow option in Photoshop offers a lot of possibilities, making it the most customizable of the 3. You can define the blending mode, the size and even implement a gradient instead of a plain solid color. This is certainly a nice layer style.

Outer glow in illustrator

Illustrator has less options but you can still achieve some nice Outer Glow effects. The problem is that you can only define the distance, size and spread of your effect using the Blur button, which restricts drastically your liberty.

Outer glow in Fireworks

This time Fireworks has more options than Illustrator and 3 of them are made to edit the actual Outer Glow properties. In this opportunity Fireworks has surpassed Illustrator and now everything will be defined in the exporting results.

Differences when exporting

Based on the amount of options and previous results, our conclusion was that Photoshop delivered the best Outer Glow of the three, but the truth is that only after exporting our JPEG and PNG files we can be actually sure of this affirmation, so let’s take a look at them.

At first sight we can say that the eliminated number 1 is Illustrator, the reason is that it only offers one way of adjusting the size of the Glow and because of that it was hard to create a similar Glow to the one we did in Photoshop and Fireworks. Respecting the other 2, Fireworks display more bandings than Photoshop but in compensation the JPEG is lighter than its competitor.

And the winner is… Photoshop

If we switch to PNG, the quality increases a lot in all files. First we discard Illustrator due the fact that its Outer Glow panel is too limited, then we can say that Photoshop and Fireworks display a similar quality but Fireworks wins the battle of size. Now we must consider that the size difference is minimal and the quality delivered by Photoshop compensates it, that’s what we have to say that the winner is…

Inner Glow

As Outer Glow help us to insert a global shadow behind our objects, with Inner Glow we can insert this same global shadow but inside our elements, giving to them a nice 3D look that can be truly helpful in some occasions. We did a little research to find out what’s possible to achieve with this effect on each one of the programs and now we present you the results.

Inner glow in Photoshop

And as we have been seeing on the past stages, Photoshop offers the largest set of options to customize your Inner Glow, giving you the chance to switch between solid color and gradients, defining the source and many more options.

Inner glow in Illustrator

In Illustrator you can find  less options that the ones showed in Photoshop, though you can still achieve a really nice Outer Glow effect. Among the options available, you can define the blending mode, opacity and more.

Inner glow in Fireworks

Fireworks has the same quantity of options that Illustrator delivers, though an aggregated value is the presence of the offset button, which gives you the chance to actually determine the glow’s position.

Differences when exporting

So we know that Photoshop has the largest set of options to work with Inner Glow, but the offset option from Fireworks is something really nice that worth more than one option. Now let’s see what happens when we export our documents into JPEG and PNG.

For the first time we can say that Illustrator delivers the highest quality when exporting to JPEG, though Photoshop’s quality is practically the same and weighs 1 K less. Fireworks displays bandings in the effect that unfortunately makes this program to lose the fight.

And the winner is… illustrator

In PNG the quality in all the programs is similar, but the size difference is remarkable because Fireworks weighs a lot less than the other 2. Considering that JPEG is a more common format and that PNG is sometimes not supported in a few applications, we have decided to give the golden medal of this category to…

Duplicating objects

So far we have been comparing the different effects that the 3 programs have to offer, you have probably noticed that the 3 of them are pretty good in terms of quality and optimization but in every category one of the programs is stronger than the others. Now we’re going to see a different way of making shadows, which is a technique that many designers love because it’s entirely up to the designer’s taste; this method consists on duplicating the object and then turn the copy into a shadow, so let’s see what you have to do in each program to achieve this.

The process to make a duplicated object and then make it a shadow in Photoshop goes like this: First you have to duplicate the layer where your object is located and put it below the original layer, then adjust its size to the scale and perspective that you prefer, you should also change its color for a darker one if you have a solid object or reduce its exposure if you’re working with a bitmap or a compound element.

Then you can proceed by adding a Blur effect to our shadow, this part it’s absolutely free and you can distort the object as much as you can.

The next step is insert a Gradient Overlay to give more realism to our shadow, this is a rough exercise, which means that you can achieve much greater results if you take more time to do it.

Next you can reduce the opacity a little bit if you want the shadow to look softer, this will complete the creation of a custom shadow duplicating objects, remember that this was a quick exercise and the results can be a lot better with a few more dedication.

We finish the exercise inserting a pixel mask to give the shadow a more natural appearance, the result is great despite the fact that we did it in less than 1 minute, we just want to show you the best way to achieve this type of shadows :).

On Illustrator you can also create this duplicate shadow, but the results are not as great as the ones you can reach in Photoshop, so we suggest you to always add shadow to your Illustrator’s objects directly in PS.

Fireworks works better than Illustrator for using the duplicate technique, it delivers smoother shadows and you can make several adjustments to it, the problem relies on the fact that you can’t work with masks with the same easiness that Photoshop offers.

And the winner is… PHOTOSHOP

Everytime that you want to create a duplicate shadow for your artworks, you can make them directly in any of the 3 programs, but the truth is that Photoshop delivers better results. Having this said, our suggestion is to export your Fireworks / Illustrator elements to Photoshop as Smart Objects and then create the duplicate shadow, so the winner for this section is…

Using the Burn Tool

This is an advanced tool that is available both in Fireworks and Photoshop. On this case Illustrator gets automatically discarded from the competition because it does not have this tool available, after all the program is strong in vector artwork and not in bitmap editing which is how Burning Tool operates.

As you can see, both programs offer basically the same amount of options with only a few differences, this means that we cannot declare a winner by judging the amount of options and the quality depends more from the designer’s skills than the tool itself. Burn tool lets you manually darken specific zones of an artwork that cannot be set using standard effects, this is definitely a master tool that with some patience and hard work you can get to dominate :).

Making vector shadows in Illustrator

OK, so Illustrator has lost the Burning Tool against Photoshop and Fireworks, but now the payback time has come because this astounding trick can only be achieved on Illustrator CS5. With the new improvements in the Appearance and Graphic Styles panels, you are now able to create 100 % vector shadows that can be scaled and modify with total freedom, so let’s see how it works for example in a vector text.

So now we have our vector text, if you want to insert a shadow usually you will look for the Drop Shadow effect, but what if we tell you that there’s a better way of doing things?. First of all you have to make sure that you’re working with a compound path so the effect can be applied to the whole element, now from the layers panel, duplicate it.

Having the duplicate object selected, go to the Appearance panel and insert a new Stroke with the following properties: Aligned outside, blending mode switched to multiply and 0,25 caliber.

Now just duplicate this stroke as many times as you want, with closer stroke values between each other your shadow will look smoother and smoother, also it’s important to play with the opacity or you will end with a solid shadow made out of many different strokes.

And there you have it, now you know how to emulate a nice shadow effects with only vectors, this gives you a lot of edge because you can scale them easily than bitmaps :).

You can also save it as a layer style and apply it to different elements in different ways, for example, you can apply this same effect and switch the outside property for inside to achieve a nice inner shadow effect, the possibilities are many and they’re waiting for you to discover them.

Firework’s Solid Shadow

Usually shadows are made as blurred elements that reflect the incidence of light over an object, but sometimes is also nice to utilize strong shadows that though may not represent a realistic light, can add a nice touch to your creations. The 3 programs can deliver this effect but only Fireworks has a tool of its own named Solid Shadow that actually makes strong shadows without having to make further adjustments.

This shadow tool can be handily in situations where you don’t want to use standard shadows but solid ones and you have no time to spend customizing options.

What the experts have to say…

Now we have reached the end of this article, we have browsed a lot of different ways that you can use to work with shadows, giving you a wider palette of options every time you’re working in something new. We have also made a complete test to evaluate the capacities of the 3 major graphic programs used by graphic and web designers, we know that there are many other helpful applications but we decided to focus on the more popular programs from the Adobe house.

But there’s no way that we can consider this article as a heavy study on how to master the shading technique without some backup, that’s why we have decided to call some of the greatest minds in graphic and web design and we asked for their opinion regarding this intriguing subject and well, this is what they have responded:

Jacob Cass – Just Creative Design

“Choosing to decide what type of shadow to use is dependent on it’s application. A general rule of thumb is to use Styles for text and manually create shadows for larger objects. A favourite method of mine to create shadows for large objects is to duplicate the layer, apply a black colour overlay and apply a Gaussian blur as needed. It’s quick and effective.”

Chris Spooner – Blog.SpoonGraphics

“I’m a big fan of using shadows in my designs, especially when working with interfaces. Shadows can really help add depth to give a realistic and tactile feel to the design. However it’s too easy to ruin a design with a shadow that is too heavy, the main setting designers should focus on is the opacity – The shadow should be so subtle it’s hardly noticeable. It’s these kind of effects that you don’t even realize are there until you turn them off that really enhance a design.”

Mike Lane – Mlane.net

“Although Photoshop’s layer tools are adequate for very basic shadows, often times a simple drop shadow isn’t realistic or effective enough, nor can you easily create perspective shadows that way. I prefer to create shadows using the manual method, by duplicating the original object’s layer, filling, blurring and distorting the shape. Then softening the shadow using gradients, blend modes and opacity. This gives you much more freedom in shadow placement and quality.

The manual method also gives you the ability to more easily experiment with multiple shadows and light sources for even more enhanced realism, if appropriate for the design. I prefer to use 3D tools, such as 3D Studio Max and Maya, but any 3D application will allow you to experiment and create a blueprint of how an object’s shadows would respond to multiple, varying light sources and environments. You can easily simulate this in the real world as well with just a desk lamp or two, a small object and some white paper. One can achieve some very cool results by replicating that effect in Photoshop.

Just remember that not all light sources may be the same color, shape or brightness and your effects need to take that into account. Don’t overdo it. Shadows are almost always much softer and more subtle than a lot of designs convey.”

Veerle Pieters – Duoh!

“My motto is, just like with any other effect, use them with caution and don’t overdo it. Just use the right dose, subtly, just enough to make something stand out. For some more realistic results, on 3D objects for example, you should create them by hand (draw them) and create overlapping shadows. For example the filing cabinet icon I created for my archive pages (http://veerle.duoh.com/design/archives) is created like that. I didn’t use the typical Photoshop shadow effects for that, but instead I used a Gaussian Blur Smart Filter on a vector-based object. Same for the red letterbox at the bottom of my Belgian Graphic Design gallery page (http://veerle.duoh.com/belgiangraphicdesign).”

Jacob Gube – Six Revisions

“I don’t heavily illustrate or do photomanipulation artwork, so I often find the built-in drop shadow layer effect is fine for my basic needs. What I’ve found to be important when using this layer effect is to make it subtle. Too high of an opacity, and the shadow looks overpowering and gaudy. You can also mess around with the blend mode of the drop shadow, which is effective in getting it just right.

As a founder of Six Revisions and Design Instruct, I do get exposed to a lot of designers and digital artists. I find that when the designers we work with are discussing photomanipulation and drawing/illustration, most of them manually paint the shadow. Since I mostly work with web/UI design, I need the consistency and predictability that the drop shadow layer effect offers over manual painting of shadows.”

The Shock Family – Iconshock

“For all our designs, we always consider that using black as the starting tone is the best option, so if you want lighter shadows, do not use gray tones but play with black’s opacity values instead. Also be careful with the spread and size values, making sure to never overuse pixels.

Be thoughtful with the light source, because that will give realism to even the less realistic elements. Another nice trick is to grab the Eraser tool with an opacity value around 5 % and play with it to add more depth to your shadows. Try to always be organized with your files, meaning that your shadows should always be placed on independent layers so you don’t mess up your artworks and you won’t have to depend on the History panel. You can also utilize 1 px shadows to create the “double-line” effect that is so popular in many sites.”

A few good examples

Finally, let’s take a look at some websites where you can find some amazing shadow implementations that cover all the examples that we have listed on this article, hopefully this brings you a high dose of inspiration and then you can start making your own shading effects.

Theme Team

Garry Aylott Design

Submit Quickly

Slicejack

The Factory Colors

Paramount Theme

Creative Mints

Forever Heavy

Two Toasters

Alfred App

Uber Uns

Parachute Clothing

CURE International

Doxs!

Thierry Castel

We hope you have enjoyed reading this article, we did our best to deliver a high-quality reference for every person who wants to know different ways of making shadows. Perhaps there are some other ways that we’ve probably skipped in our post, so we invite you all to leave us your comments saying what are your favorite methods to work with shadows or if you know a more practical way of doing any of the examples that we have listed. This article is a working progress because all of you can contribute to it and help us make a much bigger and complete review, thanks for stopping by and we will see you in our next post.