エクステンション

画像アセット用リネーム エクステンション「Asset Renamer」 CC 2018対応

mv
mv

Photoshop CCからレイヤーまたはレイヤーグループの名前にファイル形式の拡張子(.jpg/.png/.gif)を追加することで自動で画像アセットが生成され、ソースの PSD ファイルと同じサブフォルダーに保存されるようになりました。

このリネームの作業を効率化させるために今までAdobeが公式に提供している「Adobe Layer Namer」を使用していたのですがPhotoshop CC 2018にアップデートしたら使用できなくなってしまいました。

なので急遽「Asset Renamer」というエクステンションを作成したので配布させていただきます。

「Asset Renamer」のインストール方法について

「Asset Renamer」をダウンロード

DOWNLOAD

ダウンロードしたzipファイルを解凍します。

解凍されたフォルダ「AssetRenamer」を下記ディレクトリに移動します。

【Mac OS】 Library/Application Support/Adobe/CEP/extensions

ライブラリ(Library)は通常表示されないのでaltキーを押しながらFinderメニュー/移動を開くと下記画像のようにライブラリが表示されます。

Photoshopを再起動します。

メニュー[ウインドウ]/[エクステンション]/[Asset Renamer]を選択します。
以上で「Asset Renamer」パネルが表示されて利用できる状態になります。

「Asset Renamer」の使用方法について

リネームしたいレイヤーまたはレイヤーグループを選択(複数可)して生成したい画像種類のボタンをクリック。

02

(1)1xで書き出す(8,24,32はPNG形式)

(2)1xと2xで書き出す

(3)2xでデザインデータを作成している場合に使用

下部の項目はjpg形式で書き出す際に使用。(50,80,100は画質)

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

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

kv

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

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

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

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

動作確認:
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. メニュー[ウインドウ]/[エクステンション]/[ぶっこ抜き]を選択します。

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

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