今回参考にしたのは、『Abduzeedo』さん。PhotoshopやFireworks等、いろいろなソフトを使って、格好いい画像の作り方をチュートリアルとして紹介されています。このサイト、海外サイトなのでもちろん全て英語ですが、動画付きなのでわかりやすいかと。自分の使っているPhotoshopと見比べればokなので、まぁ文章と画像だけなチュートリアルよりは大分いいですよね。

今回作ったのは、ネオン文字の画像。よくありがちな物ですが、結構手が込んでます…。勉強になりますゎー。

制作環境：WindowsXP,Photoshop CS2

チュートリアルはこちらから。

Wordpressのテーマを探したり、海外のデザイナーさんが作ったウェブサイトのチュートリアルを見ていると、「Lorem ipsum」って書かれた英文のテキストがあります。これ、ずーっとなんて書かれてるんだろうなーって思っていたんですが、ちょっと調べてみたら、タイトル通り、ダミーテキストらしいです。

以下にWikipediaから抜粋

lorem ipsum（ロレム・イプサム、略してリプサム lipsum ともいう）とは、出版、ウェブデザイン、グラフィックデザインなどの諸分野において使用されている典型的なダミーテキスト。書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体（フォント）、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。

ふむふむ…確かに、文字も何もない状態でお客様に見せても、いまいちイメージが沸きませんもんね。これはちょっと勉強になった…。

※クリックで拡大。

今度気が向けばチュートリアル作ります･･･。なんとなーく作ってた物なので、作り方覚えてないとか･･･(笑)

※tutorialのページ、更新済み。

さて。まず、以前にも作った物載せましたが、キャプチャする時に作り直したので、そちらを。

…赤くしたら、なおさら煙からかけ離れた気がします；　炎･･･にしてしまった方がいいのかも(笑)とりあえず、作り方、いってみましょう。

①まずはバックグラウンドの作成。Photoshopを起動して、新規レイヤーを真っ黒に塗りつぶします。その後、レイヤースタイルで「グラデーションオーバーレイ」。この作品例は「#660000」と「#000000」です。色を指定したら、スタイルを「円形」に変更。適度な感じに比率を上下させて下さい。ここでは「117」。

POINT：上の画像で、グラデーションの赤っぽい部分に、赤いぽっちがあるのがわかりますか？そこを、レイヤースタイルを表示させたまま下にドラッグします。すると…

こんな感じに。これでバックグラウンドは終わりです。レイヤーに解りやすい名前をつけるなり、ロックするなりしてほっておきましょう。

②次に、肝心の煙(？)の部分。まずバックグラウンドの上の階層に新規レイヤーを作成。ここも黒く塗りつぶします。その後、ツールパレットからブラシを選択。初期設定の、「基本のブラシ(お使いのPhotoshopによって異なるかも)」でぼんやりした感じのブラシを選択。下の画像では「ソフトメカニカル」。

色は白で、真下から最上部の少し下という辺りまで、線を引きます。これは直線である必要はありません。フリーハンドで、ダラーッとひきましょう。

ちなみに、ブラシの線の太さが気に入らなかった場合は、キーボードの　[ と、　] で調節しましょう。押すたびに太さが変わります。

③線がひけたら、次はフィルタ >> ゆがみで、今の線をぐにゃぐにゃにします。

ここは正直、ご自分のセンスで…としか言いようがありません(笑)別にめちゃくちゃになってもすぐに作り直せますし、気分に任せてぐにゃぐにゃといじってみて下さい。

僕がいじって、ゆがみウィンドウを閉じた状態がこちら。

POINT：ゆがみでいじる際、あまりハッキリとした境界線を残さないで、ぼかした感じにした方が後々綺麗に色が出ます。ゆがみウィンドウの右上で筆圧を変更する等、自分なりにいじってみて下さい。

④これで煙のベースとなる部分が出来ました。次に、先ほどのレイヤーの描画モードを「覆い焼きカラー」に変更します。

先ほどのバックグラウンドの色が透けて見えていると思います。次に、フィルタ >> ぼかし >> ぼかし(ガウス)を選択。境界線をぼんやりする程度にぼかしましょう。

さて･･･。次に、今のレイヤーをコピーして大きさや不透明度を変更して、重ねていくんですが。これは画像としては説明出来ず、文章で説明するのも難しいので･･･。あいまいな書き方になりますが、ここもご自分のセンスでお願いします(笑)

