[Photoshop]フォトショップで動画編集してみよう その1

10日ほど前に「なんか腰が痛いなー」と思いながら就寝し、次の朝、寝返りがうてないほどの痛みになってしまい、病院に行ったら「椎間板ヘルニア」と診断されました。

現在は、寝返りが打てる程度にはなりましたが、じっと立っているのがかなりキツイです。腰ってすごく大事ですね。

皆様もお気を付けください。

スタッフ「ほ」です。

さて、今回もPhotoshopネタでいきます。

画像編集でおなじみのPhotoshopですが、実は動画編集もできるの知ってましたか?

「知ってるけれど使ったことはない」って方も多いかもしれません。

そういう私も実はPhotoshopでの動画編集は未体験です。

そこで今回から数回にわけて、Photoshopをつかった動画編集を試しつつ、皆様にご紹介していこうかと思います。

初回の今回はあまりボリュームを出さずに「これくらいならやってみてもいいかな?」と思える程度の入門編にしてみようかと思います。

1.Photoshopでできること

Photoshopではどのくらいの動画編集ができるのかを知っておきましょう。

Photoshopでは以下のようなことがおこなえます。

  • 動画の切り出し(トリミング)と切り分け
  • 複数の動画を繋ぎ合わせる
  • 動画に補正や効果を加える
  • テロップの挿入

などなど。細かく上げるともっとありますが、ざっくりと上記のようなことが行えます。

今回は入門編の位置づけですので、まずは動画を取り込んでトリミングをしてから書き出しを行うまでの一連の流れをご紹介したいと思います。

2.動画の取り込み

Photoshopに動画を取り込むのは簡単で、通常の写真と同じように動画データを[ファイル]メニュー→「開く」で指定するだけです。

ちなみに、AdobeのサイトによるとPhotoshopはこれだけのファイル形式を扱うことができるので、メジャーな動画フォーマットはほとんど扱えると思って良さそうです。

  • *.264
  • *.3gp
  • *.3gpp
  • *.avc
  • *.avi
  • *.4fv
  • *.flv
  • *.m4v
  • *.mov
  • *.mp4
  • *.mpe
  • *.mpeg
  • *.mpg
  • *.mts
  • *.mxf
  • *.r3d
  • *.ts
  • *.vob
  • *.wm
  • *.wmv

※OS別に若干の差異がありますので、詳細は下記ページをご覧下さい。
https://helpx.adobe.com/jp/photoshop/kb/cq02180050.html

今回は以前、旅行に行った際に水族館で撮影したスマートフォンの動画を取り込んでみました(mp4)

動画ファイルを開くと画面下部に自動的にタイムラインパネルが開きます。

タイムラインパネル

Photoshopでの動画編集は、このタイムラインパネルでおこなうことになります。

3.トリミング作業

まずはタイムラインパネルのごく簡単な基本操作を覚えましょう。

動画がPhotoshop上に取り込まれると、タイムラインパネル内に動画の長さを表す色のついたエリアができあがります。

取り込まれたムービー

このエリアの大きさがそのまま動画の長さを示しています。

無事に動画が取り込まれたことを確認したら、この再生アイコンをクリックしてみてください。

再生アイコン

Photoshopの画面内で動画が再生されます。

動画の再生中はアイコンが停止アイコンに変わり、これをクリックすると動画を停止できます。

停止アイコン

再生中にはタイムライン上の赤いラインが移動します。

再生位置を示す赤いライン

この赤いラインの上部にあるアイコンはインジケーターという名称で、現在の再生位置を表しています。

インジケーター

動画が再生されていない時にはインジケーターを任意の位置に移動することができ、編集したいポイントを探す際に使います。

さて、それでは動画のトリミングをおこないましょう。トリミングとは動画中から不要な部分を削除し、必要な部分だけを切り出す作業のことです。

ここでは、動画の先頭部分と終端部分をそれぞれ5秒ずつ削除してみます。

