線を組み合わせて美しいリボン状の画像を作るPhotoshopチュートリアル

線を組み合わせて美しいリボン状の画像を作る

CornOnCob : SwooshyLines Tutorial
(情報元:線を組み合わせてリボン状に加工し、美しい画像を作成するPhotoShopチュートリアル:phpspot開発日誌

Photoshopで上の画像のようなリボン状の画像を1から作るチュートリアルです。

以下手順です。使用したPhotoshopのバージョンはCS2。

1.新規作成で幅600px、高さ500pxにします。大きいほど後でやりやすいのでこのへんは任意。

2.新規レイヤーを追加します。レイヤー名は「swoosh」としておきます。

3.ブラシツールを選択します。
ブラシツール

4.3pxのハード円ブラシを選択します。シェイプの設定項目を下記画像のように設定します(おそらくデフォルトと同じ)。
選択するブラシ

シェイプの設定

5.ペンツールを選択し、「パス」に設定します(下画像参照)。
ペンツール

「パス」にする

6.以下のような感じでパスを描画します。なお、元のチュートリアル中に、パスの引き方がGIFアニメで表示されているので、それを参考にしてください(分かりやすいです)。以下の画像の場合は、数字の順番でパスの点を打っています。
パス 数字の順番にクリックしてパスを描く

7.カラーピッカーの前面の色を「7e7e7e」に設定します。
カラーピッカーの色を「7e7e7e」に

8.ペンツールが選択されている状態で、画像上を右クリックし、「パスの境界線を描く」を選択します。
パスの境界線を描く

9.ツールを「ブラシ」にしてOKをクリックします。パスに沿って色がつきます。
「ブラシ」を選択

10.右クリックして「パスを削除」を選択し、パスを消します。
パスを削除

11.ここまででこんな感じに(パスの引き方で若干変わります)。
パスを削除した後の状態

12.メニューバーの「ウインドウ」→「アクション」でアクションパネルを表示させます。
「ウインドウ」→「アクション」

13.ここからアクションの記録を行います。アクションの記録中はPhotoshop上で余計な操作をしないように注意してください(その余計な操作まで記録されるため。画面の切替などPhotoshopの操作に関係ないものはしても大丈夫)。

14.アクションパネルの「新規アクションを作成」をクリックします。
新規アクションを作成

15.アクション名は「Swooshy」としておきます(実際はデフォルト名でもOK)
アクション名を入力(任意)

16.「swoosh」レイヤーを右クリックして複製します。

17.「swooshのコピー」レイヤーが出来るので、そのレイヤーが選択されている状態でメニューバーの「編集」→「自由変形」を選択します。

18.回転の部分を「0.5」に設定し、変形を確定させます。
「回転」を0から0.5に

19.移動ツールを選択します。
移動ツール

20.キーボードの「→」キーを3回程度押して、「swooshのコピー」レイヤーを右に移動させます。

21.ここまで出来たら、アクションパネルの「再生/記録を中止」ボタンをクリックして記録を止めます。
再生/記録を中止

22.「swooshのコピー」レイヤーが選択されている状態で、なおかつ、アクションパネルの「Swooshy」の項目が選択されている状態で「選択項目を再生」のボタンをクリックするとアクションで記録したとおりにレイヤーが複製され、変形・移動までされます。このボタンを40回程度押してレイヤーを大量に複製します。ここでは40回クリックしました。そうすると下の画像のようになります。
選択項目を再生

アクションを使って大量にレイヤーを複製した後

23.背景以外のレイヤーを全てまとめて選択し、メニューの「レイヤー」→「レイヤーを結合」で大量にあるswooshレイヤーを1つのレイヤーにします。結合後、レイヤー名が「swoosh」になっていない場合は修正しておきます。
背景以外のレイヤーを全て選択状態にする

背景以外のレイヤーを全て結合する

24.背景の上に新規レイヤーを作成します。レイヤー名は「backcolor」としておきます。

25.適当に色づけします。塗りつぶしでもグラデーションでもブラシツールで色をつけてもどれでもかまわないので色をつけます。ここでは一番簡単な「塗りつぶしツール」で色を「452334」にして塗りつぶすことにします。

26.「swoosh」レイヤーを選択し、メニューの「イメージ」→「色調補正」→「色相・彩度」をクリックします。
「イメージ」→「色調補正」→「色相・彩度」

27.明度を「+100」にします。
明度を「+100」にする

28.ここまででこんな感じに。基本的な部分はこれで一応完成です。これ以下の説明は色づけなどの調整になります。色の具体的なつけ方は元のチュートリアルには記述されていなかったので、以下は私がやった方法になります。参考程度に。
ここまでの結果

29.「swoosh」レイヤーを「オーバーレイ」にします(下画像参照)。
「通常」から「オーバーレイ」にする

30.「swoosh」レイヤーを右クリックして複製します。

31.「swooshのコピー」レイヤーを選択して「イメージ」→「変形」→「ワープ」をクリック。適当に変形させます。うまくいかない場合は何回かやり直してみてください。変形させたら「移動ツール」で適当な位置に移動させます。
「イメージ」→「変形」→「ワープ」

32.ここまででこんな感じに。
線の部分の色が変わる

33.「backcolor」レイヤーの上に新規レイヤーを作成します。レイヤー名は「swoosh_color」としておきます。

34.カラーピッカーの前面色を「f99717」、背面色を「e787c4」にします(任意。別の色でもOK)。
カラーピッカーの色を変更

35.グラデーションツールを選択し、グラデーションエディタを起動して、「描画色から背景色へ」のグラデーションタイプを選択します。
「描画色から背景色へ」を選ぶ

36.「swoosh_color」レイヤーにグラデーションをかけます。かける方向は任意。今回は左から右に向かってかけました。

37.「swoosh」レイヤーを選択し、メニューの「選択範囲」→「選択範囲を読み込む」をクリック。

38.そのまま「OK」。
変更する箇所はないのでそのまま「OK」

39.「swoosh」レイヤーが選択状態のまま、「swooshのコピー」レイヤーをクリックして選択し、再びメニューの「選択範囲」→「選択範囲を読み込む」をクリック。

40.今度は選択項目が増えるので、「選択範囲に追加」にチェックをしてから「OK」
今度は「選択範囲に追加」にチェックをしてから「OK」

41.両方のレイヤーが選択状態になります。
両方のレイヤーが選択状態に

42.両方のレイヤーが選択状態のまま「swoosh_color」レイヤーをクリックして選択し、下にある「レイヤーマスクを追加」ボタンをクリックします。
レイヤーマスクを追加

43.メニューの「フィルタ」→「ぼかし」→「ぼかし(ガウス)」を選択します。

44.ぼかしは4.0~6.0の間くらいがベター。今回は5.0にします。
ぼかし(ガウス)を「5.0」

45.不透明度を「80%」くらいにします(数値は任意)。また、「swoosh」「swooshのコピー」レイヤーも適当に不透明度を変更します(しなくてもOK)。ここでは両方90%に設定しました。
不透明度を変更

ここまで設定すると以下のような感じになります。
リボン状の線に色が発光している感じに

46.文字を入れます。新規レイヤーを一番上に作成します。

47.文字ツールを使い、ここでは「Swooshy Lines」と入力します。フォントは「Trebuchet MS」、色は「e787c4」を用いました(任意)。

48.文字を確定させるとレイヤー名が「Swooshy Lines」に変わるので、これを右クリックして「レイヤー効果」をクリックします。
右クリックして「レイヤー効果」

49.スタイルの中から「グラデーションオーバーレイ」にチェックを入れて、下の画像のように設定し、「OK」をクリックします。
グラデーションオーバーレイの設定

50.「Swooshy Lines」レイヤーを右クリックして複製します。

51.複製したら、「Swooshy Linesのコピー」レイヤーをクリックしてアクティブにし、メニューの「編集」→「変形」→「垂直方向に反転」をクリックします。
反転させる

52.反転させたものを「移動ツール」を使って、下に移動させます。その後、このレイヤーの不透明度を「30%」程度に変更します。
不透明度を下げて反射しているような感じにする

53.最後にいらない部分を切り取ったりして文字の位置や各レイヤーの位置を調整すれば完成です。
調整して完成

※文字の鏡面加工部分に関しては、もう少し設定項目があったりするのですが、今回は大きく違いが出ないのでそこは省略しました。

■青っぽい色でのサンプル
青っぽい色でのサンプル

パスの使い方が若干くせものですが、そこを自在に使えれば色々な形で応用がききそうです。

▼スポンサードリンク

Posted at 2007年11月29日 | 記事URL | Photoshop | Trackback(0) | Comment(0) | Top↑
1つ後の記事:イラストやロゴ、アイコンやテキストエフェクトなど、65のIllustratorチュートリアル集
1つ前の記事:プロカメラマンが撮影した高解像度写真が無料で利用できる素材サイト『Link Style』














管理者にだけ表示を許可する

トラックバックURL
→http://smallwebmemo.blog113.fc2.com/tb.php/160-ddf61e3b
この記事にトラックバックする(FC2ブログユーザー)
Home