Script

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)の「完了」をクリック。これで設定完了です。

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

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

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

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

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

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」を設定してグループ化のデフォルトとして使用することをおすすめします。

ダミー画像作成スクリプト

シェイプを作成してスクリプトを実行するだけ!

長方形ツールなどでシェイプを作成してスクリプトを実行するだけで自動でサイズを表記したダミー画像を作成してくれます。丸型などにも対応しています。

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

Dummyスクリプトをダウンロード

DOWNLOAD

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

(2)Photoshopを再起動して適当なファイルを開いてください。

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

(4) [ファイル] / [スクリプト]から「Dearps_Dummy」を選択します。

(5)ダミー画像が作成されます。

コーディング時のダミー画像はPlacehold.jpをおすすめします。

画像配置の超効率化スクリプト|PHOTOBOX

画像配置の手間をスクリプトで解消!

Webサイトのカンプを制作するうえで、画像配置って結構な手間ですよね。それを解消するスクリプトを作成したのでご紹介します。

まずは一般的な画像を配置する方法について

(1)長方形ツールなどで画像サイズのシェイプを描く。

(2)シェイプの上に画像を配置してシャイプに対してクリッピングマスクをかける。

(3)色調補正などを施す際は調整レイヤーでさらにクリッピングマスクで重ねていきます。

この方法でもいいのですが、レイヤー構成として美しくないし、クリッピングマスクが面倒だったり、誤操作でクリッピングマスクが外れてしまったりと、なにかと不満を感じます。

それを解消するわたしの理想のレイヤー構成は下のような構成になります。

 

簡単に説明するとレイヤーグループに対して画像サイズでベクトルマスクを設定して、その中に写真や調整レイヤーなどを配置していく構成です。

今回紹介するスクリプトはこの構成を驚くほど簡単にスピーディーに作成してさらに+αの機能を含めています。ぜひ利用してみてください。

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

PHOTOBOXスクリプトをダウンロード

DOWNLOAD

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

(2)Photoshopを再起動して適当なファイルを開いてください。

(3)画像を配置したいサイズ、位置に選択範囲を作成します。

(4) [ファイル] / [スクリプト]から「Dearps_PHOTOBOX」を選択します。

(5)画像配置のダイアログが表示されるので配置する画像を選択して「配置」ボタンをクリックします。

環境設定で「配置時に変形をスキップ」にチェックが入っていない場合画像配置した際バウンディングボックスが表示されてしまいます。その場合は何も行わずそのまま「enter」で変形を終了させてください。

(6)画像が配置されるので適宜サイズ調整を行い完成です。

このスクリプトを使用しないで普通に画像配置をする場合は表示領域の中心に画像配置されてしまうので移動するのが手間です。PHOTOBOXスクリプトを使用すれば選択したエリアの中心に画像が配置されるので移動の手間が省けます。

まだ配置する画像が決まっていなくて「ダミー画像」を入れたい場合は、(5)のステップで画像配置のダイアログが表示された際に「キャンセル」をクリックすれば下のようなダミー画像が配置されます。

さらにダミー画像のレイヤー名には画像サイズが表記されます。
(写真を配置した場合でもダミー画像は背面に配置されます。)

もちろんキービジュアルにも活用できいるので利用シーンは多いと思うのでぜひご活用ください!

Bootstrap×Photoshop フォーマット作成スクリプト

※Photoshop CC 2015〜対応
Photoshop CC 2014以前のバージョンをお使いの方はPSDデータを配布させていただきますのでそちらをご利用ください。(Bootstrap_psd.zip)
追記 2016 4/12

Bootstrapを利用する場合のカンプ制作に!

1クリックでBootstrapのグリッドシステムに対応したフォーマットが作成できるスクリプトをつくりました。ぜひご利用ください。

Bootstrap

BootstrapはWebサイトなどを作成するためのCSSフレームワークです。

あらかじめWebサイト制作に必要なHTMLやCSS、JSが用意されているので簡単にスピーデイーにサイトを制作することができます。

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

Bootstrapフォーマット作成スクリプトをダウンロード

DOWNLOAD

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

(2)Photoshopを再起動します。

(3) [ファイル] / [スクリプト]から「Bootstrap_[デバイス].jsx」を選択します。
作成するデバイスを選択します。

(4)Bootstrapのフォーマットが作成されました。

「Bootstrap_デスクトップ.jsx」を実行した場合のサイズは下記になります。
カンバスサイズはフルHDのディスプレイを想定して1920pxに幅を広げています。

「Bootstrap_スマホ.jsx」の場合はiPhone6 (750×1334)の画面サイズを想定してフォーマットが作成されます。

レイヤーを選択範囲に移動するスクリプト

レイヤーを選択範囲に移動するスクリプトを作成しました。

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

レイヤーを選択範囲に移動スクリプトをダウンロード

DOWNLOAD

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

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

(3)レイヤーパネルで移動させたいレイヤー(レイヤーグループ)を選択します。

(4) [ファイル] / [スクリプト]から「Dearps_レイヤーを選択範囲に移動スクリプト.jsx」を選択すると選択範囲にレイヤーが移動します。

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

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

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

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

DOWNLOAD

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

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

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

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

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

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

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

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)を設定することによりさらに作業の効率化がはかれます。

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

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’で変形すれば「縦横比を固定」にデフォルトでチェックを入れた状態で作業を進めることができます。