念のため･･･。レイヤーのコピーは、レイヤーウィンドウで右クリック >> 複製。レイヤーを選択して、Ctrl+Ｊでもokです。後は、移動ツールでバウンディングボックスを表示させて、大きさや縦幅横幅の変更。レイヤーウィンドウの右上で、不透明度の変更。

僕がコピーして作ったのがこちら。

ちなみに、この状態でのレイヤーはこんな感じになっています。

レイヤーの名称、全く変更していないのでわかり辛くてすいません＞＜

とりあえず、これで煙となる部分は完成。後は仕上げに、煙の周りにぼんやりと影をつけます。

⑤煙のレイヤーの上に新規レイヤー作成、ここも黒で塗りつぶします。フィルタ >> 描画 >> 雲模様１を選択してください。

雲模様が描画されたら、この描画モードも「覆い焼きカラー」に変更します。これで、雲のぼんやりした感じがバックグラウンドですけて見えるはずです。

これで完成です。

好みで文字など入れてみて下さい。ちなみに上の画像は、Tutorial03を覆い焼きカラーで描画したものです。

あ

以上。チュートリアルとしては普通に長いですが、実際に作ってみると簡単に出来ます。が、これは個人個人のセンス次第で格好良くも悪くもなる気がします；　ちなみに僕は慣れていないのもあって、納得できません今度またリベンジしよう･･･。

Photoshopの奥の深さ。

仕事で、ウェブ制作時にはPhotoshopにお世話になりっぱなしなんですが、今日は上司とレイヤーマスクについて話し合ってました。いや、作業工程をすっかり忘れたというか･･･。言い訳と取られるの覚悟で言えば、機能が多すぎます(笑)日々新しい事を足りない頭に詰めていっているので･･･ただでさえ頭の容量足りないのに頑張りますー！

チュートリアル：Photoshopで神秘的な煙(？)

とりあえず、レイヤーマスクについては上司がブログに書く予定ーと言っていたので、触れないでおきます。そこで今日は、久しぶりにチュートリアルを作ろうかと思って、ちょろっと作ってみました。

煙･･･じゃないかな。なんだろ、これ(笑)

明日･･･遅くても明後日にはちゃんとチュートリアルします。これは簡単ですよ。

季節の変わり目。

最近いきなり寒くなってきました。寒いとすぐに体調崩す性質なので･･･気をつけないと＞＜体調管理には充分気をつけましょうねー。

まぁとにかく今回は、前回の投稿で載せた画像のチュートリアルです。結構自己流が混じってますが、気にしないで下さい(笑)この画像は、大きく二つに分かれます。カーテン部分と、宇宙(？)部分ですね。このチュートリアルでは、宇宙部分から作って行こうと思います。

①それでは、Photoshopを起動して、新規作成。サイズは1500px ｘ　1000pxくらいあったほうが作りやすいです。最初に新規レイヤーを作って、塗りつぶしツールで真っ黒に塗りつぶして下さい。それがバックグラウンドになります。 次に、レイヤーボックスで新規グループを作成。その中に新規レイヤーを作成。

②今作ったレイヤーも、真っ黒に塗りつぶします。その後、フィルタ >> ノイズ から「ノイズを加える」を選択。 量は10、分布はガウス分布、グレースケールノイズにチェックを入れて下さい。

③実は今のノイズ、星になる点なんですが･･･これだと星っぽくはないですよね。そこで、イメージ >> 色調補正　>>　レベル補正 で、黒と白の強弱を修正します。数値は、入力レベル　50・1.00・170でどうでしょうか。

④少しは星っぽくなりましたかね。最後に、レイヤーボックス内の描画モードを変更します。デフォルトでは「通常」になってると思いますが、ここでは「スクリーン」に変更しておいて下さい。重要です！ あ 変更しましたら、次の作業。同じグループ内に新規でレイヤーを作成。このレイヤーは、先ほどの星の真下の階層に入れて下さい。下に入れると、今作ったレイヤーが星に邪魔されて見えないので、星レイヤーの左側にある目の画像をクリックして、見えなくしておきましょう。 このレイヤーも真っ黒に塗りつぶし、フィルタ >> 描画 >> 逆光 を選択。明るさは80で、レンズの種類は50-300mmズームにしましょう。

⑤画面の真ん中に描画されるので、レイヤー毎右下に移動。そしてこのレイヤーも、描画モードを変更。通常→比較(明)に。

