画像アセット用リネーム エクステンション「Asset Renamer」 CC 2018対応

mv

Photoshop CCからレイヤーまたはレイヤーグループの名前にファイル形式の拡張子(.jpg/.png/.gif)を追加することで自動で画像アセットが生成され、ソースの PSD ファイルと同じサブフォルダーに保存されるようになりました。

このリネームの作業を効率化させるために今までAdobeが公式に提供している「Adobe Layer Namer」を使用していたのですがPhotoshop CC 2018にアップデートしたら使用できなくなってしまいました。

なので急遽「Asset Renamer」というエクステンションを作成したので配布させていただきます。

「Asset Renamer」のインストール方法について

「Asset Renamer」をダウンロード

DOWNLOAD

ダウンロードしたzipファイルを解凍します。

解凍されたフォルダ「AssetRenamer」を下記ディレクトリに移動します。

【Mac OS】 Library/Application Support/Adobe/CEP/extensions

ライブラリ(Library)は通常表示されないのでaltキーを押しながらFinderメニュー/移動を開くと下記画像のようにライブラリが表示されます。

Photoshopを再起動します。

メニュー[ウインドウ]/[エクステンション]/[Asset Renamer]を選択します。
以上で「Asset Renamer」パネルが表示されて利用できる状態になります。

「Asset Renamer」の使用方法について

リネームしたいレイヤーまたはレイヤーグループを選択(複数可)して生成したい画像種類のボタンをクリック。

02

(1)1xで書き出す(8,24,32はPNG形式)

(2)1xと2xで書き出す

(3)2xでデザインデータを作成している場合に使用

下部の項目はjpg形式で書き出す際に使用。(50,80,100は画質)

Adobe Photoshop CC 2018がリリースされました。

cap

多くの機能が追加されましたが自分的に良いなと思ったのは下記の2つの機能です。
・レイヤーのコピー&ペースト
・プレーンテキストとして貼り付ける

新機能詳細は下記リンク先にてご確認ください。
新機能の概要 | Photoshop CC 2018 (Adobe 公式サイト)

アップデート方法は下記手順にて。
1)デスクトップ右上のCreative Cloudアイコンをクリック
2)Appsタブをクリック
3)Photoshop CCのアップデートをクリック
cap2

このバージョンアップでデバイスプレビュー機能が廃止されました。
Preview CCよく使う方は要注意です。
(最新版にアップデートするとCC 2017は消えますがCreative Cloud デスクトップアプリケーションからCC 2017を再インストールすることによって共存が可能になります。)

選択範囲をシェイプに変換するスクリプト

選択範囲をシェイプに変換するスクリプトを作成しました。

更新:2017.7.10
シェイプ変換後に属性パネルで幅、高さ、角丸を変更できるように改良しました。
「単位:px」でご利用ください。

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

選択範囲をシェイプに変換スクリプトをダウンロード

DOWNLOAD

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

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

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

私はこのスクリプトにショートカット(command+U)を設定しています。
またファイルメニュー[選択範囲]/[選択範囲を変形]にも(command+Shift+T)を設定することによりさらに作業の効率化がはかれます。

DIFF 差分確認レイヤー作成スクリプト

今回は差分を確認できるレイヤーを作成するスクリプトのご紹介です。

まずはこちらの動画をご覧ください。

この動画のようにレタッチの比較に使用する以外にも、Webサイトのデザインカンプをエンジニアに渡した後に修正が発生した場合、このスクリプトで差分確認レイヤーを作成してから修正をおこなえば「修正箇所は一番上のレイヤー表示して確認してね」っていう一言だけで済みます。

チームで共同作業を行う場合にも使えますね。

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

差分確認レイヤー作成スクリプトをダウンロード

DOWNLOAD

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

①ファイルを開いた状態で[ファイル]メニュー/[スクリプト]/[Dearps_差分確認レイヤーを作成]を選択してスクリプトを実行します。

