Photoshopでの整列を超絶スピーディにする「移動」 エクステンションを作ったよ(無料) | Dearps

ogp

Photoshopでレイヤーを選択範囲を基準に移動したい場合、例えばこんな感じで↓

1
「上端揃え」+「水平方向中央揃え」といった形で2つの整列の組み合わせをすることが多いと思います。更に厳密に言えば最初に「カンバス全体に選択範囲を作成」して「移動ツール」に持ち替えてといったフローも必要です。

しかし今回配布するエクステンションを使えば↓のように1クリックでレイヤーを移動することができます。

2

・カンバスを基準にする場合はそのまま「移動」エクステンションのボタンをクリック。

・選択範囲を基準にする場合は選択範囲を作成して「移動」エクステンションのボタンをクリック。

・数値を指定してオブジェクトを移動したい場合は右側の「水平移動」または「垂直移動」をクリックします。するとダイアログが表示されるので移動する数値を入力して移動をクリック。

3

「移動」のインストール方法について

「移動」エクステンションをダウンロード

DOWNLOAD

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

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

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

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

Photoshopを再起動します。

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

Adobe MAX Japan フォローアップ

photo

「Adobe MAX Japan」— 2017年11月28日(火)パシフィコ横浜
ベテランほど知らずに損してるPhotoshop[MAX Special]

Adobe MAX Japan Photshopセッションにて鷹野雅弘(スイッチ)さんと登壇させていただきました。ご来場いただいた方はありがとうございました!
私のパートでお話させていただいたエクステンションなどのURLをお知らせします。
またセッション中に使用したWebサイトのサンプルデータとセッションで紹介したBootcomp3の重要機能だけに絞ったコンパクト版をMAX Editionとして作成したので配布させていただきます。
ぜひご利用ください!
max

「フォローアップデータ」をダウンロード

DOWNLOAD

画像アセット用リネーム エクステンション「Asset Renamer」
http://dearps.lovwar.com/2017/11/03/asset-renamer/
Bootcomp3.0
http://dearps.lovwar.com/bootcomp/

Creative Cloud ライブラリとは?
https://helpx.adobe.com/jp/creative-cloud/how-to/creative-cloud-libraries.html

Adobe Stock
https://stock.adobe.com/jp/

Webデザイン効率化エクステンション「Bootcomp 3」リリース

Bootcomp3

Webサイトのデザインをもっと効率的に、もっと早く。

本日Bootcomp3を公開しました。アップデート内容は下記になります。

①ぶっこみ機能(&リネーム機能)を追加

大量の画像をあっというまに配置して最適なサイズに自動でリサイズすることができます。
②水平垂直移動機能を追加
レイヤーまたはレイヤーグループを数値を指定して移動することができます。

他細かなバグを修正しています。

ダウンロードは「Bootcomp」の特設サイトから。

画像アセット用リネーム エクステンション「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に対応しました!