<?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; tutorial</title>
	<atom:link href="http://www.designwalker.com/tag/tutorial/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/tutorial/feed" />
		<item>
		<title>ビジネスサイトに使えるレイアウトのチュートリアルいっぱい</title>
		<link>http://www.designwalker.com/2009/11/corporate-tutorial.html</link>
		<comments>http://www.designwalker.com/2009/11/corporate-tutorial.html#comments</comments>
		<pubDate>Tue, 01 Dec 2009 06:27:15 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Photoshop関連]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[まとめ]]></category>
		<category><![CDATA[チュートリアル]]></category>
		<category><![CDATA[テンプレート]]></category>

		<guid isPermaLink="false">http://www.designwalker.com/?p=555</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%2F2009%2F11%2Fcorporate-tutorial.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.designwalker.com%2F2009%2F11%2Fcorporate-tutorial.html&amp;style=normal&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>最近では、ウェブサイトのデザインもどんどん複雑になっていて、初心者の方々がデザインを真似しようと思ってもなかなか難しい物が多くなってきましたね。</p>
<p>これから、ウェブデザインを勉強しようと思っている方々などは、基本的なビジネス系のウェブサイトの真似からはじめてみてはいかがでしょうか？</p>
<p>今回は、そんなウェブデザイン初心者の方でも、つかえそうなビジネスサイトのレイアウト系のチュートリアルをいっぱい集めてみました。</p>
<p>いくつかのサイトではPhotoshopのファイルがダウンロードできるサイトもありますので、とても参考になるのではないでしょうか？</p>
<p>まずは、気に入ったデザインを真似するところからはじめて見ましょう！</p>
<h4><a href="http://tutsarena.com/2009/06/create-a-clean-and-effective-product-layout/" title="Create a Clean and Effective Product Layout">Create a Clean and Effective Product Layout</a></h4>
<p>Appleのウェブサイトっぽいシンプルで洗練されたレイアウトのチュートリアルです。</p>
<p align="center"><a href="http://tutsarena.com/2009/06/create-a-clean-and-effective-product-layout/" title="Create a Clean and Effective Product Layout"><img src="http://www.designwalker.com/img/corporate_template/01.png" alt="Create a Clean and Effective Product Layout" border="0" /></a></p>
<h4><a href="http://www.tutorial9.net/photoshop/create-a-clean-and-colorful-web-layout-in-photoshop/" title="Create a Clean and Colorful Web Layout in Photoshop">Create a Clean and Colorful Web Layout in Photoshop</a></h4>
<p>背景のグラデーションが印象的なチュートリアル</p>
<p align="center"><a href="http://www.tutorial9.net/photoshop/create-a-clean-and-colorful-web-layout-in-photoshop/" title="Create a Clean and Colorful Web Layout in Photoshop"><img src="http://www.designwalker.com/img/corporate_template/02.png" alt="Create a Clean and Colorful Web Layout in Photoshop" border="0" /></a></p>
<h4><a href="http://net.tutsplus.com/tutorials/html-css-techniques/design-a-beautiful-website-from-scratch/" title="Design a Beautiful Website From Scratch">Design a Beautiful Website From Scratch</a></h4>
<p>細部にまでこだわって作られている美しいウェブサイトのチュートリアル</p>
<p align="center"><a href="http://net.tutsplus.com/tutorials/html-css-techniques/design-a-beautiful-website-from-scratch/" title="Design a Beautiful Website From Scratch"><img src="http://www.designwalker.com/img/corporate_template/03.png" alt="Design a Beautiful Website From Scratch" border="0" /></a></p>
<h4><a href="http://tutsarena.com/2009/07/design-a-clean-and-colorful-portfolio-in-photoshop/" title="Design a Clean and Colorful Portfolio in Photoshop">Design a Clean and Colorful Portfolio in Photoshop</a></h4>
<p>ブルーの背景も微妙にグラデーションを加える事でベタにならないですね。</p>
<p align="center"><a href="http://tutsarena.com/2009/07/design-a-clean-and-colorful-portfolio-in-photoshop/" title="Design a Clean and Colorful Portfolio in Photoshop"><img src="http://www.designwalker.com/img/corporate_template/04.png" alt="Design a Clean and Colorful Portfolio in Photoshop" border="0" /></a></p>
<h4><a href="http://psdfan.com/tutorials/designing/create-a-professional-portfolio-design-in-17-easy-steps/" title="Create a Professional Portfolio Design in 17 Easy Steps">Create a Professional Portfolio Design in 17 Easy Steps</a></h4>
<p>破れた紙を敷いたような美しいレイアウト</p>
<p align="center"><a href="http://psdfan.com/tutorials/designing/create-a-professional-portfolio-design-in-17-easy-steps/" title="Create a Professional Portfolio Design in 17 Easy Steps"><img src="http://www.designwalker.com/img/corporate_template/05.png" alt="Create a Professional Portfolio Design in 17 Easy Steps" border="0" /></a></p>
<h4><a href="http://hv-designs.co.uk/2008/09/28/business-layout-2/" title="Business Layout #2">Business Layout #2</a></h4>
<p>上から見下ろしたようなバードビューのレイアウト。</p>
<p align="center"><a href="http://hv-designs.co.uk/2008/09/28/business-layout-2/" title="Business Layout #2"><img src="http://www.designwalker.com/img/corporate_template/06.png" alt="Business Layout #2" border="0" /></a></p>
<h4><a href="http://hv-designs.co.uk/2008/12/21/business-layout-3/" title="Business Layout #3">Business Layout #3</a></h4>
<p>やさしい色使いが美しいチュートリアルです。</p>
<p align="center"><a href="http://hv-designs.co.uk/2008/12/21/business-layout-3/" title="Business Layout #3"><img src="http://www.designwalker.com/img/corporate_template/07.png" alt="Business Layout #3" border="0" /></a></p>
<h4><a href="http://www.grafpedia.com/tutorials/sleek-modern-portfolio-layout" title="Sleek and modern portfolio layout">Sleek and modern portfolio layout</a></h4>
<p>シンプルですが力強い印象のレイアウトですね。</p>
<p align="center"><a href="http://www.grafpedia.com/tutorials/sleek-modern-portfolio-layout" title="Sleek and modern portfolio layout"><img src="http://www.designwalker.com/img/corporate_template/08.png" alt="Sleek and modern portfolio layout" border="0" /></a></p>
<h4><a href="http://designm.ag/tutorials/theme-marketplace-layout/" title="Design a Premium Theme Marketplace Layout Using Photoshop">Design a Premium Theme Marketplace Layout Using Photoshop</a></h4>
<p>グリーンとブラウンと配色が美しいレイアウトのチュートリアル</p>
<p align="center"><a href="http://designm.ag/tutorials/theme-marketplace-layout/" title="Design a Premium Theme Marketplace Layout Using Photoshop"><img src="http://www.designwalker.com/img/corporate_template/09.png" alt="Design a Premium Theme Marketplace Layout Using Photoshop" border="0" /></a></p>
<h4><a href="http://www.psdtemplate.com/psd-tutorials/create-a-business-psd-layout-in-less-than-10-minutes.html" title="Create a Business PSD Layout in less than 10 minutes*">Create a Business PSD Layout in less than 10 minutes*</a></h4>
<p>オレンジの帯で全体を引き締めていますね。</p>
<p align="center"><a href="http://www.psdtemplate.com/psd-tutorials/create-a-business-psd-layout-in-less-than-10-minutes.html" title="Create a Business PSD Layout in less than 10 minutes*"><img src="http://www.designwalker.com/img/corporate_template/10.png" alt="Create a Business PSD Layout in less than 10 minutes*" border="0" /></a></p>
<h4><a href="http://www.psdcore.com/tutorials/web-layouts/modern-web-20-web-layout/" title="Modern Web 2.0 Web Layout">Modern Web 2.0 Web Layout</a></h4>
<p>こちらはブルーのライン。</p>
<p align="center"><a href="http://www.psdcore.com/tutorials/web-layouts/modern-web-20-web-layout/" title="Modern Web 2.0 Web Layout"><img src="http://www.designwalker.com/img/corporate_template/11.png" alt="Modern Web 2.0 Web Layout" border="0" /></a></p>
<h4><a href="http://smashingpoint.com/clean-business-layout-tutorial.html" title="Clean Business Layout Tutorial">Clean Business Layout Tutorial</a></h4>
<p>角丸のレイアウトの参考に</p>
<p align="center"><a href="http://smashingpoint.com/clean-business-layout-tutorial.html" title="Clean Business Layout Tutorial"><img src="http://www.designwalker.com/img/corporate_template/12.png" alt="Clean Business Layout Tutorial" border="0" /></a></p>
<h4><a href="http://sixrevisions.com/tutorials/photoshop-tutorials/create-a-clean-business-web-template-design-in-photoshop/" title="Create a Clean Business Web Template Design in Photoshop">Create a Clean Business Web Template Design in Photoshop</a></h4>
<p>とてもシンプルなレイアウトですね。これをベースに手を加えていってもかっこいいウェブサイトが出来上がりそう。</p>
<p align="center"><a href="http://sixrevisions.com/tutorials/photoshop-tutorials/create-a-clean-business-web-template-design-in-photoshop/" title="Create a Clean Business Web Template Design in Photoshop"><img src="http://www.designwalker.com/img/corporate_template/13.png" alt="Create a Clean Business Web Template Design in Photoshop" border="0" /></a></p>
<h4><a href="http://hv-designs.co.uk/2009/04/14/business-layout-5-tutorial/" title="Business Layout #5 Tutorial">Business Layout #5 Tutorial</a></h4>
<p>背景に大胆な色味をつけるパターンもありですね。</p>
<p align="center"><a href="http://hv-designs.co.uk/2009/04/14/business-layout-5-tutorial/" title="Business Layout #5 Tutorial"><img src="http://www.designwalker.com/img/corporate_template/14.png" alt="Business Layout #5 Tutorial" border="0" /></a></p>
<h4><a href="http://www.adobetutorialz.com/articles/2556/1/Computer-Store-Web-Layout" title="Computer Store Web Layout">Computer Store Web Layout</a></h4>
<p>ラップトップの画像を枠から飛び出させる事で動きが出ています。</p>
<p align="center"><a href="http://www.adobetutorialz.com/articles/2556/1/Computer-Store-Web-Layout" title="Computer Store Web Layout"><img src="http://www.designwalker.com/img/corporate_template/15.png" alt="Computer Store Web Layout" border="0" /></a></p>
<h4><a href="http://www.grafpedia.com/tutorials/create-professional-dark-web-hosting-layout" title="Create a professional dark web hosting layout">Create a professional dark web hosting layout</a></h4>
<p>シンプルながら、微妙に光のあたり具合を調整していたりして細かいところまでこだわって作られている感じ。</p>
<p align="center"><a href="http://www.grafpedia.com/tutorials/create-professional-dark-web-hosting-layout" title="Create a professional dark web hosting layout"><img src="http://www.designwalker.com/img/corporate_template/16.png" alt="Create a professional dark web hosting layout" border="0" /></a></p>
<h4><a href="http://www.grafpedia.com/tutorials/create-communication-layout-photoshop" title="Create a communication layout in Photoshop">Create a communication layout in Photoshop</a></h4>
<p>ボタンの背景などに単純なグラデーションだけでなくテクスチャーを加える事でさらに質感がアップしていますね。</p>
<p align="center"><a href="http://www.grafpedia.com/tutorials/create-communication-layout-photoshop" title="Create a communication layout in Photoshop"><img src="http://www.designwalker.com/img/corporate_template/17.png" alt="Create a communication layout in Photoshop" border="0" /></a></p>
<h4><a href="http://psdvibe.com/2009/03/15/corporate-business-layout/" title="Corporate Business Layout">Corporate Business Layout</a></h4>
<p>トップの写真を変えるだけで大きく印象が変わりそう。シンプルな作りなのでいろいろと使い回しがききそうですね。</p>
<p align="center"><a href="http://psdvibe.com/2009/03/15/corporate-business-layout/" title="Corporate Business Layout"><img src="http://www.designwalker.com/img/corporate_template/18.png" alt="Corporate Business Layout" border="0" /></a></p>
<h4><a href="http://hv-designs.co.uk/2009/02/02/business-layout-4/" title="Business Layout #4">Business Layout #4</a></h4>
<p>こちらも角丸レイアウトの参考にできそうなレイアウトですね。</p>
<p align="center"><a href="http://hv-designs.co.uk/2009/02/02/business-layout-4/" title="Business Layout #4"><img src="http://www.designwalker.com/img/corporate_template/19.png" alt="Business Layout #4" border="0" /></a></p>
<h4><a href="http://designm.ag/tutorials/corporate-website-photoshop/" title="Design Blue Corporate Website in Photoshop">Design Blue Corporate Website in Photoshop</a></h4>
<p>ブルーですっきりと清潔な印象のデザインですね。</p>
<p align="center"><a href="http://designm.ag/tutorials/corporate-website-photoshop/" title="Design Blue Corporate Website in Photoshop"><img src="http://www.designwalker.com/img/corporate_template/20.png" alt="Design Blue Corporate Website in Photoshop" border="0" /></a></p>
<h4><a href="http://www.blogfullbliss.com/Softblue-Template-Tutorial" title="Softblue Template Tutorial">Softblue Template Tutorial</a></h4>
<p>アイコンを使って分かりやすいサイトに仕上がりそうですね。</p>
<p align="center"><a href="http://www.blogfullbliss.com/Softblue-Template-Tutorial" title="Softblue Template Tutorial"><img src="http://www.designwalker.com/img/corporate_template/21.png" alt="Softblue Template Tutorial" border="0" /></a></p>
<h4><a href="http://webtint.net/tutorials/make-a-nice-corporate-website-for-a-product/" title="Make a nice corporate website for a product ">Make a nice corporate website for a product </a></h4>
<p>文字だけでも結構インパクトを与えられそう。</p>
<p align="center"><a href="http://webtint.net/tutorials/make-a-nice-corporate-website-for-a-product/" title="Make a nice corporate website for a product "><img src="http://www.designwalker.com/img/corporate_template/22.png" alt="Make a nice corporate website for a product " border="0" /></a></p>
<h4><a href="http://www.spoonfeddesign.com/design-a-clean-corporate-website-with-illustrator" title="Design a Clean Corporate Website With Illustrator ">Design a Clean Corporate Website With Illustrator </a></h4>
<p>色味やレイアウトを参考に、もうひと手間加えれればかっこいいサイトになりそう。</p>
<p align="center"><a href="http://www.spoonfeddesign.com/design-a-clean-corporate-website-with-illustrator" title="Design a Clean Corporate Website With Illustrator "><img src="http://www.designwalker.com/img/corporate_template/23.png" alt="Design a Clean Corporate Website With Illustrator " border="0" /></a></p>
<h4><a href="http://www.adobetutorialz.com/articles/2751/1/Professional-Web-Layout-for-Business-Solutions" title="Professional Web Layout for Business Solutions">Professional Web Layout for Business Solutions</a></h4>
<p>サイドバーのラインが突き抜けてインパクトアップですね。</p>
<p align="center"><a href="http://www.adobetutorialz.com/articles/2751/1/Professional-Web-Layout-for-Business-Solutions" title="Professional Web Layout for Business Solutions"><img src="http://www.designwalker.com/img/corporate_template/24.png" alt="Professional Web Layout for Business Solutions" border="0" /></a></p>
<h4><a href="http://designm.ag/tutorials/green-corporate-layout/" title="Design a Green Corporate Layout in Photoshop">Design a Green Corporate Layout in Photoshop</a></h4>
<p>グリーンの背景もなかなか使えそう。</p>
<p align="center"><a href="http://designm.ag/tutorials/green-corporate-layout/" title="Design a Green Corporate Layout in Photoshop"><img src="http://www.designwalker.com/img/corporate_template/25.png" alt="Design a Green Corporate Layout in Photoshop" border="0" /></a></p>
<h4><a href="http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-make-a-green-sleek-web-layout-in-photoshop/" title="How to Make a Green &amp; Sleek Web Layout in Photoshop">How to Make a Green &amp; Sleek Web Layout in Photoshop</a></h4>
<p>ふんわりとした優しい感じのウェブサイトに仕上がりそう。</p>
<p align="center"><a href="http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-make-a-green-sleek-web-layout-in-photoshop/" title="How to Make a Green &amp; Sleek Web Layout in Photoshop"><img src="http://www.designwalker.com/img/corporate_template/26.png" alt="How to Make a Green &amp; Sleek Web Layout in Photoshop" border="0" /></a></p>
<h4><a href="http://www.grafpedia.com/tutorials/photoshop-tutorial-to-design-a-clean-business-layout" title="Photoshop tutorial to design a clean business layout">Photoshop tutorial to design a clean business layout</a></h4>
<p>力強いインパクトのあるウェブサイトですね。</p>
<p align="center"><a href="http://www.grafpedia.com/tutorials/photoshop-tutorial-to-design-a-clean-business-layout" title="Photoshop tutorial to design a clean business layout"><img src="http://www.designwalker.com/img/corporate_template/27.png" alt="Photoshop tutorial to design a clean business layout" border="0" /></a></p>
<h4><a href="http://hv-designs.co.uk/2009/03/24/web-design-layout-9/" title="Web Design Layout #9">Web Design Layout #9</a></h4>
<p>ヘッダーにテクスチャを使用したレイアウトの例。</p>
<p align="center"><a href="http://hv-designs.co.uk/2009/03/24/web-design-layout-9/" title="Web Design Layout #9"><img src="http://www.designwalker.com/img/corporate_template/29.png" alt="Web Design Layout #9" border="0" /></a></p>
<h4><a href="http://photoshopandyou.com/tutorials/product-sales-page/" title="Product Sales Page">Product Sales Page</a></h4>
<p>ブルーで清潔感アップしたレイアウト。</p>
<p align="center"><a href="http://photoshopandyou.com/tutorials/product-sales-page/" title="Product Sales Page"><img src="http://www.designwalker.com/img/corporate_template/30.png" alt="Product Sales Page" border="0" /></a></p>
<h4><a href="http://line25.com/tutorials/create-a-clean-modern-website-design-in-photoshop" title="Create a Clean Modern Website Design in Photoshop">Create a Clean Modern Website Design in Photoshop</a></h4>
<p>とってもシンプルなレイアウトですね。</p>
<p align="center"><a href="http://line25.com/tutorials/create-a-clean-modern-website-design-in-photoshop" title="Create a Clean Modern Website Design in Photoshop"><img src="http://www.designwalker.com/img/corporate_template/31.png" alt="Create a Clean Modern Website Design in Photoshop" border="0" /></a></p>
<h4><a href="http://psdvibe.com/2009/01/20/corporate-wordpress-style-layout/" title="Corporate WordPress Style Layout">Corporate WordPress Style Layout</a></h4>
<p>インパクトのある写真があるのなら、このレイアウトは使えそう。</p>
<p align="center"><a href="http://psdvibe.com/2009/01/20/corporate-wordpress-style-layout/" title="Corporate WordPress Style Layout"><img src="http://www.designwalker.com/img/corporate_template/32.png" alt="Corporate WordPress Style Layout" border="0" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.designwalker.com/2009/11/corporate-tutorial.html/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.designwalker.com/2009/11/corporate-tutorial.html" />
	</item>
		<item>
		<title>手書き風ウェブデザインまとめ</title>
		<link>http://www.designwalker.com/2008/11/sketchy.html</link>
		<comments>http://www.designwalker.com/2008/11/sketchy.html#comments</comments>
		<pubDate>Tue, 25 Nov 2008 08:27:22 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[インスピレーション]]></category>
		<category><![CDATA[icon]]></category>
		<category><![CDATA[Photoshop関連]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://www.designwalker.com/?p=747</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%2F2008%2F11%2Fsketchy.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.designwalker.com%2F2008%2F11%2Fsketchy.html&amp;style=normal&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>手書き風な要素をウェブデザインに取り入れたサイトが多くなってきていますね。</p>
<p>ちょっとしたポイントに手書き風な要素を加えると、柔らかい印象になっていいですよね。</p>
<p>かといって、マウスやペンタブレットなどを使って自分で手書きしてみても、なかなかいい感じが出せない方が多いのではないでしょうか？</p>
<p>手書き風デザインは、あまり上手すぎてもダメだし、かといってめちゃめちゃへたくそだと、それはそれで微妙ですよね。いい感じのうま下手感が出したいですよね。</p>
<p>今回は、手書き風のデザインに使えそうなサイトをインスピレーション、ブラシ、チュートリアル、フォント、アイコンなどいろいろと集めてみました。</p>
<h3>インスピレーション編</h3>
<p>まずは、手書き風のサイトをたくさん見て、お勉強。インスピレーション編です。</p>
<h4><a href="http://designm.ag/resources/hand-drawn-design/" title="100+ Resources &amp; Inspiration for Hand Drawn Design">100+ Resources &amp; Inspiration for Hand Drawn Design</a></h4>
<p>これだけで、結構お腹いっぱいになってしまいそうなくらいです…。手書き風の要素を上手く取り入れられたウェブサイト、ブラシ、フォント、テクスチャなどがたくさん集められております。</p>
<p align="center">
<a href="http://designm.ag/resources/hand-drawn-design/" title="100+ Resources &amp; Inspiration for Hand Drawn Design"><br />
<img src="http://www.designwalker.com/img/sketchy/sketchy01.jpg" alt="100+ Resources &amp; Inspiration for Hand Drawn Design" border="0" /><br />
</a>
</p>
<h4><a href="http://www.strangefruits.nl/v8.0/select.php?show=1&#038;s=33" title="SF - web design style: sketchy">SF &#8211; web design style: sketchy</a></h4>
<p>こちらもきれいな手書き風サイトがたくさん集められておりました。</p>
<p align="center">
<a href="http://www.strangefruits.nl/v8.0/select.php?show=1&#038;s=33" title="SF - web design style: sketchy"><br />
<img src="http://www.designwalker.com/img/sketchy/sketchy02.jpg" alt="SF - web design style: sketchy" border="0" /><br />
</a>
</p>
<h4><a href="http://www.designmeltdown.com/chapters/Sketchy/" title="Design Meltdown &sect; Sketchy">Design Meltdown &sect; Sketchy</a></h4>
<p>こちらも、インスピレーションサイトです。<a href="http://www.designmeltdown.com/mounted.aspx?s=/chapters/Sketchy/Default.aspx">こちら</a>から、まとめて見ることが出来ます。</p>
<p align="center">
<a href="http://www.designmeltdown.com/chapters/Sketchy/" title="Design Meltdown &sect; Sketchy"><br />
<img src="http://www.designwalker.com/img/sketchy/sketchy03.jpg" alt="Design Meltdown &sect; Sketchy" border="0" /><br />
</a>
</p>
<h3>ブラシ編</h3>
<p>実際に描くにはちょっと難しい…。というあなたは、ブラシを使えば簡単に手書き風デザインが作れますね。</p>
<h4><a href="http://resourcepile.com/collection-sketchy-brushes/" title="Collection: Sketchy Brushes">Collection: Sketchy Brushes</a></h4>
<p>かわいい手書きキャラクター系のブラシがまとめられています。</p>
<p align="center">
<a href="http://resourcepile.com/collection-sketchy-brushes/" title="Collection: Sketchy Brushes"><br />
<img src="http://www.designwalker.com/img/sketchy/sketchy04.jpg" alt="Collection: Sketchy Brushes" border="0" /><br />
</a>
</p>
<h4><a href="http://arbent.net/blog/freebies-sketchy-doodles-photoshop-brush-pack" title="Freebies: Sketchy Doodles Photoshop Brush Pack | Arbenting">Freebies: Sketchy Doodles Photoshop Brush Pack | Arbenting</a></h4>
<p>子供が書いたようなかわいらしい矢印や記号などのブラシです。</p>
<p align="center">
<a href="http://arbent.net/blog/freebies-sketchy-doodles-photoshop-brush-pack" title="Freebies: Sketchy Doodles Photoshop Brush Pack | Arbenting"><br />
<img src="http://www.designwalker.com/img/sketchy/sketchy05.jpg" alt="Freebies: Sketchy Doodles Photoshop Brush Pack | Arbenting" border="0" /><br />
</a>
</p>
<h4><a href="http://arbent.net/blog/freebies-sketchy-arrow-photoshop-brush-pack" title="Freebies - Sketchy Arrow Photoshop Brush Pack | Arbenting">Freebies &#8211; Sketchy Arrow Photoshop Brush Pack | Arbenting</a></h4>
<p>手書き風矢印のブラシです。いろいろ使えそう。</p>
<p align="center">
<a href="http://arbent.net/blog/freebies-sketchy-arrow-photoshop-brush-pack" title="Freebies - Sketchy Arrow Photoshop Brush Pack | Arbenting"><br />
<img src="http://www.designwalker.com/img/sketchy/sketchy06.jpg" alt="Freebies - Sketchy Arrow Photoshop Brush Pack | Arbenting" border="0" /><br />
</a>
</p>
<h4><a href="http://designblurb.com/sketchy-design-resources/" title="Design Blurb &raquo; &#8220;Sketchy&#8221; Design Resources">Design Blurb &raquo; &#8220;Sketchy&#8221; Design Resources</a></h4>
<p>ブラシやアイコン、テクスチャなど、手書き風まとめです。</p>
<p align="center">
<a href="http://designblurb.com/sketchy-design-resources/" title="Design Blurb &raquo; &#8220;Sketchy&#8221; Design Resources"><br />
<img src="http://www.designwalker.com/img/sketchy/sketchy07.jpg" alt="Design Blurb &raquo; &#8220;Sketchy&#8221; Design Resources" border="0" /><br />
</a>
</p>
<h4><a href="http://browse.deviantart.com/?qh=&#038;section=&#038;q=sketchy#catpath=resources/applications/psbrushes&#038;order=9&#038;q=sketchy" title="deviantART">deviantART</a></h4>
<p>deviantARTにも、手書き風ブラシがたくさんありました。</p>
<p align="center">
<a href="http://browse.deviantart.com/?qh=&#038;section=&#038;q=sketchy#catpath=resources/applications/psbrushes&#038;order=9&#038;q=sketchy" title="deviantART"><br />
<img src="http://www.designwalker.com/img/sketchy/sketchy08.jpg" alt="deviantART" border="0" /><br />
</a>
</p>
<h3>チュートリアル編</h3>
<p>実践編です。手書き風デザインにいろいろ挑戦してみましょう。</p>
<h4><a href="http://www.webdesignerwall.com/tutorials/advanced-css-menu/" title="Advanced CSS Menu">Advanced CSS Menu</a></h4>
<p>手書き風なメニューを作るチュートリアルです。</p>
<p align="center">
<a href="http://www.webdesignerwall.com/tutorials/advanced-css-menu/" title="Advanced CSS Menu"><br />
<img src="http://www.designwalker.com/img/sketchy/sketchy09.jpg" alt="Advanced CSS Menu" border="0" /><br />
</a>
</p>
<h4><a href="http://vectortuts.com/illustration/create-a-sketchy-hand-drawn-camera-illustration-in-illustrator/" title="Create a Sketchy Hand-Drawn Camera Illustration in Illustrator - VECTORTUTS">Create a Sketchy Hand-Drawn Camera Illustration in Illustrator &#8211; VECTORTUTS</a></h4>
<p>Illustratorで描く手書き風カメラのチュートリアル。</p>
<p align="center">
<a href="http://vectortuts.com/illustration/create-a-sketchy-hand-drawn-camera-illustration-in-illustrator/" title="Create a Sketchy Hand-Drawn Camera Illustration in Illustrator - VECTORTUTS"><br />
<img src="http://www.designwalker.com/img/sketchy/sketchy11.jpg" alt="Create a Sketchy Hand-Drawn Camera Illustration in Illustrator - VECTORTUTS" border="0" /><br />
</a>
</p>
<h4><a href="http://psdfan.com/drawing/create-a-sketchy-work-of-art-in-just-10-steps/" title="Create a Sketchy Work of Art in Just 10 Steps - psdfan.com -">Create a Sketchy Work of Art in Just 10 Steps &#8211; psdfan.com -</a></h4>
<p>写真をもとに手書き風のイラストを描く方法を10ステップで紹介されていました。</p>
<p align="center">
<a href="http://psdfan.com/drawing/create-a-sketchy-work-of-art-in-just-10-steps/" title="Create a Sketchy Work of Art in Just 10 Steps - psdfan.com -"><br />
<img src="http://www.designwalker.com/img/sketchy/sketchy12.jpg" alt="Create a Sketchy Work of Art in Just 10 Steps - psdfan.com -" border="0" /><br />
</a>
</p>
<h3>フォント編</h3>
<p>手書き風フォントもいろいろ使い道がありますよね。</p>
<h4><a href="http://www.jankoatwarpspeed.com/post/2008/09/05/10-sketchy-fonts-for-web-designers.aspx" title="Janko At Warp Speed | 10 sketchy fonts for web designers<br />
">Janko At Warp Speed | 10 sketchy fonts for web designers<br />
</a></h4>
<p>こちらは、手書き風の欧文フォントが１０種類。</p>
<p align="center">
<a href="http://www.jankoatwarpspeed.com/post/2008/09/05/10-sketchy-fonts-for-web-designers.aspx" title="Janko At Warp Speed | 10 sketchy fonts for web designers<br />
"><br />
<img src="http://www.designwalker.com/img/sketchy/sketchy13.jpg" alt="Janko At Warp Speed | 10 sketchy fonts for web designers<br />
" border="0" /><br />
</a>
</p>
<h4><a href="http://www.abstractfonts.com/font/11905" title="!Sketchy Times, Regular - Abstract Fonts">!Sketchy Times, Regular &#8211; Abstract Fonts</a></h4>
<p>手書き風なフォントが豊富な、フォントダウンロードサイトです。</p>
<p align="center">
<a href="http://www.abstractfonts.com/font/11905" title="!Sketchy Times, Regular - Abstract Fonts"><br />
<img src="http://www.designwalker.com/img/sketchy/sketchy14.jpg" alt="!Sketchy Times, Regular - Abstract Fonts" border="0" /><br />
</a>
</p>
<h4><a href="http://e0166.blog89.fc2.com/blog-entry-526.html" title="フリーで使えるいい感じの手書き風フォント特集（日本語も）*ホームページを作る人のネタ帳">フリーで使えるいい感じの手書き風フォント特集（日本語も）*ホームページを作る人のネタ帳</a></h4>
<p>ネタ帳さんで、いい感じの手書き風フォントをまとめられておりました。手書き風な日本語フォントはいろいろ使えますね。</p>
<p align="center">
<a href="http://e0166.blog89.fc2.com/blog-entry-526.html" title="フリーで使えるいい感じの手書き風フォント特集（日本語も）*ホームページを作る人のネタ帳"><br />
<img src="http://www.designwalker.com/img/sketchy/sketchy15.jpg" alt="フリーで使えるいい感じの手書き風フォント特集（日本語も）*ホームページを作る人のネタ帳" border="0" /><br />
</a>
</p>
<h4><a href="http://www.fontifier.com/" title="Fontifier - Your own handwriting on your computer!">Fontifier &#8211; Your own handwriting on your computer!</a></h4>
<p>自分で書いた文字をフォントにしてくれるサイトです。</p>
<p align="center">
<a href="http://www.fontifier.com/" title="Fontifier - Your own handwriting on your computer!"><br />
<img src="http://www.designwalker.com/img/sketchy/sketchy16.jpg" alt="Fontifier - Your own handwriting on your computer!" border="0" /><br />
</a>
</p>
<h3>アイコン編</h3>
<p>手書き風のアイコンはかわいいものが多いですね。</p>
<h4><a href="http://resourcepile.com/collection-sketchy-icons/" title="Collection: Sketchy Icons | Resource Pile">Collection: Sketchy Icons | Resource Pile</a></h4>
<p>微妙なうま下手感がたまらない、かわいいアイコンを１０種類まとめられてます。</p>
<p align="center">
<a href="http://resourcepile.com/collection-sketchy-icons/" title="Collection: Sketchy Icons | Resource Pile"><br />
<img src="http://www.designwalker.com/img/sketchy/sketchy17.jpg" alt="Collection: Sketchy Icons | Resource Pile" border="0" /><br />
</a>
</p>
<h4><a href="http://psdfan.com/freebies/hand-drawn-blogging-icon-set/" title="Hand-Drawn Blogging Icon Set - psdfan.com -">Hand-Drawn Blogging Icon Set &#8211; psdfan.com -</a></h4>
<p>こちらもいい感じの手書き風アイコンですね。</p>
<p align="center">
<a href="http://psdfan.com/freebies/hand-drawn-blogging-icon-set/" title="Hand-Drawn Blogging Icon Set - psdfan.com -"><br />
<img src="http://www.designwalker.com/img/sketchy/sketchy20.jpg" alt="Hand-Drawn Blogging Icon Set - psdfan.com -" border="0" /><br />
</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.designwalker.com/2008/11/sketchy.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.designwalker.com/2008/11/sketchy.html" />
	</item>
		<item>
		<title>メタリックな質感をPhotoshopで表現する方法いろいろ</title>
		<link>http://www.designwalker.com/2008/11/metal.html</link>
		<comments>http://www.designwalker.com/2008/11/metal.html#comments</comments>
		<pubDate>Wed, 19 Nov 2008 08:21:38 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Photoshop関連]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://www.designwalker.com/?p=745</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%2F2008%2F11%2Fmetal.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.designwalker.com%2F2008%2F11%2Fmetal.html&amp;style=normal&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>無機質で光沢のあるメタリックな感じをデザインに使用したい事がちょこちょことあります。</p>
