アートボードを個別ファイル(PSD)に書き出す方法

Photoshop CC 2015の新機能「アートボード」で作成した各グループを個別のPSDとして書き出す方法を紹介します。

アートボードの書き出し方法

(1) [ファイル] / [書き出し]/ [アートボードからファイル]を選択。

(2)「アートボードからファイル」ダイアログが表示されるので適宜入力します。

①保存先を選択します。
②ファイルの先頭に文字列を入れたい場合は入力します。入力しなければそのままアートボード名がファイル名になります。
③チェックをいれると選択したアートボードだけを書き出すことができます。
④ファイル形式を選択します。PSD以外に下記ファイル形式が選択できます。
BMP,JPEG,PDF,Targa,TIFF,PNG-8,PNG-24
⑤アートボードを保持したい場合はチェックをいれます。

(3) 実行ボタンをクリックするとファイルが書き出されます。

レイヤーパネルでアートボードを選択した状態で「ぶっこ抜きスクリプト」を実行して別ファイルとして抜き出す方法も手軽でおすすめです。

選択範囲をベクトルマスクに変換するスクリプト

選択範囲をベクトルマスクに変換するスクリプトを作成しました。

スクリプトの利用手順について

選択範囲からベクトルマスクスクリプトをダウンロード

DOWNLOAD

(1) ダウンロードしたzipファイルを解凍して「Dearps_選択範囲からベクトルマスク.jsx」をPhotoshopのスクリプトフォルダに移動します。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

(2)Photoshopを再起動してファイルを開き、長方形選択ツールで選択範囲を作成します。

(3) [ファイル] / [スクリプト]から「Dearps_選択範囲からベクトルマスク.jsx」を選択すると選択範囲がシェイプに変換されます。

favicon作成 効率化Tips

Photoshop CC 2015のアートボード機能を利用したfavicon(ファビコン)作成のTipsを紹介します。現在faviconの種類は膨大にありますが必要最低限ということで下記サイズを作成できるようにしています。

  • 16×16 px (IE)
  • 32×32 px (Chrome、Firefox、Safariなど)
  • 48×48 px (Windows デスクトップ)
  • 152×152 px (iOS・Androidのホーム画面)

favicon(ファビコン)作成 Tips

favicon.psdをダウンロード

DOWNLOAD

(1)ダウンロードした「favicon.psd」を開いてください。

(2)レイヤーパネルで最前面のレイヤー「favicon (edit)」のサムネイルをダブルクリックしてスマートオブジェクトを編集します。

(3) ロゴを配置するなどしてfaviconを作成します。

(4)完成したら上書き保存をして閉じます。この時点で全サイズのfaviconにデザインが反映されます。

(5)[ファイル]メニュー/[生成]/[画像アセット]を選択します。すると「favicon.psd」と同一階層に「favicon-assets」フォルダが作成され中に4種類のfaviconが書き出されます。

(5)favicon-16×16.png、favicon-32×32.png、favicon-48×48.pngの3つの画像を「.ico」形式に変換します。(複数の画像をひとつにまとめられる「マルチアイコン」にします。)
Photoshopでは変換することができないので下記サイトを利用します。

半透過マルチアイコンfavicon.icoを作ろう!

①画像ファイル3つを選択します。

②「アイコン作成」をクリック。

③背景色を選択。

④「アイコンをダウンロード」をクリックすると「favicon.ico」が保存されます。

(6)あとは「favicon.ico」、「apple-touch-icon.png」をルートディレクトリにアップロードしてHTML の <head>内に下記コードを記述すれば完成です。

<link rel="icon" href="/favicon.ico"> 
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> 

ガイド作成スクリプト

レイヤー、レイヤーグループ、選択範囲からガイドを作成することができるスクリプトを作成しました。Photoshop CC 2015用になります。

スクリプトの利用手順について

ガイド作成スクリプトをダウンロード

DOWNLOAD

(1) ダウンロードしたzipファイルを解凍して「Dearps_ガイド作成.jsx」をPhotoshopのスクリプトフォルダに移動します。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