タイムラインパネル上でインジケーターを5秒の位置に移動しましょう。厳密に時間を指定する必要がある場合はパネル左下の時間を確認しましょう。

インジケーターを5秒の位置に合わせる

※ちなみに時間の表記部分が「04:29」となっていますが、これは「4.29秒」という意味ではありません。「4秒と29フレーム目」という意味です。
今回の動画は30fps(1秒間に30コマを含む)ので、この次が「05:00」になります。

狙った時間までぴったりとドラッグで動かすのは難しいですから近い時間まで移動ができたら、この2つのアイコンが便利です。インジケーターを1フレーム(コマ)ずつ前後に移動することができます。

コマ送り用のアイコン

続いてパネル内に表示された動画の左端にマウスポインタをあてて、以下のポインタに変化したところでインジケーターの位置までドラッグします。

動画の先端にマウスポインタをあてた状態

先端をドラッグ

マウスをはなすと、動画の先頭からインジケーターの位置までがカットされます。

動画の右端をドラッグすることで終端も同じくカットできます。

動画の終端をカット

細かい作業がしづらい場合は、パネル下部にあるこのスライダでパネル内をズームするといいでしょう。

タイムラインの表示倍率を制御

4.動画の書き出し

それでは、トリミングを行った動画を書き出して保存しましょう。

タイムラインパネルのパネルメニューから「ビデオをレンダリング」を実行します。
※「ファイル」メニュー→「書き出し」→「ビデオをレンダリング」でも〇。

「ビデオをレンダリング」を実行

ダイアログが開いたら、「出力先」欄で書き出すファイルの名前と保存場所を指定します。

出力先の指定

ダイアログ下部では動画の形式を指定します。

動画書き出しの際には、このドロップダウンには「Adobe Media Encoder」を指定します。

Adobe Media Encoderを指定

「形式」欄には一般的な「H.264」を指定します。

その後、動画の品質を設定しますが、例えば「Youtubeにアップする動画を作りたい」などの目的がはっきりしている場合は、「プリセット」欄で指定することで自動的に最適な設定がおこなわれます。

プリセットを指定

手動で設定を行う場合は、各項目で指定を行います。

各種設定

「サイズ」は動画の幅と高さ。

「フレームレート」は1秒間に何フレームを再生するか?という数値で、数字が大きいほど動画の動きが滑らかになります。
テレビは29.97fps、映画が24fpsですので、このあたりで設定しておくといいでしょう。

「フィールドオーダー」は走査線の描画方法ですが、よくわからない場合は下手に設定をいじらないようにしておきましょう。

ここまで指定ができたら「レンダリング」をクリックして実行します。

書き出しが始まります。動画時間の長さ、PCのスペックによっては時間がかなりかかります。ここはじっと待ちましょう。

レンダリング中

書き出されたファイルを確認してみましょう。

どうでしょうか?うまく再生されましたか?

いつも私のブログは長い!と言われているので、本当はもっと書きたいのですが今回はこれくらいにしておきます。

次回は、複数の動画ファイルを1つにつなげる方法をご紹介したいと思います。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Illustrator] CC2018のここがいい!

今回「遠近図形選択ツール」…の予定でしたが、CC2018もリリースされたので、CC2018で良くなった点と、新ツー ル「パペットワープツール」の2本立てで行きたいと思います。

まず、「プロパティ」パネル。02

起動して最初に目に付くところと思います。
「カラー」パネル等、従来の使用頻度高そうなパネルがパッと見いなくなってます。
とりあえず従来の初期設定に近いのが、「ペイント」でしょうか。
03

さて、「プロパティ」パネルでは何が出来るでしょうか。
先ず「長方形ツール」を使用して長方形を描いてみました。
(↓描いた直後の「プロパティ」パネルがこちら)
04