<p>今回は、Photoshopを使って金属やステンレス、鉄っぽい表現方法などチュートリアル系を中心にまとめてみました。</p>
<h4><a href="http://www.pstut.info/tutorials/simple-gunmetal-interface/12/" title="Simple GunMetal Interface">Simple GunMetal Interface</a></h4>
<p>キラキラと光沢のあるメタリックなフレームがかっこいいです。</p>
<p align="center">
<a href="http://www.pstut.info/tutorials/simple-gunmetal-interface/12/" title="Simple GunMetal Interface"><br />
<img src="http://www.designwalker.com/img/metal/metal01.jpg" alt="Simple GunMetal Interface" border="0" /><br />
</a>
</p>
<h4><a href="http://pshero.com/archives/wwii-airplane" title="PSHERO.com |  WWII Airplane">PSHERO.com |  WWII Airplane</a></h4>
<p>鉄の継ぎ目の部分がリアルなチュートリアル。</p>
<p align="center">
<a href="http://pshero.com/archives/wwii-airplane" title="PSHERO.com |  WWII Airplane"><br />
<img src="http://www.designwalker.com/img/metal/metal02.jpg" alt="PSHERO.com |  WWII Airplane" border="0" /><br />
</a>
</p>
<h4><a href="http://3nhanced.com/photoshop/create-a-fantastic-decaying-metal-sign/" title="Create a Fantastic Decaying Metal Sign">Create a Fantastic Decaying Metal Sign</a></h4>
<p>鉄が錆びた感じをうまく表現されています。</p>
<p align="center">
<a href="http://3nhanced.com/photoshop/create-a-fantastic-decaying-metal-sign/" title="Create a Fantastic Decaying Metal Sign"><br />
<img src="http://www.designwalker.com/img/metal/metal03.jpg" alt="Create a Fantastic Decaying Metal Sign" border="0" /><br />
</a>
</p>
<h4><a href="http://www.tutzor.com/index.php/2008/06/star-wars-text-effect/" title="Star Wars text effect">Star Wars text effect</a></h4>
<p>Star Warsのテキストエフェクト。</p>
<p align="center">
<a href="http://www.tutzor.com/index.php/2008/06/star-wars-text-effect/" title="Star Wars text effect"><br />
<img src="http://www.designwalker.com/img/metal/metal04.jpg" alt="Star Wars text effect" border="0" /><br />
</a>
</p>
<h4><a href="http://psdtuts.com/tutorials/interface-tutorials/creating-a-cool-brushed-metal-surface-in-photoshop/" title="Creating a Cool Brushed Metal Surface in Photoshop">Creating a Cool Brushed Metal Surface in Photoshop</a></h4>
<p>MacBookの表面のような光沢を表現するチュートリアルです。</p>
<p align="center">
<a href="http://psdtuts.com/tutorials/interface-tutorials/creating-a-cool-brushed-metal-surface-in-photoshop/" title="Creating a Cool Brushed Metal Surface in Photoshop"><br />
<img src="http://www.designwalker.com/img/metal/metal05.jpg" alt="Creating a Cool Brushed Metal Surface in Photoshop" border="0" /><br />
</a>
</p>
<h4><a href="http://s0nkite.deviantart.com/art/Spiderman-pattern-53977363" title="Spiderman pattern">Spiderman pattern</a></h4>
<p>これは便利。映画スパイダーマンのデザインで使われているような、メタリックなパターンファイルが公開されています。いろいろ使えそうです。</p>
<p align="center">
<a href="http://s0nkite.deviantart.com/art/Spiderman-pattern-53977363" title="Spiderman pattern"><br />
<img src="http://www.designwalker.com/img/metal/metal06.jpg" alt="Spiderman pattern" border="0" /><br />
</a>
</p>
<h4><a href="http://www.zymic.com/tutorials/photoshop/mp3-player-design/" title="MP3 Player Design | Free Adobe Photoshop Tutorials">MP3 Player Design | Free Adobe Photoshop Tutorials</a></h4>
<p>光沢のある、リアルな質感のMP3プレーヤーを描くチュートリアルです。</p>
<p align="center">
<a href="http://www.zymic.com/tutorials/photoshop/mp3-player-design/" title="MP3 Player Design | Free Adobe Photoshop Tutorials"><br />
<img src="http://www.designwalker.com/img/metal/metal07.jpg" alt="MP3 Player Design | Free Adobe Photoshop Tutorials" border="0" /><br />
</a>
</p>
<h4><a href="http://psdtuts.com/tutorials/interface-tutorials/how-to-create-a-simple-sleek-web-20-site-footer/" title="How to Create a Simple &amp; Sleek Web 2.0 Site Footer">How to Create a Simple &amp; Sleek Web 2.0 Site Footer</a></h4>
<p>Footer部分も、少し手を加えるといい感じに仕上がりますね。</p>
<p align="center">
<a href="http://psdtuts.com/tutorials/interface-tutorials/how-to-create-a-simple-sleek-web-20-site-footer/" title="How to Create a Simple &amp; Sleek Web 2.0 Site Footer"><br />
<img src="http://www.designwalker.com/img/metal/metal08.jpg" alt="How to Create a Simple &amp; Sleek Web 2.0 Site Footer" border="0" /><br />
</a>
</p>
<h4><a href="http://psdtuts.com/tutorials/text-effects-tutorials/how-to-create-a-gold-text-effect-in-photoshop/" title="How To Create A Gold Text Effect In Photoshop">How To Create A Gold Text Effect In Photoshop</a></h4>
<p>こちらは、高級感あるゴールドなテキストエフェクト。きれいですね。</p>
<p align="center">
<a href="http://psdtuts.com/tutorials/text-effects-tutorials/how-to-create-a-gold-text-effect-in-photoshop/" title="How To Create A Gold Text Effect In Photoshop"><br />
<img src="http://www.designwalker.com/img/metal/metal09.jpg" alt="How To Create A Gold Text Effect In Photoshop" border="0" /><br />
</a>
</p>
<h4><a href="http://photoshopfrenzy.com/?p=71" title="Metallic Spiderman 3 Text">Metallic Spiderman 3 Text</a></h4>
<p>映画スパイダーマン3のロゴに使われたテキストエフェクトです。</p>
<p align="center">
<a href="http://photoshopfrenzy.com/?p=71" title="Metallic Spiderman 3 Text"><br />
<img src="http://www.designwalker.com/img/metal/metal10.jpg" alt="Metallic Spiderman 3 Text" border="0" /><br />
</a>
</p>
<h4><a href="http://megatutorials.blogspot.com/2007/08/orange-menu-with-steel-stroke.html" title="Orange menu with a steel stroke.">Orange menu with a steel stroke.</a></h4>
<p>光沢のあるフレームを使ったメニューを作るチュートリアル。</p>
<p align="center">
<a href="http://megatutorials.blogspot.com/2007/08/orange-menu-with-steel-stroke.html" title="Orange menu with a steel stroke."><br />
<img src="http://www.designwalker.com/img/metal/metal11.jpg" alt="Orange menu with a steel stroke." border="0" /><br />
</a>
</p>
<h4><a href="http://www.hongkiat.com/blog/realistic-stainless-steel-background-and-text-photoshop-tutorial/" title="Design Realistic Stainless Steel Background and Text [Photoshop Tutorial] ">Design Realistic Stainless Steel Background and Text [Photoshop Tutorial] </a></h4>
<p>ステンレススチールを表現するチュートリアルです。</p>
<p align="center">
<a href="http://www.hongkiat.com/blog/realistic-stainless-steel-background-and-text-photoshop-tutorial/" title="Design Realistic Stainless Steel Background and Text [Photoshop Tutorial] "><br />
<img src="http://www.designwalker.com/img/metal/metal12.jpg" alt="Design Realistic Stainless Steel Background and Text [Photoshop Tutorial] " border="0" /><br />
</a>
</p>
<h4><a href="http://www.interfacemojo.com/header-footer/stainless-steel-header/index2.php" title="Stainless Steel Navigation Header">Stainless Steel Navigation Header</a></h4>
<p>シンクを上から見たのかと思ったら、ステンレスのナビゲーションヘッダー部分を描くチュートリアルでした。。</p>
<p align="center">
<a href="http://www.interfacemojo.com/header-footer/stainless-steel-header/index2.php" title="Stainless Steel Navigation Header"><br />
<img src="http://www.designwalker.com/img/metal/metal13.jpg" alt="Stainless Steel Navigation Header" border="0" /><br />
</a>
</p>
<h4><a href="http://www.tutorio.com/tutorial/photoshop-metal-texture" title="Photoshop Metal Texture">Photoshop Metal Texture</a></h4>
<p>キズのあるメタリックなテクスチャ</p>
<p align="center">
<a href="http://www.tutorio.com/tutorial/photoshop-metal-texture" title="Photoshop Metal Texture"><br />
<img src="http://www.designwalker.com/img/metal/metal14.jpg" alt="Photoshop Metal Texture" border="0" /><br />
</a>
</p>
<h4><a href="http://tutorials20.com/design/design-your-iphone-widgets/" title="Design Your iPhone Widgets">Design Your iPhone Widgets</a></h4>
<p>iPhoneのアイコンもきれいですが、背景部分が結構簡単に鉄っぽい感じが出せそうなので、ご紹介。</p>
<p align="center">
<a href="http://tutorials20.com/design/design-your-iphone-widgets/" title="Design Your iPhone Widgets"><br />
<img src="http://www.designwalker.com/img/metal/metal15.jpg" alt="Design Your iPhone Widgets" border="0" /><br />
</a>
</p>
<h4><a href="http://ebin.wordpress.com/2007/06/23/free-brushed-metal-photoshop-style/" title="FREE - Brushed Metal Photoshop Style">FREE &#8211; Brushed Metal Photoshop Style</a></h4>
<p>メタリックなスタイルファイルです。Photoshopでロードしておけば、いつでもワンクリックでメタリックな質感が作れますね。</p>
<p align="center">
<a href="http://ebin.wordpress.com/2007/06/23/free-brushed-metal-photoshop-style/" title="FREE - Brushed Metal Photoshop Style"><br />
<img src="http://www.designwalker.com/img/metal/metal16.jpg" alt="FREE - Brushed Metal Photoshop Style" border="0" /><br />
</a>
</p>
<h4><a href="http://www.biorust.com/index.php?page=tutorial_detail&#038;tutid=19" title="The Metal Effect">The Metal Effect</a></h4>
<p>メタリックなテキストエフェクトです。</p>
<p align="center">
<a href="http://www.biorust.com/index.php?page=tutorial_detail&#038;tutid=19" title="The Metal Effect"><br />
<img src="http://www.designwalker.com/img/metal/metal17.jpg" alt="The Metal Effect" border="0" /><br />
</a>
</p>
<h4><a href="http://www.absolutecross.com/tutorials/photoshop/interfaces/smooth-metal/" title="Photoshop Tutorial: Smooth Metal">Photoshop Tutorial: Smooth Metal</a></h4>
<p>まるっこい感じがかわいチュートリアルです。</p>
<p align="center">
<a href="http://www.absolutecross.com/tutorials/photoshop/interfaces/smooth-metal/" title="Photoshop Tutorial: Smooth Metal"><br />
<img src="http://www.designwalker.com/img/metal/metal18.jpg" alt="Photoshop Tutorial: Smooth Metal" border="0" /><br />
</a>
</p>
<h4><a href="http://www.photoshopbrushes.com/brushes/9.htm" title="Photoshop Metal Brushes">Photoshop Metal Brushes</a></h4>
<p>メタリックなブラシもあります。</p>
<p align="center">
<a href="http://www.photoshopbrushes.com/brushes/9.htm" title="Photoshop Metal Brushes"><br />
<img src="http://www.designwalker.com/img/metal/metal19.jpg" alt="Photoshop Metal Brushes" border="0" /><br />
</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.designwalker.com/2008/11/metal.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.designwalker.com/2008/11/metal.html" />
	</item>
		<item>
		<title>テクスチャとグラデーションで質感のある背景を作ろう</title>
		<link>http://www.designwalker.com/2008/06/texture.html</link>
		<comments>http://www.designwalker.com/2008/06/texture.html#comments</comments>
		<pubDate>Tue, 03 Jun 2008 06:01:08 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Photoshop関連]]></category>
		<category><![CDATA[texture]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://www.designwalker.com/?p=700</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%2F2008%2F06%2Ftexture.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.designwalker.com%2F2008%2F06%2Ftexture.html&amp;style=normal&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>今回は、ひさびさのPhotoshopチュートリアルです。</p>
<p>最近では、ベタな背景や、単純な上から下へのグラデーションだけではなく、なんだかとっても質感のある背景のウェブデザインがはやりっぽいです。</p>
<p>今回は、テクスチャ画像とグラデーションを組み合わせて、簡単に質感のある背景をPhotoshopで作るチュートリアルをご紹介。</p>
<p>とっても簡単なので、是非お試しください。</p>
<h4>1. 新規作成</h4>
<p>適当な大きさでファイルを新規作成してください。まず最初にカラーパレットにお好きな２色を選択します。今回は、適当に#a2bb3eと#328a26と設定してみました。</p>
<p align="center">
<img src="http://www.designwalker.com/img/texture_bg/texture-tutorial01.jpg" alt="" border="0" />
</p>
<h4>2. グラデーション</h4>
<p>グラデーションツールの円形を選択して、斜めにグラデーションをかけてみました。</p>
<p align="center">
<img src="http://www.designwalker.com/img/texture_bg/texture-tutorial02.jpg" alt="" border="0" />
</p>
<h4>3. テクスチャ</h4>
<p>お好きなテクスチャ画像を用意します。</p>
<p align="center">
<img src="http://www.designwalker.com/img/texture_bg/texture-tutorial03.jpg" alt="" border="0" />
</p>
<h4>4. テクスチャをドラッグ</h4>
<p>用意したテクスチャ画像を先ほど描いたグラデーションの上にドラッグ。２つのレイヤーになります。</p>
<p align="center">
<img src="http://www.designwalker.com/img/texture_bg/texture-tutorial04.jpg" alt="" border="0" />
</p>
<h4>5. 描画モードの変更</h4>
<p>テクスチャのレイヤーの描画モードをオーバーレイに変更します。</p>
<p align="center">
<img src="http://www.designwalker.com/img/texture_bg/texture-tutorial06.jpg" alt="" border="0" />
</p>
<h4>6. 不透明度の変更</h4>
<p>テクスチャのレイヤーの不透明度を適当な数値に変更。</p>
<p align="center">
<img src="http://www.designwalker.com/img/texture_bg/texture-tutorial07.jpg" alt="" border="0" />
</p>
<h4>7. 完成！</h4>
<p>簡単な作業でなかなか質感のある背景が出来そうです。</p>
<p align="center">
<img src="http://www.designwalker.com/img/texture_bg/texture-sample01.jpg" alt="" border="0" />
</p>
<p>グラデーションの形状や、色見、用意するテクスチャ次第でいろいろ使えそうですね。</p>
<p align="center">
<img src="http://www.designwalker.com/img/texture_bg/texture-sample02.jpg" alt="" border="0" />
</p>
<h4><a href="http://psdtuts.com/text-effects-tutorials/create-a-spectacular-grass-text-effect-in-photoshop/" title="Create a Spectacular Grass Text Effect in Photoshop">Create a Spectacular Grass Text Effect in Photoshop</a></h4>
<p>極めれば、以下のようなとってもきれいな背景まで作れちゃいます。上に乗っかっている芝生のテキストも、とってもいい感じですね！</p>
<p align="center">
<a href="http://psdtuts.com/text-effects-tutorials/create-a-spectacular-grass-text-effect-in-photoshop/" title="Create a Spectacular Grass Text Effect in Photoshop"><br />
<img src="http://www.designwalker.com/img/texture_bg/texture17.jpg" alt="Create a Spectacular Grass Text Effect in Photoshop" border="0" /><br />
</a>
</p>
<p>今回は、このチュートリアルで使えそうな、テクスチャを配布されているサイトもまとめてみました。</p>
<p>以下のサイトから、いろいろなテクスチャ画像がダウンロード出来ます。</p>
<h4><a href="http://www.textureking.com/" title="Free Textures from TextureKing">Free Textures from TextureKing</a></h4>
<p align="center">
<a href="http://www.textureking.com/" title="Free Textures from TextureKing"><br />
<img src="http://www.designwalker.com/img/texture_bg/texture01.jpg" alt="Free Textures from TextureKing" border="0" /><br />
</a>
</p>
<h4><a href="http://www.cgtextures.com/" title="CG Textures">CG Textures</a></h4>
<p align="center">
<a href="http://www.cgtextures.com/" title="CG Textures"><br />
<img src="http://www.designwalker.com/img/texture_bg/texture02.jpg" alt="CG Textures" border="0" /><br />
</a>
</p>
<h4><a href="http://www.texturewarehouse.com/gallery/index.php" title="Texture Warehouse">Texture Warehouse</a></h4>
<p align="center">
<a href="http://www.texturewarehouse.com/gallery/index.php" title="Texture Warehouse"><br />
<img src="http://www.designwalker.com/img/texture_bg/texture03.jpg" alt="Texture Warehouse" border="0" /><br />
</a>
</p>
<h4><a href="http://www.grungetextures.com/gallery/" title="Grunge Textures">Grunge Textures</a></h4>
<p align="center">
<a href="http://www.grungetextures.com/gallery/" title="Grunge Textures"><br />
<img src="http://www.designwalker.com/img/texture_bg/texture04.jpg" alt="Grunge Textures" border="0" /><br />
</a>
</p>
<h4><a href="http://www.lughertexture.com/index.php" title="luGher Texture">luGher Texture</a></h4>
<p align="center">
<a href="http://www.lughertexture.com/index.php" title="luGher Texture"><br />
<img src="http://www.designwalker.com/img/texture_bg/texture05.jpg" alt="luGher Texture" border="0" /><br />
</a>
</p>
<h4><a href="http://amazingtextures.com/textures/" title="Amazing Textures">Amazing Textures</a></h4>
<p align="center">
<a href="http://amazingtextures.com/textures/" title="Amazing Textures"><br />
<img src="http://www.designwalker.com/img/texture_bg/texture06.jpg" alt="Amazing Textures" border="0" /><br />
</a>
</p>
<h4><a href="http://www.texturelove.com/textures/" title="TextureLove">TextureLove</a></h4>
<p align="center">
<a href="http://www.texturelove.com/textures/" title="TextureLove"><br />
<img src="http://www.designwalker.com/img/texture_bg/texture07.jpg" alt="TextureLove" border="0" /><br />
</a>
</p>
<h4><a href="http://texturez.com/" title="texturez.com">texturez.com</a></h4>
<p align="center">
<a href="http://texturez.com/" title="texturez.com"><br />
<img src="http://www.designwalker.com/img/texture_bg/texture08.jpg" alt="texturez.com" border="0" /><br />
</a>
</p>
<h4><a href="http://urbandirty.com/" title="Urban Dirty">Urban Dirty</a></h4>
<p align="center">
<a href="http://urbandirty.com/" title="Urban Dirty"><br />
<img src="http://www.designwalker.com/img/texture_bg/texture09.jpg" alt="Urban Dirty" border="0" /><br />
</a>
</p>
<h4><a href="http://www.2textured.com/main.php" title="2Textured">2Textured</a></h4>
<p align="center">
<a href="http://www.2textured.com/main.php" title="2Textured"><br />
<img src="http://www.designwalker.com/img/texture_bg/texture10.jpg" alt="2Textured" border="0" /><br />
</a>
</p>
<h4><a href="http://www.imageafter.com/" title="Image * After">Image * After</a></h4>
<p align="center">
<a href="http://www.imageafter.com/" title="Image * After"><br />
<img src="http://www.designwalker.com/img/texture_bg/texture11.jpg" alt="Image * After" border="0" /><br />
</a>
</p>
<h4><a href="http://stocktextures.com/index.php?mode=textures" title="StockTextures.com">StockTextures.com</a></h4>
<p align="center">
<a href="http://stocktextures.com/index.php?mode=textures" title="StockTextures.com"><br />
<img src="http://www.designwalker.com/img/texture_bg/texture12.jpg" alt="StockTextures.com" border="0" /><br />
</a>
</p>
<h4><a href="http://textures.pedramk.com/index-html.php?pos=texture&#038;cat=Asphalt&#038;limit=24&#038;page=0" title="textures.pedramk.com">textures.pedramk.com</a></h4>
<p align="center">
<a href="http://textures.pedramk.com/index-html.php?pos=texture&#038;cat=Asphalt&#038;limit=24&#038;page=0" title="textures.pedramk.com"><br />
<img src="http://www.designwalker.com/img/texture_bg/texture13.jpg" alt="textures.pedramk.com" border="0" /><br />
</a>
</p>
<h4><a href="http://textures.forrest.cz/" title="textures.forrest.cz">textures.forrest.cz</a></h4>
<p align="center">
<a href="http://textures.forrest.cz/" title="textures.forrest.cz"><br />
<img src="http://www.designwalker.com/img/texture_bg/texture14.jpg" alt="textures.forrest.cz" border="0" /><br />
</a>
</p>
<h4><a href="http://veredgf.fredfarm.com/textura/index.html" title=". ... t. Ex...t.U .ra. .. ...">. &#8230; t. Ex&#8230;t.U .ra. .. &#8230;</a></h4>
<p align="center">
<a href="http://veredgf.fredfarm.com/textura/index.html" title=". ... t. Ex...t.U .ra. .. ..."><br />
<img src="http://www.designwalker.com/img/texture_bg/texture15.jpg" alt=". ... t. Ex...t.U .ra. .. ..." border="0" /><br />
</a>
</p>
<h4><a href="http://local.wasp.uwa.edu.au/~pbourke/texture_colour/" title="local.wasp.uwa.edu.au">local.wasp.uwa.edu.au</a></h4>
<p align="center">
<a href="http://local.wasp.uwa.edu.au/~pbourke/texture_colour/" title="local.wasp.uwa.edu.au"><br />
<img src="http://www.designwalker.com/img/texture_bg/texture16.jpg" alt="local.wasp.uwa.edu.au" border="0" /><br />
</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.designwalker.com/2008/06/texture.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.designwalker.com/2008/06/texture.html" />
	</item>
		<item>
		<title>Fireworksのチュートリアルいろいろ</title>
		<link>http://www.designwalker.com/2008/04/fireworks-tutorial.html</link>
		<comments>http://www.designwalker.com/2008/04/fireworks-tutorial.html#comments</comments>
		<pubDate>Tue, 22 Apr 2008 06:19:08 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[サイトを紹介する男]]></category>
		<category><![CDATA[fireworks]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[まとめ]]></category>
		<category><![CDATA[ウェブデザイン]]></category>
		<category><![CDATA[チュートリアル]]></category>

		<guid isPermaLink="false">http://www.designwalker.com/?p=666</guid>
		<description><![CDATA[
			
				
			
		
ウェブデザイナーでFireworks派の方々も結構いらっしゃるのではないでしょうか？
たまに、外部のデザイナーの方からファイルを送っていただくとPNGファイルだったりして…
もちろん、p [...]]]></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%2F2008%2F04%2Ffireworks-tutorial.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.designwalker.com%2F2008%2F04%2Ffireworks-tutorial.html&amp;style=normal&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>ウェブデザイナーでFireworks派の方々も結構いらっしゃるのではないでしょうか？</p>
<p>たまに、外部のデザイナーの方からファイルを送っていただくとPNGファイルだったりして…</p>
<p>もちろん、psdファイルに書き出しも出来ますが。Photoshopだけじゃなく、Fireworksの使い方もある程度、知っていて損はないですよね。</p>
<p>本日は、Fireworksのチュートリアルをいろいろまとめてみました。</p>
<h4><a href="http://www.smashingmagazine.com/2008/03/18/adobe-fireworks-tutorials-and-downloads-best-of/" title="Adobe Fireworks Tutorials and Downloads - Best of">Adobe Fireworks Tutorials and Downloads &#8211; Best of</a></h4>
<p>おなじみSmashinmagazineさんのFireworksチュートリアルまとめです。</p>
<p align="center">
<a href="http://www.smashingmagazine.com/2008/03/18/adobe-fireworks-tutorials-and-downloads-best-of/" title="Adobe Fireworks Tutorials and Downloads - Best of"><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial01.jpg" alt="Adobe Fireworks Tutorials and Downloads - Best of" border="0" /><br />
</a>
</p>
<h4><a href="http://abduzeedo.com/" title="Abduzeedo">Abduzeedo</a></h4>
<p>こちらも有名abduzeedさん。とってもクオリティの高いFireworksのチュートリアルを公開されております。</p>
<p align="center">
<a href="http://abduzeedo.com/" title="Abduzeedo"><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial02.jpg" alt="Abduzeedo" border="0" /><br />
</a>
</p>
<p>以下、abduzeedさんからチュートリアルをピックアップ。</p>
<h4><a href="http://abduzeedo.com/tutorial-obamas-background-fireworks-part-1" title="Obama's Background on Fireworks">Obama&#8217;s Background on Fireworks</a></h4>
<p>オバマ氏のサイトのような、とってもきれいな背景を作るFireworksのチュートリアル。</p>
<p align="center">
<a href="http://abduzeedo.com/tutorial-obamas-background-fireworks-part-1" title="Obama's Background on Fireworks"><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial03.jpg" alt="Obama's Background on Fireworks" border="0" /><br />
</a>
</p>
<h4><a href="http://abduzeedo.com/tutorial-creating-iphone-interface-fireworks" title="Creating the iPhone Interface on Fireworks">Creating the iPhone Interface on Fireworks</a></h4>
<p>iPhoneのインターフェースを作るチュートリアル。</p>
<p align="center">
<a href="http://abduzeedo.com/tutorial-creating-iphone-interface-fireworks" title="Creating the iPhone Interface on Fireworks"><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial04.jpg" alt="Creating the iPhone Interface on Fireworks" border="0" /><br />
</a>
</p>
<h4><a href="http://abduzeedo.com/tutorial-newspond-menu-fireworks-part-1" title="Newspond menu on Fireworks">Newspond menu on Fireworks</a></h4>
<p>Newspondのようなメニューを作るチュートリアル。</p>
<p align="center">
<a href="http://abduzeedo.com/tutorial-newspond-menu-fireworks-part-1" title="Newspond menu on Fireworks"><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial05.jpg" alt="Newspond menu on Fireworks" border="0" /><br />
</a>
</p>
<h4><a href="http://firetuts.com/" title="Firetuts.com - Adobe Fireworks Tutorials">Firetuts.com &#8211; Adobe Fireworks Tutorials</a></h4>
<p>こちらもとってもきれいなFireworksのチュートリアル満載です。</p>
<p align="center">
<a href="http://firetuts.com/" title="Firetuts.com - Adobe Fireworks Tutorials"><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial06.jpg" alt="Firetuts.com - Adobe Fireworks Tutorials" border="0" /><br />
</a>
</p>
<p>こちらのサイトからも、いくつかチュートリアルをピックアップ。</p>
<h4><a href="http://firetuts.com/2007/12/21/create-vista-like-wallpapers-with-fireworks/" title="Create Vista-like Wallpapers with Fireworks">Create Vista-like Wallpapers with Fireworks</a></h4>
<p>Vistaのような壁紙を作るチュートリアル。</p>
<p align="center">
<a href="http://firetuts.com/2007/12/21/create-vista-like-wallpapers-with-fireworks/" title="Create Vista-like Wallpapers with Fireworks"><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial07.jpg" alt="Create Vista-like Wallpapers with Fireworks" border="0" /><br />
</a>
</p>
<h4><a href="http://firetuts.com/2007/12/08/five-easy-steps-to-create-a-barcode-in-fireworks/" title="Five easy steps to create a barcode in Fireworks.">Five easy steps to create a barcode in Fireworks.</a></h4>
<p>バーコードを作るチュートリアル。</p>
<p align="center">
<a href="http://firetuts.com/2007/12/08/five-easy-steps-to-create-a-barcode-in-fireworks/" title="Five easy steps to create a barcode in Fireworks."><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial08.jpg" alt="Five easy steps to create a barcode in Fireworks." border="0" /><br />
</a>
</p>
<h4><a href="http://firetuts.com/2007/11/23/creating-a-realistic-peelable-sticker-effect-in-fireworks/" title="Creating a Realistic Peelable Sticker Effect in Fireworks">Creating a Realistic Peelable Sticker Effect in Fireworks</a></h4>
<p>こちらは、めくれた感じを表現できます。</p>
<p align="center">
<a href="http://firetuts.com/2007/11/23/creating-a-realistic-peelable-sticker-effect-in-fireworks/" title="Creating a Realistic Peelable Sticker Effect in Fireworks"><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial09.jpg" alt="Creating a Realistic Peelable Sticker Effect in Fireworks" border="0" /><br />
</a>
</p>
<h4><a href="http://firetuts.com/2007/11/17/realistic-10-step-3d-simulation-with-reflection-in-fireworks-8/" title="Realistic 10-step 3D simulation with reflection in Fireworks 8">Realistic 10-step 3D simulation with reflection in Fireworks 8</a></h4>
<p>3Dのテキストを作れます。</p>
<p align="center">
<a href="http://firetuts.com/2007/11/17/realistic-10-step-3d-simulation-with-reflection-in-fireworks-8/" title="Realistic 10-step 3D simulation with reflection in Fireworks 8"><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial10.jpg" alt="Realistic 10-step 3D simulation with reflection in Fireworks 8" border="0" /><br />
</a>
</p>
<h4><a href="http://www.brownbatterystudios.com/sixthings/category/fireworks/" title="SixThings">SixThings</a></h4>
<p>こちらのサイトのチュートリアルも使えそう。</p>
<p align="center">
<a href="http://www.brownbatterystudios.com/sixthings/category/fireworks/" title="SixThings"><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial11.jpg" alt="SixThings" border="0" /><br />
</a>
</p>
<h4><a href="http://www.brownbatterystudios.com/sixthings/2007/09/20/rapid-fire-8-extracting-logos/" title="Extracting Logos">Extracting Logos</a></h4>
<p>ロゴを抽出する方法。</p>
<p align="center">
<a href="http://www.brownbatterystudios.com/sixthings/2007/09/20/rapid-fire-8-extracting-logos/" title="Extracting Logos"><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial14.jpg" alt="Extracting Logos" border="0" /><br />
</a>
</p>
<h4><a href="http://www.brownbatterystudios.com/sixthings/2006/04/05/rapid-fire-2-golden-seal/" title="Golden Seal">Golden Seal</a></h4>
<p>ゴールドのシールを作る方法。</p>
<p align="center">
<a href="http://www.brownbatterystudios.com/sixthings/2006/04/05/rapid-fire-2-golden-seal/" title="Golden Seal"><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial12.jpg" alt="Golden Seal" border="0" /><br />
</a>
</p>
<h4><a href="http://www.brownbatterystudios.com/sixthings/2006/03/06/rapid-fire-1-photo-realistic/" title="Photo-Realistic">Photo-Realistic</a></h4>
<p>リアルな写真をFireworksで。</p>
<p align="center">
<a href="http://www.brownbatterystudios.com/sixthings/2006/03/06/rapid-fire-1-photo-realistic/" title="Photo-Realistic"><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial15.jpg" alt="Photo-Realistic" border="0" /><br />
</a>
</p>
<h4><a href="http://www.fireworkszone.com/?p=148" title="Web 2.0 Fireworks Styles">Web 2.0 Fireworks Styles</a></h4>
<p>こちらは、チュートリアルではありませんが、Fireworksで使える便利なスタイルファイル。</p>
<p align="center">
<a href="http://www.fireworkszone.com/?p=148" title="Web 2.0 Fireworks Styles"><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial16.jpg" alt="Web 2.0 Fireworks Styles" border="0" /><br />
</a>
</p>
<h4><a href="http://imasters.uol.com.br/artigo/3417?cn=3417&#038;cc=85" title="Fireworks Aqua">Fireworks Aqua</a></h4>
<p>とっても、きれいなアイコンを作る方法。</p>
<p align="center">
<a href="http://imasters.uol.com.br/artigo/3417?cn=3417&#038;cc=85" title="Fireworks Aqua"><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial17.jpg" alt="Fireworks Aqua" border="0" /><br />
</a>
</p>
<h4><a href="http://www.jdavidmacor.com/2006/12/28/create-web-20-style-text-with-macromedia-fireworks/" title="Web 2.0 Style Text With Fireworks">Web 2.0 Style Text With Fireworks</a></h4>
<p>きれいなテキストエフェクト</p>
<p align="center">
<a href="http://www.jdavidmacor.com/2006/12/28/create-web-20-style-text-with-macromedia-fireworks/" title="Web 2.0 Style Text With Fireworks"><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial19.jpg" alt="Web 2.0 Style Text With Fireworks" border="0" /><br />
</a>
</p>
<p>FireworksのチュートリアルやTipsまだまだ、たくさんありますよ。</p>
<h4><a href="http://qrayg.com/learn/fireworks/" title="qrayg.com">qrayg.com</a></h4>
<p align="center">
<a href="http://qrayg.com/learn/fireworks/" title="qrayg.com"><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial20.jpg" alt="qrayg.com" border="0" /><br />
</a>
</p>
<h4><a href="http://www.voidix.com/tutorials_fireworks.html" title="voidix">voidix</a></h4>
<p align="center">
<a href="http://www.voidix.com/tutorials_fireworks.html" title="voidix"><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial21.jpg" alt="voidix" border="0" /><br />
</a>
</p>
<h4><a href="http://www.maagraphics.com/tutorials/fireworks-tips-and-tutorials.htm" title="Maa Graphics | Fireworks Tips and Tutorials">Maa Graphics | Fireworks Tips and Tutorials</a></h4>
<p align="center">
<a href="http://www.maagraphics.com/tutorials/fireworks-tips-and-tutorials.htm" title="Maa Graphics | Fireworks Tips and Tutorials"><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial22.jpg" alt="Maa Graphics | Fireworks Tips and Tutorials" border="0" /><br />
</a>
</p>
<h4><a href="http://www.entheosweb.com/fireworks/default.asp" title="Entheos">Entheos</a></h4>
<p align="center">
<a href="http://www.entheosweb.com/fireworks/default.asp" title="Entheos"><br />
<img src="http://www.designwalker.com/img/fireworks_tutorial/fireworks_tutorial23.jpg" alt="Entheos" border="0" /><br />
</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.designwalker.com/2008/04/fireworks-tutorial.html/feed</wfw:commentRss>
		<slash:comments>12</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.designwalker.com/2008/04/fireworks-tutorial.html" />
	</item>
		<item>
		<title>水をきれいに表現するPhotoshopチュートリアルいろいろ</title>
		<link>http://www.designwalker.com/2008/02/water-tutorial.html</link>
		<comments>http://www.designwalker.com/2008/02/water-tutorial.html#comments</comments>
		<pubDate>Wed, 20 Feb 2008 20:47:00 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Photoshop関連]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[まとめ]]></category>
		<category><![CDATA[チュートリアル]]></category>
		<category><![CDATA[水]]></category>

		<guid isPermaLink="false">http://new.designwalker.com/2008/02/%e6%b0%b4%e3%82%92%e3%81%8d%e3%82%8c%e3%81%84%e3%81%ab%e8%a1%a8%e7%8f%be%e3%81%99%e3%82%8bphotoshop%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab%e3%81%84%e3%82%8d%e3%81%84%e3%82%8d.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%2F2008%2F02%2Fwater-tutorial.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.designwalker.com%2F2008%2F02%2Fwater-tutorial.html&amp;style=normal&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>Photoshopで水をきれいに表現するのはなかなか、難しいですね。</p>
