<?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/"
	>

<channel>
	<title>hoshiyuki.com &#187; Tutotial</title>
	<atom:link href="http://hoshiyuki.com/archives/category/tutotial/feed" rel="self" type="application/rss+xml" />
	<link>http://hoshiyuki.com</link>
	<description>a portfolio of Yuki Hoshi</description>
	<lastBuildDate>Tue, 14 Jul 2009 09:37:28 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Photoshop Tutorial(How to create Glow Effects)</title>
		<link>http://hoshiyuki.com/archives/979</link>
		<comments>http://hoshiyuki.com/archives/979#comments</comments>
		<pubDate>Sun, 05 Jul 2009 01:55:12 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Tutotial]]></category>

		<guid isPermaLink="false">http://hoshiyuki.com/?p=979</guid>
		<description><![CDATA[
L字型の成長パスを描くHoshiyuki.comのアクセス数。
いや、過去にも高かったことはないので、厳密には＿型だ。もうHoshiyuki.comは紙媒体にして町の掲示板に張った方がまだたくさんの人の目にふれるんじゃないか？というくらいだ。
そんな状況を打開すべく、とは思ってないんですが、先日読んだ基礎に立ち返れ: 「それがあったのか！」と思わず額を叩いてしまう4つのブログ宣伝メソッドという記事には素朴で基礎的な方法があげられていて、私はそれを楽しそうだと思った。
その中の一つは、自分のブログに関するエントリを作成する。というものだった。
単純すぎるアドバイスかもしれないが、基本的でシンプルなアイデアで、すぐにでも実行できるこのような実践的な投稿には魅力を感じた。
それならばということで、（少し趣旨は違うけど）私も立ち返って、自分のサイトのデザインのチュートリアルを作ることに。Hoshiyuki.comのロゴでも使っているGlow Effectを最近よく見られる幻想的なイメージとあわせて説明していこうと思ったんですけど、安っぽい仕上がりに。。。


1.背景となる遠景の星をつくる
新規ファイル(command+N)(名前はbgとする)を幅490×高さ200pxで作成し、黒く塗りつぶします。
ノイズ>ノイズを加えるから、量10%、分布方法；ガウス分布、グレースケールにチェックでOK。
イメージ>色調補正>レベル補正&#8230;(command+L)から、Input Levels;65 1.00 99でOK。

下部に少し光を当てるためにレイヤースタイルのグラデーションオーバーレイを適用。(Sample File 参照)

2虹色のガス星雲をつくる
新規レイヤー(名前はrainbow)を作ったら、楕円形選択ツールをぼかしの設定15pxにして下図のように選択範囲を作り、フィルタ>描画>雲模様１を適用。
レイヤーの描画モードの設定を覆い焼きカラーにしたら、レイヤースタイルのグラデーションオーバーレイで虹色のグラデーションを選択。

3.Logoを作成
図のようにパスを作成。

ブラシのプリセットを直径4px、間隔にチェック&#038;1%

ブラシの設定が終わったら、新規レイヤー(名前はstar)にペンツール(P)で右クリックからパスの境界線を描く&#8230;
強さのシュミレートにチェックをしてOK。


☆マークできあがり。

レイヤースタイルを追加して、光らせる。

ここで新規レイヤー(名前prism)に小さなプリズムをブラシツールの直径1~4pxで描いていく。イメージとしては赤いラインのような道筋を想定して、流れを作るようにドットを描いていくと見栄えが良くなります。

prismレイヤーにレイヤースタイルを追加。

もう少し光の効果を強めるために新規レイヤー(名前nebula)から図のように選択範囲（ぼかし範囲15px）でつくり、雲模様１を適用。

”新規セットを作成”からセットを作り、blurをいう名前をつける。nebulaレイヤーをその中に入れたら、セットの描画モードを覆い焼きカラーに。
何度も書いてると思いますが、レイヤーそのものの描画モードを変えるのと、そのレイヤーを含むレイヤーセットの描画モードを変えるのとでは、得られる結果が違います。

文字ツール(T)でHoshiyuki.comを打ち込み、レイヤースタイルを下のように適用。


なんとかく物足りないので、No Pattern風の効果を加えます。
4.背景のアクセントをつける。

分かりやすいように、ロゴやプリズムなどのレイヤーを非表示にします。
ぼかし15pxの円形の選択範囲を白で塗りつぶす。

下６~7割を水平に消去しする。

少し高さを縮めてから、３０°傾ける。

不透明度を５０％、描画モードを覆い焼きカラー、レイヤースタイルのグラデーションオーバーレイを追加。

レイヤーを５つ複製。方向や位置をずらしながらアレンジする。

新規レイヤーセットをauroraという名前を付けて、複製したレイヤーをすべてその中へ。レイヤーセットの描画モードを覆い焼きカラーに。

5.完成
非表示にしていたレイヤーを表示したら出来上がり。

6.結論
今回のような効果は、特別な工夫や手数をかけなくても見栄えがするから最近流行だ。
しかし一方で、お手軽なトレンドはたくさんの低品質を生むし、私としてもトレンドを一人歩きさせるような記事を書くことを、どーなの？と思ったりもする。
でも良いのだ。品質や安全性など気にしていられない。V字型回復するために重要なのはトレンドと安さだ。
]]></description>
		<wfw:commentRss>http://hoshiyuki.com/archives/979/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Photoshop Tutorial (How to create an old-fashioned microphone)</title>
		<link>http://hoshiyuki.com/archives/850</link>
		<comments>http://hoshiyuki.com/archives/850#comments</comments>
		<pubDate>Sun, 28 Jun 2009 02:35:16 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Tutotial]]></category>

		<guid isPermaLink="false">http://hoshiyuki.com/?p=850</guid>
		<description><![CDATA[
あ…ありのまま 今　起こった事を話すぜ！
『おれは最新式のマイクを作っていたと
思ったらいつのまにかレトロなマイクを作っていた』
な…　何を言ってるのか　わからねーと思うが
おれも何をされたのかわからなかった…
近代的なマイクを作ってやろうと気合いを入れたにもかかわらず出来たのは少々古めかしい型のマイク。それは私の感覚そのものがレトロだということかもしれない。そういえばたまに髪型が昭和だといわれる。
というわけで今回は”レトロな”マイクの作り方チュートリアルです。


1.イラストレーターでパスを作成
はじめに、イラストレーターを使ってマイクのパスを作ります。

ここで完成したパスデータをコピペでフォトショップに持っていくためのポイント。
（私は少し古いバージョンのCreative Suit（CS1って言うのかな？）を使っているので最新のバージョンだとどうなのかわからないのですが）
イラストレーター→フォトショップへパスデータをコピペしたいときに、イラストレーターの環境設定を少し変更する必要があります。
イラストレーター(フォトショップではない！)の環境設定からファイル管理クリップボードの設定で下図のAICB(透明サポートなし)という項目にチェック、さらにパスを保持にチェック。

設定変更が完了したら、イラストレーター上でパスをコピー、フォトショップのファイルに移動してペーストすると”ペースト形式”というウィンドウが出るので
ピクセル、パス、シェイプレイヤーの３項目の中からパスにチェックをしてOKします。
無事フォトショップへパスデータを移動できる（はず）。

2.フォトショップで作業開始
今回のマイクは以下の部分から成ります。

マイクの本体
マイクに付属の帯状のパーツ
アーム部
脚
土台（上部）
土台（側面）
マイクの下部の金属部分
脚のスイッチ

1~6までのパーツはイラストレーターで用意したパスです。
パスは下図のようにパーツごとにダイレクト選択ツールで分解しておきます。
パスは選択範囲の読み込みに使います。基本的な作業の流れは
選択範囲の読み込み、選択範囲の塗りつぶしとスタイルの適用
の連続に成ります。

マイク部分の選択範囲を作成（パス１のところにカーソルをもっていって、⌘＋クリック）したら(選択範囲の読み込み)、Dを押してから（背景色と描画色のリセット）alt+delete(描画色で塗りつぶし)で黒く塗りつぶします。

続いてスタイルの適用ですが、ちょっとひと手間かけます。
3.パターンを下ごしらえ
塗りつぶしが終わったところで別ファイルでスタイルを用意します。
新規ファイルを作成(⌘＋N)で８×８pixのファイルを作ります。
それから背景レイヤーを#434545で塗りつぶします。

新規レイヤーで下図のように1pixの塗りつぶしを２カ所作ったらレイヤースタイルを適用していきます。

レイヤースタイルの詳細はこんな感じです。




パターン完成

メニューバーから編集＞パターンを定義&#8230;を選び完了。
もとのファイルに戻ります。
4.再びメインのファイルへ、あとはひたすら塗りつぶし＆レイヤースタイル
レイヤースタイルのパターンの項目らを表示すると先ほど作ったパターンが選べるようになっているので適用します。

パターンの項目はこんな感じ

その他にサテンとグラデーションオーバーレイを追加します。


マイク本体部分はこんな感じ。ここに帯状のパーツを加えます。

選択範囲を塗りつぶしてレイヤースタイルを適用します。




こんな仕上がりになります。

続いてアーム部分の塗りつぶし＆レイヤースタイル追加。



アーム部分の厚みを表現するために、レイヤーをコピーしてレイヤーを１つ下の階層に移動させたら、選択ツールで上に５pix移動させます。

ベベルとエンボスのスタイルを破棄し、代わりに光彩(内側)を以下のように適用します。


さらにマイクの下部、脚と土台も同じ行程でつくります。

すこしマイクの胴体下部が光りすぎてると思ったので、マイク下部のレイヤーを複製してレイヤーの塗りを０％、グラデーションオーバーレイを図のように適用します。(この行程はやらなくてもOK)


ここまでくればほぼ完成。あとは細かいパーツを加えていきます。
5.仕上げに赤ラインと赤ランプ。
でも基本はやっぱり塗りつぶし＆レイヤースタイル
塗りつぶし＆レイヤースタイルでアクセントとなる赤いラインを描きます。
(今回は赤いラインを入れることを作成途中で決めたため、選択範囲を読み込むためのパスを作っていません。そこで塗りつぶしはマイク本体下部の塗りつぶし後選択範囲を８pix下にずらして消去という方法をとりました。わかりづらくてすいません。)
レイヤースタイルはカラーオーバーレイと光彩(外側)。


電源ランプみたいなもんを追加します。
脚の中心に四角い選択範囲を作ってランプの土台をつくります。塗りつぶし＆レイヤースタイル。




その上に赤ランプを作ります。楕円形選択ツールで丸くて小さい選択範囲を作ったら、塗りつぶし＆レイヤースタイル。



完成。

5.結論
まとめると、イラストレーターでベースとなるパスが用意できれば、選択範囲の作成→塗りつぶし→レイヤースタイル適用のステップの繰り返しで色々なものが表現できると思う。
これからの課題としては、選択範囲の作成＆塗りつぶしの変わりにシェイプレイヤーを利用して、効率よく、上手く、調整が用意なデータの制作を心がけていきたい。めざせスマートなファイルづくり。
でも一番スマートにしないといけないのは私の説明文だ。
]]></description>
		<wfw:commentRss>http://hoshiyuki.com/archives/850/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Photoshop Tutorial (making jack-o&#8217;-lantern)</title>
		<link>http://hoshiyuki.com/archives/189</link>
		<comments>http://hoshiyuki.com/archives/189#comments</comments>
		<pubDate>Wed, 29 Oct 2008 04:05:03 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Tutotial]]></category>

		<guid isPermaLink="false">http://hoshiyuki.com/?p=189</guid>
		<description><![CDATA[
10/31 is Halloween!
So let&#8217;s create a horrible Jack-o’-lantern!
As always you can download PSD file at the end of the article:)

1. Create a head
First, Create a New Document that is 500 pixels by 500 pixels.
Then fill the background with a radial gradient like below.

Create a New Layer and add a ellipse with the Ellipse Tool (U) [...]]]></description>
		<wfw:commentRss>http://hoshiyuki.com/archives/189/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Photoshop Tutorial(Drawing cartoons)</title>
		<link>http://hoshiyuki.com/archives/126</link>
		<comments>http://hoshiyuki.com/archives/126#comments</comments>
		<pubDate>Fri, 08 Aug 2008 15:01:09 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Illust]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Tutotial]]></category>

		<guid isPermaLink="false">http://hoshiyuki.com/?p=126</guid>
		<description><![CDATA[
In this tutorial, you&#8217;ll learn how to draw the catoons easily.
Drawing skills would help, as well as a tablet, though it&#8217;s not necessary.
Today we draw one of the most peculiar creatures in the world, Tasmanian Devil!

Before we get started, we have to prepare a rough sketch to be used in photoshop.
After that, scan the paper [...]]]></description>
		<wfw:commentRss>http://hoshiyuki.com/archives/126/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Photoshop Tutorial (making wooden texture)</title>
		<link>http://hoshiyuki.com/archives/109</link>
		<comments>http://hoshiyuki.com/archives/109#comments</comments>
		<pubDate>Fri, 04 Jul 2008 05:53:39 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Tutotial]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://hoshiyuki.com/?p=109</guid>
		<description><![CDATA[
I researched how to make a wood works in these days. If you get this tutorial, you could make some wooden texture goods such as neme plates, bottuns and search bars.
OK, let&#8217;s try it.

First of all, we make 500px×500px file.
Then fill it and add gradiant overlay like below.

After that, we a create new layer, that [...]]]></description>
		<wfw:commentRss>http://hoshiyuki.com/archives/109/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Photoshop Tutorial (making a horseshoe)</title>
		<link>http://hoshiyuki.com/archives/73</link>
		<comments>http://hoshiyuki.com/archives/73#comments</comments>
		<pubDate>Tue, 20 May 2008 04:34:48 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Tutotial]]></category>

		<guid isPermaLink="false">http://hoshiyuki.com/?p=73</guid>
		<description><![CDATA[
This time I make hoseshoe like in JRA campaign.
The layered Photoshop file is available at the end of the tutorial!

1. Create a horseshoe
First of all, make a path like below.

Create a new layer and create the selection of the path, then fill it (Cmd/Ctrl+delete). Then Go toLayer>Layer Styles>Gradient Overlay. 


Copy this layer (Ctrl + J), [...]]]></description>
		<wfw:commentRss>http://hoshiyuki.com/archives/73/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Photoshop Tutorial (making a floater)</title>
		<link>http://hoshiyuki.com/archives/44</link>
		<comments>http://hoshiyuki.com/archives/44#comments</comments>
		<pubDate>Mon, 05 May 2008 09:33:12 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Tutotial]]></category>
		<category><![CDATA[java script]]></category>

		<guid isPermaLink="false">http://hoshiyuki.com/?p=44</guid>
		<description><![CDATA[
Today, I&#8217;ll tell you how to make a floater in photoshop.
Actuallly, my first langage is not English. So, my tutrial might be obscure. But I want to try for practice&#8230;
If you feel this is too difficult, don&#8217;t worry because you can download the instructions (PSD file) at the end of my article.

We can find  [...]]]></description>
		<wfw:commentRss>http://hoshiyuki.com/archives/44/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
