/ScriptScript2017.07.10選択範囲をシェイプに変換するスクリプト選択範囲をシェイプに変換するスクリプトを作成しました。更新:2017.7.10シェイプ変換後に属性パネルで幅、高さ、角丸を変更できるように改良しました。「単位:px」でご利用ください。ダウンロードしたzipファイルを解凍して「Dearps_選択範囲をシェイプに変換.jsx」をPhotoshopのスクリプトフォルダに移動します。Photoshop□/Presets/Scripts(2)Photoshopを再起動してファイルを開き、選択ツールで選択範囲を作成します。[スクリプト]から「Dearps_選択範囲をシェイプに変換.jsx」を選択すると選択範囲がシェイプに変換されます。私はこのスクリプトにショートカット(command+U)を設定しています。ファイルメニュー[選択範囲]/[選択範囲を変形]にも(command+Shift+T)を設定することによりさらに作業の効率化がはかれます。差分確認レイヤー作成スクリプト今回は差分を確認できるレイヤーを作成するスクリプトのご紹介です。こちらの動画をご覧ください。この動画のようにレタッチの比較に使用する以外にも、Webサイトのデザインカンプをエンジニアに渡した後に修正が発生した場合、このスクリプトで差分確認レイヤーを作成してから修正をおこなえば「修正箇所は一番上のレイヤー表示して確認してね」っていう一言だけで済みます。チームで共同作業を行う場合にも使えますね。スクリプトの利用手順について差分確認レイヤー作成スクリプトをダウンロードDOWNLOADダウンロードしたzipファイルを解凍して「差分確認レイヤー作成.jsx」をPhotoshopのスクリプトフォルダに移動します。Photoshop□/Presets/Scripts1ファイルを開いた状態で[ファイル]メニュー/[スクリプト]/[Dearps_差分確認レイヤーを作成]を選択してスクリプトを実行します。2最上部に「差分確認レイヤー」が作成されます。レイヤー名には自動で日時が3修正作業を行います。サンプルでは赤枠の部分を変更します。4文字と写真を変更しました。5差分確認レイヤーを表示させます。すると差異がある部分が下の画像の様に表示されます。6修正前の状態を見たい場合は描画モードを通常にします。複数のファイルを修正するときなど毎回スクリプトを実行するのが面倒だったり、忘れたりしてしまうことがあるのでファイルを開いたら必ずこのスクリプトが実行するように設定してしまえば楽ちんです。1[ファイル]メニュー/[スクリプト]/[スクリプトイベントマネージャー]を選択します。2(1)にチェックを入れる。(2)のプルダウンメニューから「ドキュメントを開く」を選択する。プルダウンメニューの「参照」を選択して「Dearps_差分確認レイヤーの作成.jsx」を指定する。3(4)の「追加」をクリックして(5)の「完了」をクリック。これでファイルを開くたびに差分確認レイヤーが作成されます。2016.08.27シェイプの縦横比を黄金比に変換するスクリプトシェイプの高さを自動で調整して縦横比を黄金比にするスクリプトを作成しました。ダウンロードしたzipファイルを解凍して「Dearps_シェイプの縦横比を黄金比に変換.jsx」をPhotoshopのスクリプトフォルダに移動します。Photoshop□/Presets/Scripts(2)Photoshopを再起動してください。(3)長方形ツールでシェイプを作成します。[スクリプト]から「Dearps_シェイプの縦横比を黄金比に変換」を選択します。以上でシェイプの縦横比が黄金比に変更されます。2」のようにグループ名が自動的に設定されてしまいます。これを放置するとレイヤー管理が煩雑になってしまいます。今回紹介するスクリプトを使用すればレイヤーグループを作成するために選択したレイヤーの一番上のレイヤー名をグループ名として自動で設定することができます。ダウンロードしたzipファイルを解凍して「Dearps_グループ化&グループ名を変更.jsx」をPhotoshopのスクリプトフォルダに移動します。Photoshop□/Presets/Scripts(2)Photoshopを再起動してください。(3)長方形ツールや文字ツールなどで複数レイヤーを作成します。レイヤーパネルで作成したレイヤーを複数選択します。[スクリプト]から「Dearps_グループ化&グループ名を変更」を選択します。するとグループ化されて自動でグループ名も変更されます。このスクリプトに対してショートカット「command」+「G」を設定してグループ化のデフォルトとして使用することをおすすめします。2016.04.15ダミー画像作成スクリプトシェイプを作成してスクリプトを実行するだけ!長方形ツールなどでシェイプを作成してスクリプトを実行するだけで自動でサイズを表記したダミー画像を作成してくれます。丸型などにも対応しています。ダウンロードしたzipファイルを解凍して「Dearps_Dummy.jsx」をPhotoshopのスクリプトフォルダに移動します。Photoshop□/Presets/Scripts(2)Photoshopを再起動して適当なファイルを開いてください。(3)長方形ツールなどでシェイプを作成します。[スクリプト]から「Dearps_Dummy」を選択します。(5)ダミー画像が作成されます。コーディング時のダミー画像はPlacehold.jpをおすすめします。2016.04.14画像配置の超効率化スクリプト|PHOTOBOX画像配置の手間をスクリプトで解消!Webサイトのカンプを制作するうえで、画像配置って結構な手間ですよね。それを解消するスクリプトを作成したのでご紹介します。一般的な画像を配置する方法について(1)長方形ツールなどで画像サイズのシェイプを描く。(2)シェイプの上に画像を配置してシャイプに対してクリッピングマスクをかける。(3)色調補正などを施す際は調整レイヤーでさらにクリッピングマスクで重ねていきます。この方法でもいいのですが、レイヤー構成として美しくないし、クリッピングマスクが面倒だったり、誤操作でクリッピングマスクが外れてしまったりと、なにかと不満を感じます。それを解消するわたしの理想のレイヤー構成は下のような構成になります。簡単に説明するとレイヤーグループに対して画像サイズでベクトルマスクを設定して、その中に写真や調整レイヤーなどを配置していく構成です。今回紹介するスクリプトはこの構成を驚くほど簡単にスピーディーに作成してさらに+αの機能を含めています。利用してみてください。ダウンロードしたzipファイルを解凍して「Dearps_PHOTOBOX.jsx」をPhotoshopのスクリプトフォルダに移動します。Photoshop□/Presets/Scripts(2)Photoshopを再起動して適当なファイルを開いてください。(3)画像を配置したいサイズ、位置に選択範囲を作成します。[スクリプト]から「Dearps_PHOTOBOX」を選択します。(5)画像配置のダイアログが表示されるので配置する画像を選択して「配置」ボタンをクリックします。環境設定で「配置時に変形をスキップ」にチェックが入っていない場合画像配置した際バウンディングボックスが表示されてしまいます。その場合は何も行わずそのまま「enter」で変形を終了させてください。(6)画像が配置されるので適宜サイズ調整を行い完成です。このスクリプトを使用しないで普通に画像配置をする場合は表示領域の中心に画像配置されてしまうので移動するのが手間です。PHOTOBOXスクリプトを使用すれば選択したエリアの中心に画像が配置されるので移動の手間が省けます。配置する画像が決まっていなくて「ダミー画像」を入れたい場合は、(5)のステップで画像配置のダイアログが表示された際に「キャンセル」をクリックすれば下のようなダミー画像が配置されます。ダミー画像のレイヤー名には画像サイズが表記されます。(写真を配置した場合でもダミー画像は背面に配置されます。2014以前のバージョンをお使いの方はPSDデータを配布させていただきますのでそちらをご利用ください。4/12Bootstrapを利用する場合のカンプ制作に!1クリックでBootstrapのグリッドシステムに対応したフォーマットが作成できるスクリプトをつくりました。BootstrapBootstrapはWebサイトなどを作成するためのCSSフレームワークです。Webサイト制作に必要なHTMLやCSS、JSが用意されているので簡単にスピーデイーにサイトを制作することができます。ダウンロードしたzipファイルを解凍して3つのファイル「Bootstrap_[デバイス].jsx」をPhotoshopのスクリプトフォルダに移動します。Photoshop□/Presets/Scripts(2)Photoshopを再起動します。[スクリプト]から「Bootstrap_[デバイス].jsx」を選択します。作成するデバイスを選択します。(4)Bootstrapのフォーマットが作成されました。「Bootstrap_デスクトップ.jsx」を実行した場合のサイズは下記になります。カンバスサイズはフルHDのディスプレイを想定して1920pxに幅を広げています。(750×1334)の画面サイズを想定してフォーマットが作成されます。2016.04.04レイヤーを選択範囲に移動するスクリプトレイヤーを選択範囲に移動するスクリプトを作成しました。ダウンロードしたzipファイルを解凍して「Dearps_レイヤーを選択範囲に移動スクリプト.jsx」をPhotoshopのスクリプトフォルダに移動します。Photoshop□/Presets/Scripts(2)Photoshopを再起動してファイルを開き、長方形選択ツールで選択範囲を作成します。(3)レイヤーパネルで移動させたいレイヤー(レイヤーグループ)を選択します。[スクリプト]から「Dearps_レイヤーを選択範囲に移動スクリプト.jsx」を選択すると選択範囲にレイヤーが移動します。2016.04.02選択範囲をベクトルマスクに変換するスクリプト選択範囲をベクトルマスクに変換するスクリプトを作成しました。ダウンロードしたzipファイルを解凍して「Dearps_選択範囲からベクトルマスク.jsx」をPhotoshopのスクリプトフォルダに移動します。Photoshop□/Presets/Scripts(2)Photoshopを再起動してファイルを開き、長方形選択ツールで選択範囲を作成します。[スクリプト]から「Dearps_選択範囲からベクトルマスク.jsx」を選択すると選択範囲がシェイプに変換されます。固定」にデフォルトでチェックをいれるPhotoshopではレイヤーの拡大縮小時、オプションツールバーの「縦横比を固定」はデフォルトではチェックが入っていない状態になります。拡大縮小時は縦横比を固定したい場合が多いですよね?そこでスクリプトを利用して「縦横比を固定」にデフォルトでチェックをいれる方法を紹介します。ダウンロードしたzipファイルを解凍して「自由変形_縦横比固定.jsx」をPhotoshopのスクリプトフォルダに移動します。[キーボードショートカット]でスクリプトの「自由変形_縦横比固定」に‘Command+T’を設定します。これで拡大縮小したいときはショートカット‘Command+T’で変形すれば「縦横比を固定」にデフォルトでチェックを入れた状態で作業を進めることができます。