Photoshop Tutorial (How to create an old-fashioned microphone)

title

あ…ありのまま 今 起こった事を話すぜ!
おれは最新式のマイクを作っていたと
思ったらいつのまにかレトロなマイクを作っていた

な… 何を言ってるのか わからねーと思うが
おれも何をされたのかわからなかった…

近代的なマイクを作ってやろうと気合いを入れたにもかかわらず出来たのは少々古めかしい型のマイク。それは私の感覚そのものがレトロだということかもしれない。そういえばたまに髪型が昭和だといわれる。
というわけで今回は”レトロな”マイクの作り方チュートリアルです。

1.イラストレーターでパスを作成

はじめに、イラストレーターを使ってマイクのパスを作ります。
01
ここで完成したパスデータをコピペでフォトショップに持っていくためのポイント。
(私は少し古いバージョンのCreative Suit(CS1って言うのかな?)を使っているので最新のバージョンだとどうなのかわからないのですが)
イラストレーター→フォトショップへパスデータをコピペしたいときに、イラストレーターの環境設定を少し変更する必要があります。
イラストレーター(フォトショップではない!)の環境設定からファイル管理クリップボードの設定で下図のAICB(透明サポートなし)という項目にチェック、さらにパスを保持にチェック。
02
設定変更が完了したら、イラストレーター上でパスをコピー、フォトショップのファイルに移動してペーストすると”ペースト形式”というウィンドウが出るので
ピクセル、パス、シェイプレイヤーの3項目の中からパスにチェックをしてOKします。
無事フォトショップへパスデータを移動できる(はず)。
03

2.フォトショップで作業開始

今回のマイクは以下の部分から成ります。

  1. マイクの本体
  2. マイクに付属の帯状のパーツ
  3. アーム部
  4. 土台(上部)
  5. 土台(側面)
  6. マイクの下部の金属部分
  7. 脚のスイッチ

1~6までのパーツはイラストレーターで用意したパスです。
パスは下図のようにパーツごとにダイレクト選択ツールで分解しておきます。

パスは選択範囲の読み込みに使います。基本的な作業の流れは
選択範囲の読み込み選択範囲の塗りつぶしスタイルの適用
の連続に成ります。

04

マイク部分の選択範囲を作成(パス1のところにカーソルをもっていって、⌘+クリック)したら(選択範囲の読み込み)、Dを押してから(背景色と描画色のリセット)alt+delete(描画色で塗りつぶし)で黒く塗りつぶします。
05
続いてスタイルの適用ですが、ちょっとひと手間かけます。

3.パターンを下ごしらえ

塗りつぶしが終わったところで別ファイルでスタイルを用意します。
新規ファイルを作成(⌘+N)で8×8pixのファイルを作ります。
それから背景レイヤーを#434545で塗りつぶします。
06
新規レイヤーで下図のように1pixの塗りつぶしを2カ所作ったらレイヤースタイルを適用していきます。
07

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

パターン完成
12
メニューバーから編集>パターンを定義…を選び完了。
もとのファイルに戻ります。

4.再びメインのファイルへ、あとはひたすら塗りつぶし&レイヤースタイル

レイヤースタイルのパターンの項目らを表示すると先ほど作ったパターンが選べるようになっているので適用します。
13

パターンの項目はこんな感じ
14
その他にサテンとグラデーションオーバーレイを追加します。
15
16

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

選択範囲を塗りつぶしてレイヤースタイルを適用します。
18
19
20
21
こんな仕上がりになります。
22

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

アーム部分の厚みを表現するために、レイヤーをコピーしてレイヤーを1つ下の階層に移動させたら、選択ツールで上に5pix移動させます。
26
ベベルとエンボスのスタイルを破棄し、代わりに光彩(内側)を以下のように適用します。
27
28

さらにマイクの下部、脚と土台も同じ行程でつくります。
36
すこしマイクの胴体下部が光りすぎてると思ったので、マイク下部のレイヤーを複製してレイヤーの塗りを0%、グラデーションオーバーレイを図のように適用します。(この行程はやらなくてもOK)
37
38
ここまでくればほぼ完成。あとは細かいパーツを加えていきます。

5.仕上げに赤ラインと赤ランプ。
でも基本はやっぱり塗りつぶし&レイヤースタイル

塗りつぶし&レイヤースタイルでアクセントとなる赤いラインを描きます。
(今回は赤いラインを入れることを作成途中で決めたため、選択範囲を読み込むためのパスを作っていません。そこで塗りつぶしはマイク本体下部の塗りつぶし後選択範囲を8pix下にずらして消去という方法をとりました。わかりづらくてすいません。)
レイヤースタイルはカラーオーバーレイと光彩(外側)。
41
40

電源ランプみたいなもんを追加します。
脚の中心に四角い選択範囲を作ってランプの土台をつくります。塗りつぶし&レイヤースタイル。
43
44
45
42
その上に赤ランプを作ります。楕円形選択ツールで丸くて小さい選択範囲を作ったら、塗りつぶし&レイヤースタイル。
46
47
48
完成。
49

5.結論

まとめると、イラストレーターでベースとなるパスが用意できれば、選択範囲の作成→塗りつぶし→レイヤースタイル適用のステップの繰り返しで色々なものが表現できると思う。
これからの課題としては、選択範囲の作成&塗りつぶしの変わりにシェイプレイヤーを利用して、効率よく、上手く、調整が用意なデータの制作を心がけていきたい。めざせスマートなファイルづくり。
でも一番スマートにしないといけないのは私の説明文だ。

Comment/Trackback

トラックバック用URL:

この記事のコメント・トラックバックRSS

コメントする

管理人にのみ公開されます

使用できるXHTMLタグ: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>