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 特設ページ

縦長Webページをデザインする際に役立つPhotoshopの小技3つ

近年スマートフォンの普及によりシングルページの案件が増えて縦長のWebページをデザインすることが多くなりました。カンバスサイズの高さが5,000pxを超えることも多々あります。そうなると作業をする上で余計に手間がかかってしまうことがあります。それを少しでも解消できる小技を今回紹介させていただきます。

1.画像配置の位置指定

通常はPhotoshopで「埋め込みを配置」や「リンクを配置」をすると表示領域の中心に配置されます。

しかし狙ったところに配置したい場合があります。そういうときはカンバス上の配置したい位置に選択範囲を作成して「埋め込みを配置」や「リンクを配置」をすると選択範囲の中心に画像を配置することができます。

2.快適に表示位置を変更する

縦長のWebページをデザインしているときページ上部から下部に表示を移動したい場合、拡大縮小やスクロールをするなど手間がかかります。そんな時は「H」キーをクリックしたままカンバス上をドラッグしてみてください。快適に表示を移動することができます。

3.レイヤーを任意の場所に瞬間移動

パーツを複製して使い回すことがあると思います。複製元のパーツがページの上部にあり使用したい位置がページ下部だとしたら移動に手間がかかります。そのようなときは複製したパーツをレイヤーパネルで選択した状態で、カンバス上の移動したい位置に選択範囲を作成して[レイヤーメニュー]/[レイヤーを選択範囲に整列]/[垂直方向中央]を選択して移動します。

ちょっとした小技を積み重ねることによって大きく作業効率をあげることにつながります。今後も小技を探求していきたいと思います。

OGP画像作成を効率化

OGP画像の作成を効率化させるPSDフォーマット

OGP(Open Graph Protocol) とは、このWebページの説明をSNS上で表示させるために用意された仕様です。OGPを設定しておくとSNS上で「いいね!」やシェアをされた際にあらかじめ指定した画像、タイトル、ページの説明、URLを表示させることが可能です。OGPを設定していない場合は自動でページから情報を取得して表示されるので思い通りの表示にならないことが多いです。
下記画像はOGPを設定していない場合(上)としている場合(下)の表示の違いになります。

どちらがいいかは一目瞭然です。OGP設定前のサムネイルは小さいし中途半端な位置で切り抜かれてしまっています。「いいね!」や「シェア」を増やしたい場合は必ず設定しておきたいですね。今回は簡単にサイトにOGPの設定をできるようにPSDフォーマットを作成したのでご紹介させていただきます。

まずはPSDデータ(1.1MB)をダウンロードしてください。

DOWNLOAD

OGP画像作成〜OGP設定手順

OGP画像を作成する

(1)ダウンロードした「ogp.psd」を開いてレイヤーパネルで「ogp.png」をダブルクリックしてスマートオブジェクトを編集します。

(2)OGP画像をデザインします。(サイズは推奨サイズの1200px × 630pxです)
完成したら上書き保存をしてスマートオブジェクトを閉じてください。

(3)元のファイルに戻って左下の表示イメージを確認します。縮小されて文字などが見にくくなったりしていないか確認します。

(4)レイヤーパネルで「ogp.png」を選択して右クリック。「PNGとしてクイック書き出し」を選択して画像を書き出します。書き出した画像はサーバの任意の場所にアップロードします。

※そのままの画像ファイルだとサイズが大きいので下記サイトのようなファイルサイズ圧縮サービスを利用してファイルサイズを軽くすることをおすすめします。

TinyPNG https://tinypng.com/

htmlを編集する

(1)次にファイル右下のテキストレイヤー(metaタグ)を自分のサイトの情報に編集します。
下記コードには先ほどのサーバにアップしたOGP画像へのパスを入力します。
<meta property=”og:image” content=”http://www.□□□□□□/ogp.png”/>

詳しくはこちらのページで詳細が解説されています。
FacebookのOGP設定方法+参考記事6選|ferret

(2)編集し終えたらソースコードをコピーしてhtmlをテキストエディタなどで開き任意の場所へペーストします。

(3)編集したhtmlファイルをサーバにアップロードしてOGPの設定は完了です。

(4)下記ページでサイトのURLを入力するとプレビューが表示されるので正しく設定ができているか確認しましょう。
Sharing Debugger https://developers.facebook.com/tools/debug/sharing/

以上が「OGP画像作成を効率化」の解説でした。

Bootstrap × Photoshop 「Bootcomp」エクステンション

kv

Bootstrapを使用するWebサイトのカンプ制作を高速化させるエクステンンション

Photoshop CC 2015に「Bootcomp」エクステンションを導入すればBootstrapの使用を前提としたサイトのデザインカンプ制作にかける時間を大幅に短縮することができます。
特設サイトを用意したのでそちらをご覧ください。