以前メニュー下部にあった「コントロール」パネルの拡張版のような印象です。
おかげで「コントロール」パネルが非表示となっておりますので、使用したい場合は「ウィンドウ」メニューから 表示させます。
ただ、今回の「プロパティ」パネルで設定できるので必要なくなりそうです。
「コントロール」パネルは確かに便利でしたが、「塗り」と「線」の色指定や「線」の太さを指定する場所が左上に出ていたのでマウスを右手で操作する私としては使い勝手が今一つでした…。
05

「カラー」パネルや「スウォッチ」パネルでは「塗り」と「線」の切換えに一手間かかりましたが、その手間がなくなり非常に使いやすくなってます。
06

一つ惜しいのが「コントロール」パネルの場合、「Shift」キーを押しながらクリックで「カラー」パネルに変更 できましたが、今回は展開した後に切換えとなります。
(「カラーミキサー」という名称になっており、「カラーミキサー」モードで閉じると次も「カラーミキサー」で 展開します。)
07

↓こう開いてくれるとBestです。(Adobeさん、今後のアップデートに期待してます)
08

細かい設定をする場合は、「詳細オプション」をクリックします。
09

↓「変形」は良かったのですが、「文字」の場合等、項目が被るところもあります。(被ってる所はなくなってく れるとこれまたBestです。)
10

それでもこの「プロパティ」パネルによって従来バージョンより大分使いやすくなってると思います。

詳しくは、下記詳細ページをご覧ください。

イラストレーター講座の詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Illustrator]パペットワープツールの使い方

CC2018で追加になった新ツール「パペットワープツール」を紹介します。
11

PhotoshopではCS5から搭載され、ツールではなくてメニューから実行する機能となります。この機能を使うと写真に写っている人物のポーズを操り人形のごとく変えたりする事ができます。
そしてPhotoshopの場合、動かしたい部分はレイヤーを分ける必要があったので人物の場合は切り抜いて、人物の抜けた部分の背景を作成する手間が掛りました。
12

Illustratorは変形させたいオブジェクトを選択して行います。
13

「パペットワープツール」を使用してオブジェクト上をクリックするとピンが打込まれます。
ピン打つとオブジェクトにメッシュが表示されます。
14

既に刺さってるピンの上にカーソルを持っていくと「選択ツール」のような表示となります。
その状態でドラッグするとオブジェクトが変形していきます。
15

更にピンを追加して色々動かしてみると、ただの角丸長方形もこんなオブジェクトに。
16

牛を描いて試してみました。以前紹介した「動くスタンプ」もお手軽に作成できそうですね。(画像はクリックすると拡大表示されます。)
18

さて、折角なので人物を描いてやってみました。このツール、正面より横の方が得意そう。
17-1

…と思いきや…
何とグラデーションメッシュ未対応…
17-2

未対応ってだけなので今後の対応に期待したいと思います。
そんな訳で、メッシュを外してついでに髪の毛追加して再チャレンジ!
17-3

確かにこれを「ダイレクト選択ツール」で修正は難しそうですね。

今まで「ダイレクト選択ツール」で作業しにくかった修正も「パペットワープツール」でうまく修正出来るかもしれないです。

以上です。次回こそ「遠近図形選択ツール」。
このツールは前回の「遠近グリッドツール」と併用するツールとなります。

バンフートレーニングスクールでは、イラストレーターやフォトショップ、インデザインにWebサイト作成の講座を開講中です。

このブログを書いているスタッフ「ほ」と、スタッフ「の」をはじめとする印刷会社の研修部門のスタッフがアプリケーションの使い方を徹底レクチャー!

詳しくは、下記詳細ページをご覧ください。

イラストレーター講座の詳細

ご興味がある方は、ぜひ一度無料体験にお越しくださいませ。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Photoshop]自動処理でらくらく作業(上級編)

いい季節になりましたね。11月が一番好きなスタッフ「ほ」です。
秋から冬への移ろいが美しい月ですよね。

さて、前回Photoshopの自動処理のネタを書きました。
皆様、お試しいただけましたでしょうか。

今回は、それの上級編です。