<p>結構、苦労されている方々もいらっしゃるのではないでしょうか？</p>
<p>本日は、水をきれいに表現されているチュートリアルをいくつかご紹介します。</p>
<h4><a title="Add A Realistic Water Reflection" href="http://www.photoshopessentials.com/photo-effects/water-reflection/">Add A Realistic Water Reflection</a></h4>
<p>水面に反射している女性の画像を作るチュートリアル。とってもきれいですね。。</p>
<p align="center"><a title="Add A Realistic Water Reflection" href="http://www.photoshopessentials.com/photo-effects/water-reflection/"><br />
<img src="http://www.designwalker.com/img/water_tutorial/water_tutorial01.jpg" border="0" alt="Add A Realistic Water Reflection" /><br />
</a></p>
<h4><a title="Displacement Water" href="http://photoshopcontest.com/tutorials/26/displacement-water.html">Displacement Water</a></h4>
<p>こちらも、水面に反射する写真を作るチュートリアルです。まるで本物の水面のようですね。</p>
<p align="center"><a title="Displacement Water" href="http://photoshopcontest.com/tutorials/26/displacement-water.html"><br />
<img src="http://www.designwalker.com/img/water_tutorial/water_tutorial02.jpg" border="0" alt="Displacement Water" /><br />
</a></p>
<h4><a title="Awesome Underwater Scenery" href="http://pixelmana.com/?p=30">Awesome Underwater Scenery</a></h4>
<p>とっても幻想的な海中の画像を作るチュートリアルです。差し込む光がいい感じですね。</p>
<p align="center"><a title="Awesome Underwater Scenery" href="http://pixelmana.com/?p=30"><br />
<img src="http://www.designwalker.com/img/water_tutorial/water_tutorial03.jpg" border="0" alt="Awesome Underwater Scenery" /><br />
</a></p>
<h4><a title="Alien Water" href="http://www.andreibilan.blogspot.com/2006/09/alien-water.html">Alien Water</a></h4>
<p>こちらも海中の画像を作るチュートリアル。不思議な生き物もいます…</p>
<p align="center"><a title="Alien Water" href="http://www.andreibilan.blogspot.com/2006/09/alien-water.html"><br />
<img src="http://www.designwalker.com/img/water_tutorial/water_tutorial04.jpg" border="0" alt="Alien Water" /><br />
</a></p>
<h4><a title="Reflective Liquid Type" href="http://www.photoshopcafe.com/tutorials/liquid-type/liquid-type.htm">Reflective Liquid Type</a></h4>
<p>液体のテキストエフェクト</p>
<p align="center"><a title="Reflective Liquid Type" href="http://www.photoshopcafe.com/tutorials/liquid-type/liquid-type.htm"><br />
<img src="http://www.designwalker.com/img/water_tutorial/water_tutorial05.jpg" border="0" alt="Reflective Liquid Type" /><br />
</a></p>
<h4><a title="Creating Water From a Tap" href="http://www.fierydarts.com/photo-effects/creating-water-from-a-tap.htm">Creating Water From a Tap</a></h4>
<p>蛇口から流れ出る水を表現するチュートリアル。とってもリアルですね。</p>
<p align="center"><a title="Creating Water From a Tap" href="http://www.fierydarts.com/photo-effects/creating-water-from-a-tap.htm"><br />
<img src="http://www.designwalker.com/img/water_tutorial/water_tutorial06.jpg" border="0" alt="Creating Water From a Tap" /><br />
</a></p>
<h4><a title="Water Drops" href="http://www.lunacore.com/photoshop/tutorials/tut006.htm">Water Drops</a></h4>
<p>葉っぱの上の雫を表現するチュートリアルです。</p>
<p align="center"><a title="Water Drops" href="http://www.lunacore.com/photoshop/tutorials/tut006.htm"><br />
<img src="http://www.designwalker.com/img/water_tutorial/water_tutorial07.jpg" border="0" alt="Water Drops" /><br />
</a></p>
<h4><a title="Water drops in photoshop in 5 minutes" href="http://abduzeedo.com/water-drops-photoshop-5-minutes">Water drops in photoshop in 5 minutes</a></h4>
<p>5分で簡単に水滴を作るチュートリアルです。</p>
<p align="center"><a title="Water drops in photoshop in 5 minutes" href="http://abduzeedo.com/water-drops-photoshop-5-minutes"><br />
<img src="http://www.designwalker.com/img/water_tutorial/water_tutorial08.jpg" border="0" alt="Water drops in photoshop in 5 minutes" /><br />
</a></p>
<p>みなさんも是非、リアルな水の表現に挑戦してみてくださいね。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.designwalker.com/2008/02/water-tutorial.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.designwalker.com/2008/02/water-tutorial.html" />
	</item>
		<item>
		<title>バレンタイン Photoshopチュートリアル、ブラシ、アイコンあれこれ</title>
		<link>http://www.designwalker.com/2008/02/valentine.html</link>
		<comments>http://www.designwalker.com/2008/02/valentine.html#comments</comments>
		<pubDate>Tue, 05 Feb 2008 19:56:38 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Photoshop関連]]></category>
		<category><![CDATA[brush]]></category>
		<category><![CDATA[icon]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[valentine]]></category>
		<category><![CDATA[アイコン]]></category>
		<category><![CDATA[チュートリアル]]></category>
		<category><![CDATA[バレンタイン]]></category>
		<category><![CDATA[ブラシ]]></category>

		<guid isPermaLink="false">http://new.designwalker.com/2008/02/%e3%83%90%e3%83%ac%e3%83%b3%e3%82%bf%e3%82%a4%e3%83%b3-photoshop%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab%e3%80%81%e3%83%96%e3%83%a9%e3%82%b7%e3%80%81%e3%82%a2%e3%82%a4%e3%82%b3.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%2F2008%2F02%2Fvalentine.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.designwalker.com%2F2008%2F02%2Fvalentine.html&amp;style=normal&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>早いもので、１月も既に終わってしまいましたね・・・。</p>
