GINPで文字を簡単デザインする①“モーションぼかし編”

モーションぼかし-GINP

簡単に文字デコするシリーズの「モーションぼかし編」をお届けいたします。

ご覧のように、文字に動きのある演出することで、目を引くアイキャッチ画像へと展開できます。今回も、とても簡単にできる方法ですので、ぜひトライしてみてください。

【GINP】モーションぼかし編|動画解説

【GINP】モーションぼかし編|図解

メニューバー【ファイル】から[新しい画像]をクリック。メニューボックスで、基本形を設定します。

GINP_新しい画像

今回は、16:9比率(800×450px)の画像を制作することにしました。解像度は、72pxです。*この数値は、使用目的により任意設定ください。

【OK】をクリック。

これで背景が出来ました。今回は、加工変化がよくわかるように、この背景を【塗りつぶし】ツールで黒く塗りつぶします。

色を黒に設定、【塗りつぶし】ツールで【画像ウインドウ】内の[背景]をクリックします。

GINP塗りつぶし_黒

これで黒い背景が出来ました。ここに文字を配置します。文字は【テキスト】ツールを使って配置します。

文字のツールオプションで、「フォント」「サイズ」など詳細設定をします。

GINPツールオプション文字

これで最初の準備、セッティングは終了です。

この文字に「モーションぼかし」加工をして行きます。始めに、文字を複製します。

GINP-文字コピー

複製は、複製するレイヤーをクリックし、下のメニューから「複製ボタン」をクリックします。

主なボタンメニューは、

GINP-メニューボタン

指定のレイヤーを矢印方向(上下)に移動させる。
指定のレイヤーを複製し追加する。
指定のレイヤーを削除する。

下側の文字レイヤーに加工をします。

GINP-コピー文字に加工

下の文字レイヤーを右クリック
[レイヤーをキャンバスに合わせる]をクリック。文字レイヤーの背景が透明になります。

GINP-キャンバスに合わせる

同じ文字レイヤーをクリックし、
メニューバーの【フィルター】から[ぼかし]「モーションぼかし」をクリック。

GINP-モーションぼかし

すると、モーションぼかしの[設定メニュー]が開きます。このメニューから、ぼかしの詳細を設定するわけですね。

GINP-メニューボックス

モーションぼかしの種類は、○線形 ○回転 ○拡大の3種類があります。各名称の○ボタンをクリックすることで、指定のモーションぼかしが操作できます。

順を追って、設定してみますね。

線形のモーションぼかし

ぼかしのパラメーターで「長さ」と「角度」が操作できます。
例えば角度は「0度」から始まって時計回りに360度という動きになりますね。

モーションぼかし-角度

今回は、右斜め下方向にぼかしを出すことにします。なので、角度のパラメーターを225°とします。そして長さを25に設定しました。

モーションぼかし-線形パラメーター

これは、文字の大きさ、フォント(書体)等によって変わりますので、実際に試しながら調整してください。

これで【OK】をクリックし、完成です。

モーションぼかし--線形ぼかし

回転のモーションぼかし

モーションぼかしの[設定メニュー]を立ち上げるところまでは同じ操作です。
[ぼかしの種類]から、『回転』を選択します。

設定は2つ。「ぼかしの中心」と「角度」を決めます。まず中心を決めますが、正確に測る必要はありません。

モーションぼかし-中心設定

この場合は、『X軸(横)⇒400』『Y軸(縦)⇒200』で中心としました。(*意図的に中心をずらしても、面白い表現になります。)

モーションぼかし-回転パラメーター

角度は20°としました。(任意設定ください)そして、【OK】をクリックで完成です。

モーションぼかし-回転ぼかし

拡大のモーションぼかし

モーションぼかしの[設定メニュー]を立ち上げるところまでは同じ操作です。

[ぼかしの種類]から、『拡大』を選択します。設定は2つ。「ぼかしの中心」と「長さ」を決めます。

中心は、先ほど同様『X軸(横)⇒400』『Y軸(縦)⇒200』で中心としました。(*意図的に中心をずらしても、面白い表現になります)

モーションぼかし-拡大パラメーター

長さは30としました。(任意設定ください。)そして、【OK】をクリックで完成です。

モーションぼかし-拡大ぼかし

これで3種類のモーションぼかしが出来ました。3種類を同時に掛け合わせても、面白い表現になります。

モーションぼかし_3p

文字には、ドロップシャドウ(影)を付けてあります。

ドロップシャドウ手順
『メインの文字レイヤー』をクリック。
メニューバー【フィルター】⇒[照明と投影]⇒「ドロップシャドウ」クリック。
メニューボックスで影の指定。
【OK】でドロップシャドウの完成。(動画解説/8:35~)

『モーションぼかし』は、手軽にできる文字加工で、応用範囲の広いテクニックのひとつです。ぜひご利用になってみてください。

 操作手順まとめ 

文字のレイアウト(準備)が済んだら、
①文字をコピー
②①の[レイヤーをキャンバスに合わせる]をクリック。
③【フィルター】から[ぼかし]⇒「モーションぼかし」をクリック。
④ぼかしの設定をし【OK】をクリック。

これで完成です。

背景画像と編集しアイキャッチ画像を作る

背景画像に、モーションぼかし文字を編集し、オリジナリティーあふれるアイキャッチ画像を制作してみます。

モーションぼかし55_背景アリ

背景画像を画像ウインドウ(レイヤーボックスでもOK)にドロップし、下図のような配列にします。

下から、「背景画像」「ぼかし文字」「ドロップシャドウ」「メイン文字」「サブ文字」。(今回の例です)

モーションぼかし-レイヤーに画像
この画像を入れ替えることで、様々なイメージの画像を作ることができます。
オリジナリティーあふれるアイキャッチで、あなたのブログを強く印象付けていきましょう。

「GINPのモーションぼかし」いかがでしたでしょうか。あなたのクリエイティブワークの参考になりましたら幸いです。

今回も最後までご覧いただき、どうもありがとうございました。
价(Kai)