<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/xsl" href="http://www.websitemagazine.com/content/utility/FeedStylesheets/rss.xsl" media="screen"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:wfw="http://wellformedweb.org/CommentAPI/"><channel><title>'Net Features : drop shadow</title><link>http://www.websitemagazine.com/content/blogs/posts/archive/tags/drop+shadow/default.aspx</link><description>Tags: drop shadow</description><dc:language>en</dc:language><generator>CommunityServer 2008 SP2 (Build: 31104.93)</generator><item><title>Drop Shadow (Layer Effect in Photoshop)</title><link>http://www.websitemagazine.com/content/blogs/posts/archive/2009/08/31/drop-shadow-layer-effect-in-photoshop.aspx</link><pubDate>Mon, 31 Aug 2009 20:33:00 GMT</pubDate><guid isPermaLink="false">1e469e21-c924-44fa-a132-47b5d0a8ad47:9897</guid><dc:creator>Pete Prestipino</dc:creator><slash:comments>5</slash:comments><wfw:commentRss xmlns:wfw="http://wellformedweb.org/CommentAPI/">http://www.websitemagazine.com/content/blogs/posts/rsscomments.aspx?PostID=9897</wfw:commentRss><comments>http://www.websitemagazine.com/content/blogs/posts/archive/2009/08/31/drop-shadow-layer-effect-in-photoshop.aspx#comments</comments><description>&lt;hr /&gt;
&lt;p&gt;&lt;b&gt;Drop shadows are a useful effect that can be achieved in Photoshop (or GIMP), adding a certain 2.0&amp;#39;ness to your text or images. Let&amp;#39;s look at how to create a drop shadow for both images and text now.&amp;nbsp;&lt;br /&gt;&lt;br /&gt;
Note that I&amp;#39;m working on a slightly older version of Photoshop (so there might be some slight variations in naming conventions) but the whole process is so simple that it will be easy to figure out. &lt;/b&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr /&gt;
&lt;p&gt;
&lt;img src="http://www.websitemagazine.com/images/blog/wm-pro.gif" style="float:left;margin:5px;" height="41" width="40" alt="" /&gt;&lt;b&gt;Stay up to date on the latest Internet trends:&lt;/b&gt;&lt;br /&gt;
Request a professional &lt;a href="http://websitemagazine.com/pro/"&gt;subscription to Website Magazine&lt;/a&gt;,&lt;br /&gt;
the most popular print publication on Web success.&lt;/p&gt;
&lt;hr /&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;
&lt;br /&gt;
&lt;b&gt;Drop Shadows on Text&lt;/b&gt;&lt;br /&gt;
&lt;br /&gt;
1) Create a new file (the text we are working with will result in an image approximately 400x75 pixels)&amp;nbsp;&lt;br /&gt;&amp;nbsp;
&lt;br /&gt;2) Once the file is open and the text tool is selected, type some text (and make sure it fits on the canvas)&amp;nbsp;&lt;br /&gt;
&lt;i&gt;&lt;br /&gt;2.1) Set the resolution at Web (72 pixels) and the mode to RGB color&lt;/i&gt;&lt;br /&gt;
&lt;br /&gt;&lt;br /&gt;
&lt;img alt="Drop Shadow sample" style="border:1px solid black;" src="http://www.websitemagazine.com/images/blog/dropshadow.gif" border="1" height="74" width="400" /&gt;&lt;br /&gt;
&lt;br /&gt;
3) Now, select the individual layer (with the text included) and select
&amp;quot;Blending Options&amp;quot;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Drop Shadow Layer Effect Photoshop" style="border:1px solid black;" src="http://www.websitemagazine.com/images/blog/dropshadow2.gif" border="0" height="350" width="543" /&gt;&lt;/p&gt;
&lt;p&gt;4) When the &amp;quot;Layer Style&amp;quot; box appear, simply select &amp;quot;Drop
Shadow&amp;quot; from the list of available options. (It is also possible within the
Layer Style dialog box to add inner shadows, outer and inner glows, beveling,
embossing (and contouring and texture) to the text/image.&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Drop Shadow Layer Style" style="border:1px solid black;" src="http://www.websitemagazine.com/images/blog/dropshadow3.gif" border="0" height="329" width="450" /&gt;&lt;/p&gt;
&lt;p&gt;5) Once you select &amp;quot;OK&amp;quot; you&amp;#39;ll have successfully added a drop
shadow to your text.&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;img alt="Drop Shadow Effect in Action" style="border:1px solid black;" src="http://www.websitemagazine.com/images/blog/dropshadow4.gif" border="1" height="74" width="400" /&gt;&lt;/p&gt;
&lt;p&gt;6) Should you want to lighten (or darken) the shadow, simple adjust the
opacity higher or lower accordingly.&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;b&gt;Drop Shadows on Images&lt;/b&gt;&lt;br /&gt;
Not only can you add a drop shadow to text but also to images. Drop shadows add
a nice modern feel to design elements and it&amp;#39;s very easy to create - just follow
along.&amp;nbsp;&lt;/p&gt;
&lt;p&gt;1) Create a new file (the image we are working with - our Twitter icon - is
roughly 73x73 pixels)&amp;nbsp;&lt;br /&gt;&amp;nbsp;
&lt;i&gt;&lt;br /&gt;1.1) Do provide for additional space around the image you are adding the drop
shadow to (in our case for example we&amp;#39;ll make the default canvas about 80x80)&lt;br /&gt;&amp;nbsp;
&lt;/i&gt;&lt;br /&gt;
2) Once the file is open and extra space is available to support the drop
shadow, again select Blending Options from the Layers menu.&lt;/p&gt;
&lt;p&gt;&lt;img alt="Drop Shadow for Image" style="border:1px solid black;" src="http://www.websitemagazine.com/images/blog/dropshadow(image)1.gif" border="0" height="370" width="565" /&gt;&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&lt;br /&gt;3) When the Layer Style box appears, simply select &amp;quot;Drop Shadow&amp;quot;
(or any of the other options for alternate effective).&lt;/p&gt;
&lt;p&gt;&lt;img alt="Layer Style for Drop Shadow on Images" style="border:1px solid black;" src="http://www.websitemagazine.com/images/blog/dropshadow3.gif" border="0" height="329" width="450" /&gt;&lt;/p&gt;
&lt;p&gt;&lt;br /&gt;4) Once you select &amp;quot;OK&amp;quot; you&amp;#39;ve got an image with a drop shadow!&lt;/p&gt;
&lt;p&gt;&lt;img alt="Drop Shadow Image" src="http://www.websitemagazine.com/images/blog/dropshadow(image)2.gif" style="border:1px solid black;" height="85" width="85" /&gt;&lt;/p&gt;
&lt;div style="clear:both;"&gt;&lt;/div&gt;&lt;img src="http://www.websitemagazine.com/content/aggbug.aspx?PostID=9897" width="1" height="1"&gt;</description><category domain="http://www.websitemagazine.com/content/blogs/posts/archive/tags/web+design/default.aspx">web design</category><category domain="http://www.websitemagazine.com/content/blogs/posts/archive/tags/design/default.aspx">design</category><category domain="http://www.websitemagazine.com/content/blogs/posts/archive/tags/drop+shadow/default.aspx">drop shadow</category><category domain="http://www.websitemagazine.com/content/blogs/posts/archive/tags/web+2.0+design/default.aspx">web 2.0 design</category></item></channel></rss>