<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>DesignWalker &#187; drop shadow</title>
	<atom:link href="http://www.designwalker.com/tag/drop-shadow/feed" rel="self" type="application/rss+xml" />
	<link>http://www.designwalker.com</link>
	<description>ロサンゼルスで働くウェブデザイナーの日記。</description>
	<lastBuildDate>Wed, 29 Jun 2011 06:24:51 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.designwalker.com/tag/drop-shadow/feed" />
		<item>
		<title>影のつけ方いろいろ</title>
		<link>http://www.designwalker.com/2007/08/drop_shadow.html</link>
		<comments>http://www.designwalker.com/2007/08/drop_shadow.html#comments</comments>
		<pubDate>Sat, 04 Aug 2007 18:30:05 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[技術を語る男]]></category>
		<category><![CDATA[drop shadow]]></category>
		<category><![CDATA[Photoshop関連]]></category>
		<category><![CDATA[ドロップシャドウ]]></category>
		<category><![CDATA[影]]></category>

		<guid isPermaLink="false">http://new.designwalker.com/2007/08/%e5%bd%b1%e3%81%ae%e3%81%a4%e3%81%91%e6%96%b9%e3%81%84%e3%82%8d%e3%81%84%e3%82%8d.html</guid>
		<description><![CDATA[
			
				
			
		
最近では、アイコンや写真など、ものすごくクオリティの高いものが、無料でダウンロードできますね。。
もちろん、そのまま使ってもいいのですが、せっかくなので少し手を加えてみてはいかがでしょう [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.designwalker.com%2F2007%2F08%2Fdrop_shadow.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.designwalker.com%2F2007%2F08%2Fdrop_shadow.html&amp;style=normal&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>最近では、アイコンや写真など、ものすごくクオリティの高いものが、無料でダウンロードできますね。。</p>
<p>もちろん、そのまま使ってもいいのですが、せっかくなので少し手を加えてみてはいかがでしょう？</p>
<p>っちゅうわけで、本日は影のつけ方をいろいろご紹介。。。</p>
<p>今回は、↓のようなRSSアイコンを元に影をつけてみました。<br />
</p>
<div align="center">
<img src="http://www.designwalker.com/img/rss_shadow/rss01.gif" alt="RSS icon" />
</div>
<p></p>
<p><strong>1. デフォルトのドロップシャドウ</strong></p>
<p>Photoshopのデフォルトで設定されているドロップシャドウをつけてみました。。ちょっと重たい感じ？</p>
<div align="center">
<img src="http://www.designwalker.com/img/rss_shadow/rss02.gif" alt="RSS icon" />
</div>
<p></p>
<p><strong>2. シャドウの位置を変えてみる</strong></p>
<p>シャドウの位置を真ん中に持ってきました。</p>
<div align="center">
<img src="http://www.designwalker.com/img/rss_shadow/rss03.gif" alt="RSS icon" />
</div>
<p></p>
<p><strong>3. エンボスを下に敷いてみる</strong></p>
<p>同じシェイプで一回り大きな画像にエンボス加工して、凹ませてみました。。埋め込まれたボタンっぽくなったかな。。</p>
<div align="center">
<img src="http://www.designwalker.com/img/rss_shadow/rss04.gif" alt="RSS icon" />
</div>
<p></p>
<p><strong>4. 斜めにシャドウをつけてみる</strong></p>
<p>斜めにシャドウをつけてみるとアイコンが立ってる感じに見えますね。。</p>
<div align="center">
<img src="http://www.designwalker.com/img/rss_shadow/rss05.gif" alt="RSS icon" /><br />
<img src="http://www.designwalker.com/img/rss_shadow/rss09.gif" alt="RSS icon" />
</div>
<p></p>
<p><strong>5. 下にシャドウをつけてみる</strong><br />
真下にシャドウをつけてみるとアイコンが浮いた感じに見えますね。。</p>
<div align="center">
<img src="http://www.designwalker.com/img/rss_shadow/rss06.gif" alt="RSS icon" /><br />
<img src="http://www.designwalker.com/img/rss_shadow/rss10.gif" alt="RSS icon" />
</div>
<p></p>
<p><strong>6. 反射させてみる</strong><br />
映りこんだように、アイコンを反射させてみてもいいかも。。</p>
<div align="center">
<img src="http://www.designwalker.com/img/rss_shadow/rss07.gif" alt="RSS icon" />
</div>
<p></p>
<p><strong>7. 反射＋背景をつけてみる</strong><br />
背景をつけると映りこみがはっきりしますね。。</p>
<div align="center">
<img src="http://www.designwalker.com/img/rss_shadow/rss08.gif" alt="RSS icon" />
</div>
<p></p>
<p>いろいろ試してみると楽しいですね。。</p>
<p>参考までに、今回作成したPSDファイル↓をアップしておいたので、ご自由にどうぞ～。</p>
<div align="center">
<a href="http://www.designwalker.com/download/shadow.zip" title=""><br />
<img src="http://www.designwalker.com/img/rss_shadow/psd.gif" alt="PSD File" border="0" /><br />
</a>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.designwalker.com/2007/08/drop_shadow.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.designwalker.com/2007/08/drop_shadow.html" />
	</item>
	</channel>
</rss>

