Photoshopで選択範囲に段落テキストを作成するスクリプト

Photoshop で段落テキストを作成する時、数値を指定して作成するのは地味に面倒だったりします。
自由変形(command + T)で数値指定で段落テキストのボックスのサイズを変更することもできますが、テキストの縦横比が変わってしまうなどの問題があります。

また、「段落テキストは、画像ではなく HTML に記述するテキストであることが分かりやすいようにアンチエイリアスをオフにする」場合、地味にアンチエイリアスのオンオフが面倒でした。

そこで、「長方形選択ツール」などで選択範囲を作成し、実行するとアンチエイリアスなしの段落テキストを作成するスクリプト(JSX)を作成しました。

選択範囲に段落テキストを作成するスクリプト

このスクリプトは、CSS Nite LP, Disk 34「Webデザインで使うPhotoshop」(2014年4月19日開催) の「自分でスクリプトを書いて効率アップ」セッションの際に頒布したサンプルスクリプトと同じものです。

インストール方法

以下の ZIP ファイルをダウンロードし、解凍します。

ダウンロードした ZIP ファイルを解凍します。
これらのファイル(フォルダは含まない)を、Photoshop の「Scripts」フォルダに入れてください。
「Scripts」フォルダの場所は以下の通りです(Photoshop CC の場合)。

Windows の場合

C:¥Program Files¥Adobe¥Adobe Photoshop CC¥Presets¥Scripts
(古いバージョンの場合、¥Presets¥Scripts のフォルダ名がカタカナで ¥プリセット¥スクリプト のようになっています。)

Mac の場合

Macintosh HD/アプリケーション/Adobe Photoshop CC/Presets/Scripts/

Photoshop を再起動後、サイズや位置を変更したいシェイプレイヤーを選択し、メニューの「ファイル>スクリプト>サイズ変更」より実行すると以下のようなダイアログが表示され、サイズや位置を変更したり、指定した位置やサイズで複製することができます。

使い方

長方形選択ツールで選択範囲を作成します。
数値を指定して作成したい場合は、メニューの[表示>スナップ先>グリッド]にチェックが入っていれば、キリの良い単位で選択範囲を作成できます。

その後、メニューの[ファイル>スクリプト]からこのスクリプトを実行すると、選択範囲があった場所に段落テキストができ、中に日本語のダミーテキストが入ります。

長方形の内側に余白を取り、テキストを配置する場合

または、Photoshopで長方形などのシェイプを移動・変形・複製するJSX を使用して数値指定で長方形を作成し、レイヤーパネルで長方形レイヤーのレイヤーサムネールを command(Ctrl)キーを押しながらクリックすると、長方形にあわせて選択範囲が作成されます。

長方形を div などの要素に見立て、内側に padding を 20px とりたい場合、長方形レイヤーのレイヤーサムネールを command(Ctrl)キーを押しながらクリックした後、メニューの[選択範囲>選択範囲を変更>縮小…]を選択し、「縮小量」に「20」と入力し、Enter キーを押します。

その後、メニューの[ファイル>スクリプト]からこのスクリプトを実行すると、選択範囲があった場所に段落テキストができ、中に日本語のダミーテキストが入ります。

余白のある段落テキスト

Webコーディングスクール 体験レッスン受付中

それぞれのスクリプトの違い

「段落テキスト作成-MSPゴシック.jsx」のように「MSPゴシック」と入っているものは「MS Pゴシック」フォントファミリーで段落テキストが作成されます。
Mac の場合、Microsoft Office がインストールされていれば「MS Pゴシック」が使用できます。

「MS Pゴシック」がインストールされていない Mac の場合は、「段落テキスト作成-Osaka.jsx」などの「Osaka」と入っているものを使用すれば、アンチエイリアスなしの「Osaka」フォントファミリーで段落テキストが作成されます。

「段落テキスト作成-MSPゴシック-ランダム.jsx」のように、「ランダム」と入っているものは用意されたいくつかのテキストの中からランダムのダミー文字で段落テキストが作成されます。

ダミー文字の内容を変更したい場合は、テキストエディターで JSX ファイルを開き、10から12行目の “”” と “”” の内側を変更してください。

最近の記事

Web制作関連動画

メルマガ会員向けの「コーダーにも役立つ補完AI『Codeium』の使い方」の動画を期間限定で公開しています。
CodeiumはGitHub Copilotと似ていますが、CSSなども補完できて、今登録すれば無料で使えます。

メルマガでは、Web制作者のためのAI活用やWordPress関連の動画など、さまざまな特典があります。ご興味ある方は、ぜひメルマガにご登録ください。