Photoshop CCからアクションには「条件分岐」が搭載されました。
プログラムを書く方にはおなじみif~else文ですね。

「えー、プログラム?」と思った方、大丈夫です!Photoshopの条件分岐はカンタン!

1.条件分岐の基本

ここに向きが縦横混在の写真があります。

用意された画像

これらのサイズを自動調整したい場合に、サイズ変更のアクションを作ると便利なわけですが、幅を200pxにするアクションを作ってしまうと縦向きの画像と横向きの画像で大きさに差が出てしまいます。

幅でそろえると画像サイズがバラバラに

この場合、縦向きの写真は「高さ」、横向きの写真は「幅」、つまり長辺を200pxにしてあげることでサイズのバランスがとれるようになります。

長辺の長さをそろえる

そこで条件分岐の登場です。

最初にアクションパネルにて幅を200pxにするアクションと高さを200pxにするアクションを作っておきます。
※アクションの基本的な使い方は前回の記事をご参照ください

アクションを追加

さらに今回の条件分岐のためのアクションを新規作成します。
今回は条件分岐前におこなう処理はありませんので、このアクション内には何も記録しなくてOKです。

空っぽのアクションを追加

作成したアクションを選択し、アクションパネル右上にあるメニューアイコンをクリックして「条件の挿入」を実行します。

条件の挿入

「条件付きアクション」ダイアログが開きます。

条件の挿入ダイアログ

「現在」の欄から条件を選択するのですが、使えそうな条件があまりないのが個人的な印象です(ぼそっ)。
(例えば「ドキュメントモードがRGBです」の条件の場合、RGBならCMYKに変換する、などの処理が考えられるような気もしますが、RGBでもCMYKでもCMYKに変換するアクションを組み込んでしまえばいいのでは?と思ってしまったり……きっと私が想像できない使い方があるのかもしれません…)

条件一覧

ここでは「ドキュメントが横方向です」を選択します。

「該当する場合のアクションの実行」欄には「幅200px」のアクション
「該当しない場合のアクションの実行」欄には「高さ200px」のアクション

をセットして「OK」をクリックします。

真偽の処理内容をそれぞれ指定

アクション内に条件分岐の処理が記録されました。

条件分岐が記録された

画像を開いてアクションを実行してみましょう。

縦向き、横向きの画像それぞれの長辺が200pxにリサイズされれば成功です。

2.でも実は……

縦横リサイズの条件分岐を紹介しましたが、すみません、本当はもうちょっと簡単な方法があったりします……

Photoshopには「画像のフィット」という自動処理があらかじめ用意されておりまして、これを利用すればいとも簡単に長辺合わせができるのです。

これをアクションに組み込んでしまえば、バッチでの一括処理も可能になります。

ちょっとやってみましょう。

画像を1枚開いたら、アクションパネルで新規アクションを作成し、記録を開始します。

画像のフィット記録開始

「ファイル」メニューから「自動処理」→「画像のフィット」を実行します。

ダイアログが表示されたら「幅」と「高さ」欄に「200」と入力します。

「拡大しない」にチェックを入れていくと、画像の長辺が200pxよりも小さい場合に拡大が行われなくなります。

画像のフィットダイアログ

これを指定することにより、縦横200pxの枠内に画像がぴったり収まるようにリサイズをしてくれるようになるんです。
つまり、長辺が同じ長さになるんですね

長辺をフィット

「OK」をクリックし、画像がリサイズされたことを確認したら記録を停止します。

画像のフィットが登録された

別の画像を開いてアクションを実行してみてください。

うまくできてれば、バッチ処理で複数画像に一括処理できますね!
(バッチ処理の方法は前回の記事をご参照ください)

3.条件分岐は真(または偽)のみでも動く

プログラムの世界では条件分岐の条件に該当する場合を「真」、該当しない場合を「偽」と呼びます。
(覚えなくても大丈夫です)

先ほどご紹介した方法ですと、条件に該当する場合はこれ、該当しない場合はこれ、とそれぞれの処理を設定しました。

