1. /
  2. 2016年 4月

2016年 4月 の投稿一覧

位置を変えずに行揃えを変更｜エクステンション

テキストの行揃えを変更すると通常位置が変更されてしまいますが今回紹介するエクステンションを使用すれば位置を変更することなく行揃えを変更することができます。

動作確認：
Mac OS ｜Photoshop CC 2014〜
Windows｜Photoshop CC 2015

行揃えエクステンションのインストール方法について

行揃えエクステンションをダウンロード

DOWNLOAD

  1. ダウンロードしたzipファイルを解凍します。
  2. 解凍されたフォルダ「textalign」を下記ディレクトリに移動します。
    【Windows】 C:\Program Files\Adobe\Adobe Photoshop CC 2015\Required\CEP\extensions
    【Mac OS】 Library/Application Support/Adobe/CEP/extensions

    ライブラリ(Library)は通常表示されないのでaltキーを押しながらFinderメニュー/移動を開くと下記画像のようにライブラリが表示されます。
  3. Photoshopを再起動します。
  4. メニュー[ウインドウ]/[エクステンション]/[行揃え｜位置固定]を選択します。
    以上で「行揃え｜位置固定」パネルが表示されて利用できる状態になります。

CC 2014まで使っていたエクステンションをCC 2015でも使う裏技

dearps
PhotoshopにエクステンションをインストールするためにはAdobe Extension Managerを使う必要がありました。
しかしExtension Managerはすでに開発を終了していてPhotoshop CC 2015ユーザーはAdobe Add-onsというサイトから公開されているエクステンションをインストールしなければならなくなりました。
エクステンションの作者がAdobe Add-onsに公開していない場合使用することができなくなってしまいました。

しかし過去のエクステンションファイル「.zxp」を使用してCC 2015でもエクステンションを動かすことのできる方法があります。

今回は「Font Awesome PS」というエクステンションのインストールを例に手順を解説します。
Font Awesome PSはFont Awesomeのアイコンをシェイプとして利用できるエクステンションです。このエクステンションも大変便利ですが本日時点ではAdobe Add-onsには公開されていません。

①まずはじめにFont Awesome PSのサイトからエクステンションのデータをダウンロードします。

②ダウンロードしたファイルを解凍すると「FontAwesomePS_1.1.0.zxp」というファイルがあるのでStuffIt Expanderなどの解凍アプリでさらに解凍します。(自分の環境ではMac標準の解凍アプリではエラーになってしまったのでStuffIt Expanderを使用しました。)

③解凍できたらそのフォルダを丸ごと下記ディレクトリに移動します。
【Windows】 C:\Program Files\Adobe\Adobe Photoshop CC 2015\Required\CEP\extensions
【Mac OS】 Library/Application Support/Adobe/CEP/extensions
Mac OSのライブラリ(Library)は通常表示されないのでaltキーを押しながらFinderメニュー/移動を開くと下記画像のようにライブラリが表示されます。

④Photoshopを再起動します。

⑤メニュー[ウインドウ]/[エクステンション]/[Font Awesome PS]を選択します。 これで「Font Awesome PS」パネルが表示され使用できる状態になります。

今回紹介した方法はあくまで裏技でありAdobeはAdobe Add-onsでのインストールを推奨しているのでこの方法は自己責任でお試しください。

ぶっこ抜きエクステンション

デザインパーツを1クリックでぶっこ抜き

当ブログで公開しているぶっこ抜きスクリプトとぶっこ抜いてリンクスクリプトをパネルから利用できるようにエクステンション化させました。

機能を簡単に説明します。Webサイト制作の場合ヘッダーやナビゲーションなどを別ファイル化させたい場合があるかと思います。そのような時にレイヤーパネル上でレイヤーグループを選択してぶっこ抜きボタンをクリックするだけで別ファイルに抜き出すことができます。ぶっこ抜いてリンクの方は別ファイルに抜き出し、さらに元のファイルとリンクした状態で保存することができます。

動作確認：Mac OS ｜Photoshop CC 2014,CC 2015

ぶっこ抜きエクステンションのインストール方法について

ぶっこ抜きエクステンションをダウンロード

DOWNLOAD

  1. ダウンロードしたzipファイルを解凍します。
  2. 解凍されたフォルダ「Bukkonuki」を下記ディレクトリに移動します。
    【Mac OS】 Library/Application Support/Adobe/CEP/extensions
    ライブラリ(Library)は通常表示されないのでaltキーを押しながらFinderメニュー/移動を開くと下記画像のようにライブラリが表示されます。
  3. Photoshopを再起動します。
  4. メニュー[ウインドウ]/[エクステンション]/[ぶっこ抜き]を選択します。

    以上で「ぶっこ抜き」パネルが表示されて利用できる状態になります。

今後も新しいエクステンションの制作を計画しているのでお楽しみに！

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

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

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

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

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」を選択すると選択範囲にレイヤーが移動します。

アートボードを個別ファイル(PSD)に書き出す方法

Photoshop CC 2015の新機能「アートボード」で作成した各グループを個別のPSDとして書き出す方法を紹介します。

アートボードの書き出し方法

(1) [ファイル] / [書き出し]/ [アートボードからファイル]を選択。

(2)「アートボードからファイル」ダイアログが表示されるので適宜入力します。

①保存先を選択します。
②ファイルの先頭に文字列を入れたい場合は入力します。入力しなければそのままアートボード名がファイル名になります。
③チェックをいれると選択したアートボードだけを書き出すことができます。
④ファイル形式を選択します。PSD以外に下記ファイル形式が選択できます。
BMP,JPEG,PDF,Targa,TIFF,PNG-8,PNG-24
⑤アートボードを保持したい場合はチェックをいれます。

(3) 実行ボタンをクリックするとファイルが書き出されます。

レイヤーパネルでアートボードを選択した状態で「ぶっこ抜きスクリプト」を実行して別ファイルとして抜き出す方法も手軽でおすすめです。

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

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

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

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

DOWNLOAD

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

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

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