<?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; めくれ</title>
	<atom:link href="http://www.designwalker.com/tag/%e3%82%81%e3%81%8f%e3%82%8c/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/%e3%82%81%e3%81%8f%e3%82%8c/feed" />
		<item>
		<title>Photoshopチュートリアル めくれた感じを表現する</title>
		<link>http://www.designwalker.com/2007/03/peeling.html</link>
		<comments>http://www.designwalker.com/2007/03/peeling.html#comments</comments>
		<pubDate>Thu, 29 Mar 2007 08:52:13 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Photoshop関連]]></category>
		<category><![CDATA[peeling]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[めくれ]]></category>
		<category><![CDATA[チュートリアル]]></category>

		<guid isPermaLink="false">http://new.designwalker.com/2007/03/photoshop%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab-%e3%82%81%e3%81%8f%e3%82%8c%e3%81%9f%e6%84%9f%e3%81%98%e3%82%92%e8%a1%a8%e7%8f%be%e3%81%99%e3%82%8b.html</guid>
		<description><![CDATA[
			
				
			
		
Photoshopを使って影の調節など、ちょっとした工夫で、かなり立体感のある、いい感じのめくれを表現できますね～！
こういった、細かい部分にこだわったデザインって素敵ですね。。
っちゅ [...]]]></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%2F03%2Fpeeling.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.designwalker.com%2F2007%2F03%2Fpeeling.html&amp;style=normal&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>Photoshopを使って影の調節など、ちょっとした工夫で、かなり立体感のある、いい感じのめくれを表現できますね～！</p>
<p>こういった、細かい部分にこだわったデザインって素敵ですね。。</p>
<p>っちゅわけで、Photoshopで写真とかステッカーがめくれた感じを表現するチュートリアルをまとめてみました。。</p>
<p></p>
<p><strong>1. <a href="http://www.pstut.com/tutorial-realistic-photo-print.html" title="PSTUT" target="_blank">PSTUT</a></strong><br />
</p>
<div align="center">
<a href="http://www.pstut.com/tutorial-realistic-photo-print.html" title="PSTUT" target="_blank"><br />
<img src="http://www.designwalker.com/img/peeling/peeling01.jpg" alt="" border="0" /><br />
</a>
</div>
<p><strong>2. <a href="http://www.photoshoplab.com/peeled-sticker-style-effect.html" title="photoshop Lab" target="_blank">photoshop Lab</a></strong></p>
<div align="center">
<a href="http://www.photoshoplab.com/peeled-sticker-style-effect.html" title="photoshop Lab" target="_blank"><br />
<img src="http://www.designwalker.com/img/peeling/peeling02.gif" alt="" border="0" /><br />
</a>
</div>
<p><strong>3. <a href="http://veerle.duoh.com/blog/comments/creating_a_page_curl_in_photoshop/" title="Veerle's blog" target="_blank">Veerle&#8217;s blog</a></strong><br />
</p>
<div align="center">
<a href="http://veerle.duoh.com/blog/comments/creating_a_page_curl_in_photoshop/" title="Veerle's blog" target="_blank"><br />
<img src="http://www.designwalker.com/img/peeling/peeling03.jpg" alt="" border="0" /><br />
</a>
</div>
<p><strong>4. <a href="http://www.sigsource.com/tutorials.php?act=full&#038;id=65" title="Sigsource" target="_blank">Sigsource</a></strong><br />
</p>
<div align="center">
<a href="http://www.sigsource.com/tutorials.php?act=full&#038;id=65" title="Sigsource" target="_blank"><br />
<img src="http://www.designwalker.com/img/peeling/peeling04.jpg" alt="" border="0" /><br />
</a>
</div>
<p><strong>5. <a href="http://uegda.com/blog/?p=5" title="Whits’ Photoshop Tutorials" target="_blank">Whits’ Photoshop Tutorials</a></strong><br />
</p>
<div align="center">
<a href="http://uegda.com/blog/?p=5" title="Whits’ Photoshop Tutorials" target="_blank"><br />
<img src="http://www.designwalker.com/img/peeling/peeling05.gif" alt="" border="0" /><br />
</a>
</div>
<p>めくれを表現するだけでも、いろいろな方法があるのですね。</p>
<p>
っちゅうわけで、個人的に気に入った一番目のPSTUTさんのチュートリアルを簡単にご説明</p>
<p>1. セレクトツールで写真の大きさに選択。グラデーションツールを選んで左上から右下にドラッグ。そのとき、背景色は<strong>#F7F2E7</strong>にしておく。</p>
<div align="center">
<a href="http://www.designwalker.com/img/peeling/peeling_tutorial01.gif" rel="lightbox[peeling]"><br />
<img src="http://www.designwalker.com/img/peeling/peeling_tutorial01_thumb.gif" alt="" border="0" /><br />
</a>
</div>
<p></p>
<p>2. 選択範囲を小さくする。(Altキー + S + M + C)もしくは、下の画像のように、[選択範囲]メニューから選択範囲を小さくします。この小さくする部分が、写真のふちになるのでお好きなピクセルサイズで小さくしてください。とりあえず4pxにしましたが･･･</p>
<div align="center">
<a href="http://www.designwalker.com/img/peeling/peeling_tutorial02.gif" rel="lightbox[peeling]"><br />
<img src="http://www.designwalker.com/img/peeling/peeling_tutorial02_thumb.gif" alt="" border="0" /><br />
</a>
</div>
<p></p>
<p>3. 新しくレイヤーを追加して、縮小した選択範囲を塗りつぶす。</p>
<div align="center">
<a href="http://www.designwalker.com/img/peeling/peeling_tutorial04.gif" rel="lightbox[peeling]"><br />
<img src="http://www.designwalker.com/img/peeling/peeling_tutorial04_thumb.gif" alt="" border="0" /><br />
</a>
</div>
<p></p>
<p>4. お好きな写真を追加して、クリッピングマスクをかけます。すると、3で塗りつぶした部分しか写真が見えなくなるはず。。</p>
<div align="center">
<a href="http://www.designwalker.com/img/peeling/peeling_tutorial05.gif" rel="lightbox[peeling]"><br />
<img src="http://www.designwalker.com/img/peeling/peeling_tutorial05_thumb.gif" alt="" border="0" /><br />
</a>
</div>
<p></p>
<p>5. 写真にグラデーションをかけます。</p>
<div align="center">
<a href="http://www.designwalker.com/img/peeling/peeling_tutorial06.gif" rel="lightbox[peeling]"><br />
<img src="http://www.designwalker.com/img/peeling/peeling_tutorial06_thumb.gif" alt="" border="0" /><br />
</a>
</div>
<p></p>
<div align="center">
<a href="http://www.designwalker.com/img/peeling/peeling_tutorial07.gif" rel="lightbox[peeling]"><br />
<img src="http://www.designwalker.com/img/peeling/peeling_tutorial07_thumb.gif" alt="" border="0" /><br />
</a>
</div>
<p></p>
<p>6. レイヤー全部にロックをかけて、お好きな角度に傾けます。</p>
<div align="center">
<a href="http://www.designwalker.com/img/peeling/peeling_tutorial08.gif" rel="lightbox[peeling]"><br />
<img src="http://www.designwalker.com/img/peeling/peeling_tutorial08_thumb.gif" alt="" border="0" /><br />
</a>
</div>
<p></p>
<p>7. 最初に描いたグラデーションのレイヤーをCtrlボタンを押しながら選択。すると、下のようにグラデーション部分が選択されるはず。</p>
<div align="center">
<a href="http://www.designwalker.com/img/peeling/peeling_tutorial09.gif" rel="lightbox[peeling]"><br />
<img src="http://www.designwalker.com/img/peeling/peeling_tutorial09_thumb.gif" alt="" border="0" /><br />
</a>
</div>
<p></p>
<p>8. パスを追加します。</p>
<div align="center">
<a href="http://www.designwalker.com/img/peeling/peeling_tutorial11.gif" rel="lightbox[peeling]"><br />
<img src="http://www.designwalker.com/img/peeling/peeling_tutorial11_thumb.gif" alt="" border="0" /><br />
</a>
</div>
<p></p>
<p>9. パスを変形します。この部分が最終的に影になります。</p>
<div align="center">
<a href="http://www.designwalker.com/img/peeling/peeling_tutorial12.gif" rel="lightbox[peeling]"><br />
<img src="http://www.designwalker.com/img/peeling/peeling_tutorial12.gif" alt="" border="0" /><br />
</a>
</div>
<p></p>
<p>10. 変形したパスを選択部分に変換します。</p>
<div align="center">
<a href="http://www.designwalker.com/img/peeling/peeling_tutorial13.gif" rel="lightbox[peeling]"><br />
<img src="http://www.designwalker.com/img/peeling/peeling_tutorial13.gif" alt="" border="0" /><br />
</a>
</div>
<p></p>
<p>11. 一番下に新規レイヤーを追加して、黒く塗りつぶします。</p>
<div align="center">
<a href="http://www.designwalker.com/img/peeling/peeling_tutorial14.gif" rel="lightbox[peeling]"><br />
<img src="http://www.designwalker.com/img/peeling/peeling_tutorial14_thumb.gif" alt="" border="0" /><br />
</a>
</div>
<p></p>
<p>12. 塗りつぶした部分にぼかしをかけます。</p>
<div align="center">
<a href="http://www.designwalker.com/img/peeling/peeling_tutorial15.gif" rel="lightbox[peeling]"><br />
<img src="http://www.designwalker.com/img/peeling/peeling_tutorial15.gif" alt="" border="0" /><br />
</a>
</div>
<p></p>
<p>今回はちょっと、難しかったかも？こんな感じでできました？？</p>
<div align="center">
<img src="http://www.designwalker.com/img/peeling/peeling_tutorial.jpg" alt="" border="0" />
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.designwalker.com/2007/03/peeling.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.designwalker.com/2007/03/peeling.html" />
	</item>
	</channel>
</rss>