でも、中には「条件に該当する場合はこれをやってほしいけど、該当しない場合は何もしないでいいよ(またはその逆)」って場合もあると思うのです。

ちょっとわかりづらいので例を。

この時期、紅葉がきれいですよね。

私も家族でどんぐり拾いに公園行ったりします。

落ち葉がきれいなのでスマホで写真をとったりするわけですが、この「カメラを真下に向けて撮影」が私ちょっと苦手です。

スマホに搭載されているジャイロセンサーが私の姿勢の悪さを的確に感知してくれて全部横向きで撮ったはずなのに、PCに取り込んでみたらいくつか縦向きになっていた…なんてこともしばしば。

縦横混在の写真たち

そこで、これらの写真を「写真が横向きなら何もせず、縦向きなら90度回転させる」という処理を条件分岐で行いたい!と思うわけです。

まずはアクションに写真を90度回転させるアクションを登録しておきましょう。

画像回転のアクションを追加

新規アクションを作成し、以下のように指定をします。

条件を追加

今回は写真が縦向きなら回転させるわけですから言い換えれば「写真が横方向でなければ回転させる」となりますね。

ですので、「条件に該当しない場合」でアクションを実行させます。「条件に該当する場合」は「なし」にしておきましょう。これで横向きの画像には何も処理が行われなくなります。

条件分岐が登録されたので、そのままアクションパネルの「記録開始」をクリックしてファイルをJPEGで保存する処理とファイルを閉じる処理を追加してみました。

アクションを追加

このアクションを元にバッチ処理を行ってみたところ、ばっちり画像が横方向で統一されました。

処理前と処理後

4.条件分岐を使った小技

最後におまけです。

この条件分岐を使うと、「複数のアクションを組み合わせて実行」が可能になります。

どういうことかといいますと……

あらかじめ、アクションに自分がおこないそうな作業をいろいろ登録しておきます。

細かい作業をいろいろ登録しておく

で、「今回は開いた画像を解像度350dpi、カラーCMYKにしてから長辺を100mmにリサイズして、1回シャープをかけた上でEPSで保存したい」なんて処理が出てきたときに

・解像度350dpi
・カラーCMYK化
・長辺100mm合わせ
・シャープ
・EPS保存

の5つのアクションを組み合わせて一連の処理をしちゃいましょう、というものです。

やってみましょう。

内容が空っぽの新規アクションを作成します。

条件を追加し、以下の通り指定します。

解像度を350に

さらに以下の通り条件を追加していきましょう。

CMYK変換

長辺100mm合わせ

シャープ

EPS保存

閉じる

アクションパネルはこんな感じになります。

登録後のパネルの状態

バッチにて処理してみました。

処理後

いかがでしょう?

これなら細かい作業をあらかじめ部品として作っておいて、新たな作業が発生したときに組み合わせだけで新しいアクションが作成できますね。

お時間に余裕があるときにぜひお試しくださいませ

バンフートレーニングスクールでは、Photoshopの基本操作の授業から、アクションを組み込んだ実践編の授業までご用意しております。

短期で習得できるのもポイント!社員研修を元にカリキュラムを作っているので内容もとっても実践的。

無料体験もございますので、ご興味がある方はぜひスクールのホームページもご覧ください。

バンフートレーニングスクールのサイトへ

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Illustrator]遠近グリッドツールの使い方

2年以上滞っていたIllustrator「各ツールの使い方」再始動!
滞った原因の1つ「遠近グリッドツール」に触れていきましょう。
00

【先ず知っておこう!】
CS5から搭載された「遠近グリッドツール」。
おっ、新しいツールか。と、思ってツールを選択すると以下のような画面になります。
01

