こんにちは、イマジカデジタルスケープの伊藤です。

4月1日より会社名がこれまでの「デジタルスケープ」から「イマジカデジタルスケープ」に変更になりました。今後ともよろしくお願いいたします。

さて、今回は、Photoshop CS5 Extendedの機能の中から、「パペットワープ」についてご紹介します。


画像に粘度を与える


パペットワープは、画像に「粘度」を与える機能で、AfterEffectsでは以前から1つのツールとして搭載されていたものです。パペットワープを使用すると、他の領域に影響を与えずに特定の画像領域を大きく変形できます。髪型などのちょっとした変更から、腕や脚の位置などの大きな変更まで、様々な用途に使用できます。

パペットワープの機能は、通常のレイヤー、シェイプレイヤー、テキストレイヤーの他、レイヤーマスクやベクトルマスクにも適用可能です。


早速「パペットワープ」使ってみよう!


まずは変更したい画像を用意しておきます。ダイナミックな変更が可能なので、練習する際には、動物や昆虫などの生き物の画像を用意しておくといいでしょう。

パペットワープは、画像のある一部分に定点を入れて固定しておき、定点から離れたところをつかんでドラッグすると、画像が伸ばしたり、歪ませたりすることが可能です。

以下の画像は、カメレオンの部分だけをレイヤーにしておき、白い背景の上に乗せてあります。



編集したいレイヤーを選択しておき、「編集メニュー」→「パペットワープ」を選択します。
パペットワープを選択すると、画面上には特別な変化が現れませんが、オプションバーにピンのツールが表示されるのでパペットワープ中であることが確認できます。(「メッシュを表示」にチェックが入っていると、メッシュが表示されます)

最初に、カメレオンの間接となるような箇所(稼働しそうな箇所)でクリックし、ピンを打っていきます。このピンは複数打つことが可能です。できるだけ細かく点を打つと、動きをよりリアルにすることができます。



ピンを打ったら、動かしたい箇所のピンをドラッグします。動かしていないピンは、定点として機能するため、「この部分は動いてほしくない」という箇所にも予めピンを打っておきます。なお、一度設定したピンを削除する場合は、option【Alt】+クリックすると削除することが可能です。



最終的に変更が決まったら、enter【Enter】キーを押すか、オプションバーの○ボタンをクリックします。



Photoshop でパペットワープを選択すると、オプションバーに、パペットピンツールのオプションが表示されます。この「パペットピンツール」というツールそのものは、Photoshopのツールパネル内には存在しません。「パペットピンツール」はAfterEffectsに存在するツールで、「パペットワープ」の機能を選択したときだけ、オプションバーに一時的に表示されます。(以下はAfterEffectsのツールパネル)



オプションバーの「メッシュを表示」を選択すると、対象のレイヤーにメッシュが表示され、このメッシュの細かさ(密度のプルダウンメニューで調整)、動かす範囲(拡張のピクセル数で調整)などで、変形具合を調整することができます。





腕や足の部分だけ別のレイヤーにしてから動かすとかえって不自然になるため、動物やぬいぐるみなど、間接を動かす場合は体全体で1つのレイヤーにしておいた方がいいでしょう。

パペットワープは、アニメーション制作やちょっと画像を変更したい時など便利な機能なので、皆さんもぜひ使ってみてくださいね!




もっとPhotoshop CS5 の使い方を詳しく知りたい方は!
Photoshop CS5 EXTENDED の使い方・基本トレーニングの受講がオススメです!




イトウ先生が、Twitterを始めました!
みなさんもぜひ、フォローしてくださいね!

http://twitter.com/itoh_sensei




■■イトウ先生のTipsNote(実践・新機能コンテンツ)アーカイブ■■


基本トレーニングの受講後に、さらに学習しておきたい内容やTips、新機能を、隔週1回(月2回)で公開しています。


●Macintosh基本操作編(意外と知らない操作も多い!?)
○入力モードや変換のショートカット
○デスクトップで使えるショートカット
○階層やファイルパスの把握に便利な機能

●Illustrator(AI)
○アウトライン化と孤立点の削除について
○データを軽く作る方法について
○シンボルの親子関係について・その1
○編集モード
○シンボルの親子関係について・その2
○カラーパネルの「使えるショートカット」
○カラー一括変換のグローバルスウォッチとは
○配置した画像のすばやい編集方法
○CS5新機能01:すべてのアートボードにペースト
○CS5新機能02:内側描画と背面描画
○CS5新機能03:Web・インタラクション用のデザイン
○CS5新機能04:遠近描画
○CS5新機能05:線パネルと線幅ツール

●Photoshop(PS)
○消しゴムツールの活用
○ななめの画像をまっすぐにする方法
○自然な合成テクニック・角版
○自然な合成テクニック・切り抜き画像
○画像合成後の便利なショートカット
○調整レイヤー
○レイヤーパネルの不透明度と塗りについて
○不透明度のショートカット
○CS5新機能01:「コンテンツに応じる」機能
○CS5新機能02:絵筆ブラシと混合ブラシ
○CS5新機能03:人の記憶に近い画像・HDRについて
○CS5新機能04:パペットワープ

●FLASH(FL)
○Illustratorだけでできる、Flashアニメ
○CS5新機能01:IKボーンスプリングでバネアニメ
○CS5新機能02:コードスニペットパネルで簡単ActionScript3.0

●InDesign(ID)
○CS5新機能01:マルチステートを使った、IDからFlashアニメの作り方
○CS5新機能02:アニメーションパネルとタイミングパネルを使った、IDのモーションプリセット
○CS5新機能03:キャプションの自動作成機能

●Dreamweaver(DW)
○CS5新機能01:新しいサイト定義と、CSSスターターレイアウト
○CS5新機能02:HTML5 Pack
○CS5新機能03:スマートフォン検証・CSS3のメディアクエリー
○CS5新機能04:ブラウザ検証便利ツール・Adobe BrowserLabについて

●AfterEffects(AE)
○CS5新機能01:ロトブラシ
○CS5新機能02:新しい便利なショートカット

●FireWorks(FW)
○CS5新機能01:Device Centralと連携した、スマートフォンのプロトタイプ
○CS5新機能02:divのタイル背景の強化