⑥宇宙パートの最後に、雲を描きます。また同じグループ内に新規レイヤーを作成。先ほどと同じく、逆光の真下に配置。逆光レイヤーも、先ほどと同じく見えないようにしておきましょう。 今作った新規レイヤーも、今までと同じく真っ黒に塗りつぶします。その後、フィルタ >> 描画>> 雲模様１を選択。描画モードを通常→ハードライトに変更。

⑦レイヤーボックスのレイヤー名の横辺りをダブルクリックして、レイヤースタイルを表示。そこでグラデーションオーバーレイを選択。描画モードを乗算、カラーはデフォルトのパレット内に入っています。比率は、自分で確認しながら変更。ここでは72に設定してあります。

これでOKをクリックすると、以下のようになるはずです。

⑧これで宇宙パートを構成するレイヤーは全て揃いました。今まで見えなくしていた、星と逆光を見えるようにしましょう。間違いなく出来ていれば、↓のようになるはず。

⑨どうでしょうか？うまくいきましたか？もし変になっている場合は、それぞれのレイヤーの描画モードや、レイヤーの階層順を確認してみてください。 グループ ・星レイヤー(描画モード：スクリーン) ・逆光レイヤー(描画モード：比較(明)) ・雲レイヤー(描画モード：ハードライト)※グラデーションの描画モード：乗算 です。 これでうまく出来ていれば、宇宙パートは完成。次にカーテンパートに入ります。

⑩カーテンパートはフィルタ等が満載です。チュートリアルを作ってる方からしたら、文章少なくて済むので少し楽です(笑)こちらもまずは新規グループを作り、その中に新規レイヤーを作成します。レイヤー階層は宇宙パートの真上です。 次に、新規レイヤーを真っ白に塗りつぶします。そこでフィルタ >> 描画 >> ファイバーを選択。数値は、変化20、強さ4です。

⑪次にフィルタ >> フィルタギャラリー >> ラップを選択。数値はデフォルトでハイライトの強さ15、ディテール9、滑らかさ7です。

⑫さらにフィルタ >> ぼかし >> ぼかし(ガウス)を選択。数値は2.0です。

⑬次はフィルタ >> ぼかし >> ぼかし(移動)を選択。角度は90度、距離は800pixelです。少しカーテンに近づいてきましたか。

⑭次はイメージ >> 色調補正 >> レベル補正。数値は、入力レベル60、1.00、200です。これで陰影が付いた感じになります。

⑮これでカーテンの基礎部分は終わりです。次にめくれている部分を作りましょう。編集 >> 変形 >> ワープを選択。ここで、上下左右に１２個の□マークが出てくると思うので、好みの形にドラッグして変形しましょう。ここで宇宙パートを見える状態にして、全体像を見ながら変形した方がいいかもしれません。

⑯次は色付けです。宇宙パートでもやりましたが、レイヤースタイルを表示させて、ここではカラーオーバーレイを選択。色はお好みで大丈夫ですが、描画モードを通常→オーバーレイに変更してください。重要。これをしないと、色に塗りつぶされてしまいます。

⑰最後にグラデーションをつけます。ここでは、ツールバー上のグラデーションツールを選択。多分この状態では色の選択が白になっているので、ツールバーの下側のパレットをクリックして描画色を黒にしておきましょう。

次にグラデーションのオプションの部分で種類を選択します。ここでは円形をクリック。グラデーションは「描画色から透明に」

後は、カーテンのめくれた部分から外側に向かってドラック。どの程度の円にするかはお好みでいいと思います。※やり直しは「ctrl+ｚ」又は「ctrl+alt+z」です。 以上！完成です。

いや。チュートリアルって結構大変ですね(笑)一枚一枚キャプチャして加工しないというのが･･･＞＜まぁ、また何か作ったら載せますー。 あ。ちょっと切り取ってバナーっぽい物作ってみました。

正直、少し眠くて文字は適当です＞＜今度元気な時にチュートリアルをメモっときます。

あ

参考サイト：「Abduzeedo」　http://abduzeedo.com/surprise-behind-curtain-photoshop

※動画付きのチュートリアルが少しだけですが、あります。便利！

あ

さて。どこかのホームページで見た、PhotoShopの鏡面ロゴを作るチュートリアルを

自分なりに説明･･･っていうか、自分が忘れた時に見直す意味でもあるんですが(笑)

まぁ、今回作ってみるのは↓↓↓↓です。