良く分からないし、操作しづらいので元に戻したくても中々画面表示は元に戻りません。
そこでまずは「遠近グリッド表示の消し方」。
方法は3つ
①「表示」メニュー→「遠近グリッド」→「グリッドを隠す」
②「選択面ウィジェット」を閉じる(「遠近グリッドツール」を選択していないと出ない。)
01-02
③ショートカット「Shift」+「command」+「I」(Mac)、「Shift」+「Ctrl」+「I」(Win)

続いて「パース」(パースペクティブ)について。
通常、目で見て近い所にあるものは大きく、遠くにあるものは小さく見える。
当たり前の事ですが、これが遠近法。
そして、1点透視、2点透視、漫画やイラストを描いている方にはお馴染みと思います。
画面上に「点」をとり、そこから定規で直線を引いてガイド的に使用する方法。

●1点透視
02-1
先ず地平線をイメージする地面的な線を引きます。(作例的に本来は水平が望ましいですが、個人的に昔から斜めが好きです…。)

02-2
描いた線の中心辺りに1つ点を取ります。(消失点と呼ばれ、絵描きの方は点でなくて「×」を描く方が多いです。)

02-3
その点を通過するように幾つかアタリとなる直線を引きます。

02-4
アタリとして引いた直線をガイド代わりにして作図します。(最初斜めにしたため少々狂ってます…。)

●2点透視
03-01
懲りずにまたまた斜め地面…そこに今度は2つ点を取り、アタリとなる線を引きます。

03-02
1点透視同様アタリを元に作図します。

●3点透視
04
2点透視にもう1点加えたのが3点透視です。

遠近法や透視図法を総称して「パース」と呼ぶわけですが、
「パースがおかしい。」なんて言葉を聞いたらその絵は遠近感が狂っているってことを言ってます。

【遠近グリッドツールを使用してみよう】
ツールを選択して最初に表示されるグリッドは2点透視です。
このまま「長方形ツール」で画面内をドラッグして幾つか作成すると以下のようになります。(全部左面のグリッドに添っています。)
05

グリッドを非表示にしてオブジェクトを半透明にしてみました。(これだけでもデザインとしていけるかも…)
06

グリッド面の変更には「選択面ウィジェット」を使用します。
クリックして面の切り換えを行います。(右面グリッドにして更に長方形を描いてみました。)
07

調子に乗ってグリッド面を切換えて「長方形ツール」でどんどんドラッグ。遠近のグリッドを何の調整もしてませんがこんな感じになります。
08

ではグリッドについて。
先ずモードを選択しましょう。
●1点透視を使用する場合
「表示」メニュー→「遠近グリッド」→「1点遠近法」→「1P-標準ビュー」を選択します。
09

●2点透視を使用する場合
「表示」メニュー→「遠近グリッド」→「2点遠近法」→「2P-標準ビュー」を選択します。
10

●3点透視を使用する場合
「表示」メニュー→「遠近グリッド」→「3点遠近法」→「3P-標準ビュー」を選択します。(何故か見下げる感じになります。)
11

ラフ案やイメージボード、もしくはアタリとなる画像等をテンプレートでIllustratorに配置し、モードを選択すると良いかと思います。
グリッド内に表示される各ポイントの名称を知りたい場合は以下のサイトを参照してください。
https://helpx.adobe.com/jp/illustrator/using/perspective-grid.html
モードを選択したら配置したテンプレートに合わせてグリッドを調整します。
12

後は「選択面ウィジェット」を確認し、作図していきます。
13

以上です。次は「遠近図形選択ツール」。
このツールは今回の「遠近グリッドツール」と併用するツールとなります。

バンフートレーニングスクールでは、イラストレーターやフォトショップ、インデザインにWebサイト作成の講座を開講中です。

このブログを書いているスタッフ「ほ」と、スタッフ「の」をはじめとする印刷会社の研修部門のスタッフがアプリケーションの使い方を徹底レクチャー!

詳しくは、下記詳細ページをご覧ください。

イラストレーター講座の詳細

ご興味がある方は、ぜひ一度無料体験にお越しくださいませ。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

Vanfu Training Schoolのスタッフがお役立ち情報を発信中