<p>２月のイベントといえば、やっぱりバレンタインデーです。</p>
<p>アメリカでは、男女問わず（というかむしろ男性の方が女性に）プレゼントを送ります。</p>
<p>本日は、バレンタイン・デザインに使えそうな、Photoshopのチュートリアル、ブラシ、そしてアイコンをまとめてみました。</p>
<h3>Photoshopチュートリアル</h3>
<h4><a title="Saint Valentine Creations" href="http://www.adobetutorialz.com/articles/2928/1/Saint-Valentine-Creations">Saint Valentine Creations</a></h4>
<p>ちょっぴり大人な感じのバレンタイン・チュートリアル</p>
<p align="center"><a title="Saint Valentine Creations" href="http://www.adobetutorialz.com/articles/2928/1/Saint-Valentine-Creations"><br />
<img src="http://www.designwalker.com/img/valentine/valentine01.jpg" border="0" alt="Saint Valentine Creations" /><br />
</a></p>
<h4><a title="Rose for Saint Valentine´s Day" href="http://www.adobetutorialz.com/articles/2930/1/Rose-for-Saint-Valentine%26%2339%3Bs-Day">Rose for Saint Valentine´s Day</a></h4>
<p>中央のバラがとってもきれいなチュートリアルですね。</p>
<p align="center"><a title="Rose for Saint Valentine´s Day" href="http://www.adobetutorialz.com/articles/2930/1/Rose-for-Saint-Valentine%26%2339%3Bs-Day"><br />
<img src="http://www.designwalker.com/img/valentine/valentine02.jpg" border="0" alt="Rose for Saint Valentine´s Day" /><br />
</a></p>
<h4><a title="Valentine´s day hearts" href="http://www.adobetutorialz.com/articles/2933/1/Valentine%26%2339%3Bs-day-hearts">Valentine´s day hearts</a></h4>
<p>こちらはポップな感じ。</p>
<p align="center"><a title="Valentine´s day hearts" href="http://www.adobetutorialz.com/articles/2933/1/Valentine%26%2339%3Bs-day-hearts"><br />
<img src="http://www.designwalker.com/img/valentine/valentine03.jpg" border="0" alt="Valentine´s day hearts" /><br />
</a></p>
<h4><a title="Splash My Heart Wallpaper" href="http://www.adobetutorialz.com/articles/2513/1/Splash-My-Heart-Wallpaper">Splash My Heart Wallpaper</a></h4>
<p>ハートがはじける？</p>
<p align="center"><a title="Splash My Heart Wallpaper" href="http://www.adobetutorialz.com/articles/2513/1/Splash-My-Heart-Wallpaper"><br />
<img src="http://www.designwalker.com/img/valentine/valentine04.jpg" border="0" alt="Splash My Heart Wallpaper" /><br />
</a></p>
<h4><a title="Creating a flower bouquet with heart" href="http://www.mastersofphotoshop.com/heart_graphic.htm">Creating a flower bouquet with heart</a></h4>
<p>こちらも、なかなかきれいですね。</p>
<p align="center"><a title="Creating a flower bouquet with heart" href="http://www.mastersofphotoshop.com/heart_graphic.htm"><br />
<img src="http://www.designwalker.com/img/valentine/valentine05.jpg" border="0" alt="Creating a flower bouquet with heart" /><br />
</a></p>
<h4><a title="Valentine Day Background" href="http://www.adobetutorialz.com/articles/2617/1/Valentine-Day-Background">Valentine Day Background</a></h4>
<p>グラデーションがとってもきれいです。</p>
<p align="center"><a title="Valentine Day Background" href="http://www.adobetutorialz.com/articles/2617/1/Valentine-Day-Background"><br />
<img src="http://www.designwalker.com/img/valentine/valentine06.jpg" border="0" alt="Valentine Day Background" /><br />
</a></p>
<h4><a title="Vector Valentine Heart, Beginner - Intermediate" href="http://www.13dots.com/forum/index.php?showtopic=13572">Vector Valentine Heart, Beginner &#8211; Intermediate</a></h4>
<p>矢がハートに突き刺さる～。</p>
<p align="center"><a title="Vector Valentine Heart, Beginner - Intermediate" href="http://www.13dots.com/forum/index.php?showtopic=13572"><br />
<img src="http://www.designwalker.com/img/valentine/valentine07.jpg" border="0" alt="Vector Valentine Heart, Beginner - Intermediate" /><br />
</a></p>
<h4><a title="Glossy Heart Photoshop Tutorial" href="http://www.askphotoshop.com/glossy-heart/">Glossy Heart Photoshop Tutorial</a></h4>
<p>光沢のあるハートが作りたいときは</p>
<p align="center"><a title="Glossy Heart Photoshop Tutorial" href="http://www.askphotoshop.com/glossy-heart/"><br />
<img src="http://www.designwalker.com/img/valentine/valentine08.jpg" border="0" alt="Glossy Heart Photoshop Tutorial" /><br />
</a></p>
<h3>Photoshopブラシ</h3>
<h4><a title="Photoshop Heart Brushes Collection" href="http://www.webresourcesdepot.com/photoshop-heart-brushes-collection/">Photoshop Heart Brushes Collection</a></h4>
<p>こちらは、ハートのブラシがいっぱい紹介されています。</p>
<p align="center"><a title="Photoshop Heart Brushes Collection" href="http://www.webresourcesdepot.com/photoshop-heart-brushes-collection/"><img src="http://www.designwalker.com/img/valentine/valentine09.jpg" border="0" alt="Photoshop Heart Brushes Collection" /><br />
</a></p>
<p>↑こちらのまとめの中から、いくつかピックアップ</p>
<h4><a title="Free Photoshop brushes: Hearts" href="http://hawksmont.com/blog/photoshop-brushes-hearts/">Free Photoshop brushes: Hearts</a></h4>
<p>きれいなハートのブラシがいっぱいです。</p>
<p align="center"><a title="Free Photoshop brushes: Hearts" href="http://hawksmont.com/blog/photoshop-brushes-hearts/"><br />
<img src="http://www.designwalker.com/img/valentine/valentine10.jpg" border="0" alt="Free Photoshop brushes: Hearts" /><br />
</a></p>
<h4><a title="My Vintage Valentine - Free Valentines Photoshop Brush Set" href="http://www.photoshopsupport.com/tools/brushes.html">My Vintage Valentine &#8211; Free Valentines Photoshop Brush Set</a></h4>
<p>ビンテージな感じのブラシ</p>
<p align="center"><a title="My Vintage Valentine - Free Valentines Photoshop Brush Set" href="http://www.photoshopsupport.com/tools/brushes.html"><br />
<img src="http://www.designwalker.com/img/valentine/valentine11.jpg" border="0" alt="My Vintage Valentine - Free Valentines Photoshop Brush Set" /><br />
</a></p>
<h4><a title="Valentine Brush Set" href="http://www.brusheezy.com/brush/264-Valentine-Brush-Set">Valentine Brush Set</a></h4>
<p>こちらもきれいなブラシが沢山</p>
<p align="center"><a title="Valentine Brush Set" href="http://www.brusheezy.com/brush/264-Valentine-Brush-Set"><br />
<img src="http://www.designwalker.com/img/valentine/valentine12.jpg" border="0" alt="Valentine Brush Set" /><br />
</a></p>
<h4><a title="Valentastic Valentine" href="http://designfruit.com/jasongaylor/blog/2007/02/12/seasonal-valentine-brushes/">Valentastic Valentine</a></h4>
<p>こちらのブラシもとってもかわいいですね。</p>
<p align="center"><a title="Valentastic Valentine" href="http://designfruit.com/jasongaylor/blog/2007/02/12/seasonal-valentine-brushes/"><br />
<img src="http://www.designwalker.com/img/valentine/valentine13.jpg" border="0" alt="Valentastic Valentine" /><br />
</a></p>
<h3>アイコン</h3>
<h4><a title="Valentine’s Day Icons (5 Icons)" href="http://www.webresourcesdepot.com/valentines-day-icons-5-icons/">Valentine’s Day Icons (5 Icons)</a></h4>
<p>とってもかわいいアイコンですね。でも、ハートが血を流してます・・・</p>
<p align="center"><a title="Valentine’s Day Icons (5 Icons)" href="http://www.webresourcesdepot.com/valentines-day-icons-5-icons/"><br />
<img src="http://www.designwalker.com/img/valentine/valentine14.jpg" border="0" alt="Valentine’s Day Icons (5 Icons)" /><br />
</a></p>
<h4><a title="Fruity Hearts Icons by Flamelia Design" href="http://www.iconarchive.com/category/love/fruity-hearts-icons-by-flameia.html">Fruity Hearts Icons by Flamelia Design</a></h4>
<p>フルーティなハート型アイコン。</p>
<p align="center"><a title="Fruity Hearts Icons by Flamelia Design" href="http://www.iconarchive.com/category/love/fruity-hearts-icons-by-flameia.html"><br />
<img src="http://www.designwalker.com/img/valentine/valentine15.jpg" border="0" alt="Fruity Hearts Icons by Flamelia Design" /><br />
</a></p>
<h4><a title="Heart by tea00" href="http://www.r3darab.net/2007/02/15/znjuzhdzk_jubzhi_mgnbjj_heart_icon.html">Heart by tea00</a></h4>
<p>ハートを使った、透明感のあるアイコン。</p>
<p align="center"><a title="Heart by tea00" href="http://www.r3darab.net/2007/02/15/znjuzhdzk_jubzhi_mgnbjj_heart_icon.html"><br />
<img src="http://www.designwalker.com/img/valentine/valentine16.jpg" border="0" alt="Heart by tea00" /><br />
</a></p>
<h4><a title="RSS heart PNG Icons" href="http://www.cooljeba.com/downloads/png/rss-heart-png-icons.html">RSS heart PNG Icons</a></h4>
<p>ハート型のRSSアイコンです。</p>
<p align="center"><a title="RSS heart PNG Icons" href="http://www.cooljeba.com/downloads/png/rss-heart-png-icons.html"><br />
<img src="http://www.designwalker.com/img/valentine/valentine17.jpg" border="0" alt="RSS heart PNG Icons" /><br />
</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.designwalker.com/2008/02/valentine.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.designwalker.com/2008/02/valentine.html" />
	</item>
		<item>
		<title>キラキラ～なロゴが作りたい Photoshopチュートリアルまとめ</title>
		<link>http://www.designwalker.com/2007/11/blingbling.html</link>
		<comments>http://www.designwalker.com/2007/11/blingbling.html#comments</comments>
		<pubDate>Fri, 09 Nov 2007 18:18:50 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Photoshop関連]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[キラキラ]]></category>
		<category><![CDATA[チュートリアル]]></category>
		<category><![CDATA[ブリンブリン]]></category>
		<category><![CDATA[ロゴ]]></category>

		<guid isPermaLink="false">http://new.designwalker.com/2007/11/%e3%82%ad%e3%83%a9%e3%82%ad%e3%83%a9%ef%bd%9e%e3%81%aa%e3%83%ad%e3%82%b4%e3%81%8c%e4%bd%9c%e3%82%8a%e3%81%9f%e3%81%84-photoshop%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab%e3%81%be.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%2F11%2Fblingbling.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.designwalker.com%2F2007%2F11%2Fblingbling.html&amp;style=normal&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>女の子向けの雑誌やサイトなどでよく見かける、キラキラ～、ブリン・ブリン～なロゴ。</p>