②最上部に「差分確認レイヤー」が作成されます。レイヤー名には自動で日時が

③修正作業を行います。サンプルでは赤枠の部分を変更します。

④文字と写真を変更しました。

⑤差分確認レイヤーを表示させます。
すると差異がある部分が下の画像の様に表示されます。

⑥修正前の状態を見たい場合は描画モードを通常にします。

ファイルを開くたびに差分確認レイヤーを作成したい場合の設定方法

複数のファイルを修正するときなど毎回スクリプトを実行するのが面倒だったり、忘れたりしてしまうことがあるのでファイルを開いたら必ずこのスクリプトが実行するように設定してしまえば楽ちんです。

①[ファイル]メニュー/[スクリプト]/[スクリプトイベントマネージャー]を選択します。

②(1)にチェックを入れる。 (2)のプルダウンメニューから「ドキュメントを開く」を選択する。(3)の プルダウンメニューの「参照」を選択して「Dearps_差分確認レイヤーの作成.jsx」を指定する。

③(4)の「追加」をクリックして(5)の「完了」をクリック。これで設定完了です。

これでファイルを開くたびに差分確認レイヤーが作成されます。

Photoshop CC 2017とAdobe Stockの連携で作業がさらにスピードアップ!

Adobe Stockとは?

ロイヤリティフリーの写真、グラフィック、ベクターおよびビデオが購入できるサービスです。購入プランは数種類用意されています。詳しくは公式サイトにてご確認ください。

最初Adobeの提供している素材集っていうと使えない品質のものだらけという先入観があったのですが、まったくそんなことはなくクオリティーの高い素材が多数提供されています。もちろん日本向けの素材も多数提供されているので私にとって今ではなくてはならないサービスとなっています。

私が契約しているプランは月々3,480円(年間プラン)で月に10点の素材を取得できるプランです。月に10点ダウンロードしなくても120 点まで繰り越し可能というとても良心的なサービスです。逆に10点以上購入したい場合は追加の素材を348円で購入することも可能です。安っ!

同様のサービスで人気の高い「Shutterstock」 の料金が一番安いプランで画像5点で6,000円というのを考えるとAdobe Stockのコスパ良さがわかりますね!

この記事ではどのようにPhotoshop CC 2017とAdobe Stockを連携させて作業効率をアップさせるのか私自身の実務での実例をもとに紹介したいと思います。

素材の検索、ダウンロードからドキュメントへの配置まで

まずは基本的な利用方法の解説です。

①Photoshopで任意のファイルを開きライブラリパネルを表示します。ライブラリパネルが表示されていない場合は[ウインドウ]メニューから[ライブラリ]を選択してパネルを表示させます。

②ライブラリパネルのプルダウンを選択して新規ライブラリをクリックして任意のライブラリを作成します。ライブラリは素材などのアセットを管理するフォルダのようなものです。プロジェクト名などご自身が判断しやすい名前をつけましょう。

③ライブラリパネルの検索フィールドを選択して必要な素材の名称を入力します。下のチェックボックスを選択することによって「写真」、「イラスト」、「ベクター」、「ビデオ」、「テンプレート」から絞り込むことも可能です。

④検索フィールドに入力すると候補の写真がパネル上に表示されるのでイメージに合う素材を探します。いい感じの素材をみつけたら ドキュメントにドラッグ・アンド・ドロップで配置します。(配置と同時に最初に作成したライブラリにも自動的で素材が保存されます。)

⑤まだライセンスを取得していない状態なのでAdobe Stockのウォーターマーク(透かし)が表示された状態になっています。

⑥ウォーターマーク(透かし)が表示された状態のままクライアントにチェックしてもらいOKが出たらライセンスの取得をします。NGの場合の無駄なコストを省けます。

⑦レイヤーパネルで配置した素材を選択した状態で右クリックをして「ライセンス画像」を選択します。(ライブラリパネル上の素材を選択して右クリックで「画像のライセンスを取得」でもライセンスを取得することが可能です)