(2)Photoshopを再起動してファイルを開き、選択ツールで選択範囲を作成するか、ガイドを作成する対象のレイヤー(レイヤーグループ)をレイヤーパネルで選択します。

(3) [ファイル] / [スクリプト]から「Dearps_ガイド作成.jsx」を選択するとガイドが作成されます。

拡大縮小時「縦横比を固定」にデフォルトでチェックをいれる

Photoshopではレイヤーの拡大縮小時、オプションツールバーの「縦横比を固定」はデフォルトではチェックが入っていない状態になります。
拡大縮小時は縦横比を固定したい場合が多いですよね?

そこでスクリプトを利用して「縦横比を固定」にデフォルトでチェックをいれる方法を紹介します。

スクリプトの利用手順について

自由変形_縦横比固定スクリプトをダウンロード

DOWNLOAD

(1) ダウンロードしたzipファイルを解凍して「自由変形_縦横比固定.jsx」をPhotoshopのスクリプトフォルダに移動します。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

(2)Photoshopを再起動して[編集] / [キーボードショートカット]でスクリプトの「自由変形_縦横比固定」に‘Command+T’を設定します。

これで拡大縮小したいときはショートカット‘Command+T’で変形すれば「縦横比を固定」にデフォルトでチェックを入れた状態で作業を進めることができます。

オリジナルのスクリプトの作り方

クリエイティブな技術を必要としない定型的なオペレーション作業はなるべく自動化しましょう。

Photoshopにはアクションのように作業を記録して保存、再利用するようなとても便利な自動化機能が多数用意されています。アクション、バッチ、ドロップレット、スクリプト、プラグインなどなど。頻繁に繰り返すような定型的なオペレーション作業はこのような機能を使って自動化しましょう。

今回は多数ある自動化機能の中から「スクリプト」についてご紹介します。

Dearpsではオリジナルのスクリプトを多数公開していますが実はこのPhotoshopのスクリプトはプログラミングの知識がなくても簡単に作れてしまうんです。

作業をJavaScriptとして記録「ScriptingListener.plugin」

アクションはご存知のとおり作業を記録して保存、再利用することができる機能です。実はPhotoshopにはそれの「スクリプト版」 があります。
Adobe公式サイトで配布されている
ScriptingListener.plugin」を使うことによってPhotoshopでの作業を自動でJavaScriptとして書き出してくれます。

まずは「ScriptingListener.plugin」をインストール

(1)まずはじめにAdobe公式サイトで配布されている
ScriptingListener.plugin」をダウンロードします。

(2)ダウンロードしたファイルを解凍して「Utilities」(Windows:Scripting Utilities)フォルダの中にある、「ScriptingListener.plugin」(Windows:ScriptListener.8li)を下記フォルダに移動します。

Windows: C:\Program Files\Adobe\Adobe Photoshop□\Plug-ins
Mac OS X: /アプリケーション/Adobe Photoshop□/Plug-ins

(3)次に「Sample Scripts/JavaScript」フォルダの中にある、「ScriptListenerOn.jsx」と「ScriptListenerOff.jsx」を下記フォルダに移動します。

Windows: C:\Program Files\Adobe¥Adobe Photoshop□\プリセット\スクリプト
Mac OS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

(4)これで準備完了です。Photoshopが起動している場合は再起動してください。

「ScriptingListener」の使用手順

(1)記録したい作業を開始する前に[ファイルメニュー]/[スクリプト]/[ScriptListenerOn]を選択します。これで作業の記録がスタートするので作業を行います。

(2)作業が完了したら[ファイルメニュー]/[スクリプト]/[ScriptListenerOff]を選択します。これで記録がストップします。

(3)デスクトップに「ScriptingListenerJS.log」というファイルができているので適宜ファイル名を変更して拡張しを「.jsx」にします。

(4)これでスクリプトファイルの完成です。作成した「(ファイル名).jsx」ファイルを下記フォルダに移動します。

Windows: C:\Program Files\Adobe\Adobe Photoshop□\プリセット\スクリプト
Mac OS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