<p>ギャル風なデザイン？には、結構使われているみたいですね。。</p>
<p>っちゅうわけで、本日はキラキラ～、ブリン・ブリン～なロゴを作るPhotoshopチュートリアルをまとめてみました。</p>
<p><strong>1. <a href="http://www.photoshopcafe.com/tutorials/diamonds/diamonds.htm" title="Rap Diamonds, bling in Photoshop">Rap Diamonds, bling in Photoshop</a></strong><br />
</p>
<div align="center">
<a href="http://www.photoshopcafe.com/tutorials/diamonds/diamonds.htm" title="Rap Diamonds, bling in Photoshop"><br />
<img src="http://www.designwalker.com/img/bling/bling01.jpg" alt="Rap Diamonds, bling in Photoshop" border="0" /><br />
</a>
</div>
<p><strong>2. <a href="http://www.dreamdealer.nl/?action=viewTutorial&amp;id=38" title="Pimp your text with photoshop">Pimp your text with photoshop</a></strong><br />
</p>
<div align="center">
<a href="http://www.dreamdealer.nl/?action=viewTutorial&amp;id=38" title="Pimp your text with photoshop"><br />
<img src="http://www.designwalker.com/img/bling/bling02.jpg" alt="Pimp your text with photoshop" border="0" /><br />
</a>
</div>
<p><strong>3. <a href="http://www.andreibilan.blogspot.com/2006/09/bling-bling-your-logo.html" title="bling bling your logo">bling bling your logo</a></strong><br />
</p>
<div align="center">
<a href="http://www.andreibilan.blogspot.com/2006/09/bling-bling-your-logo.html" title="bling bling your logo"><br />
<img src="http://www.designwalker.com/img/bling/bling03.jpg" alt="bling bling your logo" border="0" /><br />
</a>
</div>
<p><strong>4. <a href="http://www.tutorialwiz.com/blingbling/" title="Bling Bling Text">Bling Bling Text</a></strong><br />
</p>
<div align="center">
<a href="http://www.tutorialwiz.com/blingbling/" title="Bling Bling Text"><br />
<img src="http://www.designwalker.com/img/bling/bling04.jpg" alt="Bling Bling Text" border="0" /><br />
</a>
</div>
<p><strong>5. <a href="http://www.ethicsdesigns.com/tutorial_diamond_font.php" title="Diamond Font">Diamond Font</a></strong><br />
</p>
<div align="center">
<a href="http://www.ethicsdesigns.com/tutorial_diamond_font.php" title="Diamond Font"><br />
<img src="http://www.designwalker.com/img/bling/bling05.jpg" alt="Diamond Font" border="0" /><br />
</a>
</div>
<p><strong>6. <a href="http://www.photoshopcafe.com/tutorials/beads/beads.htm" title="Anime beads in Photoshop">Anime beads in Photoshop</a></strong><br />
</p>
<div align="center">
<a href="http://www.photoshopcafe.com/tutorials/beads/beads.htm" title="Anime beads in Photoshop"><br />
<img src="http://www.designwalker.com/img/bling/bling06.jpg" alt="Anime beads in Photoshop" border="0" /><br />
</a>
</div>
<p></p>
<p>仕上げに、↓のようなブラシを使うとさらに、キラキラ度が増します。。</p>
<p><strong>7. <a href="http://www.brushes.obsidiandawn.com/sets/glitter.htm" title="Glitter &amp; Sparkles Photoshop Brushes">Glitter &amp; Sparkles Photoshop Brushes</a></strong><br />
</p>
<div align="center">
<a href="http://www.brushes.obsidiandawn.com/sets/glitter.htm" title="Glitter &amp; Sparkles Photoshop Brushes"><br />
<img src="http://www.designwalker.com/img/bling/bling07.jpg" alt="Glitter &amp; Sparkles Photoshop Brushes" border="0" /><br />
</a>
</div>
<p><strong>8. <a href="http://www.brushes.obsidiandawn.com/sets/sparklies.htm" title="Sparklies Photoshop Brushes">Sparklies Photoshop Brushes</a></strong><br />
</p>
<div align="center">
<a href="http://www.brushes.obsidiandawn.com/sets/sparklies.htm" title="Sparklies Photoshop Brushes"><br />
<img src="http://www.designwalker.com/img/bling/bling08.jpg" alt="Sparklies Photoshop Brushes" border="0" /><br />
</a>
</div>
<p>みなさんも是非、キラキラ～、ブリン・ブリン～なロゴに挑戦してみてくださいねぇ～。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.designwalker.com/2007/11/blingbling.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.designwalker.com/2007/11/blingbling.html" />
	</item>
		<item>
		<title>パノラマ写真をま～るく加工するチュートリアル</title>
		<link>http://www.designwalker.com/2007/09/panorama.html</link>
		<comments>http://www.designwalker.com/2007/09/panorama.html#comments</comments>
		<pubDate>Tue, 11 Sep 2007 18:15:25 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Photoshop関連]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[チュートリアル]]></category>
		<category><![CDATA[パノラマ]]></category>
		<category><![CDATA[写真]]></category>
		<category><![CDATA[加工]]></category>

		<guid isPermaLink="false">http://new.designwalker.com/2007/09/%e3%83%91%e3%83%8e%e3%83%a9%e3%83%9e%e5%86%99%e7%9c%9f%e3%82%92%e3%81%be%ef%bd%9e%e3%82%8b%e3%81%8f%e5%8a%a0%e5%b7%a5%e3%81%99%e3%82%8b%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab.html</guid>
		<description><![CDATA[
			
				
			
		
以前、BKFphoto.comさんで、紹介されていた、ま～るく加工された写真の数々。
とってもかっこいい加工だなぁ～っと思っておりました。。
気になったので、調べてみるとPhotosho [...]]]></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%2F09%2Fpanorama.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.designwalker.com%2F2007%2F09%2Fpanorama.html&amp;style=normal&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>以前、<a href="http://www.bkfphoto.com/gallery/2968105#160511718" title="BKFphoto.com">BKFphoto.com</a>さんで、紹介されていた、ま～るく加工された写真の数々。</p>
<p>とってもかっこいい加工だなぁ～っと思っておりました。。</p>
<p>気になったので、調べてみるとPhotoshopを使って結構簡単に似たような加工ができそうでした。</p>
<p>っちゅうわけで、写真をま～るく加工するPhotoshopのチュートリアルをご紹介。</p>
<p><strong>1. パノラマ写真を用意</strong><br />
写真の上部は空など、下部は地面や水面などの↓のような単純な画像が仕上がりが良いかも。本日は、分かりやすいように、パノラマ写真を左右コピーして画像を用意しました。デジカメで、自分が少しずつ回りながら360度写真を撮って、Photoshopでつなげたらいい感じになりそうですね。</p>
<div align="center">
<img src="http://www.designwalker.com/img/panorama/panorama01.jpg" alt="" />
</div>
<p></p>
<p><strong>2. 画像を180度回転</strong><br />
用意したパノラマ写真を180度回転させて、上下逆さまにします。</p>
<div align="center">
<img src="http://www.designwalker.com/img/panorama/panorama02.jpg" alt="" />
</div>
<p></p>
<p><strong>3. フィルター 『Polar Coordinates』をかける</strong><br />
日本語版では、<strong>フィルター &gt; 変形 &gt; <strike>球面</strike> 極座標</strong>になると思いますが・・・</p>
<div align="center">
<img src="http://www.designwalker.com/img/panorama/panorama03.jpg" alt="" />
</div>
<p></p>
<p><strong>4. フィルター効果を確認</strong><br />
<strong>フィルター &gt; 変形 &gt; <strike>球面</strike> 極座標</strong>を選択すると↓のようなウインドウが開きます。『直交座標を極座標に(Rectangular to Polar)』が選択されているか確認。</p>
<div align="center">
<img src="http://www.designwalker.com/img/panorama/panorama04.jpg" alt="" />
</div>
<p></p>
<p><strong>5. フィルター適用</strong><br />
OKボタンをクリックすると、↓のように加工されます。いい感じになってきました。</p>
<div align="center">
<img src="http://www.designwalker.com/img/panorama/panorama05.jpg" alt="" />
</div>
<p></p>
<p><strong>6. 変形</strong><br />
全体を選択して、自由変形で横幅を調節します。</p>
<div align="center">
<img src="http://www.designwalker.com/img/panorama/panorama06.jpg" alt="" />
</div>
<p></p>
<p><strong>7. 完成</strong><br />
横幅を調節すると完成です～！</p>
<div align="center">
<img src="http://www.designwalker.com/img/panorama/panorama07.jpg" alt="" />
</div>
<p>
写真によっては、なかなか面白い写真になりそうですね。。</p>
<p>みなさんもパノラマ写真を用意して早速試してみてくださいねぇ～。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.designwalker.com/2007/09/panorama.html/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.designwalker.com/2007/09/panorama.html" />
	</item>
		<item>
		<title>紙がやぶれた感じを表現するPhotoshopチュートリアルいろいろ</title>
		<link>http://www.designwalker.com/2007/08/photoshop_tear_tutorial.html</link>
		<comments>http://www.designwalker.com/2007/08/photoshop_tear_tutorial.html#comments</comments>
		<pubDate>Wed, 15 Aug 2007 18:43:54 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Photoshop関連]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[まとめ]]></category>
		<category><![CDATA[やぶれ]]></category>
		<category><![CDATA[チュートリアル]]></category>

		<guid isPermaLink="false">http://new.designwalker.com/2007/08/%e7%b4%99%e3%81%8c%e3%82%84%e3%81%b6%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%8bphotoshop%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab%e3%81%84.html</guid>
		<description><![CDATA[
			
				
			
		
以前、このブログでご紹介した『Photoshopチュートリアル めくれた感じを表現する』に続きまして。。。
本日は、紙がやぶれた感じを表現する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%2F08%2Fphotoshop_tear_tutorial.html"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.designwalker.com%2F2007%2F08%2Fphotoshop_tear_tutorial.html&amp;style=normal&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>以前、このブログでご紹介した『<a href="http://www.designwalker.com/2007/03/peeling.html" title="Photoshopチュートリアル めくれた感じを表現する">Photoshopチュートリアル めくれた感じを表現する</a>』に続きまして。。。</p>
<p>本日は、紙がやぶれた感じを表現するPhotoshopチュートリアルをいくつかまとめてみました。</p>
<p>写真などを、やぶれた感じに加工すると、なかなか良い感じになりそうですね。。</p>
<p></p>
<p><strong>1. <a href="http://adrianherritt.com/photoshop/photoshop-page-tear/" title="Photoshop Page Tear | Adrian Herritt">Photoshop Page Tear | Adrian Herritt</a></strong><br />
<br />
なげわツールを使って、やぶりたい部分を選択して切り取ります。。</p>
<div align="center">
<a href="http://adrianherritt.com/photoshop/photoshop-page-tear/" title="Photoshop Page Tear | Adrian Herritt"><br />
<img src="http://www.designwalker.com/img/photoshop_tear/photoshop_tear01.jpg" alt="Photoshop Tear Tutorial" border="0" /><br />
</a>
</div>
<p></p>
<p><strong>2. <a href="http://www.tutorialized.com/view/tutorial/Torn-Newspaper-Effect/3830" title="Torn Newspaper Effect | TUTORIALIZED">Torn Newspaper Effect | TUTORIALIZED</a></strong><br />
<br />
こちらは、結構本格的…新聞の中身まで作りこんでます。。このチュートリアルでは、クイックマスクを使ってます。。</p>
<div align="center">
<a href="http://www.tutorialized.com/view/tutorial/Torn-Newspaper-Effect/3830" title="Torn Newspaper Effect | TUTORIALIZED"><br />
<img src="http://www.designwalker.com/img/photoshop_tear/photoshop_tear02.jpg" alt="Photoshop Tear Tutorial" border="0" /><br />
</a>
</div>
<p></p>
<p><strong>3. <a href="http://www.code404.nl/joomla/index.php?option=com_content&amp;task=view&amp;id=42&amp;Itemid=34" title="Tear it up! | CODE404">Tear it up! | CODE404</a></strong><br />
<br />
このチュートリアルでも、なげわツールを使っていますね。。やぶれたエッジの部分を紙の繊維っぽく見せるのがポイントですね。</p>
<div align="center">
<a href="http://www.code404.nl/joomla/index.php?option=com_content&amp;task=view&amp;id=42&amp;Itemid=34" title="Tear it up! | CODE404"><br />
<img src="http://www.designwalker.com/img/photoshop_tear/photoshop_tear03.jpg" alt="Photoshop Tear Tutorial" border="0" /><br />
</a>
</div>
<p></p>
<p><strong>4. <a href="http://www.cameronmoll.com/archives/000071.html" title="Got worn? Don’t miss these brushes | Authentic Boredom">Got worn? Don’t miss these brushes | Authentic Boredom</a></strong><br />
<br />
この方法が、一番手っ取り早いかも、ブラシを使ってエッジを塗っちゃう。。。ブラシのダウンロードページへのリンクがなくなっていたので、ブラシは<a href="http://www.designbureauofamerika.com/" title="TDBA SUMMER PREVIEW">こちら</a>からどうぞ～。</p>
<div align="center">
<a href="http://www.cameronmoll.com/archives/000071.html" title="Got worn? Don’t miss these brushes | Authentic Boredom"><br />
<img src="http://www.designwalker.com/img/photoshop_tear/photoshop_tear04.jpg" alt="Photoshop Tear Tutorial" border="0" /><br />
</a>
</div>
<p></p>
<p><strong>5. <a href="http://www.wbcampaigns.net/downloads/tutorials/newspaper_tear/index.php" title="Make a newspaper tear in Photoshop | William Berry Campaigns">Make a newspaper tear in Photoshop | William Berry Campaigns</a></strong><br />
<br />
こちらは、ちょっぴりやぶれた感が薄いですが・・・</p>
<div align="center">
<a href="http://www.wbcampaigns.net/downloads/tutorials/newspaper_tear/index.php" title="Make a newspaper tear in Photoshop | William Berry Campaigns"><br />
<img src="http://www.designwalker.com/img/photoshop_tear/photoshop_tear05.jpg" alt="Photoshop Tear Tutorial" border="0" /><br />
</a>
</div>
<p></p>
<p><strong>6. <a href="http://www.photoshoplab.com/ripped-and-torn-edges-and-stuff.html" title="Ripped and Torn Edges and Stuff | Photoshop Lab">Ripped and Torn Edges and Stuff | Photoshop Lab</a></strong><br />
<br />
こちらのチュートリアルも、ブラシを使ってエッジにやぶれた感を出してます。。</p>
<div align="center">
<a href="http://www.photoshoplab.com/ripped-and-torn-edges-and-stuff.html" title="Ripped and Torn Edges and Stuff | Photoshop Lab"><br />
<img src="http://www.designwalker.com/img/photoshop_tear/photoshop_tear06.jpg" alt="Photoshop Tear Tutorial" border="0" /><br />
</a>
</div>
<p></p>
<p><strong>7. <a href="http://www.pixeldigest.com/ripped_paper.html" title="Ripped Paper | PIXEL DIGEST">Ripped Paper | PIXEL DIGEST</a></strong><br />
<br />
このサイトで配布されているブラシを使って、消しゴムツールでエッジを消していきます。。なかなか自然な感じに仕上がりそうですね。。</p>
<div align="center">
<a href="http://www.pixeldigest.com/ripped_paper.html" title="Ripped Paper | PIXEL DIGEST"><br />
<img src="http://www.designwalker.com/img/photoshop_tear/photoshop_tear07.jpg" alt="Photoshop Tear Tutorial" border="0" /><br />
</a>
</div>
<p></p>
<p><strong>8. <a href="http://www.digitalscrapbookplace.com/university/tutorials/ps_tornedges-intermediate.shtml" title="Torn Edges in Photoshop | Digital Scrapbook Place">Torn Edges in Photoshop | Digital Scrapbook Place</a></strong><br />
<br />
ダンボールをやぶったような仕上がりですね。。ブラシでやぶれた部分を描いて、エフェクトをかけていく方法です。。</p>
<div align="center">
<a href="http://www.digitalscrapbookplace.com/university/tutorials/ps_tornedges-intermediate.shtml" title="Torn Edges in Photoshop | Digital Scrapbook Place"><br />
<img src="http://www.designwalker.com/img/photoshop_tear/photoshop_tear08.jpg" alt="Photoshop Tear Tutorial" border="0" /><br />
</a>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.designwalker.com/2007/08/photoshop_tear_tutorial.html/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.designwalker.com/2007/08/photoshop_tear_tutorial.html" />
	</item>
	</channel>
</rss>