⑧Adobe Stockのダイアログが表示されるので「OK」をクリックします。

⑨ドキュメント上の素材からウォーターマーク(透かし)が消えました。これでライセンスを取得したことになります。サイズや位置などもプレビュー版を元に置き換えられるので一切手を加える必要がありません。

クライアントチェックでNGが出た場合

①クライアントチェックでもしNGが出た場合、今までは素材サイトへいって再度条件を指定して一から素材の候補を探す必要がありました。しかしAdobe Stockには「類似を検索」というとても便利な機能があります。 この機能を使えば素材のテーマ、構図、トンマナを自動で判断して別案の候補写真を自動で探してくれます。

ライブラリパネル上の素材を選択して右クリックで「類似を検索」を選択します。(Stockで提供されている素材以外でもライブラリに登録した画像であれば同じように「類似を検索」機能を利用することができます)

②たったこれだけで類似の素材が表示されます。便利ですね!

③イメージに合う素材が見つかれば先ほどと同じようにドキュメントにドラッグ・アンド・ドロップで素材を配置します。楽チン〜捗る〜(^^)

Adobe StockのWebサイト上でも同じように「類似を検索」機能を利用することができます。

⑥Google 画像検索と同じように画面に画像をドラッグ・アンド・ドロップするだけです。

いかがでしたでしょうか? Adobe Stockの魅力を感じていただけたでしょうか?

いままでDearpsではスクリプトやTipsでの効率化テクニックを紹介してきましたがこういったサービスをうまく利用して作業効率化をはかることもとても重要だと考えています。時短の為には時にはお金で解決することも必要だなと(笑)

Adobe Stockをはじめて利用される方は初月は無料(画像10点)で利用することが可能です。(当記事執筆時点)
もし登録して気に入らなかったら登録から1ケ月経つ前に解約手続きをすれば解約料金も含めて費用が発生しないので試用してみる価値はあると思います。

是非この機会にAdobe Stockを試してみてはいかがでしょうか?

Adobe Stock

Photoshop CC 2017にアップデート後すぐに変更したい環境設定

Photoshop CC 2017では新規ドキュメントダイアログが大きく変わりました

Photoshop CC 2017にアップデートしてまず気づくのは新規ドキュメントのダイアログが大きく変わったことだと思います。この変更によって使い勝手が良くなったかというと…

上記のようないろいろと文句をつけたくなる仕様でした。
(Adobe Stockを周知させたい思惑があるのかなぁ。。。)

さらに新しいダイアログになって許せない最大の問題点はダイアログの立ち上がりスピードが遅い!
下記動画を見ていただけたら一目瞭然だと思います。

あきらかに従来のダイアログの方が早いですね。複数のアプリを立ち上げていたらその差は顕著です。
インターフェイスも従来の方が洗練されていると思います。

ということで新規ドキュメントのダイアログを従来のものに変更する方法を紹介します。

①[Photoshop CCメニュー]/[環境設定]/[一般]を選択

従来の「新規ドキュメント」インターフェイスを使用にチェックを入れる

以上で変更完了です。

今後のアップデートによっていろいろと改善されていくと思うのでアップデート情報に注目しておきたいですね。

Photoshop CC 2017がリリース

Photoshop CC 2017がリリースされました。

新機能につきましては下記リンク先にてご確認ください。
新機能の概要 | Photoshop CC 2017 (Adobe 公式サイト)

Photoshop CC 2017にアップデートする際にそのままだと以前のバージョンが削除されてしまうので注意が必要です。

以前のバージョンを残してPhotoshop CC 2017にアップデートする方法を以下に解説します。

(1) まずはCreative Cloudデスクトップアプリケーションを起動して「Photoshop CC (2017)」のアップデートをクリックします。もし「Photoshop CC (2017)」が表示されない場合はパソコンを再起動します。

(2)「詳細オプション」をクリック。