(5)Photoshopを再起動してファイルを開いた状態で[ファイル] / [スクリプト]から作成したスクリプトを選択すれば先ほど記録した作業が実行されます。

[メモ]
アクションではショートカットを設定する場合ファンクションキーを指定する必要がありますがスクリプトは通常のアプリケーションメニューと同じように[編集メニュー]/[キーボードショートカット]で自由にショートカットを割り当てることができます。

「ぶっこ抜きスクリプト」を作ってみよう!

実はDearpsで公開しているスクリプトのほとんどが「ScriptListener」で書き出されたJavaScriptを加工することによってつくられています。
Dearpsで公開しているスクリプトの中で人気の高い「ぶっこ抜きスクリプト」を試しに作成してみましょう。

(1)[ファイルメニュー]/[新規]を選択して新規ファイルを作成します。サイズは適当でOKです。つぎに長方形ツールで矩形を描きます。これも適当でOKです。

(2)ここからの作業を記録します。[ファイルメニュー]/[スクリプト]/[ScriptListenerOn]を選択して記録をスタートします。

(3)レイヤーパネルで「長方形 1」を選択した状態で右クリックをしてメニューから[レイヤーを複製]を選択します。

(4)「レイヤーを複製」ダイアログが表示されるので[保存先]/[ドキュメント]のプルダウンメニューから「新規」を選択します。

(5)[イメージメニュー]/[トリミング]を選択します。

(6)「トリミング」ダイアログが表示されるので「透明ピクセル」および「トリミングする部分」すべてにチェックが入っていることをかくにんして「OK」をクリックします。

(7)作業の記録をストップします。[ファイルメニュー]/[スクリプト]/[ScriptListenerOff]を選択して記録をストップします。

(8)デスクトップに「ScriptingListenerJS.log」というファイルができているのでファイル名を「ぶっこ抜き.jsx」に変更します。

(9)「ぶっこ抜き.jsx」をテキストエディタなどで開きます。

記録された作業は一操作ごとに
// =======================================================
で区切られます。

※Photoshop CC 2015では記録された作業以外に不要なコードが生成されてしまいます。下記画像を参考に不要部分を削除します。

青い部分は (2)の[ScriptListenerOn]のスクリプトを実行した操作の記録なので削除。

赤い部分も不要コードなので削除します。

黄色い部分の作業の記録だけ残して上書き保存します。

(8)これでスクリプトファイルの完成です。下記フォルダに移動します。

Windows: C:\Program Files\Adobe¥Adobe Photoshop□\プリセット\スクリプト
Mac OS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

(9)Photoshopを再起動してファイルを開いた状態で[ファイル] / [スクリプト]から[ぶっこ抜き]を選択すればスクリプトが実行されます。

アイデア次第でさらに便利に!

JavaScriptについての知識がある方はもちろん、知識がなくても少し学ぶことによってよりスクリプトを活用することができます。条件分岐やダイアログを利用した数値の入力なども可能です。
最初にダウンロードした「Documents」フォルダ内に「Photoshop Scripting Guide JA.pdf」 というスクリプティングガイドがあります。この機会にスクリプトについて学んでみてはいかがでしょうか。

[メモ]
アクションでは作業工程を一時停止してパラメータを変更することができますが、スクリプトでも下記のようにコードを書き換えることによってその作業で一時停止してパラメータを変更することができます。
停止したい作業のコードの最後に記述されている「DialogModes.NO」を「DialogModes.ALL」に書き換えます。

試しに先ほど作成した「ぶっこ抜き.jsx」を下記のように書き換えて確認してみましょう。

スマートオブジェクトで「共通化」

繰り返し利用するようなグラフィックはスマートオブジェクトで共通化しましょう!

制作物の中で繰り返し使うような同一デザインのパーツはスマートオブジェクトを利用して共通化させましょう。 まずはスマートオブジェクトの特徴を解説します。

スマートオブジェクトの特徴

元の画像データを保持したまま加工

レイヤーやレイヤーグループ、画像、Illustratorなどで作成したベクトル画像などをスマートオブジェクトとして扱うことによって元データを保持したまま様々な加工ができます。いわゆる非破壊編集が可能になります。

1つのソースを編集すれば複製したすべてに変更が自動反映される

スマートオブジェクトを複製する際、元のソースコンテンツファイルとのリンクを維持することによってひとつのスマートオブジェクトを編集することによって複製されたすべてのスマートオブジェクトに変更が反映されます。 今回のテーマである「共通化」はこの特徴を利用します。

リンク関係を保持してスマートオブジェクトを複製する方法

[レイヤーメニュー] / [レイヤーを複製] を選択します。

他にも通常のレイヤーを複製する方法でスマートオブジェクトを複製すればリンク関係を保持した形で複製ができます。(altキーを押しながらドラッグして複製など)

リンク関係を解除してスマートオブジェクトを複製する方法

[レイヤーメニュー] / [スマートオブジェクト] /[スマートオブジェクトを複製] を選択します。

この方法で複製されたスマートオブジェクトは独立したコンテンツとなり編集を加えても他のスマートオブジェクトに影響を与えません。

スマートオブジェクトを効果的に使った事例

複数サイズのWebバナー制作

複数サイズのWebバナー制作をする場合、スマートオブジェクトと変数機能を活用することによって かなりの効率化がはかれます。

変数機能の活用術「Web編」

Tipsをみる


レスポンシブWebデザインのカンプ制作

アートボード機能を使って複数デバイスのカンプ制作を1つのドキュメントで行う際はスマートオブジェクトを活用しましょう。

サンプルデータ(10MB)はこちらから

DOWNLOAD


広告展開イメージにもスマートオブジェクトを活用

スマートオブジェクトの共通化と変形しても元データを保持する特徴を活用した事例です。

サンプルデータ(2.1MB)はこちらから

DOWNLOAD


スマートオブジェクトの外部ファイル化

Photoshop CC 2014からスマートオブジェクトを外部ファイル化できるようになりました。。

スマートオブジェクトをリンクされた外部ファイルに変換

共有モジュールなどを外部ファイル化して別ファイルと共有することができるようになりました。修正があっても外部ファイルを変更すればリンクしているすべてに変更が反映されるのでとても便利です。

レイヤー(レイヤーグループ)、スマートオブジェクトを一発で外部リンクファイル化するスクリプトを下記ページにて公開しています。
ぶっこ抜いてリンクスクリプト


外部ファイルをリンク配置(スマートオブジェクト)

容量の大きいデータを読み込んでもリンク配置で参照するだけなのでPSDファイルを軽いままに保つことができます。


Photoshop CC 2015ではさらに進化!
ネットワーク経由でリンク配置が可能に(Creative Cloud Libraries)

Photoshop CC 2015で追加された「ライブラリ」パネルにスマートオブジェクトをドラックするだけで「Creative Cloud アセット」のライブラリにグラフィックを追加、リンクすることが可能になりました。

スマートオブジェクトを外部ファイル化するたびに保存先を指定する手間がなくなります。何よりもローカルで管理するファイルが1つですむのでスマートに作業を進めることができます。

しかしストレージ容量が20GB(個人版)と限られているのとずっとサービスが続くという保証もないので、あくまで作業中の利用にとどめて完成したらパッケージ機能でデータはひとまとめにして保存しておく運用方法がいいかなと思います。

CC 2014以前で開くとリンクエラーになってしまうので注意が必要です。(リンクエラーのスマートオブジェクトの編集はできなくなりますがドキュメント自体は開いて編集することが可能です。)


新規ファイルのプリセットにサイズを追加する

Photoshopで新規ファイルを作成する際のプリセット内のサイズはカスタマイズすることができます。標準プリセットの日本標準用紙には「A3,A4,A5,A6」の4つのサイズが用意されていますが新たに「A0,A1,A2」の3つのサイズを追加してみましょう。

続きを読む

埋め込み画像を配置スクリプト

通常Photoshopで画像(jpg、png等)を配置するとスマートオブジェクトとして配置されます。

(CC 2014〜は、環境設定/一般/オプションの[配置時にスマートオブジェクトを常に作成]のチェックを外すことによって通常のレイヤーとして配置することも可能)