(3)「以前のバージョンを削除」のチェックボックスをはずす。

(4)「アップデート」ボタンをクリックしてアップデートを開始します。

以上で以前のバージョンを残したままPhotoshop CC 2017がアップデートされます。

BootcompもPhotoshop CC 2017に対応しました!

シェイプの縦横比を黄金比に変換するスクリプト

シェイプの高さを自動で調整して縦横比を黄金比にするスクリプトを作成しました。

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

シェイプの縦横比を黄金比に変更スクリプトをダウンロード

DOWNLOAD

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

(2)Photoshopを再起動してください。

(3)長方形ツールでシェイプを作成します。

(4) [ファイル] / [スクリプト]から「Dearps_シェイプの縦横比を黄金比に変換」を選択します。

以上でシェイプの縦横比が黄金比に変更されます。

Bootcompと合わせて使えばさらに効率アップ!

グループ化&グループ名を自動で変更するスクリプト

通常レイヤーグループを作成すると「グループ 1」、「グループ 2」のようにグループ名が自動的に設定されてしまいます。

これを放置するとレイヤー管理が煩雑になってしまいます。

今回紹介するスクリプトを使用すればレイヤーグループを作成するために選択したレイヤーの一番上のレイヤー名グループ名として自動で設定することができます。

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

グループ化&グループ名を変更スクリプトをダウンロード

DOWNLOAD

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

(2)Photoshopを再起動してください。

(3)長方形ツールや文字ツールなどで複数レイヤーを作成します。

(4) レイヤーパネルで作成したレイヤーを複数選択します。

(5) [ファイル] / [スクリプト]から「Dearps_グループ化&グループ名を変更」を選択します。
するとグループ化されて自動でグループ名も変更されます。

このスクリプトに対してショートカット「command」+「G」を設定してグループ化のデフォルトとして使用することをおすすめします。

Bootcomp 2.0 新機能 「Place img」
大量の画像を1クリックで配置する秘技

▲ デモムービーはこちら

1.シェイプを作成

まず長方形ツールで画像を配置したいサイズでシェイプを作成します。

2.シェイプをIMG-BOXに変換

レイヤーパネルでシェイプを選択した状態でBootcompのIMG−BOXボタン(下図赤枠)をクリック。

画像を選択するダイアログが表示されますがここでは「キャンセル」をクリックします。

ダミー画像が配置されました。

同じような工程を繰り返しBootcompを使ってデザインカンプを仕上げていきます。

3.IMG-BOX内のレイヤーに連番名をつける

IMG-BOX内のダミー画像のレイヤー名にはIMG-BOXのサイズが記載されています。

それを「img1」,「img2」,「img3」…と連番名に変更していきます。

4.配置する画像を用意

PSDデータの保存場所と同じ場所に「img」フォルダを作成して「img1.jpg」,「img2.jpg」,「img3.jpg」…と連番名をつけた画像ファイルを置きます。

あとはBootcompの「Place img」ボタンをクリックするだけ。

はい出来上がり!

Place imgの“いいところ”

Place imgは単に画像を自動配置するだけではなく配置するIMG-BOXのサイズ、形状に合わせて画像を最適なサイズにリサイズしてくれます。

参考に下記のようなサイズも形もバラバラなIMG-BOXに画像を配置してみます。

この写真をつかいます。

Place img!

わかりやすくどのようにリサイズされたか透過させてみました。表示部分がちょうど埋まるようにリサイズされています。

Bootcomp 2.0

いかがでしたでしょうか?

Bootcompをリリースした当初は「Bootstrapの利用を前提としたデザインカンプ制作を効率化させる」というコンセプトで作ったものだったのですが現バージョンからはBootstrap案件でなくてもWebサイト制作、アプリUI制作など さまざまなシーンで使っていただけるエクステンションに育ったかなと思っています。

Bootcompがみなさまの作業効率化の一役になれれば幸いです。

Bootcomp 2.0 特設ページ