スマートオブジェクトとして配置されるのは効率的でいいのですが通常のスマートオブジェクトと違って少しクセものなんです。

続きを読む

変数機能の活用術「映像編」

映像制作でも変数機能が大活躍!
Photoshopが使えない人とも作業を分担!

結婚式のラストに流れるエンドロールムービーを題材に映像制作にも役立つ変数機能のTipsを紹介します。

データ入力(CSV)のフォーマットにちょっとした工夫を加えることによってさらに効率化を図ります。映像制作にかかわらずデータ入力の作業を分担したいときにも役立つTipsです。

※このTipsではAfter Effectsを使用します。またこのTipsに出てくる人物名及びメッセージの内容は架空のものです。

エンドロールムービー制作

このような映像制作の場合、まず新郎新婦に原稿を作成してもらう必要があります。この原稿を入力するシートに工夫をすることによってスムーズにデータのやり取りをおこなうことができます。

どのような工夫をしているかというと1つのエクセルファイルに2つのシートを用意して1つ目のシートを「原稿シート」として新郎新婦が入力する用に体裁を整えます。2つ目のシートは「CSVシート」として「原稿シート」からデータをリンクさせPhotoshopで読み込むCSVの体裁に加工します。

こうすることによって新郎新婦から原稿を受け取ったら「CSVシート」のデータをコピーしてすぐにPhotoshopで読み込むためのCSVを作成することが可能です。

Google スプレッドシートが開きます。

エンドロール原稿

エンドロールムービー制作手順

Photoshopで素材データ作成

まずはサンプルデータ(295MB)をダウンロードしてください。

DOWNLOAD

(1)ダウンロードした「endroll_start」フォルダ内の「エンドロール.psd」を開きます。
(ここではPhotoshopでのグラフィック制作は省略していますがご自身で作る場合はドキュメントサイズ「幅 1920 px , 高さ 1080 px , 解像度72ppi」で作成してください。テキストレイヤー「名前」はポイントテキスト、「メッセージ」は段落テキストにします。)

(2)テキストレイヤーに変数を定義します。[イメージメニュー]/[変数]/[定義]を選択。

(3)変数ダイアログが開くのでレイヤーのプルダウンメニューを開き「名前」と「メッセージ」それぞれ変数を定義していきます。

テキストレイヤー「名前」

変数の種類の「テキストの置き換え」にチェックをいれて名前に変数名「名前」と入力します。

テキストレイヤー「メッセージ」

変数の種類の「テキストの置き換え」にチェックをいれて名前に変数名「メッセージ」と入力します。

変数の定義が完了したら「次へ」をクリックします。

(4)「読み込み」をクリックするとデータセットの読み込みダイアログが出てくるので「ファイルを選択」をクリックして「endroll_start」フォルダ内の「data.csv」を選択します。「最初の列をデータセット名として使用」にチェックが入っていることを確認して「OK」をクリックします。

(5)データセットのプルダウンメニューを開きデータが読み込まれていることを確認し「適用」をクリックしたのち「OK」をクリックします。

(6)レイヤーパネルで「bg」レイヤー横の目のアイコンをクリックして「bg」レイヤーを非表示にします。

(7)データセットを個別ファイルに書き出します。
[ファイルメニュー]/[書き出し]/[データセットからファイル]を選択。

(8)「フォルダーを選択」をクリックして保存先を指定します。

(8)保存先は「endroll_start」フォルダ内に「字幕」というフォルダを作成して「選択」をクリックしますい

(8)次にファイルの命名規則を設定します。今回は[データセット番号(01,02…)]+[アンダースコア(_)]+[データセット名]と設定します。 この場合(01_[名前].psd…)というファイル名で書き出されます。 設定が完了したら「OK」をクリックして書き出しを実行します。

(9)以上で素材作成が完了です。保存先フォルダを確認してください。

After Effectsで素材に動きをつける

[After Effects CC 2014 操作画面]

(1)After Effectsを起動します。

(2)[ファイルメニュー]/[新規]/[新規プロジェクト]を選択して新しいプロジェクトを作成します。すぐに[ファイルメニュー]/[別名で保存]/[別名で保存]を選択して「endroll_start」フォルダ内に「エンドロール.aep」というファイル名で保存します。

(3)[ファイルメニュー]/[読み込み]/[ファイル]を選択して「エンドロール.psd」を読み込みます。

(4)読み込みのダイアログが表示されるので下の画像のように指定して「OK」をクリックします。これで背景レイヤー「bg」が読み込まれます。

(5)読み込んだ「bg/エンドロール.psd」を「新規コンポジションを作成」アイコンにドラッグ&ドロップします。

(6)「bg/エンドロール」というコンポジションが作成されるので右クリックをして「コンポジション設定」を選択します。
※コンポジションとは?(Adobe公式サイト)

(7)コンポジション設定ダイアログが表示されるのでコンポジション名に「エンドロール」、デュレーションに「0:03:00:00」と入力します。

(8)[ファイルメニュー]/[読み込み]/[ファイル]を選択して動画素材「sample_movie.mp4」を読み込みます。

(9)プロジェクトパネルに読み込まれた「sample_movie.mp4」をコンポジションパネル「エンドロール」上にドラッグ&ドロップして下の画像の位置に配置します。

(10)[ファイルメニュー]/[読み込み]/[ファイル]を選択して「字幕」フォルダを選択してフォルダごと読み込みます。

(11)プロジェクトパネル上で「字幕」フォルダ内のPSDデータをすべて選択(01_山根 健一様.psdをクリックしたあとShiftキーを押しながら30_高松 薫様.psdをクリック)して「新規コンポジションを作成」アイコンにドラッグ&ドロップします。

(12)複数アイテムから新規コンポジションダイアログが表示されます。
静止画のデュレーションに「0:00:07:00」と入力して「OK」をクリックします。

(13)プロジェクトパネルに「01_山根 健一様」というコンポジションが作成されるので右クリックをして「コンポジション設定」を選択します。

(14)コンポジション設定ダイアログが表示されるのでコンポジション名に「字幕」、デュレーションに「0:03:00:00」と入力します。

(15)タイムラインパネルですべてのレイヤーを選択した状態で[P]キーを押して位置プロパティを表示します。時間インジケーターが「0:00:00:00」の位置にあることを確認してストップウォッチのアイコンをクリックします。するとキーフレームが設定されるのでコンポジションパネルで下の画面のように字幕をAの位置からBの位置へ移動させます。(画面外へ移動)

(16)次に時間インジケーターを「0:00:07:00」の位置に移動します。今度はBの位置からCの位置へ移動させます。そうすると自動的にすべてのレイヤーにキーフレームが設定されます。
これで字幕が下から上へ流れる動きが完成です。時間インジケーターを左右に動かして動きを確認してください。現時点ではすべての字幕が同時にスクロールしている状態なので次のステップで順番に字幕がスクロールされるように設定します。

(17)すべてのレイヤーを選択した状態のまま右クリックをして[キーフレーム補助]/[シーケンスレイヤー]を選択します。

(18)シーケンスレイヤーが表示されるのでオーバーラップにチェックを入れてデュレーションに「0:00:01:00」と入力します。トランジションはオフのままにします。

(19)これでスクロールテキストの完成です。時間インジケーターを左右に動かして動きを確認してください。

(20)プロジェクトパネル上のコンポジション「エンドロール」をダブルクリックして開きます。プロジェクトパネル上のコンポジション「字幕」を下のキャプチャのようにタイムラインパネルの一番上にドラッグ&ドロップします。

(21)最後に[ファイルメニュー]/[書き出し]/[レンダーキューに追加]を選択して動画ファイルとして書き出しましょう。

エンドロールムービーの完成です!

こちらの記事もご覧ください。

変数機能の活用術 総集編:Photoshop CC 2015版
基本編 変数機能をサンプルデータをもとに解説します。
DTP編 プロフィールカード100名分をあっという間に作成するTips
Web編 複数サイズのWebバナーを短時間で作成するTips